@import "introjs.css";
/* font-sizes */
.ts-14 {
    font-size: 14px !important;
}
.ts-16 {
    font-size: 16px;
}
.ts-20 {
    font-size: 20px;
}
.ox-h{
    overflow-x: hidden !important;
}
.hr-nav .nav-color .nav > li > a:after{
    display: none;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.row-eq-height-align-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.d-flex-rows-reverse {
    flex-direction: row-reverse !important;
}
.row-eq-height-justify-center {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.align-items-beatween-w{
    display:flex;
    justify-content: space-between;
    align-items: center;

}
.column-row-align{
    flex-direction: column;
}
.align-items-center-w{
    display: flex;
    align-items: center;
}
.align-items-end-w{
    display: flex;
    align-items: flex-end;
}
/* Scroll */
::-webkit-scrollbar {
    width: 4px;
    height:4px;
    padding-left: 2px;
    cursor: pointer;
    padding-right: 2px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.0);
    border-radius: 4px;
}
:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
    border-radius: 4px;
}


.b-l-0 {
    border-left: none !important;
}
.b-r-0 {
    border-right: none !important;
}

.bold {
    font-weight: bold;
}

.mmw-25 {
    min-width: 25px;
    float: left
}
.mmw-30 {
    min-width: 30px;
    float: left
}

.mw-64 {
    max-width: 64px !important;
}
.mw-200 {
    max-width: 200px !important;
}

.h-24 {
    height: 24px;
}
.h-150 {
    height: 150px !important;
    overflow: hidden;
}
.h-200 {
    height: 200px !important;
    overflow: hidden;
}
.h-300 {
    height: 300px !important;
    overflow: hidden;
}
.h-400 {
    height: 400px !important;
    overflow: hidden;
}

.mh-200 {
    max-height: 200px !important;
    overflow: hidden;
}
.mh-300 {
    max-height: 300px !important;
    overflow: auto;
}
.mh-400 {
    max-height: 400px !important;
    overflow: auto;
}
.hm-400{
    max-height: 200px;
    overflow: auto;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}


.sortable-placeholder{
    margin-left:0!important;
    border:1px dashed #CCC;
    background:#f1f1f1;
    height: 5px;
    /*float:left;*/
    width:100%;
    padding-bottom:0%
}
.feature-placeholder{
    margin-left:0!important;
    border:1px dashed #CCC;
    background:#ff6666;
    height: 25px;
    /*float:left;*/
    width:100%;
    padding-bottom:0%
}



.cell {
    display: table-cell;
}

.nopointer {
    cursor: default;
}
.z-0 {
    z-index: 0 !important;
}
.z-10 {
    z-index: 10 !important;
}
tr.nowrap td, .nowrap {
    white-space: nowrap;
}
.dash{
    border: 0 none;
    border-top: 1px dashed #cccccc;
    background: none;
    height:0;
}

.minicolors-swatch{
    margin-top: 5px !important;
    margin-left:10px !important;
}

.ast:after {
    content: ' *';
    color :red;
    font-weight: bold;
}
.star-rating {
    line-height:32px;
    font-size:1.25em;
    cursor: pointer;
}

.rating-input i {
    margin-left: 1px;
    margin-right: 1px;
}

.note-link-dialog
, .note-image-dialog
, .note-help-dialog{
    z-index: 1600 !important;
}

.note-editable {
    border: 1px solid rgba(120, 130, 140, 0.13);
}

select.dark option {
    background: #263449;
    background-color: #263449;
}

/*.dk{
    background-color: rgba(22, 32, 42, 0.10);
}
.dker{
    background-color: rgba(22, 32, 42, 0.20);
}

.lt {
    background-color: rgba(255, 255, 255, 0.05);
}
.lter {
    background-color: rgba(255, 255, 255, 0.10);
}*/


@-webkit-keyframes sk-cubemove {
    25% {
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5)
    }
    50% {
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg)
    }
    75% {
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5)
    }
    100% {
        -webkit-transform: rotate(-360deg)
    }
}

@keyframes sk-cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    }
    50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    }
    75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}


.dropdown:hover .dropdown-menu-h {
    display: block;
    margin-top: 0;
}

.hider{
    display: none;
}

.brand-animate {
    -webkit-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;

    transform-origin: 24px 24px;
    -webkit-transform-origin: 24px 24px;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.pace-running .brand-animate{
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.pace-done .brand-animate{
    opacity: 0;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
.custom-backdrop{
    z-index: 1051 !important;
}

.dif{
    display: block;
    width: 100%;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    color: #373a3c;
    text-align: inherit;
    white-space: nowrap;
    background: 0 0;
    border: 0;
}



/* Loader */

.mloader {
    position: fixed;
    left: 0px;
    top: 0px;
    cursor: wait;
    width: 100%;
    overflow: hidden;
    height: 100%;
    z-index: 9999;
    background-position: center;
    background-repeat: no-repeat;
    background-origin: content-box;
    opacity:0.7;
    display: none;
}

.mloader_bg_white {
    background-color: #fff;
}

.mloader_1 {
    background-image: url('../../images/loading.svg');

}
.mloader_2 {
    background-image: url('https://cloud.mobildev.com/img/loader-64x/loader2.gif');
}
.mloader_3 {
    background-image: url('https://cloud.mobildev.com/img/loader-64x/loader3.gif');
}
.mloader_4 {
    background-image: url('https://cloud.mobildev.com/img/loader-64x/loader4.gif');
}
.mloader_5 {
    background-image: url('https://cloud.mobildev.com/img/loader-64x/loader5.gif');
}
.mloader_6 {
    background-image: url('https://cloud.mobildev.com/img/loader-64x/loader6.gif');
}
.mloader_7 {
    background-image: url('https://cloud.mobildev.com/img/loader-64x/loader7.gif');
}

.mloader > p {
    position: relative;
    top: 55%;
    text-align: center;
    font-weight: 700;
    color: #444;
}

.alert ul {
    list-style: none;
}



/*** UI Frame ****/

.btn-frame {
    /*    display: block;
        margin: 15px auto;
        padding: 5px 15px;*/
}

.close-button {
    overflow: hidden;
}

.ui-modalContent {
    box-shadow: none;
    background-color: transparent;
    border: 0;
}

.ui-modalContent .close {
    font-size: 30px;
    line-height: 30px;
    padding: 7px 4px 7px 13px;
    text-shadow: none;
    opacity: .7;
    color:#fff;
}

.ui-modalContent .close span {
    display: block;
}

.ui-modalContent .close:hover,
.ui-modalContent .close:focus {
    opacity: 1;
    outline: none;
}

.ui-modalContent iframe {
    display: block;
    margin: 0 auto;
}

/** Text Color **/




/* summernote */
.note-editor{
    position:relative;
    overflow:hidden;
    border:1px solid #a9a9a9
}
.note-editor .note-dropzone{
    position:absolute;
    z-index:100;
    display:none;
    color:#87cefa;
    background-color:white;
    opacity:.95;
    pointer-event:none
}
.note-editor .note-dropzone .note-dropzone-message{
    display:table-cell;
    font-size:28px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle
}
.note-editor .note-dropzone.hover{
    color:#098ddf
}
.note-editor.dragover .note-dropzone{
    display:table
}
.note-editor.codeview .note-editing-area .note-editable{
    display:none
}
.note-editor.codeview .note-editing-area .note-codable{
    display:block
}
.note-editor.fullscreen{
    position:fixed;
    top:0;
    left:0;
    z-index:1050;
    width:100%
}
.note-editor.fullscreen .note-editable{
    background-color:white
}
.note-editor.fullscreen .note-resizebar{
    display:none
}
.note-editor .note-editing-area{
    position:relative;
    overflow:hidden
}
.note-editor .note-editing-area .note-editable{
    padding:10px;
    overflow:auto;
    color:#000;
    background-color:#fff;
    outline:0
}
.note-editor .note-editing-area .note-editable[contenteditable=true]:empty:not(:focus):before{
    content:attr(data-placeholder)
}
.note-editor .note-editing-area .note-editable[contenteditable="false"]{
    background-color:#e5e5e5
}
.note-editor .note-editing-area .note-codable{
    display:none;
    width:100%;
    padding:10px;
    margin-bottom:0;
    font-family:Menlo,Monaco,monospace,sans-serif;
    font-size:14px;
    color:#ccc;
    background-color:#222;
    border:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    box-shadow:none;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    resize:none
}
.note-editor .note-statusbar{
    background-color:#f5f5f5
}
.note-editor .note-statusbar .note-resizebar{
    width:100%;
    height:8px;
    padding-top:1px;
    cursor:ns-resize
}
.note-editor .note-statusbar .note-resizebar .note-icon-bar{
    width:20px;
    margin:1px auto;
    border-top:1px solid #a9a9a9
}
.note-air-editor{
    outline:0
}
.note-popover .popover{
    max-width:none
}
.note-popover .popover .popover-content a{
    display:inline-block;
    max-width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle
}
.note-popover .popover .arrow{
    left:20px
}
.note-popover .popover .popover-content,.panel-heading.note-toolbar{
    padding:0 0 5px 5px;
    margin:0
}
.note-popover .popover .popover-content>.btn-group,.panel-heading.note-toolbar>.btn-group{
    margin-top:5px;
    margin-right:5px;
    margin-left:0
}
.note-popover .popover .popover-content .btn-group .note-table,.panel-heading.note-toolbar .btn-group .note-table{
    min-width:0;
    padding:5px
}
.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker,.panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker{
    font-size:18px
}
.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher,.panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-mousecatcher{
    position:absolute!important;
    z-index:3;
    width:10em;
    height:10em;
    cursor:pointer
}
.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted,.panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-unhighlighted{
    position:relative!important;
    z-index:1;
    width:5em;
    height:5em;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIj4+Pjp6ekKlAqjAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKhmnaJzPAAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
}
.note-popover .popover .popover-content .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted,.panel-heading.note-toolbar .btn-group .note-table .note-dimension-picker .note-dimension-picker-highlighted{
    position:absolute!important;
    z-index:2;
    width:1em;
    height:1em;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASAgMAAAAroGbEAAAACVBMVEUAAIjd6vvD2f9LKLW+AAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfYAR0BKwNDEVT0AAAAG0lEQVQI12NgAAOtVatWMTCohoaGUY+EmIkEAEruEzK2J7tvAAAAAElFTkSuQmCC') repeat
}
.note-popover .popover .popover-content .note-style h1,.panel-heading.note-toolbar .note-style h1,.note-popover .popover .popover-content .note-style h2,.panel-heading.note-toolbar .note-style h2,.note-popover .popover .popover-content .note-style h3,.panel-heading.note-toolbar .note-style h3,.note-popover .popover .popover-content .note-style h4,.panel-heading.note-toolbar .note-style h4,.note-popover .popover .popover-content .note-style h5,.panel-heading.note-toolbar .note-style h5,.note-popover .popover .popover-content .note-style h6,.panel-heading.note-toolbar .note-style h6,.note-popover .popover .popover-content .note-style blockquote,.panel-heading.note-toolbar .note-style blockquote{
    margin:0
}
.note-popover .popover .popover-content .note-color .dropdown-toggle,.panel-heading.note-toolbar .note-color .dropdown-toggle{
    width:20px;
    padding-left:5px
}
.note-popover .popover .popover-content .note-color .dropdown-menu,.panel-heading.note-toolbar .note-color .dropdown-menu{
    min-width:340px
}
.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group,.panel-heading.note-toolbar .note-color .dropdown-menu .btn-group{
    margin:0
}
.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group:first-child,.panel-heading.note-toolbar .note-color .dropdown-menu .btn-group:first-child{
    margin:0 5px
}
.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-palette-title,.panel-heading.note-toolbar .note-color .dropdown-menu .btn-group .note-palette-title{
    margin:2px 7px;
    font-size:12px;
    text-align:center;
    border-bottom:1px solid #eee
}
.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset,.panel-heading.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset{
    padding:0 3px;
    margin:3px;
    font-size:11px;
    cursor:pointer;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px
}
.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-row,.panel-heading.note-toolbar .note-color .dropdown-menu .btn-group .note-color-row{
    height:20px
}
.note-popover .popover .popover-content .note-color .dropdown-menu .btn-group .note-color-reset:hover,.panel-heading.note-toolbar .note-color .dropdown-menu .btn-group .note-color-reset:hover{
    background:#eee
}
.note-popover .popover .popover-content .note-para .dropdown-menu,.panel-heading.note-toolbar .note-para .dropdown-menu{
    min-width:216px;
    padding:5px
}
.note-popover .popover .popover-content .note-para .dropdown-menu>div:first-child,.panel-heading.note-toolbar .note-para .dropdown-menu>div:first-child{
    margin-right:5px
}
.note-popover .popover .popover-content .dropdown-menu,.panel-heading.note-toolbar .dropdown-menu{
    min-width:90px
}
.note-popover .popover .popover-content .dropdown-menu.right,.panel-heading.note-toolbar .dropdown-menu.right{
    right:0;
    left:auto
}
.note-popover .popover .popover-content .dropdown-menu.right::before,.panel-heading.note-toolbar .dropdown-menu.right::before{
    right:9px;
    left:auto!important
}
.note-popover .popover .popover-content .dropdown-menu.right::after,.panel-heading.note-toolbar .dropdown-menu.right::after{
    right:10px;
    left:auto!important
}
.note-popover .popover .popover-content .dropdown-menu.note-check li a i,.panel-heading.note-toolbar .dropdown-menu.note-check li a i{
    color:deepskyblue;
    visibility:hidden
}
.note-popover .popover .popover-content .dropdown-menu.note-check li a.checked i,.panel-heading.note-toolbar .dropdown-menu.note-check li a.checked i{
    visibility:visible
}
.note-popover .popover .popover-content .note-fontsize-10,.panel-heading.note-toolbar .note-fontsize-10{
    font-size:10px
}
.note-popover .popover .popover-content .note-color-palette,.panel-heading.note-toolbar .note-color-palette{
    line-height:1
}
.note-popover .popover .popover-content .note-color-palette div .note-color-btn,.panel-heading.note-toolbar .note-color-palette div .note-color-btn{
    width:20px;
    height:20px;
    padding:0;
    margin:0;
    border:1px solid #fff
}
.note-popover .popover .popover-content .note-color-palette div .note-color-btn:hover,.panel-heading.note-toolbar .note-color-palette div .note-color-btn:hover{
    border:1px solid #000
}
.note-dialog>div{
    display:none
}
.note-dialog .form-group{
    margin-right:0;
    margin-left:0
}
.note-dialog .note-modal-form{
    margin:0
}
.note-dialog .note-image-dialog .note-dropzone{
    min-height:100px;
    margin-bottom:10px;
    font-size:30px;
    line-height:4;
    color:lightgray;
    text-align:center;
    border:4px dashed lightgray
}
.note-dialog .note-help-dialog{
    font-size:12px;
    color:#ccc;
    background:transparent;
    background-color:#222!important;
    border:0;
    -webkit-opacity:.9;
    -khtml-opacity:.9;
    -moz-opacity:.9;
    opacity:.9;
    -ms-filter:alpha(opacity=90);
    filter:alpha(opacity=90)
}
.note-dialog .note-help-dialog .modal-content{
    background:transparent;
    border:1px solid white;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none
}
.note-dialog .note-help-dialog a{
    font-size:12px;
    color:white
}
.note-dialog .note-help-dialog .title{
    padding-bottom:5px;
    margin-bottom:10px;
    font-size:14px;
    font-weight:bold;
    color:white;
    border-bottom:white 1px solid
}
.note-dialog .note-help-dialog .modal-close{
    font-size:14px;
    color:#dd0;
    cursor:pointer
}
.note-dialog .note-help-dialog .text-center{
    margin:10px 0 0
}
.note-dialog .note-help-dialog .note-shortcut{
    padding-top:8px;
    padding-bottom:8px
}
.note-dialog .note-help-dialog .note-shortcut-row{
    margin-right:-5px;
    margin-left:-5px
}
.note-dialog .note-help-dialog .note-shortcut-col{
    padding-right:5px;
    padding-left:5px
}
.note-dialog .note-help-dialog .note-shortcut-title{
    font-size:13px;
    font-weight:bold;
    color:#dd0
}
.note-dialog .note-help-dialog .note-shortcut-key{
    font-family:"Courier New";
    color:#dd0;
    text-align:right
}
.note-handle .note-control-selection{
    position:absolute;
    display:none;
    border:1px solid black
}
.note-handle .note-control-selection>div{
    position:absolute
}
.note-handle .note-control-selection .note-control-selection-bg{
    width:100%;
    height:100%;
    background-color:black;
    -webkit-opacity:.3;
    -khtml-opacity:.3;
    -moz-opacity:.3;
    opacity:.3;
    -ms-filter:alpha(opacity=30);
    filter:alpha(opacity=30)
}
.note-handle .note-control-selection .note-control-handle{
    width:7px;
    height:7px;
    border:1px solid black
}
.note-handle .note-control-selection .note-control-holder{
    width:7px;
    height:7px;
    border:1px solid black
}
.note-handle .note-control-selection .note-control-sizing{
    width:7px;
    height:7px;
    background-color:white;
    border:1px solid black
}
.note-handle .note-control-selection .note-control-nw{
    top:-5px;
    left:-5px;
    border-right:0;
    border-bottom:0
}
.note-handle .note-control-selection .note-control-ne{
    top:-5px;
    right:-5px;
    border-bottom:0;
    border-left:none
}
.note-handle .note-control-selection .note-control-sw{
    bottom:-5px;
    left:-5px;
    border-top:0;
    border-right:0
}
.note-handle .note-control-selection .note-control-se{
    right:-5px;
    bottom:-5px;
    cursor:se-resize
}
.note-handle .note-control-selection .note-control-se.note-control-holder{
    cursor:default;
    border-top:0;
    border-left:none
}
.note-handle .note-control-selection .note-control-selection-info{
    right:0;
    bottom:0;
    padding:5px;
    margin:5px;
    font-size:12px;
    color:white;
    background-color:black;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    -webkit-opacity:.7;
    -khtml-opacity:.7;
    -moz-opacity:.7;
    opacity:.7;
    -ms-filter:alpha(opacity=70);
    filter:alpha(opacity=70)
}

/** MAP **/
.popup-bubble{
    position:absolute;
    top:0;
    left:0;
    transform:translate(-50%,-100%);
    background-color:white;
    padding:5px;
    border-radius:5px;
    font-family:sans-serif;
    overflow-y:auto;
    max-height:60px;
    box-shadow:0 2px 10px 1px rgba(0,0,0,.5)
}
.popup-bubble-anchor{
    position:absolute;
    width:100%;
    bottom:8px;
    left:0
}
.popup-bubble-anchor::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    transform:translate(-50%,0);
    width:0;
    height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:8px solid white
}
.popup-container{
    cursor:auto;
    height:0;
    position:absolute;
    width:200px
}


/** INPUTS**/

.range-slider{
    width:100%
}
.range-slider__range{
    -webkit-appearance: none;
    width: calc(100% - 73px);
    height: 10px;
    border-radius: 5px;
    background: #f0f0f0;
    outline: none;
    padding: 0;
    margin: 0;
    box-shadow: 0px 0px 4px -1px #aaa inset;
}
.range-slider__range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#2c3e50;
    cursor:pointer;
    -webkit-transition:background .15s ease-in-out;
    transition:background .15s ease-in-out
}
.range-slider__range::-webkit-slider-thumb:hover{
    background:#2196f3
}
.range-slider__range:active::-webkit-slider-thumb{
    background:#2196f3
}
.range-slider__range::-moz-range-thumb{
    width:20px;
    height:20px;
    border:0;
    border-radius:50%;
    background:#2c3e50;
    cursor:pointer;
    -webkit-transition:background .15s ease-in-out;
    transition:background .15s ease-in-out
}
.range-slider__range::-moz-range-thumb:hover{
    background:#2196f3
}
.range-slider__range:active::-moz-range-thumb{
    background:#2196f3
}
.range-slider__value{
    display:inline-block;
    position:relative;
    width:60px;
    color:#fff;
    line-height:20px;
    text-align:center;
    border-radius:3px;
    background:#2c3e50;
    padding:5px 10px;
    margin-left:8px
}
.range-slider__value:after{
    position:absolute;
    top:8px;
    left:-7px;
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-right:7px solid #2c3e50;
    border-bottom:7px solid transparent;
    content:''
}
::-moz-range-track{
    background:#d7dcdf;
    border:0
}
input::-moz-focus-inner,
input::-moz-focus-outer{
    border:0
}

/* Datetimepicker */
.bootstrap-datetimepicker-widget{
    list-style:none
}
.bootstrap-datetimepicker-widget
.dropdown-menu{
    margin:2px 0;
    padding:4px;
    width:19em
}
@media(min-width:768px){
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{
        width:38em
    }
}
@media(min-width:992px){
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{
        width:38em
    }
}
@media(min-width:1200px){
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs{
        width:38em
    }
}
.bootstrap-datetimepicker-widget.dropdown-menu:before,.bootstrap-datetimepicker-widget.dropdown-menu:after{
    content:'';
    display:inline-block;
    position:absolute
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before{
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-bottom:7px solid #ccc;
    border-bottom-color:rgba(0,0,0,.2);
    top:-7px;
    left:7px
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after{
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid white;
    top:-6px;
    left:8px
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before{
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:7px solid #ccc;
    border-top-color:rgba(0,0,0,.2);
    bottom:-7px;
    left:6px
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after{
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:6px solid white;
    bottom:-6px;
    left:7px
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before{
    left:auto;
    right:6px
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after{
    left:auto;
    right:7px
}
.bootstrap-datetimepicker-widget.list-unstyled{
    margin:0
}
.bootstrap-datetimepicker-widget a[data-action]{
    padding:6px 0
}
.bootstrap-datetimepicker-widget a[data-action]:active{
    box-shadow:none
}
.bootstrap-datetimepicker-widget.timepicker-hour,.bootstrap-datetimepicker-widget.timepicker-minute,.bootstrap-datetimepicker-widget.timepicker-second{
    width:54px;
    font-weight:700;
    font-size:1.2em;
    margin:0
}
.bootstrap-datetimepicker-widget button[data-action]{
    padding:6px
}
.bootstrap-datetimepicker-widget.btn[data-action="incrementHours"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Increment Hours"
}
.bootstrap-datetimepicker-widget.btn[data-action="incrementMinutes"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Increment Minutes"
}
.bootstrap-datetimepicker-widget.btn[data-action="decrementHours"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Decrement Hours"
}
.bootstrap-datetimepicker-widget.btn[data-action="decrementMinutes"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Decrement Minutes"
}
.bootstrap-datetimepicker-widget.btn[data-action="showHours"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Show Hours"
}
.bootstrap-datetimepicker-widget.btn[data-action="showMinutes"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Show Minutes"
}
.bootstrap-datetimepicker-widget.btn[data-action="togglePeriod"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Toggle AM/PM"
}
.bootstrap-datetimepicker-widget.btn[data-action="clear"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Clear the picker"
}
.bootstrap-datetimepicker-widget.btn[data-action="today"]::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Set the date to today"
}
.bootstrap-datetimepicker-widget.picker-switch{
    text-align:center
}
.bootstrap-datetimepicker-widget.picker-switch::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Toggle Date and Time Screens"
}
.bootstrap-datetimepicker-widget.picker-switch td{
    padding:0;
    margin:0;
    height:auto;
    width:auto;
    line-height:inherit
}
.bootstrap-datetimepicker-widget.picker-switch td span{
    line-height:2.5;
    height:2.5em;
    width:100%
}
.bootstrap-datetimepicker-widget table{
    width:100%;
    margin:0
}
.bootstrap-datetimepicker-widget table td,.bootstrap-datetimepicker-widget table th{
    text-align:center;
    border-radius:4px
}
.bootstrap-datetimepicker-widget table th{
    height:20px;
    line-height:20px;
    width:20px
}
.bootstrap-datetimepicker-widget table th.picker-switch{
    width:145px
}
.bootstrap-datetimepicker-widget table th.disabled,.bootstrap-datetimepicker-widget table th.disabled:hover{
    background:none;
    color:#777;
    cursor:not-allowed
}
.bootstrap-datetimepicker-widget table th.prev::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Previous Month"
}
.bootstrap-datetimepicker-widget table th.next::after{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
    content:"Next Month"
}
.bootstrap-datetimepicker-widget table thead tr:first-child th{
    cursor:pointer
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover{
    background:#eee
}
.bootstrap-datetimepicker-widget table td{
    height:54px;
    line-height:54px;
    width:54px
}
.bootstrap-datetimepicker-widget table td.cw{
    font-size:.8em;
    height:20px;
    line-height:20px;
    color:#777
}
.bootstrap-datetimepicker-widget table td.day{
    height:20px;
    line-height:20px;
    width:20px
}
.bootstrap-datetimepicker-widget table td.day:hover,.bootstrap-datetimepicker-widget table td.hour:hover,.bootstrap-datetimepicker-widget table td.minute:hover,.bootstrap-datetimepicker-widget table td.second:hover{
    background:#eee;
    cursor:pointer
}
.bootstrap-datetimepicker-widget table td.old,.bootstrap-datetimepicker-widget table td.new{
    color:#777
}
.bootstrap-datetimepicker-widget table td.today{
    position:relative
}
.bootstrap-datetimepicker-widget table td.today:before{
    content:'';
    display:inline-block;
    border:solid transparent;
    border-width:0 0 7px 7px;
    border-bottom-color:#337ab7;
    border-top-color:rgba(0,0,0,.2);
    position:absolute;
    bottom:4px;
    right:4px
}
.bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td.active:hover{
    background-color:#337ab7;
    color:#fff;
    text-shadow:0 -1px 0 rgba(0,0,0,.25)
}
.bootstrap-datetimepicker-widget table td.active.today:before{
    border-bottom-color:#fff
}
.bootstrap-datetimepicker-widget table td.disabled,.bootstrap-datetimepicker-widget table td.disabled:hover{
    background:none;
    color:#777;
    cursor:not-allowed
}
.bootstrap-datetimepicker-widget table td span{
    display:inline-block;
    width:54px;
    height:54px;
    line-height:54px;
    margin:2px 1.5px;
    cursor:pointer;
    border-radius:4px
}
.bootstrap-datetimepicker-widget table td span:hover{
    background:#eee
}
.bootstrap-datetimepicker-widget table td span.active{
    background-color:#337ab7;
    color:#fff;
    text-shadow:0 -1px 0 rgba(0,0,0,.25)
}
.bootstrap-datetimepicker-widget table td span.old{
    color:#777
}
.bootstrap-datetimepicker-widget table td span.disabled,.bootstrap-datetimepicker-widget table td span.disabled:hover{
    background:none;
    color:#777;
    cursor:not-allowed
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour{
    height:27px;
    line-height:27px
}
.bootstrap-datetimepicker-widget.wider{
    width:21em
}
.bootstrap-datetimepicker-widget.datepicker-decades.decade{
    line-height:1.8em!important
}
.input-group.date.input-group-addon{
    cursor:pointer
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0
}

/* select2 */
.select2-container{
    width:100%!important;
    z-index:9999
}
.select2-container{
    box-sizing:border-box;
    display:inline-block;
    margin:0;
    position:relative;
    vertical-align:middle
}
.select2-container .select2-selection--single{
    box-sizing:border-box;
    cursor:pointer;
    display:block;
    height:28px;
    user-select:none;
    -webkit-user-select:none
}
.select2-container .select2-selection--single .select2-selection__rendered{
    display:block;
    padding-left:8px;
    padding-right:20px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{
    padding-right:8px;
    padding-left:20px
}
.select2-container .select2-selection--multiple{
    box-sizing:border-box;
    cursor:pointer;
    display:block;
    min-height:32px;
    user-select:none;
    -webkit-user-select:none
}
.select2-container .select2-selection--multiple .select2-selection__rendered{
    display:inline-block;
    overflow:hidden;
    padding-left:8px;
    text-overflow:ellipsis;
    white-space:nowrap
}
.select2-container .select2-search--inline{
    float:left
}
.select2-container .select2-search--inline .select2-search__field{
    box-sizing:border-box;
    border:none;
    font-size:100%;
    margin-top:5px
}
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{
    -webkit-appearance:none
}
.select2-dropdown{
    background-color:white;
    border:1px solid #aaa;
    border-radius:4px;
    box-sizing:border-box;
    display:block;
    position:absolute;
    left:-100000px;
    width:100%;
    z-index:1051
}
.select2-results{
    display:block
}
.select2-results__options{
    list-style:none;
    margin:0;
    padding:0
}
.select2-results__option{
    padding:6px;
    user-select:none;
    -webkit-user-select:none
}
.select2-results__option[aria-selected]{
    cursor:pointer
}
.select2-container--open .select2-dropdown{
    left:0
}
.select2-container--open .select2-dropdown--above{
    border-bottom:none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}
.select2-container--open .select2-dropdown--below{
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0
}
.select2-search--dropdown{
    display:block;
    padding:4px
}
.select2-search--dropdown .select2-search__field{
    padding:4px;
    width:100%;
    box-sizing:border-box
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{
    -webkit-appearance:none
}
.select2-search--dropdown.select2-search--hide{
    display:none
}
.select2-close-mask{
    border:0;
    margin:0;
    padding:0;
    display:block;
    position:fixed;
    left:0;
    top:0;
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    opacity:0;
    z-index:99;
    background-color:#fff;
    filter:alpha(opacity=0)
}
.select2-hidden-accessible{
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px
}
.select2-container--default .select2-selection--single{
    background-color:#fff;
    border:1px solid #aaa;
    border-radius:4px
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color:#444;
    line-height:28px
}
.select2-container--default .select2-selection--single .select2-selection__clear{
    cursor:pointer;
    float:right;
    font-weight:700
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:#999
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    height:26px;
    position:absolute;
    top:1px;
    right:1px;
    width:20px
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color:#888 transparent transparent transparent;
    border-style:solid;
    border-width:5px 4px 0 4px;
    height:0;
    left:50%;
    margin-left:-4px;
    margin-top:-2px;
    position:absolute;
    top:50%;
    width:0
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{
    float:left
}
.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{
    left:1px;
    right:auto
}
.select2-container--default.select2-container--disabled .select2-selection--single{
    background-color:#eee;
    cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{
    display:none
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:transparent transparent #888 transparent;
    border-width:0 4px 5px 4px
}
.select2-container--default .select2-selection--multiple{
    background-color:white;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:text
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
    box-sizing:border-box;
    list-style:none;
    margin:0;
    padding:0 5px;
    width:100%
}
.select2-container--default .select2-selection--multiple .select2-selection__placeholder{
    color:#999;
    margin-top:5px;
    float:left
}
.select2-container--default .select2-selection--multiple .select2-selection__clear{
    cursor:pointer;
    float:right;
    font-weight:700;
    margin-top:5px;
    margin-right:10px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color:#e4e4e4;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:default;
    float:left;
    margin-right:5px;
    margin-top:5px;
    padding:0 5px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color:#999;
    cursor:pointer;
    display:inline-block;
    font-weight:700;
    margin-right:2px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
    color:#333
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder{
    float:right
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{
    margin-left:5px;
    margin-right:auto
}
.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{
    margin-left:2px;
    margin-right:auto
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
    border:solid black 1px;
    outline:0
}
.select2-container--default.select2-container--disabled .select2-selection--multiple{
    background-color:#eee;
    cursor:default
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove{
    display:none
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{
    border-top-left-radius:0;
    border-top-right-radius:0
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    border:1px solid #aaa
}
.select2-container--default .select2-search--inline .select2-search__field{
    background:transparent;
    border:none;
    outline:0
}
.select2-container--default .select2-results>.select2-results__options{
    max-height:200px;
    overflow-y:auto
}
.select2-container--default .select2-results__option[role=group]{
    padding:0
}
.select2-container--default .select2-results__option[aria-disabled=true]{
    color:#999
}
.select2-container--default .select2-results__option[aria-selected=true]{
    background-color:#ddd
}
.select2-container--default .select2-results__option .select2-results__option{
    padding-left:1em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group{
    padding-left:0
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-1em;
    padding-left:2em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-2em;
    padding-left:3em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-3em;
    padding-left:4em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-4em;
    padding-left:5em
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
    margin-left:-5em;
    padding-left:6em
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color:#5897fb;
    color:white
}
.select2-container--default .select2-results__group{
    cursor:default;
    display:block;
    padding:6px
}
.select2-container--classic .select2-selection--single{
    background-color:#f6f6f6;
    border:1px solid #aaa;
    border-radius:4px;
    outline:0;
    background-image:-webkit-linear-gradient(top,#ffffff 50%,#eeeeee 100%);
    background-image:-o-linear-gradient(top,#ffffff 50%,#eeeeee 100%);
    background-image:linear-gradient(to bottom,#ffffff 50%,#eeeeee 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0)
}
.select2-container--classic .select2-selection--single:focus{
    border:1px solid #5897fb
}
.select2-container--classic .select2-selection--single .select2-selection__rendered{
    color:#444;
    line-height:28px
}
.select2-container--classic .select2-selection--single .select2-selection__clear{
    cursor:pointer;
    float:right;
    font-weight:700;
    margin-right:10px
}
.select2-container--classic .select2-selection--single .select2-selection__placeholder{
    color:#999
}
.select2-container--classic .select2-selection--single .select2-selection__arrow{
    background-color:#ddd;
    border:none;
    border-left:1px solid #aaa;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    height:26px;
    position:absolute;
    top:1px;
    right:1px;
    width:20px;
    background-image:-webkit-linear-gradient(top,#eeeeee 50%,#cccccc 100%);
    background-image:-o-linear-gradient(top,#eeeeee 50%,#cccccc 100%);
    background-image:linear-gradient(to bottom,#eeeeee 50%,#cccccc 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#cccccc',GradientType=0)
}
.select2-container--classic .select2-selection--single .select2-selection__arrow b{
    border-color:#888 transparent transparent transparent;
    border-style:solid;
    border-width:5px 4px 0 4px;
    height:0;
    left:50%;
    margin-left:-4px;
    margin-top:-2px;
    position:absolute;
    top:50%;
    width:0
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{
    float:left
}
.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{
    border:none;
    border-right:1px solid #aaa;
    border-radius:0;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    left:1px;
    right:auto
}
.select2-container--classic.select2-container--open .select2-selection--single{
    border:1px solid #5897fb
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{
    background:transparent;
    border:none
}
.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color:transparent transparent #888 transparent;
    border-width:0 4px 5px 4px
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0;
    background-image:-webkit-linear-gradient(top,#ffffff 0%,#eeeeee 50%);
    background-image:-o-linear-gradient(top,#ffffff 0%,#eeeeee 50%);
    background-image:linear-gradient(to bottom,#ffffff 0%,#eeeeee 50%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0)
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{
    border-bottom:none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    background-image:-webkit-linear-gradient(top,#eeeeee 50%,#ffffff 100%);
    background-image:-o-linear-gradient(top,#eeeeee 50%,#ffffff 100%);
    background-image:linear-gradient(to bottom,#eeeeee 50%,#ffffff 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#ffffff',GradientType=0)
}
.select2-container--classic .select2-selection--multiple{
    background-color:white;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:text;
    outline:0
}
.select2-container--classic .select2-selection--multiple:focus{
    border:1px solid #5897fb
}
.select2-container--classic .select2-selection--multiple .select2-selection__rendered{
    list-style:none;
    margin:0;
    padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__clear{
    display:none
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice{
    background-color:#e4e4e4;
    border:1px solid #aaa;
    border-radius:4px;
    cursor:default;
    float:left;
    margin-right:5px;
    margin-top:5px;
    padding:0 5px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{
    color:#888;
    cursor:pointer;
    display:inline-block;
    font-weight:700;
    margin-right:2px
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{
    color:#555
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{
    float:right
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{
    margin-left:5px;
    margin-right:auto
}
.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{
    margin-left:2px;
    margin-right:auto
}
.select2-container--classic.select2-container--open .select2-selection--multiple{
    border:1px solid #5897fb
}
.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{
    border-top:none;
    border-top-left-radius:0;
    border-top-right-radius:0
}
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{
    border-bottom:none;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0
}
.select2-container--classic .select2-search--dropdown .select2-search__field{
    border:1px solid #aaa;
    outline:0
}
.select2-container--classic .select2-search--inline .select2-search__field{
    outline:0
}
.select2-container--classic .select2-dropdown{
    background-color:white;
    border:1px solid transparent
}
.select2-container--classic .select2-dropdown--above{
    border-bottom:none
}
.select2-container--classic .select2-dropdown--below{
    border-top:none
}
.select2-container--classic .select2-results>.select2-results__options{
    max-height:200px;
    overflow-y:auto
}
.select2-container--classic .select2-results__option[role=group]{
    padding:0
}
.select2-container--classic .select2-results__option[aria-disabled=true]{
    color:grey
}
.select2-container--classic .select2-results__option--highlighted[aria-selected]{
    background-color:#3875d7;
    color:white
}
.select2-container--classic .select2-results__group{
    cursor:default;
    display:block;
    padding:6px
}
.select2-container--classic.select2-container--open .select2-dropdown{
    border-color:#5897fb
}
.select2-results__option{
    padding:6px 8px;
    border-radius:2px;
    margin-bottom:1px
}
.select2-container--default .select2-selection--single{
    background-color:#fcfcfd;
    border-color:#bdc3d1;
    border-radius:2px;
    height:38px;
    outline:none
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color:#262b36;
    line-height:36px;
    padding-left:12px
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
    color:#9fa8bc
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
    width:30px;
    height:36px;
    line-height:36px
}
.select2-container--default .select2-selection--multiple{
    background-color:#fcfcfd;
    border-color:#bdc3d1;
    border-radius:2px;
    min-height:38px;
    outline:none
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered{
    padding:0 4px
}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-top:4px;
    margin-right:4px;
    padding:4px 10px 4px 5px;
    border-color:transparent;
    border-radius:2px;
    background-color:#259dab;
    color:#fff
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
    color:#fff;
    margin-right:6px;
    opacity:.75;
    font-size:12px
}
.select2-container--default.select2-container--focus .select2-selection--multiple{
    border-color:#9fa8bc
}
.select2-container--default .select2-search--dropdown .select2-search__field{
    border-color:#9fa8bc;
    border-radius:2px
}
.select2-container--default .select2-results__option[aria-selected="true"]{
    background-color:#e7e9ee
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background-color:#259dab
}
.select2-container--default .select2-results>.select2-results__options{
    margin:4px
}
.select2-container--default .select2-search--inline .select2-search__field{
    margin-top:4px;
    line-height:25px;
    padding-left:7px
}
.select2-container--default.select2-container--disabled .select2-selection--single{
    background-color:#e7e9ee
}
.select2-container--open .select2-selection--single,.select2-container--open .select2-selection--multiple{
    background-color:#fff;
    border-color:#9fa8bc
}
.select2-container--open .select2-dropdown--above{
    border-top-right-radius:2px;
    border-top-left-radius:2px
}
.select2-container--open .select2-dropdown--below{
    border-bottom-right-radius:2px;
    border-bottom-left-radius:2px
}
.select2-dropdown{
    border-color:#9fa8bc;
    z-index:200
}
.select2-search--dropdown{
    padding-bottom:0
}
.has-error .select2-selection--single,.has-error .select2-selection--multiple{
    border-color:#d9534f
}


/*  MEDİA  **/
.video-container{
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden
}
.video-container iframe,.video-container object,.video-container embed,.video-container video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.audio-container{
    position:relative;
    padding-bottom:25.25%;
    padding-top:30px;
    height:0;
    overflow:hidden
}
.audio-container audio{
    position:absolute;
    top:0;
    left:0;
    width:100%
}


/***** JQUERY.GRITTER *****/
#gritter-notice-wrapper{
    position:fixed;
    top:20px;
    right:20px;
    width:301px;
    z-index:99999999
}
#gritter-notice-wrapper.top-left{
    left:20px;
    right:auto
}
#gritter-notice-wrapper.bottom-right{
    top:auto;
    left:auto;
    bottom:20px;
    right:20px
}
#gritter-notice-wrapper.bottom-left{
    top:auto;
    right:auto;
    bottom:20px;
    left:20px
}
.gritter-item-wrapper{
    position:relative;
    margin:0 0 10px 0;
    border-radius: 10px;
    box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.24);
}
.gritter-top{
    background:url(../../images/gritter.png)no-repeat left-30px;
    height:10px
}
.hover.gritter-top{
    background-position:right-30px
}
.gritter-bottom{
    background:url(../../images/gritter.png)no-repeat left bottom;
    height:8px;
    margin:0
}
.hover.gritter-bottom{
    background-position:bottom right
}
.gritter-item{
    display:block;
    background:url(../../images/gritter.png)no-repeat left-40px;
    color:#eee;
    padding:2px 11px 8px 11px;
    font-size:11px;
    font-family:'Roboto', sans-serif
}
.hover.gritter-item{
    background-position:right-40px
}
.gritter-item p{
    padding:0;
    margin:0;
    word-wrap:break-word
}
.gritter-close{
    display:none;
    position:absolute;
    top:-6px;
    left:3px;
    background:url(../../images/gritter.png)no-repeat left top;
    cursor:pointer;
    width:30px;
    height:30px;
    text-indent:-9999em
}
.gritter-title{
    font-size:14px;
    font-weight:bold;
    padding:0 0 2px 0;
    display:block;
    text-shadow:1px 1px 0 #000
}
.gritter-image{
    width:48px;
    height:48px;
    float:left
}
.gritter-with-image,.gritter-without-image{
    padding:0
}
.gritter-with-image{
    width:220px;
    float:right
}
.gritter-light.gritter-item,.gritter-light.gritter-bottom,.gritter-light.gritter-top,.gritter-light.gritter-close{
    background-image:url(../../images/gritter-light.png);
    color:#222
}
.gritter-light.gritter-title{
    text-shadow:none
}
.gritter-top,.gritter-bottom{
    display:none
}
.gritter-item{
    position:relative;
    background-image:none;
    /*background-color:rgba(17,19,24,0.95);*/
    border-radius:2px;
    padding:15px;
    font-family:'Roboto', sans-serif;
    font-size:12px;
    line-height:1.42857143;
    color:rgba(255,255,255,0.65);
    z-index:3000
}
.gritter-item a:hover{
    text-decoration:underline
}
.gritter-title{
    font-weight:500;
    text-shadow:none;
    text-transform:capitalize;
    font-family:'Roboto', sans-serif;
    /*letter-spacing:.5px;*/
    font-size:14px;
    color:#fff
}
.gritter-close{
    left:auto;
    right:-6px;
    background:none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid #ffffff;
}
.gritter-item-wrapper.success .gritter-close{
    background-color: #22b66e !important;
}
.gritter-item-wrapper.warning .gritter-close{
    background-color: #f3c111 !important;
}
.gritter-item-wrapper.danger .gritter-close{
    background-color: #ef193c !important;
}
.gritter-item-wrapper.primary .gritter-close{
    background-color: #4BC0C0 !important;
}
.gritter-close:before{
    text-indent:0;
    content:'\f00d';
    position:absolute;
    font-family:'FontAwesome';
    top:1px;
    right:4px;
    color:#fff;
    font-size:12px;
    opacity:1
}
.gritter-item-wrapper.with-icon>.gritter-item{
    padding-left:60px;
    position:relative
}
.gritter-item-wrapper.with-icon>.gritter-item:before{
    color:#fff;
    position:absolute;
    top:15px;
    left:15px;
    font-size:28px;
    font-family:'FontAwesome'
}
/*.gritter-item-wrapper.primary>.gritter-item{
    background-color:rgba(37,116,171,0.9)
}*/
/*.gritter-item-wrapper.success>.gritter-item{
    background-color:rgba(37,157,171,0.9)
}
.gritter-item-wrapper.warning>.gritter-item{
    background-color:rgba(230,173,92,0.9)
}
.gritter-item-wrapper.danger>.gritter-item{
    background-color:rgba(217,83,79,0.9)
}
.gritter-item-wrapper.info>.gritter-item{
    background-color:rgba(91,192,222,0.9)
}*/
.gritter-item-wrapper.with-icon.send-o>.gritter-item:before{
    content:'\f1d9'
}
.gritter-item-wrapper.with-icon.question-circle>.gritter-item:before{
    content:'\f059'
}
.gritter-item-wrapper.with-icon.check-circle>.gritter-item:before{
    content:'\f058'
}
.gritter-item-wrapper.with-icon.exclamation-circle>.gritter-item:before{
    content:'\f06a'
}
.gritter-item-wrapper.with-icon.times-circle>.gritter-item:before{
    content:'\f057'
}

/******** VECTOR MAP */
.jvectormap-label{
    position:absolute;
    display:none;
    border:solid 1px #000;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    background-color:#292929;
    background-color:rgba(0,0,0,.8);
    color:white;
    font-size:12px;
    padding:4px 10px
}
.jvectormap-zoomin,.jvectormap-zoomout{
    position:absolute;
    left:20px;
    background:#fff;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
    padding:0;
    font-weight:700;
    font-size:20px;
    color:#aaa;
    width:24px;
    height:24px;
    line-height:20px;
    text-align:center;
    cursor:pointer
}
.jvectormap-zoomin{
    top:20px
}
.jvectormap-zoomout{
    top:43px
}


/* Radius */
.r0{
    border-radius: 0px 0px 0px 0px !important;
    -moz-border-radius: 0px 0px 0px 0px !important;
    -webkit-border-radius: 0px 0px 0px 0px !important;
}
.r5{
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
}
.r10{
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
}
.r15{
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
}
.r20{
    border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
}
.r25{
    border-radius: 25px 25px 25px 25px;
    -moz-border-radius: 25px 25px 25px 25px;
    -webkit-border-radius: 25px 25px 25px 25px;
}
.r30{
    border-radius: 30px 30px 30px 30px;
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
}
.r35{
    border-radius: 35px 35px 35px 35px;
    -moz-border-radius: 35px 35px 35px 35px;
    -webkit-border-radius: 35px 35px 35px 35px;
}
.r40{
    border-radius: 40px 40px 40px 40px;
    -moz-border-radius: 40px 40px 40px 40px;
    -webkit-border-radius: 40px 40px 40px 40px;
}
.r45{
    border-radius: 45px 45px 45px 45px;
    -moz-border-radius: 45px 45px 45px 45px;
    -webkit-border-radius: 45px 45px 45px 45px;
}
.r50{
    border-radius: 50px 50px 50px 50px;
    -moz-border-radius: 50px 50px 50px 50px;
    -webkit-border-radius: 50px 50px 50px 50px;
}
/* </-- end Of Radius /*/



/* FLIP */

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
}

/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {

}

/* Style the back side */
.flip-box-back {
    transform: rotateY(180deg);
}


/*Widget Style*/
.widgets{
    min-height:137px;
    transition: all 0.5s;
    overflow: hidden;
}
.widgets.shadow:hover{
    box-shadow:0 0 3px 1px rgba(29,29,29,0.5);
}
.widgets .visual,.widgets .details{
    float: left;
    width: 50%;
}
.widgets .visual i{
    font-size: 10em;
    opacity: 0.4;
    line-height: .8;
    margin-left: 1rem;
    color: #fff;
    margin-top: 1rem;
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transform: translateZ(0);
}
.widgets .visual i:after{
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    /* W3C */
    transition-duration: 0.3s;
    transition-property: transform opacity;
}
.widgets:hover .visual i{
    transform: translateY(-6px);
    animation-name: hover;
    animation-duration: 1.5s;
    animation-delay: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.widgets:hover .visual i:after{
    opacity: .6;
    transform: translateY(6px);
    animation-name: shadow;
    animation-duration: 1.5s;
    animation-delay: .3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.widgets .details{
    color:#fff;
    text-align: right;
    padding-right: 2rem;
    padding-top: 1rem
}
.widgets .details .number{
    font-size: 2.6em;
}
.widgets .details .desc{
    font-size: 1.3em;
    font-weight: 100;
    opacity: 0.8;
    line-height: 1;
}
.widgets .more{
    width: 100%;
    display: inline-block;
    height: 30px;
    background-color: rgba(0,0,0,0.05);
    color: #fff !important;
    padding-top: 5px;
    padding-left: 10px;
    transition: all 0.5s;
    text-transform: uppercase;
    opacity: 0.6
}
.widgets .more:hover{
    background-color: rgba(0,0,0,0.07);

}
.widgets .more i{
    margin-right: 1rem;
    margin-top: 2px;
}
.widgets:hover .more{
    opacity: 1
}
.widgets:hover .more i{
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(-30px);
    }
    60% {
        transform: translateX(-15px);
    }
}

@keyframes hover {
    50% {
        transform:translateY(-3px);
    }
    100% {
        transform:translateY(-6px);
    }
}
@keyframes shadow {
    0% {
        transform: translateY(6px);
        opacity: .4;
    }

    50% {
        transform: translateY(3px);
        opacity: 1;
    }

    100% {
        transform: translateY(6px);
        opacity: .4;
    }
}
/**widget--End.**/

.inner-container{
    overflow: hidden;
    height: 100%;
    position: relative;
}
/*Cards Style*/
.avatar-card{
    width:22%;
    text-align: right;
    float:left;
    margin-top: 14px;
}
.cards-content-val{
    width:70%;
    text-align: left;
    float:left;
    padding-left: 2rem;
    margin-bottom: 20px;
}
.cards-content-val > a {
    font-size: 1.6em;
}
.cards-content-val p small{
    font-size: 1.2em;
}
/*Cards Style*/
/*input tags*/
.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: inline-block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
    width: 100%;
    min-height: 46px;
}
.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
    margin-top: 8px;
}
.bootstrap-tagsinput.form-control input::-moz-placeholder {
    color: #777;
    opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
    color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
    color: #777;
}
.bootstrap-tagsinput input:focus {
    border: none;
    box-shadow: none;
}
.bootstrap-tagsinput .tag {
    margin-right: 2px;
    color: white;
    padding: 7px;
    font-size: 1.2em;
    margin-bottom: 5px;
    margin-top: 5px;

}

.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 8px;
    font-size: .8em;
    cursor: pointer;
    position: relative;
    top: -2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/*input tags --END.*/
.breadcrumb .breadcrumb-item.custom-style{
    margin-top: 7px;

}
.breadcrumb .breadcrumb-item.custom-style a,.breadcrumb .breadcrumb-item.custom-style span{
    font-size: 1.3em;
}
.breadcrumb .breadcrumb-item h3{
    margin-top: 4px;
    margin-bottom: 5px;
}
.breadcrumb-item+.breadcrumb-item::before{
    color: #c9c9c9;
}

/*!
 * Cropper.js v1.5.5
 * https://fengyuanchen.github.io/cropperjs
 *
 * Copyright 2015-present Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2019-08-04T02:26:27.232Z
 */

.cropper-container {
    direction: ltr;
    font-size: 0;
    line-height: 0;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cropper-container img {
    display: block;
    height: 100%;
    image-orientation: 0deg;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100%;
}

.cropper-wrap-box,
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.cropper-wrap-box,
.cropper-canvas {
    overflow: hidden;
}

.cropper-drag-box {
    background-color: #fff;
    opacity: 0;
}

.cropper-modal {
    background-color: #000;
    opacity: 0.5;
}

.cropper-view-box {
    display: block;
    height: 100%;
    outline: 1px solid #39f;
    outline-color: rgba(51, 153, 255, 0.75);
    overflow: hidden;
    width: 100%;
}

.cropper-dashed {
    border: 0 dashed #eee;
    display: block;
    opacity: 0.5;
    position: absolute;
}

.cropper-dashed.dashed-h {
    border-bottom-width: 1px;
    border-top-width: 1px;
    height: calc(100% / 3);
    left: 0;
    top: calc(100% / 3);
    width: 100%;
}

.cropper-dashed.dashed-v {
    border-left-width: 1px;
    border-right-width: 1px;
    height: 100%;
    left: calc(100% / 3);
    top: 0;
    width: calc(100% / 3);
}

.cropper-center {
    display: block;
    height: 0;
    left: 50%;
    opacity: 0.75;
    position: absolute;
    top: 50%;
    width: 0;
}

.cropper-center::before,
.cropper-center::after {
    background-color: #eee;
    content: ' ';
    display: block;
    position: absolute;
}

.cropper-center::before {
    height: 1px;
    left: -3px;
    top: 0;
    width: 7px;
}

.cropper-center::after {
    height: 7px;
    left: 0;
    top: -3px;
    width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
    display: block;
    height: 100%;
    opacity: 0.1;
    position: absolute;
    width: 100%;
}

.cropper-face {
    background-color: #fff;
    left: 0;
    top: 0;
}

.cropper-line {
    background-color: #39f;
}

.cropper-line.line-e {
    cursor: ew-resize;
    right: -3px;
    top: 0;
    width: 5px;
}

.cropper-line.line-n {
    cursor: ns-resize;
    height: 5px;
    left: 0;
    top: -3px;
}

.cropper-line.line-w {
    cursor: ew-resize;
    left: -3px;
    top: 0;
    width: 5px;
}

.cropper-line.line-s {
    bottom: -3px;
    cursor: ns-resize;
    height: 5px;
    left: 0;
}

.cropper-point {
    background-color: #39f;
    height: 5px;
    opacity: 0.75;
    width: 5px;
}

.cropper-point.point-e {
    cursor: ew-resize;
    margin-top: -3px;
    right: -3px;
    top: 50%;
}

.cropper-point.point-n {
    cursor: ns-resize;
    left: 50%;
    margin-left: -3px;
    top: -3px;
}

.cropper-point.point-w {
    cursor: ew-resize;
    left: -3px;
    margin-top: -3px;
    top: 50%;
}

.cropper-point.point-s {
    bottom: -3px;
    cursor: s-resize;
    left: 50%;
    margin-left: -3px;
}

.cropper-point.point-ne {
    cursor: nesw-resize;
    right: -3px;
    top: -3px;
}

.cropper-point.point-nw {
    cursor: nwse-resize;
    left: -3px;
    top: -3px;
}

.cropper-point.point-sw {
    bottom: -3px;
    cursor: nesw-resize;
    left: -3px;
}

.cropper-point.point-se {
    bottom: -3px;
    cursor: nwse-resize;
    height: 20px;
    opacity: 1;
    right: -3px;
    width: 20px;
}

@media (min-width: 768px) {
    .cropper-point.point-se {
        height: 15px;
        width: 15px;
    }
}

@media (min-width: 992px) {
    .cropper-point.point-se {
        height: 10px;
        width: 10px;
    }
}

@media (min-width: 1200px) {
    .cropper-point.point-se {
        height: 5px;
        opacity: 0.75;
        width: 5px;
    }
}

.cropper-point.point-se::before {
    background-color: #39f;
    bottom: -50%;
    content: ' ';
    display: block;
    height: 200%;
    opacity: 0;
    position: absolute;
    right: -50%;
    width: 200%;
}

.cropper-invisible {
    opacity: 0;
}

.cropper-bg {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
}

.cropper-hide {
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

.cropper-hidden {
    display: none !important;
}

.cropper-move {
    cursor: move;
}

.cropper-crop {
    cursor: crosshair;
}

.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
    cursor: not-allowed;
}
.docs-cropped .modal-body > img, .docs-cropped .modal-body > canvas {
    max-width: 100%;
}
.docs-cropped .modal-title{
    width:40%;
    float:left;
}
.docs-cropped .close{
    margin-top: 2px;
    opacity: 1;
    font-size: 25px;
    margin-right: 7px;
}
.docs-cropped .modal-header{
    box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);

}
.docs-cropped .docs-buttons .btn{
    margin-bottom: 0;
}
.docs-cropped{
    background-color: rgba(0,0,0,0.8);
}
/*gradiant fu*/
ul.grd-color-list {
    margin: 0;
    list-style: none;
    padding: 0;
}
ul.grd-color-list li{
    width: 100%;
    float:left;
}
.gradiant-preview{
    width: 100%;
    height:150px;
}
/*gradiant fu end*/
/*modal Cropper*/

.image-cropper-wrapper{
    position: relative;
    transition: all 0.5s;
    height: inherit;
    border: 2px dashed #d1d1d1;
    background-color: white;
    display: none;
}
.image-cropper-wrapper .progress{
    position: absolute;
    bottom: -1rem;
}
.image-cropper-wrapper:hover{
    background-color: #f0f0f0;
}
.image-cropper-wrapper label{
    cursor: pointer !important;
    height: 115px;
    padding: 0;
}
.image-cropper-wrapper .img-thumbnail{
    background-color: transparent;
    border:none;
    height: inherit;
    padding: 0;
    width: auto;
}
.progress {
    /*display: none;*/
    /*margin-bottom: 1rem;*/
}
.size-box{
    display:inline-block;
    border-radius: .25rem;
}
.size-box div {
    padding: 0 8px;
    display: inherit;
    border: none;
    font-size: 17px;
    margin-top: 3px;
}
.size-box div:last-child{
    margin-right: 0;
    border-left: 1px solid #5eb4f8;
}
.custom-label{
    background-color: transparent;
}
.btn-grp-align-item-wrapper{
    margin-top: 13px;
}
.btn-grp-align-item-wrapper .icon-top-left i,.btn-grp-align-item-wrapper .icon-bottom-right i{
    transform: rotate(-45deg);
}
.btn-grp-align-item-wrapper .icon-top-right i,.btn-grp-align-item-wrapper .icon-bottom-left i{
    transform: rotate(45deg);
}
.btn-grp-align-item-wrapper button{
    margin: 2px;
}
.btn-grp-align-item-wrapper .icon-center-left,.btn-grp-align-item-wrapper .icon-center-center,.btn-grp-align-item-wrapper .icon-center-right{
    width: 40.86px;
    text-align: center;
    padding: 8px 9px 8px 7px !important;
}
.or-seprator{
    width:100%;
    height:1px;
    background-color: #ddd;
    position:relative;
    margin-top: 2rem;
    margin-bottom: 2rem;

}
.or-seprator:after{
    position: absolute;
    content: "Or";
    background-color: #fcfbfb;
    color: #df6868;
    width: 44px;
    height: 44px;
    left: calc(50% - 22px);
    top: calc(50% - 22px);
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    line-height: 1.8;
    border: 1px solid #ddd;
    font-size: 1.7em;
}
/**sortable**/
.editable{
    outline: 2px dashed transparent;
    transition: all 0.5s;
}
.editable:hover{
    outline: 2px dashed red !important;
    position: relative;
    z-index: 1000;
    outline-offset: -3px;
    cursor: alias;
}
.screen{
    margin-top: 2rem;

}
.browser-main-wrapper{
    transform-origin: top;
}
.screen .toolbar{
    background: #E1E0E0;
    height: 35px;
    padding: 0px 0px 0px 11px;
    border-radius: 3px 3px 0 0;
    position: relative;
    display:flex;
    justify-content: center;
}
.screen .toolbar .title i{
    color: #37a272;
    font-size: 1.3em;
    position: absolute;
    cursor:pointer;
    opacity: 0;
    transform: perspective(100px) rotateY(90deg);
    transition: all 0.5s;
    transform-origin: left;
}
.screen .toolbar .title:hover i{
    opacity: 1;
    transform: perspective(100px) rotateY(0deg);
}
.screen .toolbar .title i.editbtn{
    color: #1abc9c;
    transform: perspective(100px) rotateY(0deg) !important;
    opacity: 1;
}
.screen .toolbar .title i.editbtn:before{
    content: '\006c';
}
.screen .toolbar .title >span{
    transition:all 0.5s;
}
.screen .toolbar .title >span.editable-textbox{
    transition: all 0.5s;
    background-color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #bdbdbd;
}
.screen .toolbar .toolbar-icon{
    float:left;
    margin-top: 13px;
    height:13px;
    position: absolute;
    left:1rem;
}
.screen .toolbar .toolbar-icon:after{
    position: absolute;
    width:10px;
    height:10px;
    border-radius: 50%;
    background-color: #888;
    content: '';
    left: 0;
    box-shadow: 16px 0px 0px 0px #888, 32px 0px 0px 0px #888;
}
.screen .toolbar .title {
    width: 100%;
    text-align: center;
    padding-top: 7px;
    float: left;
}
.screen .sortable{
    /*    min-height: 300px;*/
    padding-bottom: 3rem;
}
.screen .sortable:empty{
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
    height: 400px;
}
.screen .sortable:empty:after{
    position: absolute;
    content: 'Build your page by dragging elements onto the canvas';
    width: 500px;
    height: 100px;
    background-color: #444;
    color: #fff;
    text-align: center;
    font-size: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.container-frame p{
    margin:0;
}
.sortable .sortable-placeholder{
    background-color: #e1f5fe;
    border-color: #2196f3;
}
.wrap{
    /*overflow: hidden;*/
    position: relative;
}
.wrap .cover-bg{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 150px;
    padding-bottom: 150px;
    overflow: hidden;
    box-shadow: 0px -258px 100px -145px #252830 inset;
}
.intro-block .slogan{
    color:#fff;
}
.intro-block .slogan h1{
    font-size: 60px;
    font-weight: 100;
}
.intro-block .slogan p {
    margin: 50px 0 0 0;
    opacity: 0.7;
    font-size: 20px;
}
.container-half {
    position: absolute;
    width: 50%;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 4;
}
.content-block {
    padding-top: 150px;
    padding-bottom: 150px;
    background-color: #252830;
    color:#fff;
}
.content-block  h2{
    font-size: 44px;
    margin: 2rem 0 30px 0;
}
.content-block  p{
    font-size: 1.2em;
}
.content-block.white{
    background-color: #fff;
    color:#000;
}
.wrap .toolbox-wrap{
    position: absolute;
    top: 0;
    left: 100%;
    transition: all 0.5s;
    display: inline-block;
    text-align: left;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
}
h1.sub-title, h2.sub-title, h3.sub-title, h4.sub-title {
    color: #00c0ff;
    margin: 0 0 60px 0;
}
.wrap .button-intro-wrapper .btn i{
    margin-left: 1rem;
}
.wrap:hover .toolbox-wrap {
    opacity: 1;
    z-index: 1000;
    visibility: visible;
    transform-origin: top left;
}
.wrap .toolbox-wrap button{
    border-radius: 0;
    width: 100%;
    text-align: center;
    transform: translateX(50px);
}
.wrap:hover .toolbox-wrap button:first-child{
    transform: translateX(0);
    transition: all 0.6s;
}
.wrap:hover .toolbox-wrap button:nth-child(2){
    transform: translateX(0);
    transition: all 0.5s;
}
.wrap:hover .toolbox-wrap button:nth-child(3){
    transform: translateX(0);
    transition: all 0.7s;
}
.wrap:hover .toolbox-wrap button:nth-child(4){
    transform: translateX(0);
    transition: all 0.9s;
}
.wrap .toolbox-wrap button i{
    margin-left: 0;
}
.custom-building-mode{
    margin-top: 1px;
    display: flex;
    align-items: center;
    height: 100%;
}
.wrap .footer-wrapper{
    background-color: #252830;
    padding-top: 80px;
    padding-bottom: 80px;
}
.wrap .social-list{
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrap .social-list li{
    display: inline-block;
    margin: 10px 0;
}
.wrap .social-list li{
    transition: all 0.25s ease-out;
    text-decoration: none;
    margin: 0 4px;
}
.wrap .social-list li:hover .default i{
    transform: scale(1.3);

}
.wrap .social-list .btn i{
    margin-left: 0;
}
.wrap .social-list .default i {
    color: #fff;
    opacity: 0.5;
    display: inline-block;
    font-size: 30px;
    margin: 0 10px;
    transition: all 0.2s ease-out;
}
.wrap .social-list .default i:hover {
    opacity: 1;
}
.btn-social.grey .white{
    background-color: #fff;
    color:#415168 !important;
}
.btn-social.grey .white:hover,.btn-social.white .white:hover{
    color:#415168 !important;
}
.wrap .social-list .btn-social{
    border:none;
}
/*Contact us */
.wrap .contact1-section{
    padding-top: 150px;
    padding-bottom: 150px;
}
.wrap .data-list{
    margin: 0;
    padding: 0px;
    list-style: none;
}
.wrap .data-list li{
    padding-left: 45px;
    padding-bottom: 30px;
    position: relative;
    font-size: 17px;
    color: #7b7b7b;
}
.wrap .data-list i{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 150%;
    opacity: 0.4;
}
.wrap .contact1-section .sub-title{
    color: #00c0ff;
    margin: 1.3rem 0 50px 0;
}
.mapouter{
    position:relative;
    text-align:right;
}
.gmap-canvas{
    overflow:hidden;
    background:none!important;
}
.satellite-switch span{
    padding-lefT:0;
}
.zoom-formgroup{
    margin-bottom: 0;
}
.zoom-formgroup .col-form-label{
    padding-top: 1px;
}
.contact-us-2{
    padding-bottom: 150px;
    padding-top: 150px;
    color: #fff;
}
.contact-us-2 .title {
    margin: 0 0 60px 0;
}
.contact-us-2 p{
    font-size: 20px;
}
.contact-us-2 p i{
    font-size: 35px;
}
/*Contact us 1 END*/
/**map Tool Button**/
div[editor-feature="map"]{
    position: relative;
}
div[editor-feature="map"]:after{
    position: absolute;
    content: "\ed16" !important;
    width: 60px !important;
    height: 60px !important;
    background-color: #222 !important;
    border: 1px solid #5a5a5a !important;
    color: #fff !important;
    text-align: center !important;
    left: 5px !important;
    top: 5px !important;
    transform: rotateY(90deg) ;
    cursor: pointer !important;
    z-index: 100 !important;
    opacity: 0 ;
    transition: all 0.5s;
    font-family: IcoFont !important;
    speak: none;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    line-height: 1;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-size: 3em !important;
    line-height: 1.4 !important;
}
div[editor-feature="map"]:hover:after{
    opacity: 1;
    transform: rotateY(0deg);
}
div[editor-feature="map"]:after:hover{
    background-color: #ddd;
}
/**map END**/
/*Step By Step 1*/
.wrap section .set-bottom {
    margin-bottom: 60px;
}
.wrap section .set-bottom h1{
    margin-bottom: 2rem;
}
.desc-text {
    opacity: 0.7;
}
.wrap section ul.step-center-block li{
    padding-bottom: 70px;
    position: relative;
    list-style: none;
}
.wrap section ul.step-center-block li:last-child{
    padding-bottom: 0;
}
.wrap section ul.step-center-block li:last-child:before{
    display:none;
}
.wrap section ul.step-center-block li:before{
    content: "";
    position: absolute;
    display: block;
    top: 100px;
    left: 50%;
    bottom: 0;
    width: 1px;
    background: #00c0ff;
}
.wrap section ul.step-center-block li:after{
    content: "";
    display: block;
    clear: both;
}
.wrap section ul.step-center-block li .step-num{
    position: absolute;
    height: 100px;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    top: 0;
    border: 1px solid #00c0ff;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-align: center;
    line-height: 100px;
    overflow: hidden;
    font-size: 50px;
    font-weight: lighter;
}
.wrap section ul.step-center-block li .step-img{
    float: right;
    width: 40%;

    z-index: 2;
}
.wrap section ul.step-center-block li .step-text{
    float: left;
    width: 40%;
}
.wrap section ul.step-center-block li.reverse .step-img{
    float: left;
}
.wrap section ul.step-center-block li.reverse .step-text{
    float: right;
}
.wrap section.step-by-step.bg-dark{
    padding-top: 150px;
    padding-bottom: 150px;
    background-color: #252830;
    color:#fff;
}
.wrap h3.title{
    margin:0 0 30px 0;
}
.wrap section.step-by-step p{
    font-size: 17px;
}
.agency_featured_area{
    padding: 140px 0;
}
.agency_featured_area h2{
    font-size: 30px;
    font-weight: 600;
    color: #222d39;
    line-height: 40px;
}
.agency_featured_area .features_info {
    position: relative;
    padding-bottom: 170px;
}
.agency_featured_area .features_info .dot_img {
    position: absolute;
    left: 0;
    top: 28px;
    height: auto;
    max-width: 100%;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.agency_featured_area .agency_featured_item {
    margin-top: 130px;
}
.agency_featured_area img.attachment-full.size-full {
    width: auto;
    height: auto;
    max-width: 100%;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.agency_featured_area .agency_featured_item .agency_featured_content {
    position: relative;
    padding-right: 70px;
    padding-left: 70px;
}
.agency_featured_area .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: rgba(255, 161, 39, 0.161);
    display: block;
    position: absolute;
    left: -9px;
    top: 15px;
    z-index: 1;
}
.agency_featured_area .dot .dot1 {
    position: absolute;
    left: 50%;
    margin-top: -4px;
    margin-left: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #feb85d;
}
.agency_featured_area .dot .dot2 {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(254, 184, 93, 0.8);
    -webkit-animation: pulsate 3s infinite;
    animation: pulsate 3s infinite;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    will-change: transform;
}
.agency_featured_area img {
    height: auto;
    max-width: 100%;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.agency_featured_area .agency_featured_item .agency_featured_content h3 {
    font-weight: 500;
    font-size: 26px;
    line-height: 36px;
    color: #222d39;
    margin: 32px 0px 25px;
}
.agency_featured_area .agency_featured_item .agency_featured_content p {
    font-size: 15px;
}
.agency_featured_area .agency_featured_item .agency_featured_content .icon-step {
    width: 46px;
    height: 46px;
    line-height: 46px;
    border-radius: 50%;
    background-color: #5e2ced;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(94, 44, 237, 0.2);
    box-shadow: 0px 10px 20px 0px rgba(94, 44, 237, 0.2);
    font-size: 20px;
    color: #fff;
    display: inline-block;
    text-align: center;
}
.agency_featured_area .agency_featured_item.agency_featured_item_two .agency_featured_content .dot {
    left: 46px;
}
.agency_featured_area .dot.middle_dot.middle_dot4 {
    top: 101%;
}
.agency_featured_area .dot.middle_dot {
    left: 56%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
    top: auto;
}
.agency_featured_area .flex-row-reverse{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: row-reverse!important;
    flex-direction: row-reverse!important;
}
@-webkit-keyframes pulsate {
    0%{
        opacity:1;
        -webkit-transform:translate(-50%, -50%) scale(0.5);
        transform:translate(-50%, -50%) scale(0.5);
    }
    100%{
        opacity:0;
        -webkit-transform:translate(-50%, -50%) scale(4);
        transform:translate(-50%, -50%) scale(4);
    }
}
@keyframes pulsate {
    0%{
        opacity:1;
        -webkit-transform:translate(-50%, -50%) scale(0.5);
        transform:translate(-50%, -50%) scale(0.5);
    }
    100%{
        opacity:0;
        -webkit-transform:translate(-50%, -50%) scale(4);
        transform:translate(-50%, -50%) scale(4);
    }
}

.process-section-4-wrapper{
    background-size: cover !important;
    background-repeat: no-repeat !important;
    padding: 120px 0;
    color:#fff;
}
.process-section-4-wrapper .item {
    position: relative;
    z-index: 4;
}
.process-section-4-wrapper .item.odd {
    margin-top: 50px;
}
.process-section-4-wrapper .item img {
    position: absolute;
    width: 70%;
    right: -40%;
    top: 15px;
    opacity: .5;
}
.process-section-4-wrapper .item img.tobotm {
    -webkit-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.process-section-4-wrapper .item .process-icon-wrapper {
    color: #2576FD;
    font-size: 30px;
    width: 80px;
    height: 80px;
    line-height: 85px;
    border-radius: 50%;
    border: 1px dashed #eee;
    margin: auto;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.process-section-4-wrapper .item .cont {
    padding: 50px 30px;
    background-color: #fff;
    -webkit-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
    z-index: 3;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.process-section-4-wrapper .item .cont:hover {
    background-color: #1A237E;
}
.process-section-4-wrapper .item .cont:hover h6 {
    color: #fff;
}
.process-section-4-wrapper .item .cont:hover p {
    color: #eee;
}
.process-section-4-wrapper .item h3 {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    color: #777;
    font-size: 50px;
    font-weight: bold;
    opacity: .1;
    z-index: -1;
}
.process-section-4-wrapper .item h6 {
    color: #222;
    font-size: 16px;
    margin-bottom: 15px;
}
.process-section-4-wrapper .item p {
    font-size: 14px;
    color: #999;
}
/*Step By Step 1 End*/
/*Content 3 Style*/
.content-block-3 .title{
    margin: 10px 0 15px 0 !important;
}
.content-block-3 p {
    font-size: 1.14em;
}
/*Content 3 Style END*/
/*Intro Deault Style*/
.wrap .intro-2{
    background-size: cover;
    padding-top: 150px;
    padding-bottom: 150px;
    overflow: hidden;
    z-index: 1;
}
.wrap .intro-2 .button-intro-wrapper .btn{
    padding: 23px 35px;
    margin-right:1rem;
}
.wrap .intro-2 .btn i{
    line-height: 1.3 !important;
}
.wrap .intro-2 .giant-title{
    font-size: 110px;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 70px;
}
.wrap .intro-2 .slogan p {
    margin: 50px 0 0 0;
    opacity: 0.7;
}
.wrap .intro-2 .slogan{
    margin-bottom: 2rem;
}
.intor-3{
    padding-bottom: 150px;
    padding-top: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}
.giant-title {
    font-size: 110px;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 70px;
}
.giant-title strong{
    font-weight: 900;
    letter-spacing: -6px;
    font-size: 1.2em;
}
/*Intro 2 Deault Style End*/
/**Number Input Style*/
* {
    box-sizing: border-box;
}

.input-number {
    width: 60px;
    padding: 0 7px;
    vertical-align: top;
    text-align: center;
    outline: none;
}

.input-number,
.input-number-decrement,
.input-number-increment {
    border: 1px solid #ccc;
    height: 38px;
    user-select: none;
}

.input-number-decrement,
.input-number-increment {
    display: inline-block;
    width: 25px;
    line-height: 33px;
    background: #f1f1f1;
    color: #444;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active {
    background: #2196f3;
    color: #9f9f9f;
}

.input-number-decrement {
    border-right: none;
    border-radius: 4px 0 0 4px;
}

.input-number-increment {
    border-left: none;
    border-radius: 0 4px 4px 0;
}
/**padding view*/
.padding-view,.radius-view,.shadow-view,.border-view,.text-shadow-view,.background-image-view{
    border: 1px dashed #8ab7ec;
    background: #d5e8ff;
    width: 100px;
    margin: auto;
    transition: all 0.5s;
}
.background-image-view{
    height: 100px;
    margin: auto;
    display: flex;
    margin-top: 2rem;
    position: relative;
    background-size:100% !important;
}
.background-image-view:empty:after{
    content: "NO Image";
    position: absolute;
    width: 100%;
    height: 100%;
    color: #898989;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    font-size: 1.2em;
}
.fixed-switch {
    float: right;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin-top: 2rem;
    margin-bottom: 2rem;
    justify-content: center;
}
/*.rounded-switch{
    margin-top:1rem;
}*/
.rounded-switch span{
    padding-left: 0;
}
.radius-view{
    overflow: hidden;
    padding:1rem;
}
.text-shadow-view{
    font-size: 2rem;
    padding: 1rem 0rem;
    width: 150px;
    text-align: center;
    line-height: 1;
    overflow: hidden;
}
.border-view{
    border-width: 0;
    border-style:none;
    border-color: transparent;
}
.padding-view img,.radius-view img,.shadow-view img,.border-view img{
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    padding: 4px 3px;
    vertical-align: middle;
    border: 0;
}
.w-percent-100{
    width:100%;
}
.padding-detail{
    display: none;
}
.padding-detail.active{
    display: block;
}
.padding-box{
    display: block;
}
.padding-box.deactive{
    display: none;
}
.border-detail{
    display: none;
}
.border-detail.active{
    display: block;
}
.border-box{
    display: block;
}
.border-box.deactive{
    display: none;
}
.radius-detail{
    display: none;
}
.radius-detail.active{
    display: block;
}
.radius-box{
    display: block;
}
.radius-box.deactive{
    display: none;
}

.editor-feature-wrapper{
    padding: 0 1rem;
    border-radius: 0;
}
.editor-feature-wrapper .form-control{
    background: #F6F7F9;
    color: #748194;
    height: 2.3rem !important;
    border: none;
    font-size: .9rem;
}
.cus-bt-gr button {
    font-size: 13px;
    padding: 11px 10px 11px;
    color: #748194;
}
.cus-bt-gr-align button {
    font-size: 13px;
    padding: 9px 14px 7px;
    color: #748194;
}
.cus-bt-gr-align button.active,.cus-bt-gr button.active{
    color:#fff;
}
.mini-slid-num .range-slider__value{
    width:40px !important;
}
.mini-slid-num .range-slider__range{
    width: calc(100% - 48px) !important;
    height: 6px  !important;
}
.editor-feature-wrapper .minicolors-input-swatch{
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 2.3rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    border-color: #f6f7f9  !important;
}
.editor-feature-wrapper .minicolors-swatches li{
    margin: 0.1rem !important;
    border: none;
    border-radius: 2px;
    width: calc(100% / 5.6) !important;
}
.cat-fu-sl-wrap{
    background-color: #fff;
    border: 1px solid #efefef;
    box-shadow: 0 2px 13px rgba(0,0,0,.03), 0 1px 3px rgba(0,0,0,.02);
    padding:0 1rem;
    height:56px;
    transition: all 0.5s;
    overflow: hidden;
}
.cat-fu-sl-wrap.active{
    height:auto;
    overflow: visible;
}
.cat-fu-sl-wrap.active .cat-header-wrap{
    border-bottom: 1px solid #e9e9e9;
}
.cat-header-wrap{
    padding: 15px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sub-cat-wrap.non-t-border{
    border-top: none;
}

.cat-header-wrap .h-sub{
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.2em;

}
.cat-header-wrap i.fa-chevron-right{
    font-size:.9em;
    transition: all 0.3s;
    position: relative;
}
.cat-header-wrap i.active{
    transform: rotate(90deg);
    top: 2px;
}

.sub-cat-wrap{
    height:56px;
    transition: all 0.5s;
    overflow: hidden;
    border-top: 1px solid #e9e9e9;

}
.sub-cat-wrap.active{
    height:auto;
    overflow: visible;
}
.sw-wrap{
    display: none;
}
.sub-cat-wrap.active .sw-wrap{
    display: block;
}
.cat-fu-sl-wrap.active .sw-wrap{
    display: block;
}
.sub-cat-wrap .cat-header-wrap{
    border-bottom:none !important;
}
.sub-cat-wrap.active .cat-header-wrap{
    border-bottom: 1px solid #e9e9e9 !important;
}
span.seprator-fu-between {
    width: 100%;
    height: 40px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
}
span.seprator-fu-between i{
    background-color: #f9f9f9;
    font-size: 1.2em;
    position: relative;
    z-index: 10;
    padding: 3px 6px;
    border: 2px dashed #e4e4e4;
    border-radius: 5px;
    color: #2196f3;
    opacity: 0;
    transition: all 0.5s;
    cursor: pointer;
}
span.seprator-fu-between:hover i{
    opacity: 1;
}
span.seprator-fu-between:after{
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    border-left: 2px dashed #d8d8d8;
}
.icon-dropdown-fu:after{
    float: right;
    margin-top: 10px;
}
ul.social-list.horizontal-list {
    display: grid !important;
}
ul.social-list.horizontal-list li {
    margin-bottom: 15px !important;
}
.social-list-wrapper button{
    margin-top:4px;
}
.d-flex{
    display:flex;
}
.d-flex-j-around{
    display: flex;
    justify-content: space-around;
}
.d-flex-self-start{
    align-self: flex-start;
}
.d-align-start{
    display:flex;
    align-items: flex-start !important;
}
.d-align-center{
    display:flex;
    align-items:center;
}
.d-flex-column-between-a-center{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}
.d-flex-column-between-a-center-end{
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
}
.d-flex-aligns-start{
    display:flex;
    align-items: flex-start !important;
}
.d-flex-justify-start{
    display:flex;
    justify-content: flex-start !important;
}
.d-flex-btn-group{
    display:flex;
    justify-content: flex-end;
}
.d-flex-col-reverse{
    display:flex;
    flex-direction: column-reverse;
}
.d-flex-wrap{
    display: flex;
    flex-wrap: wrap;
}
.ws-break{
    white-space: break-spaces !important;
}
.link-controller-wrapper{
    padding-top: 1rem;
}
.icon-preview{
    font-size: 40px;
}
.bg-remove-btn{
    margin-left: 2.6rem;
    margin-top: 1rem;
}
.cropper-thumbnail{
    background-color: transparent;
    border: none;
    max-height: 100%;
    max-width: 100%;
}
.x-1 {
    font-size: 10px;
}

.x-2 {
    font-size: 20px;
}

.x-3 {
    font-size: 30px;
}

.x-4 {
    font-size: 40px;
}

.x-5 {
    font-size: 50px;
}

.x-6 {
    font-size: 60px;
}

/*Modal X larg*/
@media (min-width:992px){
    .modal-xl{
        max-width:800px
    }
}
@media (min-width:1200px){
    .modal-xl{
        max-width:1140px
    }
}


/*gradiant picker*/
.grp-wrapper{
    background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==")
}
.grp-preview{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    cursor:crosshair
}
.grp-handler{
    z-index: 100;
    width:4px;
    margin-left:-2px;
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    height:100%
}
.grp-handler-close{
    line-height: 14px;
    font-size: 19px;
    color:rgba(0,0,0,0.4);
    border-radius:100%;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
    background-color:#fff;
    text-align:center;
    width:15px;
    height:15px;
    margin-left:-5px;
    line-height:10px;
    font-size:21px;
    cursor:pointer
}
.grp-handler-close-c{
    position:absolute;
    top:-17px
}
.grp-handler-drag{
    background-color:rgba(0,0,0,0.5);
    cursor:col-resize;
    width:100%;
    height:100%
}
.grp-handler-selected .grp-handler-drag{
    background-color:rgba(255,255,255,0.5)
}
.grp-handler-cp-c{
    display:none
}
.grp-handler-selected .grp-handler-cp-c{
    display:block
}
.grp-handler-cp-wrap{
    width:15px;
    height:15px;
    margin-left:-8px;
    border:3px solid #fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.25);
    overflow:hidden;
    border-radius:100%;
    cursor:pointer
}
.grp-handler-cp-wrap input[type=color]{
    opacity:0;
    cursor:pointer
}
.grapick-cont {
    padding: 25px 15px;
    width: 100%;
    height: auto;
    padding-bottom: 0;
}
.background-image-controller-wrapper,.bg-color-controller-wrapper,.gradiant-controller-wrapper,.gradiant-list-controller-wrapper,.video-background-controller-wrapper{
    /*    display: none; */
}
.background-image-controller-wrapper.active,.bg-color-controller-wrapper.active,.gradiant-controller-wrapper.active,.gradiant-list-controller-wrapper.active,.video-background-controller-wrapper.active{
    /*    display: block;*/
}

.grp-preview {
    border-radius: 3px;
}
/*gradiant picker END*/
/***
Spectrum Colorpicker v1.8.0
https://github.com/bgrins/spectrum
Author: Brian Grinstead
License: MIT
***/

.sp-container {
    position:absolute;
    top:0;
    left:0;
    display:inline-block;
    *display: inline;
    *zoom: 1;
    /* https://github.com/bgrins/spectrum/issues/40 */
    z-index: 9999994;
    overflow: hidden;
}
.sp-container.sp-flat {
    position: relative;
}

/* Fix for * { box-sizing: border-box; } */
.sp-container,
.sp-container * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
.sp-top {
    position:relative;
    width: 100%;
    display:inline-block;
}
.sp-top-inner {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;
}
.sp-hue {
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:84%;
    height: 100%;
}

.sp-clear-enabled .sp-hue {
    top:33px;
    height: 77.5%;
}

.sp-fill {
    padding-top: 80%;
}
.sp-sat, .sp-val {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.sp-alpha-enabled .sp-top {
    margin-bottom: 18px;
}
.sp-alpha-enabled .sp-alpha {
    display: block;
}
.sp-alpha-handle {
    position:absolute;
    top:-4px;
    bottom: -4px;
    width: 6px;
    left: 50%;
    cursor: pointer;
    border: 1px solid black;
    background: white;
    opacity: .8;
}
.sp-alpha {
    display: none;
    position: absolute;
    bottom: -14px;
    right: 0;
    left: 0;
    height: 8px;
}
.sp-alpha-inner {
    border: solid 1px #333;
}

.sp-clear {
    display: none;
}

.sp-clear.sp-clear-display {
    background-position: center;
}

.sp-clear-enabled .sp-clear {
    display: block;
    position:absolute;
    top:0px;
    right:0;
    bottom:0;
    left:84%;
    height: 28px;
}

/* Don't allow text selection */
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
    -webkit-user-select:none;
    -moz-user-select: -moz-none;
    -o-user-select:none;
    user-select: none;
}

.sp-container.sp-input-disabled .sp-input-container {
    display: none;
}
.sp-container.sp-buttons-disabled .sp-button-container {
    display: none;
}
.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
    display: none;
}
.sp-palette-only .sp-picker-container {
    display: none;
}
.sp-palette-disabled .sp-palette-container {
    display: none;
}

.sp-initial-disabled .sp-initial {
    display: none;
}
.button-icon-wrapper{
    /*display: none;*/
}

/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
.sp-sat {
    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
}
.sp-val {
    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
}

.sp-hue {
    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

/* IE filters do not support multiple color stops.
   Generate 6 divs, line them up, and do two color gradients for each.
   Yes, really.
*/
.sp-1 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
}
.sp-2 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
}
.sp-3 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
}
.sp-4 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
}
.sp-5 {
    height:16%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
}
.sp-6 {
    height:17%;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
}

.sp-hidden {
    display: none !important;
}

/* Clearfix hack */
.sp-cf:before, .sp-cf:after {
    content: "";
    display: table;
}
.sp-cf:after {
    clear: both;
}
.sp-cf {
    *zoom: 1;
}

/* Mobile devices, make hue slider bigger so it is easier to slide */
@media (max-device-width: 480px) {
    .sp-color {
        right: 40%;
    }
    .sp-hue {
        left: 63%;
    }
    .sp-fill {
        padding-top: 60%;
    }
}
.sp-dragger {
    border-radius: 5px;
    height: 5px;
    width: 5px;
    border: 1px solid #fff;
    background: #000;
    cursor: pointer;
    position:absolute;
    top:0;
    left: 0;
}
.sp-slider {
    position: absolute;
    top:0;
    cursor:pointer;
    height: 3px;
    left: -1px;
    right: -1px;
    border: 1px solid #000;
    background: white;
    opacity: .8;
}

/*
Theme authors:
Here are the basic themeable display options (colors, fonts, global widths).
See http://bgrins.github.io/spectrum/themes/ for instructions.
*/

.sp-container {
    border-radius: 0;
    background-color: #ECECEC;
    border: solid 1px #f0c49B;
    padding: 0;
}
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
.sp-top {
    margin-bottom: 3px;
}
.sp-color, .sp-hue, .sp-clear {
    border: solid 1px #666;
}

/* Input */
.sp-input-container {
    float:right;
    width: 100px;
    margin-bottom: 4px;
}
.sp-initial-disabled  .sp-input-container {
    width: 100%;
}
.sp-input {
    font-size: 12px !important;
    border: 1px inset;
    padding: 4px 5px;
    margin: 0;
    width: 100%;
    background:transparent;
    border-radius: 3px;
    color: #222;
}
.sp-input:focus  {
    border: 1px solid orange;
}
.sp-input.sp-validation-error {
    border: 1px solid red;
    background: #fdd;
}
.sp-picker-container , .sp-palette-container {
    float:left;
    position: relative;
    padding: 10px;
    padding-bottom: 300px;
    margin-bottom: -290px;
}
.sp-picker-container {
    width: 172px;
    border-left: solid 1px #fff;
}

/* Palettes */
.sp-palette-container {
    border-right: solid 1px #ccc;
}

.sp-palette-only .sp-palette-container {
    border: 0;
}

.sp-palette .sp-thumb-el {
    display: block;
    position:relative;
    float:left;
    width: 24px;
    height: 15px;
    margin: 3px;
    cursor: pointer;
    border:solid 2px transparent;
}
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
    border-color: orange;
}
.sp-thumb-el {
    position:relative;
}

/* Initial */
.sp-initial {
    float: left;
    border: solid 1px #333;
}
.sp-initial span {
    width: 30px;
    height: 25px;
    border:none;
    display:block;
    float:left;
    margin:0;
}

.sp-initial .sp-clear-display {
    background-position: center;
}

/* Buttons */
.sp-palette-button-container,
.sp-button-container {
    float: right;
}

/* Replacer (the little preview div that shows up instead of the <input>) */
.sp-replacer {
    margin:0;
    cursor:pointer;
    padding: 4px;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    border: none;
    background:transparent;
    color: #333;
    vertical-align: middle;
    margin-left: -11px;
}
.sp-replacer:hover, .sp-replacer.sp-active {
    color: #111;
}
.sp-replacer.sp-disabled {
    cursor:default;
    border-color: silver;
    color: silver;
}
.sp-dd {
    padding: 2px 0;
    height: 16px;
    line-height: 16px;
    float:left;
    font-size:10px;
    display: none;
}
.sp-preview {
    position:relative;
    width:20px;
    height: 20px;
    border: 3px solid #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    border-radius: 100%;
    margin-right: 5px;
    float:left;
    z-index: 0;
}

.sp-palette {
    *width: 220px;
    max-width: 220px;
}
.sp-palette .sp-thumb-el {
    width:16px;
    height: 16px;
    margin:2px 1px;
    border: solid 1px #d0d0d0;
}

.sp-container {
    padding-bottom:0;
}


/* Buttons: http://hellohappy.org/css3-buttons/ */
.sp-container button {
    background-color: #eeeeee;
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
    background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
    border: 1px solid #ccc;
    border-bottom: 1px solid #bbb;
    border-radius: 3px;
    color: #333;
    font-size: 14px;
    line-height: 1;
    padding: 5px 4px;
    text-align: center;
    text-shadow: 0 1px 0 #eee;
    vertical-align: middle;
}
.sp-container button:hover {
    background-color: #dddddd;
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
    cursor: pointer;
    text-shadow: 0 1px 0 #ddd;
}
.sp-container button:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}
.sp-cancel {
    font-size: 11px;
    color: #d93f3f !important;
    margin:0;
    padding:2px;
    margin-right: 5px;
    vertical-align: middle;
    text-decoration:none;

}
.sp-cancel:hover {
    color: #d93f3f !important;
    text-decoration: underline;
}


.sp-palette span:hover, .sp-palette span.sp-thumb-active {
    border-color: #000;
}

.sp-preview, .sp-alpha, .sp-thumb-el {
    position:relative;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
}
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
    display:block;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;

}
.sp-preview-inner{
    border-radius: 100%;
}

.sp-palette .sp-thumb-inner {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display {
    background-repeat:no-repeat;
    background-position: center;
    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
}

/*Color Picker End**/
.gradiant-list .dropdown-toggle::after{
    display: none;
}
/*portfolio-1*/
.portfolio-1-wrapper{
    background-color: #f0f0f0;
    padding-top: 150px;
    padding-bottom: 150px;
}
.portfolio-1-wrapper .post{
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.portfolio-1-wrapper .post .post-media{
    padding: 5px 5px 0px;
}
.portfolio-1-wrapper .post .post-content{
    position: relative;
    padding: 25px;
    padding-bottom: 20px;
}
.portfolio-1-wrapper .post .post-content h4:first-child{
    margin-top: 0;
}
.portfolio-1-wrapper .post .post-content .price-circle {
    position: absolute;
    right: -10px;
    top: 50%;
    margin-top: -40px;
    color: rgb(255, 255, 255);
    text-align: center;
    height: 80px;
    width: 80px;
    font-size: 20px;
    line-height: 1;
    background: #e91f63;
    border-radius: 50%;
    padding: 0 5px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.portfolio-1-wrapper .post .post-content p:last-child {
    margin-bottom: 0px;
}
.portfolio-1-wrapper .post .post-content .btn{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
}
/*portfolio-1 END*/
.img-uload-previw{
    width: 70px;
    height: 50px;
    margin-right: 1rem;
    border-radius: 8px 0 0;
}
.slider-image-list{
    margin:0;
    padding:0;
    list-style: none;
}
.slider-image-list li{
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 0;
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
    height: 50px;
    overflow: hidden;
    transition: all 0.5s;
}
.slider-image-list li.button-row {
    background-color: transparent;
    border-radius: 0;
    height: 28px;
    margin-bottom: 0;
}
/*.slider-image-list li.active{
    height: 260px;
    transition: all 0.5s;
}*/
.slider-image-list li.active-one{
    height: 205px !important;
    transition: all 0.5s;
}
.slider-image-list li.active-sec{
    height: 152px !important;
    transition: all 0.5s;
}
.slider-image-list li.active .slider-edit-first-row{
    /*    border-bottom: 1px solid #e6e6e6;*/
}
.slider-image-list li .slider-edit-first-row {
    width: 100%;
    float: left;
}
.slider-image-list .content-title{
    float: left;
    width: 40%;
    margin-top: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slider-image-list.onlytext .content-title{
    width: 60%;
    padding-left: 1rem;
}
.slider-text-list .content-title{
    float: left;
    width: 70%;
    margin-top: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-left: 20px;
    padding-bottom: 15px;
}
.slider-text-list li.active{
    height: 205px;
    transition: all 0.5s;
}
.slider-text-list li.active .fa-edit{
    color:#1f1f1f !important;
}
.slider-text-list li.active-one{
    height: 155px !important;
    transition: all 0.5s;
}
.slider-text-list li.active-one .fa-edit{
    color: grey;
}
.slider-text-list li.active-sec{
    height: 51px !important;
    transition: all 0.5s;
}
.slider-image-list li .slider-edit-secound-row{
    width: 100%;
    float: left;
    margin-top: 5px;
}
.slider-image-list li i.fa-trash,.slider-image-list li i.fa-edit  {
    float: right;
    font-size: 1.7em;
    margin-top: 14px;
    margin-right: 15px;
    cursor: pointer;
}
.slider-image-list li i.fa-edit{
    margin-top: 16px;
}
.carousel-control.deactive{
    display: none;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50%/100% 100%;
}
.alt-image-wrapper {
    margin-top: 6px;
}

.alt-image-wrapper input{
    float: left;
    margin-right: 5px;
}
.wrap .btn i {
    margin-left: 1rem;
}
.drag-helper{
    height: 100px;
    width: 300px;
    background: #fafafa;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.15);
    text-align: center;
    line-height: 100px;
    font-size: 28px;
    color: #00baff;

}
/*benefits-1 Style*/
.benefits-1-wrapper{
    padding-top: 150px;
    padding-bottom: 150px;
    background-color: #252830;
    color: #fff;

}
.benefits-1-wrapper p{
    font-size: 16px;
    font-weight: lighter;
    line-height: 1.5;
}
.benefits-1-wrapper .screen {

    margin-top: 0;
}
.benefits-1-wrapper ul{
    margin:0;
    padding:0;
    list-style: none;
    margin-top: 2rem;
}
.benefits-1-wrapper .item-list-right li {
    padding: 0 75px 60px 45px;
    text-align: right;
}
.benefits-1-wrapper  .item-list-left li {
    padding: 0 45px 60px 75px;
    text-align: left;
}
.benefits-1-wrapper .item-list-right li,.benefits-1-wrapper .item-list-left li {
    position: relative;
}
.benefits-1-wrapper .item-list-right li i,.benefits-1-wrapper .item-list-left li i {
    font-size: 48px;
    position: absolute;
    display: inline-block;
    top: 0;
    color: #00c0ff;
}
.benefits-1-wrapper .item-list-right li i{
    right: 0;
}
.benefits-1-wrapper .item-list-left li i{
    left: 0;
}
.benefits-1-wrapper .item-list-right h3,.benefits-1-wrapper .item-list-left h3 {
    margin: 0 0 25px 0;
}
.benefits-1-wrapper .item-list-right p,.benefits-1-wrapper .item-list-left p {
    opacity: 0.8;
}
.benefits-1-wrapper .item-list-right li:last-child,
.benefits-1-wrapper .item-list-left li:last-child  {
    padding-bottom: 0 !important;
}
/*Benefit 2 style*/
.benefits-collapse-right-2{
    padding-top: 150px;
    padding-bottom: 150px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color:#fff;
}
.benefits-collapse-right-2 .panel i{
    margin-right:10px;
    font-size: 23px;
}
.benefits-collapse-right-2 .title{
    margin: 0 0 60px 0;
    font-size: 45px;
}
.benefits-collapse-right-2 p{
    font-size: 16px;
}
.benefits-collapse-right-2 .panel{
    background-color: #202229;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.benefits-collapse-right-2 .panel a.panel-heading{
    border-color: rgba(255, 255, 255, 0.2);
    display: block;
    position: relative;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    font-weight: bold;
    padding: 20px 60px 20px 25px;
    color: #00c0ff;
    text-align: left;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}
.benefits-collapse-right-2 a.panel-heading.collapsed:after {
    top: 25px;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
a.panel-heading:after {
    content: "";
    display: block;
    position: absolute;
    top: 31px;
    right: 25px;
    height: 10px;
    width: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: all 0.5s;
}
.benefits-collapse-right-2 .panel .panel-body{
    padding: 40px;
}
/*benefits-1 Style END*/
/*Navigation 1 Style*/
.nav-1-wrapper{
    background-color: #252830;
    border-radius: 0;
}
@media (max-width: 767px) {
    .navbar-toggleable-sm {
        clear: both;
    }
}
/*Navigation 1 Style END*/
.dosenot-find-icon{
    /*    display: none;*/
    border: 1px solid #8b8b8b;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    font-size: 17px;
    background-color: darkgray;
    font-weight: bold;
    text-transform: uppercase;
    color: #cdcdcd;
    margin: 0 1rem 20px;
}
.dosenot-find-icon p {
    font-size: 13px;
    color: #fff;
    margin-bottom: 0;
    text-transform: lowercase;
}
nav .info-header {
    font-size: 20px;
    line-height: 60px;
    float: right;
}
nav .info-header > div{
    float: left;
    margin-right: 10px;
}
nav .info-header > div span{
    font-weight: bold;
}
.nav-4-wrapper li{
    display: inline-block;
    padding-top: 5px;
}
.nav-4-wrapper li a{
    display: block;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    text-decoration: none;
    outline: none;
    background: inherit;
    color:#fff;
}
.nav-4-wrapper .navbar-toggler{
    z-index: 100000;
    position: relative;
    margin: auto;
    float: none !important;
    display: flex;
    justify-items: center;
    color: #fff;
    padding-top: 1rem;
}

.nav-4-wrapper .in li,.nav-4-wrapper .collapsing li{
    text-align: center;
    width: 100%;
}
/*Download Section Style */
.download-1-center-app{
    background-color: #00c0ff;
    padding-bottom: 150px;
    padding-top: 150px;
    color:#fff;
}
.download-4-section .contain-bg img{
    max-height: 75%;
    max-width: 69%;
    margin-top: 6rem;
}
.download-4-section .btn{
    color: #fff !important;
    font-size: 1rem;
    font-weight: bold;
}
.download-4-section .btn i{
    margin-left: 0 !important;
}
/*.download-1-center-app .sep-bottom {
    margin-bottom: 60px;
}*/

.download-1-center-app .btn i{
    margin-left:0;
}
.big-title {
    font-size: 70px;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 70px;
    margin-top: 2rem;
}
.big-title strong {
    font-weight: 900;
    font-size: 1.3em;
    letter-spacing: -4px;
}
.icon-wrapper i{
    font-size:7em;
}
.download-1-center-app .download-btn{
    display: inline-block;
    position: relative;
    border-radius: 5px;
    background: #000;
    color: #fff;
    overflow: hidden;
    text-align: left;
    padding: 15px 25px 12px 25px;
    font-size: 13px;
    line-height: 1.1;
    vertical-align: middle;
    margin-bottom: 2px;
    margin-top: 2px;
    transition: all 0.5s;
}
.download-1-center-app .download-btn:hover {
    background-color: #333;
}
.download-btn i {
    font-size: 40px;
    position: relative;
    float: left;
}
.download-btn span {
    float: left;
    margin-left: 15px;
}
.download-btn b {
    display: block;
    padding-top: 4px;
    font-size: 25px;
    font-weight: lighter;
    white-space: nowrap;
}
.download-2-center-app{
    padding-bottom: 150px;
    padding-top: 150px;
    color:#fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.download-2-center-app .btn i{
    margin-left:0;
}
.download-2-center-app .btn{
    padding:24px 40px;
}
.download-3-center-app{
    padding-bottom: 150px;
    padding-top: 150px;
    color: #222;
    border-bottom: 1px solid #e8e8e8;
}
.sep-bottom {
    margin-bottom: 60px;
}
.download-3-center-app .marker-arrow-up {
    display: inline-block;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 125px;
}
/*Download Section Style End*/
/*footer Style*/
.footer-2{
    padding-bottom: 80px;
    padding-top: 80px;
}
.footer-2 img.logo {
    float: left;
    margin: 0 20px 0 0;
}
.footer-2 .footer-logo-container{
    width: 45px;
    float: left;
    padding-right: 6px;
}
.footer-2 .footer-logo-container img{
    border-radius: 8px;
}
.footer-list-subscribe{
    padding-top: 80px;
    padding-bottom: 80px;
    color:#fff;
}
.footer-list-subscribe h4{
    font-size: 20px;
    margin-bottom: 1rem;
}
.footer-list-subscribe .links-list{
    margin:0;
    padding: 0;
    list-style: none;
}
.footer-list-subscribe .links-list li{
    font-size: 14px;
    padding-bottom: 10px;
}
.footer-list-subscribe form.line-form{
    border:none;
}
.footer-list-subscribe form.line-form .form-control {
    background: #fff;
    padding: 20px 25px;
    border-right: none;
    border-left: none;
}
.footer-list-subscribe form.line-form > div:first-child .form-control {
    border-radius: 3px 0 0 3px;
    border-left: 1px solid #eee;
}
.footer-list-subscribe form.line-form button{
    border: 1px solid #eee;
    height: 62px;
    font-size: inherit;
    line-height: 24px;
    padding: 20px 25px;
    border-radius: 0 3px 3px 0;
    border-left: none;
    margin: 0;
    background-color: #fff;
    color: #00c0ff;
}
.footer-list-subscribe form.line-form button i {
    font-size: 24px;
    margin-right:auto;
    margin-left: auto;
}
.footer-list-subscribe .footer-logo-container{
    width: 50px;
}
/*footer Style END*/
/*Step By Step 2*/
.steps-left
{
    padding-top: 150px;
    padding-bottom: 150px;
    font-size: 17px;
}
.steps-left ul.step-left-block {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.steps-left ul.step-left-block li {
    padding-left: 150px;
    padding-bottom: 70px;
    position: relative;
    overflow: hidden;
}
.steps-left h1{
    margin: 0 0 30px 0;
}
.steps-left ul.step-left-block li:before {
    content: "";
    position: absolute;
    display: block;
    top: 100px;
    left: 50%;
    bottom: 0;
    width: 1px;
    background: #00c0ff;
}
.steps-left ul.step-left-block li:before {
    left: 50px;
}
.steps-left ul.step-left-block li:after {
    content: "";
    display: block;
    clear: both;
}
.steps-left ul.step-left-block li .step-num {
    position: absolute;
    height: 100px;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    top: 0;
    border: 1px solid #00c0ff;
    border-radius: 50%;
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-align: center;
    line-height: 100px;
    overflow: hidden;
    font-size: 50px;
    font-weight: lighter;
    color: #00c0ff;
}
.steps-left ul.step-left-block li .step-num {
    left: 0;
    margin-left: 0;
}
.steps-left ul.step-left-block li .step-img {
    float: left;
    width: 40%;
    margin-right: 8%;
}
.steps-left ul.step-left-block li .step-text {
    width: 50%;
    float: left;
}
.steps-left ul.step-left-block li .step-text .title{
    margin:0 0 30px 0;
}
.steps-left ul.step-left-block li:last-child {
    padding-bottom: 0;
}
.steps-left ul.step-left-block li:last-child:before{
    display:none;
}

/*Step By Step 2 END*/
/*Diagram*/
.diagram-1{
    padding-bottom: 150px;
    padding-top: 150px;
    color:#fff;
}
.diagram-1 .chart {
    background: conic-gradient(#32a6ff 4%, #50df53 0 8%, #ff9c00 0 17%, #fc4848 0 48%, #97bd9e 0 54%, #96588d 0);
    border-radius: 50%;
    width: 100%;
    height: 0;
    padding-top: 100%;
    float: left;
    padding-right: 20px;
    box-shadow: 2px 1px 16px -6px #000;
}

.diagram-1 .key {
    width: 100%;
    float: right;
    list-style: none;
    display: inline-block;
    color: #fff;
    border: 2px solid #3a3f4b;
    padding: 2rem;
    margin-bottom: 0;
}
.diagram-1 .key > li {
    display: flex;
    width: 100%;
    margin-bottom: 12px;
    align-items: center;
}
.diagram-1 .key li:last-child{
    margin-bottom: 0;
}
.diagram-1 .key > li > * {
    display: inline-block;
}
.diagram-1 .key li .red{
    background-color: #dfc1ff;
}
.diagram-1 .key li .gray{
    background-color: #d19cff;
}
.diagram-1 .key li .purple{
    background-color: #b166ff;
}
.diagram-1 .key li .blue{
    background-color: #524167;
}
.diagram-1 .key li .yellow{
    background-color: #97bd9e;
}
.diagram-1 .key li .orange{
    background-color: #96588d;
}
.diagram-1 .percent {
    color: #fff;
    padding: 10px 2px;
    text-shadow: 0 0 1px #000;
    text-align: center;
    width: 55px;
    height: 45px;
    margin: 0 5px;
    border-radius: 12px;
    overflow: hidden;
    float: left;
}
.diagram-1 .choice {
    padding-left: 10px;
    width: 70%;
}
.diagram-1 .key li .percent:first-child{
    border-radius: 12px;
}
.diagram-1 .key li .percent:nth-child(2){
    background-color: #797979;
}
.diagram-controller-wrapper .list-item{
    padding: 8px 16px;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    margin-bottom: 5px;
}
.diagram-controller-wrapper .list-item .list-body div{
    border-radius: 3px;
    margin-left: 4px;
}
.diagram-controller-wrapper .list-item .list-body label{
    padding: 6px 7px;
    position: relative;
    background-color: rgb(120, 130, 140);
}
.diagram-controller-wrapper .list-item .list-body label:after{
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    background-color: inherit;
    left: -4px;
    top: calc(50% - 5px);
    border-radius: 2px;
}
.diagram-controller-wrapper .list-item .list-body strong {
    width: 65%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    float: left;
}
.diagram-bar{
    padding-top: 100px;
    padding-bottom: 100px;
    color: #000;
}
.diagram-3{
    color: #aeaeae;
}
.diagram-3 h3{
    color: #fff;
}
.diagram-3 .sub-title{
    margin-bottom: 1rem;
}
.diagram-bar .diagram.bar ul,.diagram-bar .diagram-horizontal ul{
    border: 1px solid rgba(215, 215, 215, 0.3);
}
.sep-half-bottom {
    margin-bottom: 30px;
}
.diagram.bar ul,.diagram-horizontal ul{
    background-image: url("../../images/pattern-bg5.png");
    background-repeat: repeat;
    background-size: auto;
    background-position: bottom;
    padding: 50px 30px 30px 30px;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: table;
    width: 100%;
    list-style: none;
}
.col-md-6  .diagram.bar ul li {
    width: 20%;
}

.col-md-12 .diagram.bar ul li {
    width: 10%;
}
.col-md-12 ul.key{
    margin-top: 0;
}
.col-md-12 .key > li {
    display: flex;
    width: 50%;
    margin-bottom: 12px;
    align-items: center;
    float: left;
}
.diagram-horizontal ul li{
    position: relative;
    padding-bottom: 5px;
    float: left;
    clear: left;
    width: 100%;
}
.diagram-horizontal ul li span.column{
    margin-left: 0;
    font-size: 11px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
}
.diagram-horizontal ul li span.column span{
    color: #fafafa;
    padding: 2px 5px;
    text-align: right;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;

    transition:all 2s ease;
}
.diagram-horizontal ul li span{
    display: block;
    position: relative;
}
.diagram-horizontal ul li span.name{
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    float: left;
    padding-top: 0;
    bottom: 0;
    margin-right: 10px;
    font-weight: bold;
    background-color: gray;
    margin-top: 10px;
    border-radius: 5px;
    text-align: center;
    padding: 0 6px;
}
.diagram-horizontal ul li span.text{
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    float:left;
    padding-top: 10px;
    bottom: 0;
    padding-right: 10px;
    font-weight: bold;
    text-align: left;
}
.diagram.bar ul li{
    width:20%;
    transition: all 0.5s;
    display: table-cell;
    text-align:center;
    height:100%;
    vertical-align: top;

}
.diagram.bar ul li .column{
    height: 300px;
    font-size: 11px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width:40%;
    margin: 0 5%;
    transition: all 0.5s;
}
.diagram.bar ul li span.text {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 80px;
    margin: auto;
    height: 44px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}
.diagram.bar ul li span{
    display: block;
    position: relative;
    text-align: center;
}
.diagram.bar ul li span.name{
    font-weight: bold;
    padding:10px 2px 0 2px;
}
.diagram.bar ul li .column span{
    color:#fafafa;
    line-height: 25px;
    width:100%;
    display: block;
    position: absolute;
    bottom: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 10px;
    transition: all 0.5s;
}
.flex-item-center{
    display: flex;
    align-items: center;
}
/*Diagram END*/
/*Intro with slider style*/
.intro-slider{
    background-attachment: fixed;
    background-size: cover;
    overflow: hidden;
    z-index: 1;
}
.intro-slider .carousel-control{
    background: transparent !important;
    cursor: pointer;
}
.intro-slider .carousel-control.astac{
    width:auto;
}

.intro-slider .carousel-control .glyphicon{
    font-size: 32px;
}
.intro-slider .container{
    position: static;
}
.carousel,.carousel-inner,.carousel-item{
    height:inherit;
}


.fade-carousel .carousel-inner .carousel-item .carousel-caption {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
    -moz-transition: 2s all ease-in-out .1s;
    -ms-transition: 2s all ease-in-out .1s;
    -o-transition: 2s all ease-in-out .1s;
    transition: 2s all ease-in-out .1s;

}
.fade-carousel .carousel-inner .carousel-item.active .carousel-caption.full-center-def{
    bottom:24%;
}
.fade-carousel .carousel-inner .carousel-item .carousel-caption.full-center-def{
    display: flex;
    align-items: center;
    flex-direction:column;
    left:0;
    right:0;
    padding-top: 30%;
}
.fade-carousel .carousel-inner .carousel-item .carousel-caption.full-center-def h3,
.fade-carousel .carousel-inner .carousel-item .carousel-caption.full-center-def p
{
    text-align: center;
}
.fade-carousel .carousel-inner .carousel-item .carousel-caption.static{
    position: relative;
    left:0;
}
.fade-carousel .carousel-inner .carousel-item.active .carousel-caption {
    opacity: 1;
    bottom: 40%;
    -webkit-transition: 2s all ease-in-out .1s;
    -moz-transition: 2s all ease-in-out .1s;
    -ms-transition: 2s all ease-in-out .1s;
    -o-transition: 2s all ease-in-out .1s;
    transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .carousel-item.active .carousel-caption h3{
    top: 0;
    -webkit-transition: 1s all ease-in-out .1s;
    -moz-transition: 1s all ease-in-out .1s;
    -ms-transition: 1s all ease-in-out .1s;
    -o-transition: 1s all ease-in-out .1s;
    transition: 1s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .carousel-item.active .carousel-caption p{
    top: 0;
    -webkit-transition: 1.5s all ease-in-out .1s;
    -moz-transition: 1.5s all ease-in-out .1s;
    -ms-transition: 1.5s all ease-in-out .1s;
    -o-transition: 1.5s all ease-in-out .1s;
    transition: 1.5s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .carousel-item.active .carousel-caption a{
    opacity: 1;
    -webkit-transition: 3s all ease-in-out .1s;
    -moz-transition: 3s all ease-in-out .1s;
    -ms-transition: 3s all ease-in-out .1s;
    -o-transition: 3s all ease-in-out .1s;
    transition: 3s all ease-in-out .1s;
}
.carousel-caption h3{
    font-size: 4em;
    text-align: left;
    top: 6rem;
    position: relative;
}
.carousel-caption p{
    font-size: 1.6em;
    text-align: left;
    position: relative;
    top: 6rem;
}
.carousel-caption a{
    float:left;
    clear: left;
    opacity: 0;
    position: relative;
    color: #fff;
}
/*Intro with slider style END*/
/*testimonials-slider 1 Style*/
.testimonials-slider{
    background-color: #252830;
    padding-bottom: 150px;
    padding-top: 150px;
    color:#fff;
}
.testimonials-slider .container{
    position: static;
}
.testimonials-slider .carousel-control{
    width: 50%;
    height: 40px;
    bottom: 0;
    background-color: #252830;
    top: auto;
}
.testimonials-slider-left-icon{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 0.5s;
}
.testimonials-slider-left-icon .screen{
    font-size: 28px;
    display: inline-block;
    margin-bottom: 30px;
    max-width: 100%;
    height: auto;
}
.testimonials-slider-left-icon h4{
    line-height: 1.6;
    color: inherit;
    font-size: 28px;
}
.testimonials-slider-left-icon small{
    display: block;
    margin-top: 30px;
    color: inherit;
    opacity: 0.5;
}
.testimonials-section-4{
    padding: 140px 0;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    color:#fff;
}
.testimonials-section-4 .item-box {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.testimonials-section-4 .item-box .quote {
    width: 60px;
    margin: 0 auto 30px;
    opacity: .3;
    display: inline-block;
}
.testimonials-section-4 .item-box p {
    font-size: 14px;
    color: #999;
    font-weight: 300;
    word-spacing: 2px;
}
.testimonials-section-4 .item-box .testimonials-info {
    text-align: left;
    margin: 30px 0 15px;
}
.testimonials-section-4 .item-box .testimonials-info .author-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    float: left;
    overflow: hidden;
}
.testimonials-section-4 .item-box .testimonials-info .cont {
    margin-left: 60px;
}
.testimonials-section-4 .item-box .testimonials-info h6 {
    color: #222;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 3px;
}
.testimonials-section-4 .item-box .testimonials-info span {
    font-size: 12px;
    font-weight: 400;
    color: #777;
}
.testimonials-section-4 .owl-dot span{
    border: none;
    background-color: #fff;
}
.testimonials-section-4 .owl-dot.active span {
    background-color: #1A237E;
}
/*testimonials-slider 1 Style END*/
/*Counter 1 Style*/
.counter{
    /*    padding-bottom: 150px;
        padding-top: 150px;*/
}
.facts-block{
    color:#fff;
}
.facts-block i {
    display: block;
    font-size: 64px;
    padding-bottom: 20px;
    opacity: 0.4;

}
.facts-block h3 {
    font-size: 80px;
    margin: 0 0 10px 0;
    line-height: 1;
}
.facts-block h4 {
    margin: 0;
}
.counter-section-2{
    padding-top: 6rem;
    padding-bottom: 4.5rem;
}
.counter-section-2 .counter-wrapper{
    text-align: center;
}
.counter-section-2 .counter-wrapper .cell {
    width: 8rem;
    margin-right: 2.5rem;
    margin-left: 2.5rem;
    display: inline-block;
}
.counter-section-2 .counter-wrapper .cell .counter-value{
    font-weight: 700;
    font-size: 4.25rem;
    line-height: 4.5rem;
    color: #f1f1f8;
}
.counter-section-2 .counter-wrapper .cell .counter-info{
    margin-bottom: 0;
    color: #00c9db;
    font-weight: 400;
    font-size:  0.875rem;
    line-height: 1.25rem;
    vertical-align: middle;
}
/*Counter 1 Style END*/
/*datepicker*/
/*!
 * Datetimepicker for Bootstrap 3
 * version : 4.17.37
 * https://github.com/Eonasdan/bootstrap-datetimepicker/
 */
.bootstrap-datetimepicker-widget {
    list-style: none;
}
.bootstrap-datetimepicker-widget.dropdown-menu {
    margin: 2px 0;
    padding: 4px;
    width: 19em;
}
@media (min-width: 768px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}
@media (min-width: 992px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}
@media (min-width: 1200px) {
    .bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
        width: 38em;
    }
}
.bootstrap-datetimepicker-widget.dropdown-menu:before,
.bootstrap-datetimepicker-widget.dropdown-menu:after {
    content: '';
    display: inline-block;
    position: absolute;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #cccccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    top: -7px;
    left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    top: -6px;
    left: 8px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #cccccc;
    border-top-color: rgba(0, 0, 0, 0.2);
    bottom: -7px;
    left: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid white;
    bottom: -6px;
    left: 7px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:before {
    left: auto;
    right: 6px;
}
.bootstrap-datetimepicker-widget.dropdown-menu.pull-right:after {
    left: auto;
    right: 7px;
}
.bootstrap-datetimepicker-widget .list-unstyled {
    margin: 0;
}
.bootstrap-datetimepicker-widget a[data-action] {
    padding: 6px 0;
}
.bootstrap-datetimepicker-widget a[data-action]:active {
    box-shadow: none;
}
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    width: 54px;
    font-weight: bold;
    font-size: 1.2em;
    margin: 0;
}
.bootstrap-datetimepicker-widget button[data-action] {
    padding: 6px;
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="incrementMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Increment Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="decrementMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Decrement Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="showHours"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Hours";
}
.bootstrap-datetimepicker-widget .btn[data-action="showMinutes"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Show Minutes";
}
.bootstrap-datetimepicker-widget .btn[data-action="togglePeriod"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle AM/PM";
}
.bootstrap-datetimepicker-widget .btn[data-action="clear"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Clear the picker";
}
.bootstrap-datetimepicker-widget .btn[data-action="today"]::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Set the date to today";
}
.bootstrap-datetimepicker-widget .picker-switch {
    text-align: center;
}
.bootstrap-datetimepicker-widget .picker-switch::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Toggle Date and Time Screens";
}
.bootstrap-datetimepicker-widget .picker-switch td {
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
    line-height: inherit;
}
.bootstrap-datetimepicker-widget .picker-switch td span {
    line-height: 2.5;
    height: 2.5em;
    width: 100%;
}
.bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0;
}
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th {
    text-align: center;
    border-radius: 4px;
}
.bootstrap-datetimepicker-widget table th {
    height: 20px;
    line-height: 20px;
    width: 20px;
}
.bootstrap-datetimepicker-widget table th.picker-switch {
    width: 145px;
}
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
    background: none;
    color: #777777;
    cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table th.prev::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Previous Month";
}
.bootstrap-datetimepicker-widget table th.next::after {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    content: "Next Month";
}
.bootstrap-datetimepicker-widget table thead tr:first-child th {
    cursor: pointer;
}
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: #eeeeee;
}
.bootstrap-datetimepicker-widget table td {
    height: 54px;
    line-height: 54px;
    width: 54px;
}
.bootstrap-datetimepicker-widget table td.cw {
    font-size: .8em;
    height: 20px;
    line-height: 20px;
    color: #777777;
}
.bootstrap-datetimepicker-widget table td.day {
    height: 20px;
    line-height: 20px;
    width: 20px;
}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover {
    background: #eeeeee;
    cursor: pointer;
}
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: #777777;
}
.bootstrap-datetimepicker-widget table td.today {
    position: relative;
}
.bootstrap-datetimepicker-widget table td.today:before {
    content: '';
    display: inline-block;
    border: solid transparent;
    border-width: 0 0 7px 7px;
    border-bottom-color: #337ab7;
    border-top-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 4px;
    right: 4px;
}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #337ab7;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td.active.today:before {
    border-bottom-color: #fff;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    background: none;
    color: #777777;
    cursor: not-allowed;
}
.bootstrap-datetimepicker-widget table td span {
    display: inline-block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    margin: 2px 1.5px;
    cursor: pointer;
    border-radius: 4px;
}
.bootstrap-datetimepicker-widget table td span:hover {
    background: #eeeeee;
}
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #337ab7;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.bootstrap-datetimepicker-widget table td span.old {
    color: #777777;
}
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
    background: none;
    color: #777777;
    cursor: not-allowed;
}
.bootstrap-datetimepicker-widget.usetwentyfour td.hour {
    height: 27px;
    line-height: 27px;
}
.bootstrap-datetimepicker-widget.wider {
    width: 21em;
}
.bootstrap-datetimepicker-widget .datepicker-decades .decade {
    line-height: 1.8em !important;
}
.input-group.date .input-group-addon {
    cursor: pointer;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.input-group.date input{
    width:80%;
}
/*datepicker END*/
/*Coming Soon 1 Style*/
.counter-item-list li span{
    display: block;
    font-size: 4.5rem;
    transition: all 0.5s;
}
.counter-item-list li span.puls{
    opacity: 0.7;
    -webkit-animation: pulse .9s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulse .9s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulse .9s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulse .9s infinite cubic-bezier(0.66, 0, 0, 1);
}
.coming-soon-1-wrapper .counter-item-list{
    padding: 6rem 0;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 18px;
}
.coming-soon-1-wrapper .counter-item-list li{
    background-color: rgb(61, 61, 61);
    color: rgb(255, 255, 255);
    border-radius: 20px;
    text-shadow: rgb(0, 0, 0) 1px 3px 2px;
    box-shadow: 0px 0px 6px -2px #000 inset;
    margin: 0 5px;
    display: inline-block;
    font-size: 1.5em;
    list-style-type: none;
    padding: 1em 1.6rem;
    text-transform: uppercase;
}
.coming-soon-1-wrapper h1.head{
    font-size: 48px;
    margin-bottom: 50px;
    font-weight: bold;
}
.coming-soon-1-wrapper{
    color:#222;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
@-webkit-keyframes pulse {
    to {
        opacity:1;
    }
}
@-moz-keyframes pulse {
    to {
        opacity:1;
    }
}
@-ms-keyframes pulse {
    to {
        opacity:1;
    }
}
@keyframes pulse {
    to {
        opacity:1;
    }
}

.coming-soon-2-wrapper .intro-slider{
    height:100%;
}
.coming-soon-2-wrapper .intro-slider .carousel-inner>.carousel-item>img{
    height:100%;
}
.coming-soon-2-wrapper .coming-soon-1-wrapper{
    padding: 2rem 3rem;
    height: 100%;
}
.coming-soon-2-wrapper .coming-soon-1-wrapper h1.head{
    clear:left;
    font-family: tohma;
    font-style: italic;
    font-weight: bolder;
    margin-top: 15rem;
    text-align: right;
    font-size: 4.5em;
    margin-bottom: 10px;
}
.coming-soon-2-wrapper .coming-soon-1-wrapper p{
    text-align: right;
    font-size: 1.7em;
    font-weight: bold;
    color: #ccc;
    letter-spacing: 1px;
    margin-top: 1rem;
}
.coming-soon-2-wrapper .coming-soon-1-wrapper .counter-item-list{
    padding: 1rem 0;
    background-color: transparent;
    border-radius: 0;
}
.coming-soon-2-wrapper .coming-soon-1-wrapper .counter-item-list li{
    background-color: rgb(255, 255, 255);
    color: rgb(9, 9, 9);
    border-radius: 20px;
    text-shadow: none;
    box-shadow: 1px 2px 6px -1px #e1e1e1;
    margin: 0 8px;
    display: inline-block;
    font-size: 1.1em;
    list-style-type: none;
    padding: 1em 1.3rem;
    text-transform: uppercase;
}
.coming-soon-2-wrapper .facts-block i{
    font-size: unset;
    opacity: 1;
}
.coming-soon-2-wrapper .social-list{
    margin-top: 12rem;
}
/*Coming Soon 1 Style END*/
/*accordion-controller-wrapper*/
.accordion-controller-wrapper ul.accordion-item-list {
    list-style: none;
    width: 100%;
    padding: 0;
    margin:0;
}
.accordion-controller-wrapper ul.accordion-item-list li {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 6px;
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
    transition: all 0.5s;
}
.accordion-controller-wrapper ul.accordion-item-list li.button-row{
    background-color: transparent;
    border-radius: 0;
}
.accordion-controller-wrapper .preview-section {
    width: 100%;
    height: 100%;
}
.accordion-controller-wrapper ul.accordion-item-list li i.fixed-trash,
.accordion-controller-wrapper ul.accordion-item-list li i.fixed-edit {
    float: right;
    font-size: 1.7em;
    margin-top: 9px;
    margin-bottom: 8px;
    margin-right: 15px;
    cursor: pointer;
}
.accordion-controller-wrapper ul.accordion-item-list li i.fixed-edit {
    margin-top: 10px;
}
.accordion-controller-wrapper ul.accordion-item-list .preview-section .left-side-content{
    float: left;
    width: 70%;
    display: inline-block;
    margin-top: 11px;
    margin-left: 11px;
}
.accordion-controller-wrapper ul.accordion-item-list .preview-section .left-side-content i{
    margin-right: 8px;
    font-size: 15px;
    display: inline-block;
    float: left;
    margin-top: 3px;
}
.accordion-controller-wrapper ul.accordion-item-list .preview-section .left-side-content span{
    width: 70%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.accordion-controller-wrapper ul.accordion-item-list .edit-section {
    clear: left;
    width: 100%;
    float: left;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    padding: 1rem;
}
.accordion-controller-wrapper ul.accordion-item-list .edit-section button i{
    margin-right:4px;
}
/*accordion-controller-wrapper END*/
*[editor-feature]{
    position:relative;
    z-index: 2;
}
*[editor-feature]:hover:after,.cropper-hover:after{
    padding: 4px 6px;
    position: absolute;
    top: 0;
    opacity: 1;
    right: 100%;
    background-color: #101010;
    color: #cbcbcb;
    border-radius: 5px;
    content: attr(editor-feature);
    text-shadow: 1px 1px 0px #282828;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 10000;
    height: 21px;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;
}
.deactive-after[editor-feature]:hover:after,.deactive-after:after{
    display: none !important;
}
.cropper-hover:after{
    content: "Cropper";
}

/*testimonial 3 Style*/
.testimonials-grid-left{
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    background-color: #252830;
    padding-bottom: 150px;
    padding-top: 150px;
}
.testimonials-grid-left .title{
    margin:0 0 60px 0;
    color:#fff;
}
.testimonials-grid-left .quote{
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 30px;
    margin-bottom: 30px;
    background: #fff;
}
.testimonials-grid-left .quote i{
    border-radius: 50%;
    font-size: 28px;
    display: inline-block;
    margin-bottom: 30px;
}
.testimonials-grid-left .quote small {
    display: block;
    margin-top: 30px;
    color: inherit;
    opacity: 0.5;
}
/*testimonial 3 Style END*/
/*Pricing tables 1 Style*/
.price-3col-image{
    padding-top: 150px;
    padding-bottom: 150px;
}
.price-3col-image .title {
    margin: 0 0 60px 0;
}
.price-3col-image .pricing-table {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
    background: #fff;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    margin-bottom: 1rem;
    height: 100%;
}
.price-3col-image .pricing-table h4 {
    display: block;
    padding: 40px 0;
    margin: 0;
    font-weight: bolder;
}
.price-3col-image .pricing-table span.clean {
    padding-bottom: 0;
}
.price-3col-image .pricing-table span small {
    opacity: 0.5;
    font-weight: normal;
    font-size: 14px;
}
.price-3col-image .pricing-table span {
    display: block;
    font-weight: bold;
    font-size: 50px;
    padding: 40px 0;
}
.price-3col-image .pricing-table p {
    margin: 50px 35px;
}
.price-3col-image .pricing-table .btn {
    display: block;
    margin: 0 35px 35px 35px;
    padding: 12px;
}
.price-3col-image .pricing-table div{
    position: relative;
}

/*pricing 2*/
.price-2col-image-2{
    padding-bottom: 150px;
    padding-top: 150px;
    color:#fff;
}
.price-2col-image-2 .title {
    margin: 0 0 60px 0;
    font-size: 3em;
}
.price-2col-image-2 .pricing-table {
    position: relative;
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    margin-bottom: 1rem;
    height: 100%;
}
.price-2col-image-2 .pricing-table h4 {
    display: block;
    padding: 40px 0;
    margin: 0;
    font-weight: bolder;
}
.price-2col-image-2 .pricing-table span.clean {
    padding-bottom: 0;
}
.price-2col-image-2 .pricing-table span small {
    opacity: 0.5;
    font-weight: normal;
    font-size: 14px;
}
.price-2col-image-2 .pricing-table span {
    display: block;
    font-weight: bold;
    font-size: 50px;
    padding: 40px 0;
}
.price-2col-image-2 .pricing-table p {
    margin: 50px 35px;
}
.price-2col-image-2 .pricing-table .btn {
    display: block;
    margin: 0 35px 35px 35px;
    padding: 12px;
}
.price-2col-image-2 .pricing-table div{
    position: relative;
}

.price-2col-image-2 .sep-bottom{
    font-size: 16px
}

/*Pricing table 3*/
.pricing-tabel-3-wrapper{
    padding: 140px 0;
}
.pricing-tabel-3-wrapper .container.custom_container {
    max-width: 1520px;
}
.pricing-tabel-3-wrapper .price_tab {
    border-radius: 45px;
    background-color: white;
    -webkit-box-shadow: 0px 3px 13px 0px rgba(0, 11, 40, 0.08);
    box-shadow: 0px 3px 13px 0px rgba(0, 11, 40, 0.08);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
    border: 0px;
    padding: 7px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    margin-top: 70px;
    display: inline-block;
    overflow: hidden;
}
.pricing-tabel-3-wrapper .price_tab .nav-item {
    padding: 0px;
    margin: 0px;
}
.pricing-tabel-3-wrapper .price_tab .nav-item .nav-link {
    margin: 0px;
    font-weight: 400;
    font-size: 16px;
    color: #677294 !important;
    padding: 12px 30px;
    display: inline-block;
    border: 0px;
    border-radius: 45px;
    min-width: 193px;
    text-align: center;
    -webkit-transition: color 0.3s linear;
    -o-transition: color 0.3s linear;
    transition: color 0.3s linear;
    position: relative;
    z-index: 1;
}
.pricing-tabel-3-wrapper .price_tab .nav-item .nav-link.active {
    border: 0px;
    border-radius: 45px;
    background: transparent;
    color: #fff !important;
}
.pricing-tabel-3-wrapper .price_tab .nav-link:after {
    position: absolute;
    content: '';
    top: 0;
    background: #00aff0;
    left: 0;
    height: 100%;
    border-radius: 45px;
    width: 100%;
    z-index: -1;
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    transform: rotateX(80deg) translate(0px, 240px);
    perspective: 1000;
    perspective-origin: 115% 550%;
}
.pricing-tabel-3-wrapper .price_tab .nav-link.active:after {
    opacity: 1;
    transform: none;
    perspective: 0;
    perspective-origin: 50% 50%;
}
.pricing-tabel-3-wrapper .price_content .price_item {
    text-align: center;
    background-color: white;
    -webkit-box-shadow: 0px 4px 6px 0px rgba(0, 11, 40, 0.1);
    box-shadow: 0px 4px 6px 0px rgba(0, 11, 40, 0.1);
    padding: 50px 50px 40px;
    border: 1px solid #fff;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    cursor: pointer;
    height: 100%;
}
.pricing-tabel-3-wrapper .price_content .price_item:hover {
    border-color: #c9ebfa;
    -webkit-box-shadow: 0px 30px 60px 0px rgba(0, 11, 40, 0.14);
    box-shadow: 0px 30px 60px 0px rgba(0, 11, 40, 0.14);
}
.pricing-tabel-3-wrapper img.attachment-full.size-full {
    width: auto;
}
.pricing-tabel-3-wrapper img {
    height: auto;
    max-width: 100%;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.pricing-tabel-3-wrapper .price_content .price_item h5{
    margin-top: 30px;
    font-weight: 600;
    font-size: 20px;
    color: #3f4451;
}
.pricing-tabel-3-wrapper .price_content .price_item p {
    font-size: 16px;
    line-height: 22px;
    color: #677294;
    font-weight: 300;
    margin-bottom: 0px;
}
.pricing-tabel-3-wrapper .price_content .price_item .price {
    line-height: 40px;
    border-bottom: 1px solid #e9e9f4;
    padding: 33px 0px 30px;
    font-weight: 700;
    font-size: 40px;
    color: #3f4451;
}
.pricing-tabel-3-wrapper .price_content .price_item .price sub{
    font-size: 16px;
    font-weight: 300;
}
.pricing-tabel-3-wrapper .price_content .price_item .p_list {
    padding: 30px 0px 20px;
}
.pricing-tabel-3-wrapper .price_content .price_item .p_list li {
    color: #505975;
    font-weight: 300;
    font-size: 16px;
    line-height: 40px;
}
.pricing-tabel-3-wrapper .price_content .price_item .price_btn {
    transition: all 0.5s;
}
/*Pricing tables 1 Style END*/
/*subscrib Style*/
.subscribe-half-right{
    padding-top: 150px;
    padding-bottom: 150px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.subscribe-half-right .title {
    margin: 0 0 60px 0;
    color: #fff;
    font-weight: 100;
    font-size: 4em;
}
.subscribe-half-right form.line-form {
    border: none;

}
.subscribe-half-right form.line-form .form-control {
    background: #fff;
    padding: 20px 25px;
    border-right: none;
    border-left: none;
}
.subscribe-half-right form.line-form > div:first-child .form-control {
    border-radius: 3px 0 0 3px;
    border-left: 1px solid #eee;
}
.subscribe-half-right form.line-form button{
    border: 1px solid #eee;
    height: 62px;
    font-size: inherit;
    line-height: 24px;
    padding: 20px 25px;
    border-radius: 0 3px 3px 0;
    border-left: none;
    margin: 0;
    background-color: #fff;
    color: #00c0ff;
}
.subscribe-half-right form.line-form button i {
    font-size: 24px;
    margin-right:auto;
    margin-left: auto;
}
.subscribe-half-right .desc-text {
    opacity: 0.7;
    color:#fff;
}
.wrap .modal-content {
    padding: 100px 20px;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 4px;
    border: 0;
    text-align: center;
}

.wrap .modal-content .close {
    font-family: inherit;
    font-size: 32px;
    font-weight: 100;
    text-shadow: none;
    position: absolute;
    top: 10px;
    right: 15px;
}
.wrap .modal-title i {
    font-size: 48px;
    line-height: 48px;
    display: block;
    margin: 0 0 40px 0;
    color: #00c0ff;
}
.wrap .modal-title i.icofont-ban{
    color: #e44646;
}
form label.error {
    background: #e44646;
    color: #fff;
    padding: 5px 10px;
}
form.line-form label.error {
    margin: 10px 0 0 0;
    display: inline-block;
    padding: 10px 20px;
}
form.line-form label.error:empty{
    display: none !important;
}
.modal-button-wrapper {
    position: absolute;
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: all 0.5s;
    left: 5px;
    top: 5px;
    z-index: 100000;
}
.modal-button-wrapper button{
    margin-right: 5px;

}
.modal.fade.active-into-frame {
    position: absolute;
    display: block !important;
    opacity: 1;
    background-color: #222;
}
.modal.fade.active-into-frame .modal-dialog{
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
}
.subscribe-section-2{
    padding: 140px 0;
}
.subscribe-section-2 .display-3 b {
    font-weight: bold;
}
.subscribe-section-2 .display-3{
    font-size: 3.5rem;
    margin-bottom: 3rem;
    font-weight: 300;
    margin-top: 4rem;
    text-transform: capitalize;
}
.subscribe-section-2 .input-group{
    margin-bottom: 0.625rem !important;
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
}
.subscribe-section-2  .form-control {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 0.25rem 0 0 0.25rem;
    padding: 0.9375rem 0.9375rem;
    float: left;
}
.subscribe-section-2  button{
    border-radius:0 0.25rem 0.25rem 0;
    padding: 0.9375rem 3rem;
    color: #151515;
}
/*subscrib Style end*/
/*Hover Edit Style*/
.b-s-w{
    border-bottom: 1px solid #e2e2e2;
    box-shadow: 0 3px 0 -1px #ffffff;
}
.hover-controller-wrapper{
    background: #ffffff;
    padding: 22px;
    border-radius: 0;
    border: 1px solid #cac8c8;
    box-shadow: 0 2px 13px rgba(0,0,0,.03), 0 1px 3px rgba(0,0,0,.02);
}
.hover-detail{
    display: none;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
    margin-top: 15px;
}
.hover-detail.active{
    display: block;

}
/*Hover Edit Style END*/

.blog-1-wrapper{
    padding-bottom: 150px;
    padding-top: 150px;
}
.blog-1-wrapper .post-container {
    padding: 20px 7px;
}
.blog-1-wrapper .post-meta-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    max-height: 700px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-1-wrapper .post-meta-thumb img {
    width: 100%;
    min-width: 100%;
    height: auto;
    transition: all .3s ease-in-out;
    margin-bottom: 0;
}

.blog-1-wrapper .sh-table-full {
    display: table;
    width: 100%;
    height: 100%;
}

.blog-1-wrapper .post-content-container {
    padding-left: 13%;
    padding-right: 13%;
    padding-top: 32px;
    background-color: #fff;
    box-shadow: 0px 10px 11px 0px rgba(0,0,0,.05);
    overflow: hidden;
    position: relative;
    transition: .3s all ease-in-out;
}
.blog-1-wrapper .post-container:hover .post-content-container{
    box-shadow:  0 1px 1px 1px rgba(0,0,0,.06);
}
.blog-1-wrapper .post-meta-one {
    margin-bottom: 0;
}
.blog-1-wrapper .post-meta-author a.bypostauthor{
    font-weight: bold;
    margin-left: 4px;
}
.blog-1-wrapper .post-meta-date {
    padding-left: 9px;
}
.blog-1-wrapper .post-title h2 {
    font-size: 28px;
    margin-top: 12px;
    margin-bottom: 14px;
    line-height: 100%!important;
}
.blog-1-wrapper .post-content {
    padding-bottom: 28px;
    word-break: break-word;
}
.blog-1-wrapper .post-meta-two{
    border-top: 1px solid #e9e9e9;
    font-size: 12px;
    margin-left: -18%;
    margin-right: 100px;
    padding: 19px 0 19px 18%;
    position: relative;
}
.blog-1-wrapper .post-meta-categories {
    padding-left: 0;
}
.blog-1-wrapper .post-meta-comments a {
    position: absolute;
    top: -20px;
    right: -130px;
    transition: .3s all ease-in-out;
}
.blog-1-wrapper .post-meta-comments a i{
    margin-left: 0;
    margin-right: 5px;
}
.owl-dots {
    text-align: center;
    width: 100%;
    float: left;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
.owl-dot span{
    width: 10px;
    height: 10px;
    border: 1px solid #222;
    border-radius: 50%;
    display: block;
    float: left;
    margin: 0 4px;
}
.owl-dot.active span{
    background-color: #222;
}
.owl-carousel .owl-nav{
    position: absolute;
    top: calc(50% - 15px);
    width: 100%;
    height: 30px;
}
.owl-carousel .owl-nav div{
    display: inline-block;
    float: left;
    overflow: hidden;
    text-indent: 50px;
    width: 50px;
    height: 30px;
    position: relative;
}
.owl-carousel .owl-nav div:after{
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border-top: 2px solid #222;
    border-right: 2px solid #222;
    transform: rotate(230deg);
    top: 5px;
    left:calc(50% - 10px);
}
.owl-carousel .owl-nav div.owl-prev:after{
    transform:rotate(45deg);


}
.owl-carousel .owl-nav .owl-prev{
    float: right;
}
.blog-1-wrapper .title{
    text-align: center
}
.blog-1-wrapper .page-info{
    text-align: center
}
.blog-2-block-2{
    padding:150px 0 80px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
}
.blog-2-block-2 .blog-1-wrapper{
    padding-bottom: 0;
    padding-top: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.blog-2-block-2 .blog-column-wrapper{
    max-width: 420px;
    position: relative;
    z-index: 4;
}
.blog-2-block-2 .blog-column-wrapper .heading{
    margin: 2rem 0px 0px 0px;
}
.blog-2-block-2 .blog-column-wrapper .heading.heading-style1 h1{
    font-weight: 700!important;
    color:#222;
    font-size: 48px;
    display: inline-block;
}
.blog-2-block-2 .blog-column-wrapper .heading.heading-style1 span{
    width: 100%;
    clear: left;
    float:left;

}
.blog-2-block-2 .blog-column-wrapper .heading.heading-style1{
    position: relative;
    display: inline-block;
    margin-bottom: 36px;
}
.blog-2-block-2 .blog-column-wrapper .heading.heading-style1:after{
    position:absolute;
    width: 50px;
    height:2px;
    background-color: #222;
    content: "";
    bottom: -20px;
    left: 0;
}
.blog-2-block-2 .blog-column-wrapper .heading h1{
    letter-spacing: 6px;
    font-weight: 300!important;
    color: #919191;
    font-size: 14px;
}
.blog-2-block-2 .form-wrapper input{
    border-radius: 100px !important;
    padding-left: 36px!important;
    padding-right: 36px!important;
    font-size: 16px!important;
    line-height: 40px!important;
    border: 1px solid #e3e3e3;
    color: #8d8d8d;
    display: block;
    width: 100%;
    margin-bottom: 10px;
    -webkit-appearance: none;
}
.blog-2-block-2 .form-wrapper .input-group-btn{
    float: left;
}
.blog-2-block-2 .form-wrapper .input-group-btn button{
    border-radius: 100px !important;
    padding: 10px 2rem;
    margin-top: 8px;
}
/*Blog Slider Style End*/
/*Team Section Style*/
.team-circle{
    padding-top: 150px;
    padding-bottom: 150px;
}
.team-circle .title {
    margin: 0 0 60px 0;
}
.team-circle img {
    margin: 0 auto 30px auto;
    border-radius: 50%;
    max-width: 75%;
    height: auto;
}
.post-meta-thumb{
    max-width:100%;
    height: auto;
}
.team-circle .name {
    margin: 0 0 10px 0;
}
.team-circle .occupation {
    margin: 0 0 20px 0;
    font-weight: 300;
    opacity: 0.4;
}
.team-border{
    padding-top:150px;
    padding-bottom:150px;
    color: #fff;
}
.team-border .title {
    margin: 0 0 60px 0;
}
.team-border .border-block {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 30px;
}
.team-border img{
    max-width: 100%;
    height:auto;
}
.team-border h3.title {
    margin: 0 0 30px 0;
}
.team-4col{
    color:#fff;
    padding-top:150px;
    padding-bottom:150px;
}
.team-4col .title {
    margin: 0 0 60px 0;
}
.team-4col img {
    margin: 0 auto 30px auto;
}
.team-4col .name {
    margin: 0 0 10px 0;
}
.team-4col .occupation {
    margin: 0 0 20px 0;
    font-weight: 300;
    opacity: 0.4;
}
.team-slider-section-wrapper{
    padding-top: 6.875rem;
    padding-bottom: 6.375rem;
}
.team-slider-section-wrapper .slider-container {
    position: relative;
}
.team-slider-section-wrapper .slider-container .card-slider {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    width: 100%;
    text-align: center;
}
.team-slider-section-wrapper .card {
    position: relative;
    border: none;
    background-color: transparent;
}
.team-slider-section-wrapper .card-image {
    width: 6rem !important;
    height: 6rem;
    margin-right: auto;
    margin-bottom: 0.25rem;
    margin-left: auto;
    border-radius: 50%;
}
.team-slider-section-wrapper .card-body {
    padding-bottom: 0;
    flex: 1 1 auto;
    padding: 1.25rem;
}
.team-slider-section-wrapper .card-body .testimonial-text{
    font-style:italic;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #fff;
    padding: 0 2rem;
}
.team-slider-section-wrapper .testimonial-author {
    margin-bottom: 0;
    font-style:normal;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #fff;
}
.team-slider-section-wrapper .owl-carousel .owl-nav div:after{
    border-color: #fff;
    left: 50%;
}
.team-slider-section-wrapper .owl-carousel .owl-nav div.owl-next:after{
    right: 50%;
    left: auto;
}
.team-slider-section-wrapper .owl-carousel .owl-dots{
    display: none;
}

/*Team Section Style End*/
/*Video Section Style*/
.video-half-right{
    padding-top:150px;
    padding-bottom: 150px;
}
.video-half-right h4.sub-title {
    color: #00c0ff;
    margin: 0 0 60px 0;
}
.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    overflow: visible;
}
.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
.video-popup{
    padding-top: 150px;
    padding-bottom: 150px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color:#fff;
}
.video-popup .title {
    margin: 0 0 60px 0;
}
.video-popup .giant-title {
    font-size: 110px;
}
.video-popup .giant-title i{
    margin: 0 auto;
}
.video-section-page-wrapper{
    padding: 90px 0;
    background-size: cover;
    background-repeat: no-repeat;
    color:#fff;
}
.video-section-page-wrapper .image-container {
    max-width: 53.125rem;
    margin-right: auto;
    margin-left: auto;
}
.video-section-page-wrapper .video-wrapper {
    position: relative;
}
.video-section-page-wrapper .image-container img {
    border-radius: 0.375rem;
}
.video-section-page-wrapper .video-play-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    display: block;
    box-sizing: content-box;
    width: 2rem;
    height: 2.75rem;
    padding: 1.125rem 1.25rem 1.125rem 1.75rem;
    border-radius: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.video-section-page-wrapper .video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    display: block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    background: #4eaaff;
    animation: pulse-border 1500ms ease-out infinite;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.video-section-page-wrapper .video-play-button span {
    position: relative;
    display: block;
    z-index: 3;
    top: 0.375rem;
    left: 0.25rem;
    width: 0;
    height: 0;
    border-left: 1.625rem solid #fff;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
}
.video-section-page-wrapper .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    display: block;
    width: 4.375rem;
    height: 4.375rem;
    border-radius: 50%;
    background: #4eaaff;
    transition: all 200ms;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}
/*Video Section Style End*/
.hr-2{
    border-width: 2px;
    border-color: #dfdfdf;
    box-shadow: 0px 2px 0px 1px #ffffff;
    border-radius: 112%;
    margin: 2rem 2rem;
}
/*Responsive Feature*/
ul.responsive-size-list {
    position: relative;
    width: 100%;
    list-style: none;
    height: 20px;
    margin: 0 0 13px;
    padding: 0;
    overflow: hidden;
}
ul.responsive-size-list li{
    height: 18px;
    background-color: #686868;
    opacity: 0.3;
    margin: 0 1px;
    float: left;
    transition: all 0.5s;
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    font-size: 0.9em;
}
ul.responsive-size-list li.active{
    opacity: 0.9;
}
ul.responsive-size-list li.item-4k{
    width: 5.8%;
}
ul.responsive-size-list li.item-laptop{
    width: 7%;
}
ul.responsive-size-list li.item-laptop-medium{
    width: 8%;
}
ul.responsive-size-list li.item-tablet{
    width: 10%;
}
ul.responsive-size-list li.item-mobile-large{
    width: 4%;
}
ul.responsive-size-list li.item-mobile-medium{
    width: 4%;
}
ul.responsive-size-list li.item-mobile-small{
    width: 20.8%;
    position: relative;
}
body{
    overflow-x: hidden;
}
.responsive-test-container{
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.responsive-test-modal-wrapper{
    background-color: #202023;
}
.responsive-iframe-wrap {
    border: none;
    height: calc(100vh - 137px);
    resize: horizontal;
    margin: auto;
}
.responsive-test-modal-wrapper .clear.p-a-sm {
    border-bottom: 1px solid #515151;
    margin-bottom: 3px;
}
.responsive-test-modal-wrapper .clear.p-a-sm i{
    color: #ccc !important;
}
.d-flex-repo{
    display: flex;
    justify-content: center;
    margin: 6px 0 9px;
    color:#fff;
}
.d-flex-repo select{
    background-color: #3b3b3b !important;
    color:#fff;
    height: 2rem !important;
    font-size: 1em;
    line-height: 1 !important;
    padding: 0.2rem 0.75rem !important;
    border: 1px solid #858585;
}
.responsive-size-wrapper span{
    color: #fff;
    background-color: #3b3b3b;
    padding: 4px 6px;
    margin: 0px 5px;
    border-radius: 5px;
    float: left;
    border: 1px solid #858585;
    transition: all 0.5s;
}
.responsive-size-wrapper span:first-child{
    position: relative;
    margin-right: 17px;
}
.responsive-size-wrapper span:first-child:after{
    position: absolute;
    content: '+';
    width: 5px;
    height: 5px;
    right: -21px;
    transform: rotate(45deg);
    font-size: 20px;
    top: 2px;
}


/*Flip Mode Button*/
.live-mode-wrap{
    display: inline-block;
    vertical-align: middle;
}
.live-mode-wrap .tgl {
    display: none;
}
.live-mode-wrap .tgl, .live-mode-wrap .tgl:after, .live-mode-wrap .tgl:before, .live-mode-wrap .tgl *, .live-mode-wrap .tgl *:after, .live-mode-wrap .tgl *:before, .live-mode-wrap .tgl + .tgl-btn {
    box-sizing: border-box;
}
.live-mode-wrap .tgl::selection, .live-mode-wrap .tgl:after::selection, .live-mode-wrap .tgl:before::selection, .live-mode-wrap .tgl *::selection, .live-mode-wrap .tgl *:after::selection, .live-mode-wrap .tgl *:before::selection, .live-mode-wrap .tgl + .tgl-btn::selection {
    background: none;
}
.live-mode-wrap .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 8em;
    height: 38px;
    position: relative;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
}
.live-mode-wrap .tgl + .tgl-btn:after, .live-mode-wrap .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}
.live-mode-wrap .tgl + .tgl-btn:after {
    left: 0;
}
.live-mode-wrap .tgl + .tgl-btn:before {
    display: none;
}
.live-mode-wrap .tgl:checked + .tgl-btn:after {
    left: 50%;
}
.live-mode-wrap .tgl-flip + .tgl-btn {
    padding: 2px;
    transition: all 0.2s ease;
    font-family: sans-serif;
    perspective: 180;
    -webkit-perspective: 180px;
}
.live-mode-wrap .tgl-flip + .tgl-btn:after, .live-mode-wrap .tgl-flip + .tgl-btn:before {
    display: inline-block;
    transition: all 0.4s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 2.8;
    font-size: 1em;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-tbackface-visibility: hidden;
    -ms-backface-visibility: hidden;
    border-radius: 4px 0 0 4px;
    padding-left: 1.8rem;
    background-size: 20px !important;
    background-position: center left 7px !important;
}
.live-mode-wrap .tgl-flip + .tgl-btn:after {
    content:attr(data-tg-on);
    background: #1075fd url('../../images/forms-editor/edit-mode.svg') no-repeat;
    transform: rotateX(-180deg);
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
}
.live-mode-wrap .tgl-flip + .tgl-btn:before {
    background: #37a272 url('../../images/forms-editor/view-mode.svg') no-repeat;
    content: attr(data-tg-off);
}
.live-mode-wrap .tgl-flip + .tgl-btn:active:before {
    transform: rotateX(20deg);
    -webkit-transform: rotateX(20deg);
    -moz-transform: rotateX(20deg);
    -o-transform: rotateX(20deg);
    -ms-transform: rotateX(20deg);
}
.live-mode-wrap .tgl-flip:checked + .tgl-btn:before {
    transform: rotateX(180deg);
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
}
.live-mode-wrap .tgl-flip:checked + .tgl-btn:after {
    transform: rotateX(0);
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -o-transform: rotateX(0);
    -ms-transform: rotateX(0);
    left: 0;
    background: #1075fd url('../../images/forms-editor/edit-mode.svg') no-repeat;
}
.live-mode-wrap .tgl-flip:checked + .tgl-btn:active:after {
    transform: rotateX(-20deg);
    -webkit-transform: rotateX(-20deg);
    -moz-transform: rotateX(-20deg);
    -o-transform: rotateX(-20deg);
    -ms-transform: rotateX(-20deg);
}
/*End  Flip Mode Button*/

.zoom-button-wrapper {
    float: right;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    box-shadow: 0px 0px 5px -2px #adadad inset;
    padding: 0 3px;
}
.zoom-button-wrapper button{
    margin-right: 0;
    transition: all 0.2s;
    background-color: transparent;
    border-color:transparent !important;
    box-shadow:none !important;
    width: 35px;
    height:36px;
    line-height: 2.3;
}
.zoom-button-wrapper button:first-child:hover,.zoom-button-wrapper button:first-child:focus{
    color: #8fbc8f;
}
.zoom-button-wrapper button:nth-child(2):hover,.zoom-button-wrapper button:nth-child(2):focus{
    color: #bc8f8f;
    ;
}
.zoom-button-wrapper button:nth-child(3):hover,.zoom-button-wrapper button:nth-child(3):focus{
    color: #8f9dbc;
}
/*Responsive Feature END*/
/*Video background*/
.intro-5-background-video{
    padding: 150px 0;
    background-color: #fff;
    overflow: hidden;
}
section{
    overflow: hidden
}
video[video-type='bgvideo'] {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
header .container,section .container {
    position: relative;
    z-index: 2;
}
.video-bg-overly-feature-wrapper{
    display: none;
    text-align: center;
    border: 1px solid #ccc;
    margin: 0 5rem;
    padding: 15px 0 0 0;
    border-radius: 11px;
}
.video-bg-overly-feature-wrapper.active{
    display: inline-block;
}
.video-overly {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.8;
    z-index: 1;
}
/*Video background end*/
/*Content Live Tab 4*/
.content-collapse-wrapper{
    padding: 100px 0;
}
.live-tab-wrapper .nav{
    border-bottom: 1px solid #ddd;
    display: inline-block;
    width: 100%;
}
.live-tab-wrapper .nav > li{
    float: left;
    border-bottom: none;
}
.live-tab-wrapper .nav > li a.active,.live-tab-wrapper .nav > li a:hover{
    color: #00c0ff;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-bottom-color: transparent;
    cursor: default;
}
.live-tab-wrapper .nav li a{
    padding: 20px 25px;
    font-weight: bold;
    display: block;
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    margin-bottom: -2px;
    transition: all 0.5s;
}
.live-tab-wrapper .tab-content .tab-pane{
    padding: 2rem;
}
/*content accordion 7*/
.content-7-wrapper{
    padding: 140px 0;
}
.content-7-wrapper p.page-info{
    font-size: 18px;
}
.content-7-wrapper .accordion-group-steps .panel {
    counter-increment: panel;
    background: transparent;
    border: 0;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    transition-delay: 0s;
    position: relative;
    padding: .625rem;
    padding-left: 3.75rem;
}
.content-7-wrapper .accordion-group-steps .accordion-control {
    position: static;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding: 1rem 2rem;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.content-7-wrapper .accordion-group-steps .accordion-control.collapsed::before {
    background: #4829B2;
    border-color: #4829B2;
    color: #fff;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    transform: scale(1.4);
}
.content-7-wrapper .accordion-group-steps .accordion-control::before {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    transition-delay: 0s;
    content: counter(panel, decimal);
    position: absolute;
    display: block;
    top: 50%;
    left: 0;
    width: 3.75rem;
    height: 3.75rem;
    color: #000;
    margin-top: -30px;
    line-height: calc(3.75rem - 4px);
    text-align: center;
    border: 2px solid #e5e5e5;
    z-index: 20;
    border-radius: 50%;
    font-size: 20px;
}
.content-7-wrapper .accordion-control span {
    line-height: 1.5em;
    font-size: 15px;
    font-weight: 700;
}
.content-7-wrapper .accordion-content {
    overflow: hidden;
}
.content-7-wrapper .accordion-content .accordion-content-wrapper {
    padding: 0 2rem 1rem 2rem;
}
.content-7-wrapper .accordion-group-steps .panel:not(:last-child)::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% + 30px);
    left: 29px;
    height: calc(50% - 30px);
    width: 2px;
    background: #e5e5e5;
    z-index: 10;
}
.content-7-wrapper .accordion-group-steps .panel:not(:first-child)::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 29px;
    height: calc(50% - 30px);
    width: 2px;
    background: #e5e5e5;
    z-index: 10;
}
/*Content Live Tab 4 END*/
/*All About Table Style */
.table-content-page{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 150px 0;
    color: #fff;
}
.table-content-page .table > thead > tr > th{
    border-bottom: 1px solid #fff;
}
.table{
    overflow: hidden;
}
.table-half-wrapper{
    padding: 150px 0;
    color: #000;
}
.table-half-wrapper .table > thead > tr > th{
    border-bottom: 1px solid #ccc;
}
.table-layout-controller-wrapper .ui-switch{
    margin-right: 0 !important;
}
.thead-cell-feature-wrapper,.tbody-cell-feature-wrapper{
    display: none;
}
.thead-cell-feature-wrapper.active,.tbody-cell-feature-wrapper.active{
    display: block;
}
.border-spacing-wrapper {
    display: none;
}
.border-spacing-wrapper.active {
    display: block;
}
.table-layout-wrapper {
    background-color: #ffffff;
    padding: 14px;
    border-radius: 10px;
    padding-top: 0;
    transition: all 0.5s;
    box-shadow: 0 0 7px 0 #ddd inset;
}
.tabel-feature-switch-wrapper{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.tabel-feature-switch-wrapper h5 {
    float: left;
    padding: 12px 6px;
    text-align: center;
    width: 50%;
    cursor: pointer;
    margin-bottom: 0rem;
    border-radius: 0;
    margin-top: 14px;
    transition: all 0.5s
}
.tabel-feature-switch-wrapper h5.active{
    background-color: #2196f3;
    color: #fff;
    border: 1px solid #2196f3;
    position: relative;
    border-radius: 5px;
}
.tabel-feature-switch-wrapper h5.active:after{
    position: absolute;
    content: '';
    width: 10px;
    height:10px;
    transform: rotate(45deg);
    background-color: #2196f3;
    bottom: -5px;
    left: calc(50% - 5px);
    border-radius: 1px;
}


/*Table Style End*/
/*two section content*/
.content-block-5 .basic-2 {
    padding-top: 8rem;
    padding-bottom: 3.5rem;
    color:#fff;
}
.content-block-5 .basic-2 h3 {
    margin-bottom: 1.125rem;
}
.content-block-5 .basic-2 .text-container {
    margin-top: 4.5rem;
    margin-left: 4rem;
    margin-right: 1.5rem;
}
.content-block-5 .basic-3 {
    padding-top: 3.5rem;
    padding-bottom: 7.25rem;
    color:#fff;
}
.content-block-5 .basic-3 .text-container {
    margin-top: 4.5rem;
    margin-right: 3.5rem;
    margin-left: 2rem;
    margin-bottom: 0;
}
.content-block-5 .basic-3 h3 {
    margin-bottom: 1.125rem;
}
.content-block-5 .basic-3 img{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 2s infinite  alternate;
}
.content-block-5 .basic-2 img{
    -webkit-animation: mover 1s infinite  alternate;
    animation: mover 3s infinite  alternate;
}
@-webkit-keyframes mover {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px);
    }
}
@keyframes mover {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-10px);
    }
}
/*two section content End*/
/*Feature Benefits Live Tab*/
.features-section-wrapper{
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
    color: #fff;
}
.features-section-wrapper h2 {
    margin-bottom: 1.125rem;
    text-align: center;
}
.features-section-wrapper .p-heading {
    margin-bottom: 3.125rem;
    text-align: center;
}
.features-section-wrapper .nav-tabs{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.features-section-wrapper .nav-link i {
    margin-right: 0.375rem;
    font-size: 1rem;
}
.features-section-wrapper .nav-tabs .nav-link {
    margin-bottom: 1rem;
    padding:10px 20px;
    border: none;
    border-bottom: 4px solid #f1f1f8;
    border-radius: 0;
    color: #f1f1f8;
    font-weight: 700;
    transition: all 0.2s ease;
    font-size: 1.1em;
    text-decoration: none;
}
.features-section-wrapper .nav-link.active,.features-section-wrapper  .nav-link:hover {
    border-bottom: 4px solid #00c9db !important;
    background-color: transparent !important;
    color: #00c9db !important;
}
.features-section-wrapper .tab-content {
    width: 100%;
}
.features-section-wrapper .tab-content .tab-pane img{
    margin: auto;
}
/*.fade:not(.in) {
    opacity: 0;
}*/
.features-section-wrapper .tab-content .tab-pane.fade{
    transition: opacity 0.15s linear;
}

.features-section-wrapper .card{
    margin-top: 4.25rem;
    background-color: transparent;
    border: none;
}
.features-section-wrapper .card.first {
    margin-top: 4.25rem;
}
.features-section-wrapper .card-body {
    padding: 1rem 0 1.5rem 0;
}
.features-section-wrapper  .card.left-pane .text-wrapper,.features-section-wrapper  .card.right-pane .text-wrapper {
    width: 73%;
    display: inline-block;
}
.features-section-wrapper .card-title {
    margin-bottom: 0.5rem;
}
.features-section-wrapper .card.left-pane .card-icon,.features-section-wrapper .card.right-pane .card-icon {
    float: none;
    margin-right: 0;
    margin-left: 1rem;
    width: 4.5rem;
    height: 4.5rem;
    display: inline-block;
    border-radius: 50%;
    background-color: #00c9db;
    text-align: center;
    vertical-align: top;
}
.features-section-wrapper .card .card-icon {
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #00c9db;
    text-align: center;
    vertical-align: top;
}
.features-section-wrapper .card.right-pane .card-icon{
    margin-left: 0;
    margin-right: 1rem;
}
.features-section-wrapper .icon-cards-area .card .card-icon i {
    line-height: 3.5rem;
}
.features-section-wrapper .icon-cards-area .card .card-body{
    padding: 1rem 0 0 0;
}
.features-section-wrapper .icon-cards-area .card{
    margin-top: 2.25rem;
    padding-right: 3rem;
}
.features-section-wrapper .card .card-icon i {
    font-size: 2.25rem;
    line-height: 4.5rem;
}
.features-section-wrapper .text-area {
    margin-top: 1.5rem;
    margin-right: 1rem;
    margin-left: 1rem;
}
.features-section-wrapper h3 {
    margin-bottom: 0.75rem;
}
.features-section-wrapper .icon-cards-area {
    margin-right: 1rem;
    margin-left: 1rem;
}
.features-section-wrapper .tab-content tab-pane:nth-child(2) .icon-cards-area .card {
    margin-right: 3.875rem;
}
/*Feature Benefits Live Tab End*/
/*Service Style*/
.content-section-6-wrapper {
    color: #3f4451;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 120px 0px 120px 0px;
}

.content-section-6-wrapper .service_item {
    background: #fff;
    -webkit-box-shadow: 0px 30px 40px 0px rgba(3, 115, 156, 0.1);
    box-shadow: 0px 30px 40px 0px rgba(3, 115, 156, 0.1);
    padding: 47px 40px 0px;
    height: 100%;
    position: relative;
    border: 2px solid transparent;
    -webkit-transition: border 0.2s linear;
    -o-transition: border 0.2s linear;
    transition: border 0.2s linear;
    cursor: pointer;
    overflow: hidden;
}
.content-section-6-wrapper .service_item:hover {
    border-color: #c4e7f7;
}
.content-section-6-wrapper .service_item .service-icon {
    width: 54px;
    height: 54px;
    line-height: 54px;
    font-size: 20px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    background-image: -moz-linear-gradient(40deg, #5e2ced 0%, #a485fd 100%);
    background-image: -webkit-linear-gradient(40deg, #5e2ced 0%, #a485fd 100%);
    background-image: -ms-linear-gradient(40deg, #5e2ced 0%, #a485fd 100%);
    -webkit-box-shadow: 0px 14px 30px 0px rgba(94, 44, 237, 0.4);
    box-shadow: 0px 14px 30px 0px rgba(94, 44, 237, 0.4);
    position: absolute;
    right: 30px;
    top: 30px;
}
.content-section-6-wrapper .service_item .service-icon.nth2{
    background-image: -webkit-linear-gradient(40deg, #2c82ed 0%, #38d0fc 100%);
    box-shadow: 0px 14px 30px 0px rgba(44,130,237,0.4);

}
.content-section-6-wrapper .service_item .service-icon.nth3{
    background-image: -webkit-linear-gradient(40deg, #e03827 0%, #f9a47a 100%);
    box-shadow: 0px 14px 30px 0px rgba(224,56,39,0.4);

}
.content-section-6-wrapper .service_item .service-icon.nth4{
    background-image: -webkit-linear-gradient(40deg, #e09520 0%, #fae926 100%);
    box-shadow: 0px 14px 30px 0px rgba(224,149,32,0.4);

}
.content-section-6-wrapper .service_item h4 {
    padding-right: 50px;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 35px;
}
.content-section-6-wrapper .service_item p {
    line-height: 28px;
    font-size: 17px;
    margin-bottom: 25px;

}
.content-section-6-wrapper .service_item img {
    margin-right: -25px;
    width: auto;
    height: auto;
    max-width: 100%;
    border: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.content-section-6-wrapper .container.custom_container {
    max-width: 1520px;
}
.content-section-6-wrapper .post-meta-thumb{
    position: relative;
}
/*Service Style END*/

.dropdown-multiple,
.dropdown-multiple-label,
.dropdown-single {
    position: relative
}

.dropdown-multiple-label.active .dropdown-main,
.dropdown-multiple.active .dropdown-main,
.dropdown-single.active .dropdown-main {
    display: block;
    -webkit-animation: iui-fadeIn .2s ease-in forwards;
    -moz-animation: iui-fadeIn .2s ease-in forwards;
    -ms-animation: iui-fadeIn .2s ease-in forwards;
    -o-animation: iui-fadeIn .2s ease-in forwards;
    animation: iui-fadeIn .2s ease-in forwards
}

.dropdown-multiple-label.active .dropdown-display-label:after,
.dropdown-multiple-label.active .dropdown-display:after,
.dropdown-multiple.active .dropdown-display-label:after,
.dropdown-multiple.active .dropdown-display:after,
.dropdown-single.active .dropdown-display-label:after,
.dropdown-single.active .dropdown-display:after {
    border-top: none;
    border-bottom: 7px solid #999;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent
}

.dropdown-multiple-label.active .dropdown-display,
.dropdown-multiple-label.active .dropdown-display-label,
.dropdown-multiple.active .dropdown-display,
.dropdown-multiple.active .dropdown-display-label,
.dropdown-single.active .dropdown-display,
.dropdown-single.active .dropdown-display-label {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.dropdown-display,
.dropdown-display-label {
    position: relative;
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.42857143;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333;
    background-color: #fff
}

.dropdown-display-label:after,
.dropdown-display:after {
    content: '';
    position: absolute;
    border-top: 7px solid #999;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 14px;
    right: 11px;
}

.dropdown-clear-all {
    background-color: #fff;
    border: none;
    font-size: 22px;
    z-index: 999;
    color: #999;
    position: absolute;
    right: 2px;
    top: 2px;
    display: none;
    width: 25px;
    height: 30px;
    text-align: center;
    line-height: 30px;
}

.dropdown-clear-all:focus {
    outline: 0
}

.dropdown-clear-all:hover {
    color: #ccc;
    text-decoration: none;
}

.dropdown-display {
    white-space: nowrap;
    padding: 6px 20px 6px 12px
}

.dropdown-multiple:hover .dropdown-clear-all,
.dropdown-single:hover .dropdown-clear-all {
    display: block
}

.dropdown-display .dropdown-chose-list {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dropdown-display .dropdown-chose-list span:before {
    content: ','
}

.dropdown-display .dropdown-chose-list span:first-child:before {
    content: ''
}

.dropdown-display .placeholder {
    display: none
}

.dropdown-display .placeholder:first-child {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    color: #999;
    display: block;
    text-indent: 10px;
    font-size: 13px;
    line-height: 32px
}

.dropdown-display input {
    border: 0;
    outline: 0
}

.dropdown-display-label {
    cursor: text;
    padding: 6px 25px 5px 0
}

.dropdown-display-label .dropdown-search {
    display: inline-block
}

.dropdown-display-label input,
.dropdown-display-label input:focus {
    border: none;
    outline: 0
}

.dropdown-display-label .dropdown-chose-list {
    display: inline-block;
    padding: 0 5px
}

.dropdown-display-label .dropdown-chose-list .placeholder {
    display: none
}

.dropdown-display-label .dropdown-selected {
    position: relative;
    margin: 0 5px 0px 0;
    padding: 5px 20px 5px 5px;
    max-width: 100%;
    border-radius: 3px;
    background-repeat: repeat-x;
    color: #fff;
    cursor: default;
    background-color: #2196f3;
    display: inline-block;
    font-weight: 600;
}

.dropdown-display-label .dropdown-selected .del {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    float: right;
    line-height: 1;
    color: #fff;
    position: absolute;
    right: 5px;
    top: 7px;
    font-style: normal;
}

.dropdown-display-label .dropdown-selected .del:after {
    content: '\D7';
    font-size: 16px
}

.dropdown-main {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1010;
    width: 100%;
    color: #444;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    margin-top: -1px;
    border-top: 0;
    padding: 4px 7px;
    display: none
}

.dropdown-main ul {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 240px;
    margin: 0;
    padding: 0
}

.dropdown-main input {
    margin-top: 0;
    display: block;
    box-sizing: border-box;
    height: 30px;
    border: 1px solid #ccc;
    width: 100%;
    text-indent: 5px;
    border-radius: 3px
}

.dropdown-main .dropdown-search {
    display: block;
    padding: 5px 0
}

.dropdown-group {
    font-weight: 700
}

.dropdown-group,
.dropdown-option {
    margin: 0;
    padding-left: 12px;
    list-style: none;
    line-height: 26px;
    word-wrap: break-word
}

.dropdown-option {
    cursor: pointer;
    margin: 0;
    padding-left: 20px;
    list-style: none;
    line-height: 26px;
    word-wrap: break-word;
}

.dropdown-option:focus,
.dropdown-option:hover {
    background-color: #efefef;
    outline: 0
}

.dropdown-option[disabled] {
    color: #ddd;
    background-color: #fff;
    cursor: not-allowed;
    text-decoration: line-through
}
li.dropdown-option.dropdown-chose {
    padding-left: 20px;
    margin-left: 0;
}
.dropdown-option.dropdown-chose:after {
    content: '';
    float: left;
    width: 10px;
    height: 6px;
    margin: 7px 5px 0 0;
    border-left: 2px solid #1e68ff;
    border-bottom: 2px solid #1e68ff;
    transform: rotate(-48deg);
    position: absolute;
    left: 10px;
}

.dropdown-maxItem-alert, .dropdown-minItem-alert {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #e4e3e2;
    width: 100%;
    height: 39px;
    line-height: 39px;
    padding: 0 5px;
    border-radius: 5px;
    color: #999;
    -webkit-animation: iui-fadeIn .2s ease-in forwards;
    -moz-animation: iui-fadeIn .2s ease-in forwards;
    -ms-animation: iui-fadeIn .2s ease-in forwards;
    -o-animation: iui-fadeIn .2s ease-in forwards;
    animation: iui-fadeIn .2s ease-in forwards
}

/*List Open/close Btn Style*/
a.custom-asid-btn {
    position: absolute;
    right: -30px;
    display: block !important;
    opacity: 1 !important;
    cursor: pointer;
    z-index: 100;
    padding-top: 0 !important;
}
a.custom-asid-btn span{
    border-radius: 50%;
    transition: all 0.5s;
}
.cus-asid-list.in span{
    background-color: #a9a9a9;

}
.cus-asid-list.in span i{
    transform: rotateY(160deg);
    transition: all 0.5s;
}
.cus-asid-list.in span i{
    transform: rotateY(0deg);
    transition: all 0.5s;
}
.cus-asid-list.in a.custom-asid-btn span i:before{
    transition: all 0.5s;
    content:"\f053";
}
.cus-asid-list{
    display:block !important;
    opacity: 1 !important;
    width: 43px;
    overflow: visible;
    float:left !important;
    background-color: transparent !important;
}
.cus-asid-list.fade:not(.in){
    width:43px;
    transition: all 0.5s;
}
.cus-asid-list + div[class*="col-xs"]{
    float: left !important;
    width: 97.4%;
    transition: all 0.5s;
}
.cus-asid-list.in + div[class*="col-xs"]{
    float:none !important;
    width: 78%;
    transition: all 0.9s;
}
.cus-asid-list.in{
    float:none;
    width:428px;
    position: relative;
    z-index: 100;
}
.cus-asid-list .row-col{
    width:43px !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    transition: all 0.5s;
}
.cus-asid-list.in .row-col{
    width:100% !important;
}
.icon-dropdown-fu .dropdown-menu{
    position:relative;
}
.dropdown-search-input{
    width: 97%;
    margin-left: 4px;
    height: 35px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 999;
    box-shadow: -6px -12px 0 17px #fff;
}
.lang-srch-box .dropdown-search-input{
    margin-left: 4px;
}
.main-button-wrapper{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.password-helper{
    float: right;
    position: absolute;
    right: 1.5rem;
    opacity: 0.6;
    transition: all 0.6s;
    z-index: 10;
    top: calc(50% - 10px);
}
.password-helper:hover{
    opacity: 1;
}
.preview-embed-wrapper{
    border: 1px solid #ddd;
    width: 100%;
    float: left;
    padding: 1rem;
    margin-bottom: 1rem;
}
.preview-embed-wrapper legend{
    margin-top: -1.8rem;
    float: left;
    background-color: #f6f6f6;
    width: auto;
    padding: 0 1rem;
    font-size: 1.3em;
    font-weight: 700;
    color: #969696;
}
.preview-embed-wrapper div{
    text-align: left;
    width: 100%;
    float: left;
    text-shadow: 1px 1px 0px #ffffff;
    max-height: 65px;
    overflow: auto;
    display: flex;
    justify-content: center;
}
.preview-embed-wrapper div a{
    color: #1075fd;
}
.hayperlink-magic-btn{
    position: absolute;
    top:0;
    width:100%;
}
.hayperlink-magic-btn >button{
    position: absolute;
    right: 2rem;
    top: 7px;
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important;
    opacity: 0.3;
    transition: all 0.5s;
}
.hayperlink-magic-btn >button:hover{
    opacity: 1;
}
.editor-social-media-item{
    border: 1px solid #efefef  !important;
    border-radius: 10px;
    padding: 6px 12px !important;
    margin-bottom: 6px !important;
}
.editor-social-media-item button{
    margin-top:0 !important;
    border:none !important;
}
.editor-social-media-item button:hover{
    box-shadow:none !important;
}

.modal-overly-dark:before{
    position: fixed;
    content: '';
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.6);
}
.status-main-btn{
    border-radius:0;
    transition:all 0.5s;
}
.status-main-btn-head{
    border-radius:4px 0 0 4px;
    transition:all 0.5s;
}
.status-main-btn-foot{
    border-radius:0 4px 4px 0;
    transition:all 0.5s;
}

/**Radio Box Switch**Use At Form Editor Building Mode**/
.switch-radio-mode {
    position: relative;
    padding: 0;
    display: inline-block;
    margin-left:.5rem;
}
.switch-radio-mode:before {
    content: ' ';
    position: absolute;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: #efefef;
    border-radius: 30px;
    box-shadow: 0 0 7px -3px #6f6f6f inset;
}
.switch-radio-mode:after {
    content: ' ';
    position: absolute;
    left: 0;
    top:0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(253, 253, 253, 0.8);
    border-radius: 30px;
    transform: perspective(100px) rotateX(0deg);
    transform-origin: top;
    opacity: 1;
    transition:all 0.5s;
}
.switch-radio-mode.active:after{
    transform: perspective(100px) rotateX(-90deg);
    opacity: 0;
}
.switch-radio-mode__label {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    transition: color 200ms ease-out;
    color: #999;
    position: relative;
    z-index: 1;
    margin: 0;
    padding:8px 16px;
}
.switch-radio-mode__label:hover {
    color: #424242;
}
.switch-radio-mode input:checked + .switch-radio-mode__label{
    color: #424242;
}
.switch-radio-mode__indicator {
    width: 66px;
    height: 33px;
    position: absolute;
    top: 2px;
    z-index: 0;
    left: 0;
    background: #fff;
    border-radius: 20px;
    transition: all 0.5s;
    transform: perspective(800px) rotateY(0);
    transform-origin: right;
}
.switch-radio-mode input#tools:checked ~ .switch-radio-mode__indicator {
    transform: translate3d(0.14rem, 0, 0);
}
.switch-radio-mode input#global:checked ~ .switch-radio-mode__indicator {
    transform: perspective(800px) rotateY(180deg);
    left: 4px;
}
.switch-radio-mode input#layout:checked ~ .switch-radio-mode__indicator {
    transform: translate3d(8.97rem, 0, 0) perspective(800px) rotateY(360deg);
}
.switch-radio-mode input#content:checked ~ .switch-radio-mode__indicator {
    transform: perspective(800px) rotateY(180deg);
    left: 9px;
}
.switch-radio-mode input#settings:checked ~ .switch-radio-mode__indicator {
    transform: translate3d(10.7rem, 0, 0) perspective(800px) rotateY(360deg);

}
.switch-radio-mode input#structure:checked ~ .switch-radio-mode__indicator {
    width: 85px;
    transform: translate3d(0.14rem, 0, 0);

}
.switch-radio-mode input[type="radio"]:not(:checked), .switch-radio-mode input[type="radio"]:checked {
    display: none;
}
/**Radio Box Switch**Use At Form Editor Building Mode End**/
.pay-prd-flex-center{
    display: flex;
    align-items: center;
}
.pay-prd-flex-center .image-cropper-wrapper{
    height: 68px;
    overflow: overlay;
}
.pay-prd-flex-center .image-cropper-wrapper label{
    height:100%;
    margin:0 !important;
}
.pay-prd-flex-center .handle{
    top: auto !important;
}

.editor-modal-cutom-fu{
    background-color: #f9f9f9 !important;
}
.d-ltr{
    direction:ltr;
}
.d-rtl{
    direction:rtl;
}
.h-height-auto{
    height:auto !important;
}
.transform-ul-wrap{
    padding: 1rem 0 0;
    list-style: none;
}

.slider-w-thumb{
    position: relative;
}

.slider-w-thumb #carousel-thumbs .owl-dots{
    display: none;
}
.slider-w-thumb .carousel-item img {
    object-fit: cover;
}
.slider-w-thumb .owl-carousel .owl-stage-outer{
    z-index: 1000;
}
.slider-w-thumb #carousel-thumbs {
    background: rgba(255,255,255,.3);
    bottom: 0;
    left: 0;
    padding: 0 50px;
    right: 0;
    position: absolute;
    z-index: 10;
}
.slider-w-thumb #carousel-thumbs img {
    border: 5px solid transparent;
    cursor: pointer;
}
.slider-w-thumb #carousel-thumbs img:hover {
    border-color: #fff;
}

.slider-w-thumb .carousel-control-prev{
    left:0;
}
.slider-w-thumb .carousel-control-next{
    right:0;
}
.slider-w-thumb  .owl-carousel .owl-nav{
    left:0;
}
.slider-w-thumb .owl-prev,
.slider-w-thumb .owl-next {
    position: absolute;
    top: 0;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 50px;
    color: #fff;
    text-align: center;
    opacity: .5;
}
.f-wrap{
    position: relative;
}
.p-relative{
    position: relative;
}
/***********************************/
.xdsoft_datetimepicker {
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506);
    background: #fff;
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    color: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 8px;
    padding-left: 0;
    padding-top: 2px;
    position: absolute;
    z-index: 999999;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: none;
}
.xdsoft_datetimepicker.xdsoft_rtl {
    padding: 8px 0 8px 8px;
}

.xdsoft_datetimepicker iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 75px;
    height: 210px;
    background: transparent;
    border: none;
}

/*For IE8 or lower*/
.xdsoft_datetimepicker button {
    border: none !important;
}

.xdsoft_noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.xdsoft_noselect::selection {
    background: transparent
}
.xdsoft_noselect::-moz-selection {
    background: transparent
}

.xdsoft_datetimepicker.xdsoft_inline {
    display: inline-block;
    position: static;
    box-shadow: none;
}

.xdsoft_datetimepicker * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker {
    display: none;
}

.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active {
    display: block;
}

.xdsoft_datetimepicker .xdsoft_datepicker {
    width: 224px;
    float: left;
    margin-left: 8px;
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
    float: right;
    margin-right: 8px;
    margin-left: 0;
}

.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
    width: 256px;
}

.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 58px;
    float: left;
    text-align: center;
    margin-left: 8px;
    margin-top: 0;
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
    float: right;
    margin-right: 8px;
    margin-left: 0;
}

.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
    margin-top: 8px;
    margin-bottom: 3px
}

.xdsoft_datetimepicker .xdsoft_monthpicker {
    position: relative;
    text-align: center;
}

.xdsoft_datetimepicker .xdsoft_label i,
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_today_button {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC);
}

.xdsoft_datetimepicker .xdsoft_label i {
    opacity: 0.5;
    background-position: -92px -19px;
    display: inline-block;
    width: 9px;
    height: 20px;
    vertical-align: middle;
}

.xdsoft_datetimepicker .xdsoft_prev {
    float: left;
    background-position: -20px 0;
}
.xdsoft_datetimepicker .xdsoft_today_button {
    float: left;
    background-position: -70px 0;
    margin-left: 5px;
}

.xdsoft_datetimepicker .xdsoft_next {
    float: right;
    background-position: 0 0;
}

.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_prev ,
.xdsoft_datetimepicker .xdsoft_today_button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 30px;
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    outline: medium none;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
    width: 20px;
    min-width: 0;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next {
    float: none;
    background-position: -40px -15px;
    height: 15px;
    width: 30px;
    display: block;
    margin-left: 14px;
    margin-top: 7px;
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next {
    float: none;
    margin-left: 0;
    margin-right: 14px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    background-position: -40px 0;
    margin-bottom: 7px;
    margin-top: 0;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 151px;
    overflow: hidden;
    border-bottom: 1px solid #ddd;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div {
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    text-align: center;
    border-collapse: collapse;
    cursor: pointer;
    border-bottom-width: 0;
    height: 25px;
    line-height: 25px;
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div > div:first-child {
    border-top-width: 0;
}

.xdsoft_datetimepicker .xdsoft_today_button:hover,
.xdsoft_datetimepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_prev:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.xdsoft_datetimepicker .xdsoft_label {
    display: inline;
    position: relative;
    z-index: 9999;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    background-color: #fff;
    float: left;
    width: 182px;
    text-align: center;
    cursor: pointer;
}

.xdsoft_datetimepicker .xdsoft_label:hover>span {
    text-decoration: underline;
}

.xdsoft_datetimepicker .xdsoft_label:hover i {
    opacity: 1.0;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select {
    border: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 101;
    display: none;
    background: #fff;
    max-height: 160px;
    overflow-y: hidden;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect{
    right: -7px
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect{
    right: 2px
}
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
    color: #fff;
    background: #9fd1ff;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option {
    padding: 2px 10px 2px 5px;
    text-decoration: none !important;
}

.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
    background: #33aaff;
    box-shadow: #178fe5 0 1px 3px 0 inset;
    color: #fff;
    font-weight: 700;
}

.xdsoft_datetimepicker .xdsoft_month {
    width: 100px;
    text-align: right;
}

.xdsoft_datetimepicker .xdsoft_calendar {
    clear: both;
}

.xdsoft_datetimepicker .xdsoft_year{
    width: 48px;
    margin-left: 5px;
}

.xdsoft_datetimepicker .xdsoft_calendar table {
    border-collapse: collapse;
    width: 100%;

}

.xdsoft_datetimepicker .xdsoft_calendar td > div {
    padding-right: 5px;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    height: 25px;
}

.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th {
    width: 14.2857142%;
    background: #fff;
    /*border: 1px solid #ddd;*/
    color: #666;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    border-collapse: collapse;
    cursor: pointer;
    height: 25px;
}
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
    width: 12.5%;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    background: #f6f6f6;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #33aaff;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
    background: #ffe9d2;
    box-shadow: #ffb871 0 1px 4px 0 inset;
    color: #000;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
    background: #c1ffc9;
    box-shadow: #00dd1c 0 1px 4px 0 inset;
    color: #000;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
    background: #33aaff;
    box-shadow: #178fe5 0 1px 3px 0 inset;
    color: #fff;
    font-weight: 700;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    cursor: default;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
    opacity: 0.2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
    color: #fff !important;
    background: #9fd1ff !important;
    box-shadow: none !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover {
    background: #33aaff !important;
    box-shadow: #178fe5 0 1px 3px 0 inset !important;
    color: #fff !important;
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover {
    color: inherit	!important;
    background: inherit !important;
    box-shadow: inherit !important;
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    font-weight: normal;
    text-align: center;
    color: #999;
    cursor: default;
}

.xdsoft_datetimepicker .xdsoft_copyright {
    color: #ccc !important;
    font-size: 10px;
    clear: both;
    float: none;
    margin-left: 8px;
}

.xdsoft_datetimepicker .xdsoft_copyright a {
    color: #eee !important
}
.xdsoft_datetimepicker .xdsoft_copyright a:hover {
    color: #aaa !important
}

.xdsoft_time_box {
    position: relative;
    border: 1px solid #ccc;
}
.xdsoft_scrollbar >.xdsoft_scroller {
    background: #ccc !important;
    height: 20px;
    border-radius: 3px;
}
.xdsoft_scrollbar {
    position: absolute;
    width: 7px;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar {
    left: 0;
    right: auto;
}
.xdsoft_scroller_box {
    position: relative;
}

.xdsoft_datetimepicker.xdsoft_dark {
    box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506);
    background: #000;
    border-bottom: 1px solid #444;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    color: #ccc;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
    border-bottom: 1px solid #222;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div {
    background: #0a0a0a;
    border-top: 1px solid #222;
    color: #999;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
    background-color: #000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select {
    border: 1px solid #333;
    background: #000;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
    color: #000;
    background: #007fff;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
    background: #cc5500;
    box-shadow: #b03e00 0 1px 3px 0 inset;
    color: #000;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==);
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
    background: #0a0a0a;
    border: 1px solid #222;
    color: #999;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
    background: #0e0e0e;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
    color: #cc5500;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
    background: #ffe9d2;
    box-shadow: #ffb871 0 1px 4px 0 inset;
    color:#000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
    background: #c1ffc9;
    box-shadow: #00dd1c 0 1px 4px 0 inset;
    color:#000;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
    background: #cc5500;
    box-shadow: #b03e00 0 1px 3px 0 inset;
    color: #000;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
    color: #000 !important;
    background: #007fff !important;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
    color: #666;
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright {
    color: #333 !important
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a {
    color: #111 !important
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover {
    color: #555 !important
}

.xdsoft_dark .xdsoft_time_box {
    border: 1px solid #333;
}

.xdsoft_dark .xdsoft_scrollbar >.xdsoft_scroller {
    background: #333 !important;
}
.xdsoft_datetimepicker .xdsoft_save_selected {
    display: block;
    border: 1px solid #dddddd !important;
    margin-top: 5px;
    width: 100%;
    color: #454551;
    font-size: 13px;
}
.xdsoft_datetimepicker .blue-gradient-button {
    font-family: "museo-sans", "Book Antiqua", sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #82878c;
    height: 28px;
    position: relative;
    padding: 4px 17px 4px 33px;
    border: 1px solid #d7d8da;
    background: -moz-linear-gradient(top, #fff 0%, #f4f8fa 73%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(73%, #f4f8fa));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fff 0%, #f4f8fa 73%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fff 0%, #f4f8fa 73%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fff 0%, #f4f8fa 73%);
    /* IE10+ */
    background: linear-gradient(to bottom, #fff 0%, #f4f8fa 73%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f4f8fa',GradientType=0 );
    /* IE6-9 */
}
.xdsoft_datetimepicker .blue-gradient-button:hover, .xdsoft_datetimepicker .blue-gradient-button:focus, .xdsoft_datetimepicker .blue-gradient-button:hover span, .xdsoft_datetimepicker .blue-gradient-button:focus span {
    color: #454551;
    background: -moz-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4f8fa), color-stop(73%, #FFF));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
    /* IE10+ */
    background: linear-gradient(to bottom, #f4f8fa 0%, #FFF 73%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f8fa', endColorstr='#FFF',GradientType=0 );
    /* IE6-9 */
}

/***************************************/

.pswd_info{
    width:100%;
    padding: 8px 8px 0;
}
.pswd_info ul{
    list-style: none;
    margin:0;
    padding:0;
}
.pswd_info ul li{
    position: relative;
    font-size: .9em;
    transition: all 0.5s;
}
.pswd_info ul li.invalid{
    color: #a7a7a7;
}
.pswd_info ul li.valid{
    color:green;
}

.btn-w-icon-material{
    position: relative;
    padding-left: 46px;
    padding-right: 20px;
    line-height: 1;
    overflow: hidden;
    padding-bottom: 11px;
    padding-top: 11px;
    display: flex;
    align-items: center;
    transition: all 0.5s;
}
.btn-w-icon-material.material-sm{
    padding-bottom: 7px;
    padding-top: 5px;
    padding-left: 38px;
    padding-right: 13px;
}
.btn-w-icon-material.btn-sm.material-sm{
    padding-bottom: 4px;
    padding-top: 5px;
    padding-left: 38px;
    padding-right: 9px;
}
.btn-w-icon-material i{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-w-icon-material.r-side{
    padding-right: 38px !important;
    padding-left: 10px !important;
}
.btn-w-icon-material.r-side >i{
    left: auto;
    right:0;
}

.ripples {
    overflow: hidden;
    position: relative;
}

.waves {
    position: absolute;
    display: block;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.ripple {
    -webkit-animation: ripple 0.65s linear;
    -moz-animation: ripple 0.65s linear;
    -ms-animation: ripple 0.65s linear;
    -o-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    100% {
        opacity: 0;
        -webkit-transform: scale(2.5);
    }
}

@-moz-keyframes ripple {
    100% {
        opacity: 0;
        -moz-transform: scale(2.5);
    }
}

@-o-keyframes ripple {
    100% {
        opacity: 0;
        -o-transform: scale(2.5);
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

.d-flex-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.d-flex-column-center{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.d-flex-j-between-a-center{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.d-flex-column{
    display: flex;
    flex-direction: column;
}
.d-flex-rows{
    display: flex;
    flex-direction: row !important;
}

.tooltip-inner{
    background-color: rgba(71,77,78,0.94) !important;
    font-size: 0.9em !important;
}
.tooltip.tooltip-top .tooltip-arrow, .tooltip.bs-tether-element-attached-bottom .tooltip-arrow{
    border-top-color: rgba(71,77,78,0.94) !important;
}
.tooltip.tooltip-right .tooltip-arrow, .tooltip.bs-tether-element-attached-left .tooltip-arrow{
    border-right-color: rgba(71,77,78,0.94) !important;
}
.tooltip.tooltip-bottom .tooltip-arrow, .tooltip.bs-tether-element-attached-top .tooltip-arrow {
    border-bottom-color: rgba(71,77,78,0.94) !important;
}
.tooltip.tooltip-left .tooltip-arrow, .tooltip.bs-tether-element-attached-right .tooltip-arrow{
    border-left-color: rgba(71,77,78,0.94) !important;
}
.main-sidebar-list-wrap li{
    position: relative;
    overflow: hidden;
}
.main-sidebar-list-wrap li.dk{
    box-shadow: 4px 0px 4px -4px #050b14 inset;
}
.cat-list-fi li{
    font-size:0.8em;
}
.main-sidebar-list-wrap li .list-body{
    min-height: 45px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}
.d-flex-aligns-item-center {
    display: flex;
    align-items: center;
}
.to-badge-wrap .badge{
    font-weight:400;
    transition: all 0.5s;
    transform: perspective(300px) rotateX(0deg);
    position: relative;
    display: inline-block;
    transform-origin: top center;
    margin: 0 5px;
    border-radius: 0 0 5px 5px;
}
.to-badge-wrap .badge:hover{
    transform: perspective(300px) rotateX(30deg);
    box-shadow: 0px 5px 2px -2px #a6a6a6;
}
.opt-sidebar-wrap{
    position: relative;
    /*z-index: 1000;*/
}
.opt-sidebar-wrap >div {
    padding-top: 0 !important;
}

.opt-sidebar-wrap .nav-active-border {
    padding: 0px 2%;
}
.opt-sidebar-wrap .nav-active-border .nav .nav-link{
    padding: 12px 16px;
    transition: all 0.5s;
    font-weight: 600;
    border-right: 1px solid #f8f8f8;
}
.opt-sidebar-wrap.osw-dym-cb-wrap .nav-active-border .nav .nav-link{
    border-right: 1px solid #f8f8f8 !important;
}
.opt-sidebar-wrap .nav-active-border .nav .nav-link.active{
    background-color: #fdfdfd;
    box-shadow: 4px 6px 5px -4px #dedede inset,-6px 6px 5px -7px #dedede inset;
}
.opt-sidebar-wrap .nav-active-border .nav .nav-link.active:after{
    position: absolute;
    content: '';
    bottom: -6px;
    background-color: #fdfdfd;
    width: 12px;
    height: 12px;
    right:calc(50% - 6px);
    left: auto;
    transform: rotate(45deg);
    border-bottom: 1px solid #eeeff0;
    border-right: 1px solid #eeeff0;
    z-index: 1000;
}
.opt-sidebar-wrap .nav-active-border .nav .nav-link:before{
    border-left-color: #101823;
    bottom: calc(100% - 3px);
}
.opt-sidebar-wrap .nav-active-border .nav .nav-link i{
    font-size: 1.1em;
    margin-right: 10px;
}
.box-wrap {
    background-color: #fff;
    border: 1px solid #efefef;
    box-shadow: 0 2px 13px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0,0.02);
    padding: 0 1rem;
    height: auto;
    transition: all 0.5s;
    overflow: hidden;
}
.center-mf-box h6 {
    border-bottom: none !important;
    padding: 0 10px 0 0;
    margin-bottom: 0;
    font-weight: 600;
}
.d-flex-j-between-a-center {
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.none-after:after{
    display: none !important;
}

.checklist-full-custom li {
    color: #fff;
    /*height: 30px;*/
    padding: 0;
    margin: 5px 1rem;
}
.checklist-full-custom li .md-check {
    padding: 0;
    min-height: 30px;
}
.checklist-full-custom li .md-check i {
    width: 100%;
    position: absolute;
    min-height: 35px;
    border-radius: 6px !important;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    background-color: #fff !important;
    border:1px solid #e0e0e0;
    transition: all 0.5s;
}
.checklist-full-custom li .md-check i:before{
    border:none;
}
.checklist-full-custom li .md-check input:checked + i,.checklist-full-custom li .md-check:hover i{
    background-color: #4caf50 !important;
    border-color: #4caf50;
}
.checklist-full-custom li .md-check input:checked + i + span{
    color:#fff;
    padding-left: 27px;
}
.checklist-full-custom li .md-check input:checked + i + span:hover:after{
    opacity: 0 !important;
}
.checklist-full-custom li .md-check > span{
    z-index: 5;
    position: relative;
    min-height: 35px;
    float: left;
    width: 100%;
    color: #8e8e8e;
    padding-left: 10px;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    font-size: .9em;
    position: relative;
    line-height: 1.2;
}
.checklist-full-custom li .md-check:hover > span{
    color:#fff;
}
.checklist-full-custom li .md-check > span:after{
    position: absolute;
    content: '';
    width:10px;
    height:4px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    right:10px;
    top:calc(50% - 2px);
    opacity: 0;
    transition: all 0.5s;
}
.checklist-full-custom li .md-check:hover > span:after{
    opacity: 1;
}
.checklist-full-custom li .md-check input[type="checkbox"]:checked + i:after{
    left: 9px;
    top: 6px;
}
.action-f-tab-list-wrap{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    margin-top: 8px;
}
.action-f-tab-list-wrap li{
    height: 100%;
    text-align: center;
    padding: 10px 1.5rem;
    border-right: 1px solid #eeeff0;
    border-left: 1px solid #eeeff0;
    border-top: 1px solid #eeeff0;
    position: relative;
    display: flex;
    justify-content: center;
    margin-left: 4px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    font-weight: 600;
    top: 1px;
    font-size: 1.1em;
    transition: all 0.5s,border 0s;
    cursor: pointer;
}
.action-f-tab-list-wrap li > span{
    width: 0;
    height:4px;
    position: absolute;
    top:0;
    opacity: 0;
    transition: all 0.5s;
}
.action-f-tab-list-wrap li:hover,.action-f-tab-list-wrap li.active{
    border-bottom: 1px solid #fff;
}
.action-f-tab-list-wrap li.active > span,.action-f-tab-list-wrap li:hover > span{
    width: 100%;
    opacity: 1;
    transition: all 0.5s;

}
.add-n-page-btn{
    width: 44px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-top: 16px;
    border-radius: 5px 5px 0 0;
    margin-right: 8px;
    transition: all 0.5s;
}
.add-n-page-btn:hover{
    opacity: 0.5;
}

.counter-sms {
    border-radius: 25px;
    padding: 0 10px 2px 10px;
    margin-top: 6px;
    box-shadow: 0 0 3px 0 #828282 inset;
    background-color: #f5f5f5;
    font-weight: 600;
}
.fields-drp-cus.cop-drp .dropdown-menu{
    left:auto !important;
    right:0 !important;
}
.field-list-items{
    border:1px dashed #e6e6e6;
    padding:6px 5px;
    border-radius: 8px;
    margin-bottom: 5px;
}
.new-cus-field-box{
    background-color: #f7f7f7;
    border: 1px solid #e6e6e6;
}
.has-scrol-in-modal{
    max-height: 200px;
    overflow: auto;
    padding-bottom: 10px;
}
.has-scrol-list-box{
    position: relative;
}
/*.has-scrol-list-box:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 0;
    left:0;
    bottom: 0;
    box-shadow: 0 20px 13px 35px #fff;
}*/


.fb-form-group .select2-container--default .select2-selection--single {
    background-color: transparent;
    border-color: #c5c5c5 !important;
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
}
.fb-form-group .select2-container--default .select2-selection--single .select2-selection__arrow b {
    height: 7px;
    left: 35%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 45%;
    width: 7px;
    border: 2px solid #797979 !important;
    border-top: none !important;
    border-right: none !important;
    transform: rotate(-45deg);
    transition: all 0.5s;
}
.fb-form-group .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    transform: rotate(136deg);
    top: 54%;
}
.fb-form-group .select2-container--default .select2-selection--multiple {
    background-color: #ffffff00;
    border-color: #e4e6e8 !important;
    border-radius: 4px 0 0 4px !important;
    border-right: none !important;
    height: 100px !important;
    overflow: auto;
}
.fb-form-group .select2-hidden-accessible{
    height:0 !important;
}
.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
    border: 1px solid #e4e6e8 !important;
    height: 38px !important;
    border-radius: 4px !important;
    background-color:#ffffff !important;
    overflow:auto;
}
.select2-container--default .select2-selection--multiple.score-select-2{
    height: auto !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--single .select2-selection__choice {
    background-color: #2196f3 !important;
    border: none !important;
    padding: 0 8px 0 0 !important;
    overflow: hidden;
    border-radius: 4px;
    font-size: .9em;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover .select2-selection__choice__remove, .select2-container--default .select2-selection--single .select2-selection__choice:hover .select2-selection__choice__remove {
    margin-left: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove, .select2-container--default .select2-selection--single .select2-selection__choice__remove {
    color: #fff !important;
    margin-right: 6px !important;
    border-right: 1px solid #1e87da;
    padding: 3px 6px 3px 6px !important;
    background-color: #1e87da;
    margin-left: -18px;
    transition: all 0.3s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
    color: #767676 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default.select2-container--focus .select2-selection--single {
    border: 1px solid #e4e6e8 !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff !important;
    padding-left: 1.4rem;
    position: relative;
    color: #2196f3;
    transition: all 0.4s;
}
.select2-container--default .select2-results__option[aria-selected=true]:after {
    position: absolute;
    width: 5px;
    height: 10px;
    border-bottom: 2px solid #2196f3;
    border-right: 2px solid #2196f3;
    transform: rotate(45deg);
    content: '';
    left: 10px;
    top: calc(50% - 7px);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    color: #2196f3 !important;
    background-color: #fff !important;
    transition: all 0.4s;
}
.select2-container--default .select2-search--inline .select2-search__field {
    width: 100% !important;
}
.detail-info-avatar-wrap{
    height:82px;
    display: flex;
    align-items: center;
}
.detail-info-avatar-wrap > span{
    display: flex;
    align-items: center;
    justify-content: center;
}
.detail-info-avatar-wrap.avatar-w--status > span >i{
    background-color: #fff;
    border: 2px solid #fbfbfb;
}
.detail-info-fue-wrap{
    height:82px;
}
.detail-info-fue-wrap  > b{
    height:inherit;
}
.detail-info-fue-wrap  > b{
    height:inherit;
}
.detail-info-fue-wrap  > b > .info-fue-wrap{
    height:inherit;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.user-info-detail-list-wrap{
    display: flex;
}
.user-info-detail-list-wrap > li{
    margin-right:20px;
}
.user-info-detail-list-wrap > li > span{
    color:#717171;
}
.user-info-detail-list-wrap > li > span i{
    color: #4caf50;
    font-size: 1.3em;
}
.summary-info-detail-wrap{
    margin: 3rem 0 2rem;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: #f3f3f3;
    border-radius:8px;
}
.summary-info-detail-wrap li{
    width: 100%;
    margin: 5px 5px 12px;
    border: none;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    opacity: 1;
    animation: widgetLoad 1s ease-out;
}

.summary-info-detail-wrap li .widget-top-rel{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.summary-info-detail-wrap li.sidw-type-a .widget-top-rel i:first-child{
    font-size: 3.5em;
}
.summary-info-detail-wrap li.sidw-type-a.sidw-type-b .widget-top-rel i:first-child{
    font-size: 3em;
}
.summary-info-detail-wrap li.sidw-type-a .widget-top-rel i.status-icon-play{
    font-size: 1em;
    color: #fff;
    margin-right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 2px;
    box-shadow: 2px 1px 2px 1px rgba(0,0,0,0.13);
}
.summary-info-detail-wrap li > i{
    width: 30px;
    height:30px;
    border-radius: 50%;
    background-color: #fff;
    display:flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    margin-right:10px;
}
.summary-info-detail-wrap li.sidw-type-a > span{
    font-size: 1.1em;
    font-weight: 600;
    color: rgba(255,255,255,0.51);
    letter-spacing: 0.04em;
}
.summary-info-detail-wrap li.sidw-type-a .widget-top-rel > span{
    font-size: 1em;
    color: #4a4a4a;
    padding: 0;
}
.summary-info-detail-wrap li.sidw-type-a .widget-top-rel > p{
    margin-bottom: 0;
    color: #B5B5C3;
    font-size: 1em;
    line-height: 1.1;
}
.summary-info-detail-wrap li:nth-child(1){
    animation-delay: 0.1s;
}
.summary-info-detail-wrap li:nth-child(2){
    animation-delay: 0.2s;
}
.summary-info-detail-wrap li:nth-child(3){
    animation-delay: 0.3s;
}
.summary-info-detail-wrap li:nth-child(4){
    animation-delay: 0.4s;
}
.summary-info-detail-wrap li:nth-child(5){
    animation-delay: 0.5s;
}
.summary-info-detail-wrap li:nth-child(6){
    animation-delay: 0.6s;
}
.summary-info-detail-wrap li:nth-child(7){
    animation-delay: 0.7s;
}
.summary-info-detail-wrap li:nth-child(8){
    animation-delay: 0.8s;
}
@keyframes widgetLoad {
    from {
        opacity : 0;
        top : -10px;
    }
    to {
        opacity : 1;
        top : 0;
    }
}

/**Charts**/

.kvkk-box-wrap {
    padding: 1rem;
}
.kvkk-box-wrap > h6 {
    color: #2d1f69;
    font-weight: 700;
    font-size: 1.3em;
}
.doughnut-chart-box-wrap {
    padding: 1rem;
}
.doughnut-chart-box-wrap > h6 {
    color: #2d1f69;
    font-weight: 700;
    font-size: 1.3em;
    margin-top: 10px;
    margin-bottom: 2.3rem;
}
.doughnut-chart-box-wrap > div {
    margin-bottom: 2.5rem;
}
.doughnut-wrap {
    width: 100%;
    margin: 1rem auto;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.chartjs-tooltip {
    opacity: 1;
    position: absolute;
    background: #fff;
    color: #f4524e;
    border-radius: 12px;
    transition: all 0.1s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px 0 rgba(106, 72, 245, 0.26);
    padding: 4px 10px;
}
.chartjs-tooltip:empty {
    display: none;
}
.chartjs-tooltip > h1 {
    margin: 0;
    font-size: 1.8em;
    font-weight: 700;
}
.leg-list-wrap {
    padding: 0 0 0 1rem;
    margin: 0;
    list-style: none;
}
.leg-list-wrap > li {
    /*    display: flex;
        flex-direction: row;
        align-items: center;*/
    margin-bottom: 15px;
    float: left;
    clear: left;
}
.d-flex-center-into-box{
    display: flex;
    justify-content: center;
    align-items: center;
}
.leg-list-wrap > li .chart-leg {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    margin-right: 8px;
    transition: all 0.3s;
    float:left;
}
.leg-list-wrap > li:hover .chart-leg {
    transform: scale(0.9);
}
.leg-list-wrap > li .chart-legend-label-text {
    font-size: 0.8em;
    font-weight: 500;
    color: #9690c3;
}
.dcbw-scrollable .leg-list-wrap {
    border: 1px solid #b9c7fa;
    overflow: auto;
    border-radius: 8px;
    height: 190px;
    padding: 0.6rem 0.5rem;
    margin-right: 2rem;
}
.dcbw-scrollable .leg-list-wrap li {
    padding: 5px 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: all 0.4s;
}
.dcbw-scrollable .leg-list-wrap li:hover {
    background-color: #fff;
    box-shadow: 0 2px 6px 0 #b9c7fa;
}
.dcbw-scrollable .leg-list-wrap li:hover .chart-leg {
    transform: scale(1);
}
.bar-leg {
    height: 160px;
    padding: 0.6rem 0.5rem 0.6rem 0.5rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.bar-leg > li {
    padding: 5px 10px;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: all 0.4s;
    position: relative;
    width: auto;
    justify-content: flex-end;
}
.bar-leg > li .chart-leg{
    width: 16px;
    height:16px;
}
.bar-leg > li > ul {
    list-style: none;
    position: absolute;
    background-color: #fff;
    border: 1px solid #b0c0fa;
    border-radius: 5px;
    padding: 3px;
    display: flex;
    flex-direction: row;
    bottom: 100%;
    transform: translateY(-15px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s;
}
.bar-leg > li > ul li {
    background-color: #c4d2fa;
    margin-right: 2px;
    margin-left: 2px;
    color: #697fc0;
    font-size: 0.6em;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 400;
}
.bar-leg > li > ul:after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-bottom: 1px solid #b0c0fa;
    border-right: 1px solid #b0c0fa;
    transform: rotate(45deg);
    bottom: -4px;
    left: calc(50% - 3px);
}
.bar-leg > li:hover {
    background-color: #fff;
    box-shadow: 0 2px 6px 0 #b9c7fa;
}
.bar-leg > li:hover > ul {
    transform: translateY(-5px);
    visibility: visible;
    opacity: 1;
}
.bar-leg > li:hover .chart-leg {
    transform: scale(1);
}

/**Charts end **/

.summary-chart-title{
    font-weight: 600;
    color: #3e3e3e;
    margin: 0 1.8rem;
    padding-left: 6px;
    border-left: 5px solid #2196f3;
}

/*Helper Form And Into ul li list Global Style*/
.help-notify{
    position: relative;
    display: inline-flex;
    justify-content: center;
}
.help-notify .hn-content{
    display: block;
    position: absolute;
    color: #fff;
    border-radius: 6px;
    left: calc(100% + 8px);
    top: 0;
    z-index: 999;
    max-width: 220px;
    min-width: 140px;
    width: max-content;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
}
.help-notify .hn-content:after{
    position: absolute;
    content: "";
    background-color: inherit;
    width:8px;
    height: 8px;
    transform: rotate(45deg);
    left:-4px;
    top:10px;
}
.help-notify .hn-content.left:after{
    left:auto;
    right:-4px;
    top:10px;
}
.help-notify .hn-content.left{
    right: calc(100% + 8px);
    left:auto;
}
.help-notify .hn-content.down:after{
    left: calc(50% - 4px);
    top: -4px;
}
.help-notify .hn-content.down{
    right: auto;
    left:auto;
    top: calc(100% + 8px);
    bottom: auto;
}
.help-notify .hn-content.up:after{
    left: calc(50% - 4px);
    top: auto;
    bottom: -4px;
}
.help-notify .hn-content.up{
    right: auto;
    left:auto;
    bottom: calc(100% + 8px);
    top: auto;
}
.help-notify:hover .hn-content{
    transform: translateY(0);
    opacity:1;
    visibility: visible;
}
.help-notify .hn-content >h6{
    padding: 7px 10px;
    margin: 0;
    font-size: .9em;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.help-notify .hn-content .hn-body{
    padding: 6px 10px 10px;
}
.help-notify .hn-content .hn-body > p{
    margin: 0;
    font-size: .8em;
    font-weight: 400;
    line-height: 1.4;
}
.helper-w-popup-event{
    list-style: none;
    margin: 0;
    padding: 0;
}
.helper-w-popup-event li{
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    transition: all 0.5s;
    cursor: pointer;
}
.helper-w-popup-event li:hover{
    opacity: 0.6;
}
.helper-w-popup-event li:after{
    position: absolute;
    content: '';
    width:8px;
    height: 8px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    border-right: 2px solid rgba(255,255,255,0.2);
    transform: rotate(-45deg);
    left:0;
}

.alert-tooltip-popup-overly{
    position: fixed;
    width:100%;
    height:100vh;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    top:0;
    left: 0;
    z-index: 9999999;
}
.alert-tooltip-popup-overly .alert-tooltip-popup-content{
    width:40%;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 1px 1px 5px 0px #6d6d6d;

    -moz-animation-name: dropTop;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: dropTop;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-animation-duration: 0.3s;

    animation-name: dropTop;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-duration: 0.3s;
}
/*HF End*/
.hideSide {
    width:40px !important;
    transition: all 0s !important;
}

.main-side-list-wrap{
    width:304px;
}
.row-inner.custom-scroll{
    overflow: visible;
}
.main-side-list-wrap li{
    transition: all 0.5s;
}
.main-side-list-wrap li:hover,.main-side-list-wrap li.active{
    background-color: #202c3d;
}
.main-side-list-wrap li .list-body:after{
    left:0 !important;
    border-bottom-color: rgba(62,85,117,0.46);
}
.main-side-list-wrap li .list-body >i{
    font-size: 1.1em;
    width: 24px;
}
.filter-box-wrap .fb-head{
    border-bottom: 1px solid #ddd;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 15px;
    float: left;
    margin-bottom: 10px;
}
.tab-sidebar-box-wrap .fb-head{
    border-bottom: 1px solid #ddd;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 8px;
    margin-bottom: 0;
}
.tab-sidebar-box-wrap .list-search-items{
    padding:0 1rem;
}
.atpc-head{
    width:100%;
    height:48px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
}
.atpc-head h6{
    position: relative;
    padding-left: 1rem;
    display: flex;
    align-items: center;
}
.atpc-head h6:after{
    position: absolute;
    content: '';
    width:8px;
    height: 8px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(-45deg);
    left:0;
    margin-top: 3px;
}
.atpc-body{
    padding: 1rem;
}
.atpc-body > p{
    text-align: left;
    font-size: 1.08em;
    margin-bottom: 7px;
    padding: 3px;
}
.cus-alert-box ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.cus-alert-box ul li{
    font-weight: 500;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    transition: all 0.5s;
    cursor: pointer;
}
.cus-alert-box ul li:hover{
    opacity: 0.6;
}
.cus-alert-box ul li:after{
    position: absolute;
    content: '';
    width:8px;
    height: 8px;
    border-bottom: 2px solid #317096;
    border-right: 2px solid #317096;
    transform: rotate(-45deg);
    left:0;
}
.filter-result-item{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    transition: all 0.5s;
    border-radius: 6px;
    margin-bottom: 0;
    overflow: hidden;
}

.filter-result-item .card-body{
    padding: 0;
    min-height: 45px;
    overflow: hidden;
    position: relative;
    width: 60%;
    display: flex;
    align-items: center;
}
.filter-result-item .card-body .cm-content{
    transition: all 0.5s;
}

.filter-result-item .card-body .edit-btn-filter-item{
    color: #fff;
    margin-bottom: 0;
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    transition: all 0.3s ease-in-out;
}
.filter-result-item .card-body .edit-btn-filter-item > i{
    font-size: 1em;
}
.filter-result-item .card-body h4{
    font-size: 1em;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 0;
    margin-bottom: 0;
    text-align: left;
    height:100%;
}
.filter-result-item .card-body p{
    padding: 1px 4px;
    font-size: .9em;
    text-align: left;
    margin-left: 8px;
    padding-left: 8px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 40px;
    min-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.filter-result-item .card-body p:after{
    position: absolute;
    content: '';
    height: 30px;
    width: 1px;
    border-left: 1px dashed #b0b0b0;
    left: 0;
    top: calc(50% - 15px);
}
.filter-result-item .card-body h4:after{
    position: absolute;
    content: '';
    width:8px;
    height: 8px;
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotate(-45deg);
    left:0;
    display: none;
}
.filter-result-item .card-body i{
    font-size: 1.3em;
    color: #373a3c;
    width: 45px;
    border-right: 1px solid #f0f0f0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}
.filter-result-item:hover .card-body i{
    background-color: #2196f3;
    color:#fff;
}
.filter-result-item .card-footer{
    padding: 0;
    border-top: none;
    width: 40%;
}
.filter-result-item .card-footer .filter-result-status{
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    margin: 0;
    height:100%;
}
.filter-result-item .card-footer .filter-result-status li{
    width: calc(100% / 5);
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s;
    border-left: 1px solid #f0f0f0;
    background-color: #fbfbfb;
}
.filter-result-item .card-footer .filter-result-status li:last-child{
    border-right: none;
    width: calc(100% / 3);
}
.filter-result-item .card-footer .filter-result-status.item-fix-4th li{
    width: calc(100% / 4);
}
.filter-result-item .card-footer .filter-result-status.item-fix-4th li:last-child{
    width: calc(100% / 3);
}
.filter-result-item .card-footer .filter-result-status li:first-child{
    border-left: none;
}
.filter-result-item .card-footer .filter-result-status li:last-child > span{
    font-weight: 700;
    font-size: .9em;
    opacity: 0.7;
    margin-right: 4px;
}
.filter-result-item .card-footer .filter-result-status li:hover{
    box-shadow: 0 4px 5px -2px #c1c0c0;
    position: relative;
    z-index: 2;
}
.filter-result-item .card-footer .filter-result-status li >i{
    font-size: .9em;
    margin-right: 4px;
}
.sc-cus-filter{
    min-height:52px;
    height:auto;
}

.sidebar-list-items-wrap{
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar-list-items-wrap >li{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid #f2f2f2;
    cursor: pointer;
    transition: all 0.5s;
    position: relative;
    overflow:hidden;
}
.sidebar-list-items-wrap >li:after{
    position: absolute;
    content: '';
    bottom: calc(50% - 6px);
    background-color: #f6fafb;
    right: -9px;
    left: auto;
    border-top: 0px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0px solid transparent;
    border-bottom: 14px solid transparent;
    transform: rotate(-45deg);
    opacity: 0;
    transition: all 0.5s;
}
.sidebar-list-items-wrap > li .user-info-detail-list-wrap > li,.share-chanel-status-wrap .user-info-detail-list-wrap > li{
    position: relative;
}
.sidebar-list-items-wrap > li .user-info-detail-list-wrap > li:after,.share-chanel-status-wrap .user-info-detail-list-wrap > li:after{
    position: absolute;
    content: '';
    background-color: #ccc;
    width: 4px;
    height: 4px;
    right: -11px;
    top: calc(50% - 2px);
    border-radius: 50%;
}
.sidebar-list-items-wrap > li .user-info-detail-list-wrap > li:last-child:after,.share-chanel-status-wrap .user-info-detail-list-wrap > li:last-child:after{
    display: none;
}
.sidebar-list-items-wrap >li.active:after,.sidebar-list-items-wrap >li.active:hover:after{
    opacity: 1;
    border-left: 14px solid #2196f3;
}
.sidebar-list-items-wrap >li:hover:after{
    border-left: 14px solid #a6a6a6;
    opacity: 1;
}
.sidebar-list-items-wrap >li:hover,.sidebar-list-items-wrap >li.active{
    background-color: #f8f8f8;
}
.tab-v-list-search-items{
    position: relative;
    display: flex;
    align-items: center;
    border-right: 1px solid #f6f6f6;
    width: calc(100% - 50px);
}
.tab-v-list-search-items input{
    border: none;
    padding-left: 1.5rem;
    padding-right: 1.2rem;
}
.tab-v-list-search-items > i{
    position: absolute;
    left: 0;
}
.share-chanel-status-wrap{
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeff0;
    box-shadow: 0px 2px 2px -1px #e5f5f8;
    position: relative;
    z-index: 1;
    align-items: center;
}
.share-chanel-status-wrap .sc-s-r .sc-title{
    display: flex;
    flex-direction: row;
}
.share-chanel-status-wrap .sc-s-r {
    display: flex;
    flex-direction: column;
    width: calc(100% - 100px);
    align-items: flex-start;
}
.tab-i-color{
    background-color: #f8f8f8;
}
.box-h-arr{
    padding: 14px 15px;
}
.light-tb .table-striped > tbody > tr {
    background-color: rgba(255,255,255,0.2);
}
.qr-frame-wrap{
    width: 50%;
    margin: auto;
}
.qr-frame-wrap canvas{
    width:100%;
}
.qr-url-frame-wrap{
    background-color: #f0f0f0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-weight: 700;
    transition: all 0.5s;
    height: 38px;
    overflow: hidden;
}
.qr-url-frame-wrap >a{
    padding: 0 1rem;
    height: inherit;
    display: flex;
    align-items: center;
    transition: all 0.5s;
}
.qr-url-frame-wrap >i{
    width: 38px;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #62aa62;
    color: #fff;
    transition: all 0.5s;
    font-size: 1.2em;
    cursor: pointer;
}
.qr-url-frame-wrap >i:hover{
    opacity: 0.7;
}
.qr-url-frame-wrap a:hover{
    background-color: #a2a2a2;
    color:#fff;
}
.count-box{
    background-color: #f2f2f2;
    padding: 1px 8px;
    border-radius: 25px;
    box-shadow: 0px 0px 2px 0px #ccc inset;
    font-weight: 500;
    font-size: .9em;
}
.inbox-msg-list-wrap{
    display: flex;
    align-items: center;
}
.inbox-msg-list-wrap > i{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    background-color: #f6f6f6;
    justify-content: center;
    box-shadow: 0px 1px 1px 0px;
}
.inbox-msg-list-wrap >span{
    font-size:.9em;
}
/*Tb-style**/
.nested-tb{
    border-collapse: separate;
    border-spacing: 0 5px;
}
.tb-detail-r-detail > thead > tr > th{
    background-color: #eceff1 !important;
    color: #1565c0 !important;
}
.nested-tb > thead > tr > th{
    /*background-color: #5962a6;*/
    background-color: #1e87da;
    color: #ffffff;
    padding: 10px;
    position: sticky;
    top: -1px;
    white-space: nowrap;
    vertical-align: middle;
    z-index: 20;
}
.nested-tb.ns-center > thead > tr > th,.nested-tb.ns-center > tbody > tr > td{
    text-align: center;
}
.nested-tb.ns-no-head > thead {
    display: none;
}
.nested-tb.ns-no-head > tbody > tr > td{
    height: 28px;
    font-weight:600;
}
.nested-tb > thead > tr > th:first-child{
    border-radius: 5px 0 0 5px;
}
.nested-tb > thead > tr > th:last-child{
    border-radius:0 5px 5px 0;
}
.nested-tb > tbody > tr > td{
    height: 38px;
    font-weight: 500;
    vertical-align: middle;
    border-color: #f9f9f9;
    border-bottom: 1px solid #f9f9f9;
}
.nested-tb.v-align-center > tbody > tr > td{
    vertical-align: middle;
}
.nested-tb > tbody > tr{
    transition: all 0.5s;
    background-color: rgba(155 ,153 ,153 ,0);
}
.nested-tb > tbody > tr:nth-child(odd){
    background-color: #fbfbfb;
}
.nested-tb.ns-compare > tbody > tr{
    position: relative;
}
.nested-tb.ns-compare > tbody > tr:after{
    display: inline-block;
    font: normal normal normal 15px/1 FontAwesome;
    font-size: 18px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    content: "\f0ec";
    top: -10px;
    left: 3px;
    color: #1e87da;
    transform: rotate(90deg);
    opacity: 0.5;

}
.tb-detail-r-detail > tbody > tr > td:first-child{
    padding-left: 6px;
}
.nested-tb.ns-compare > tbody > tr:first-child:after{
    display: none;
}
.nested-tb.ns-white > tbody > tr{
    background-color: #fff !important;
}
.nested-tb > tbody > tr:hover{
    box-shadow: 0 9px 2px -7px rgba(225,225,225,0.51);
}
.tb-detail-r-detail > tbody > tr:hover{
    box-shadow:none
}
.nested-tb > tbody > tr > td:first-child {
    border-radius: 5px 0 0 5px;
    border-left: 1px solid #f9f9f9;
}
.nested-tb > tbody > tr > td:last-child{
    border-radius: 0 5px 5px 0;
    border-right: 1px solid #f9f9f9;
}
.nested-tb.ns-compare > tbody > tr > td button{
    position: relative;
    left:6px;
}
.nested-tb.ns-anim > tbody > tr:last-child{
    transform-origin: top center;
    -moz-animation-name: DropTr;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: DropTr;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;

    animation-name: DropTr;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;

}

@-moz-keyframes DropTr {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
@-webkit-keyframes DropTr {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
@keyframes DropTr {
    0% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}
/*Tb-style end**/
.btn-blur-white{
    background-color: rgba(255, 255, 255, 0.5);
    border:none;
    border-radius: 8px;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.5s;

}
.btn-blur-white:hover{
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow:none !important;
}
.checklist-full-custom.cfc-scrolling{
    max-height: 200px;
    overflow: auto;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 1rem 0.5rem;
    box-shadow: 0px 0px 4px 0px #ddd inset;
}
.range-box-head-cus.rbhc-toolbar .dropdown-toggle{
    font-size: 0.8em;
}
.range-box-head-cus.rbhc-toolbar .dropdown-menu .dropdown-item{
    line-height: 1.4;
}
.range-box-head-cus.drp-b-h-cus.b-wi > .dropdown-toggle{
    background-color: #fff !important;
    border: 1px solid #e4e6e8 !important;
    text-align: left !important;
    padding: 4px 10px  !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.range-box-head-cus.drp-b-h-cus,.range-box-head-cus.drp-b-h-cus .dropdown-toggle{
    width:100%;
}
.range-box-head-cus.drp-b-h-cus .dropdown-toggle i{
    font-size:0.9em;
}
.range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item{
    width: 97.4%;
    padding: 5px 14px;
}
.range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item:last-child{
    margin-bottom: 0;
}
.range-box-head-cus.drp-b-h-cus.lang-drp .dropdown-toggle{
    background-color: #fff;
    border:1px solid #e4e6e8;
    height:38px;
    text-align: left;
    display:flex;
    align-items: center;
    justify-content: space-between;
    ;
}
.range-box-head-cus.drp-b-h-cus.lang-drp .dropdown-toggle:hover{
    background-color: transparent;
    box-shadow: none;
}
.range-box-head-cus.drp-b-h-cus.lang-drp .dropdown-toggle:after{
    width:7px;
    height:7px;
    border-bottom: 2px solid #55595c;
    border-right: 2px solid #55595c;
}
.range-box-head-cus .dropdown-toggle{
    color: #474d58 !important;
    border: none;
    font-size: 1em;
    background-color: rgba(71,77,88,0.14);
    transition: all 0.5s;
    font-weight: 600;
    text-shadow:none;
    /*height:40px !important;*/
}
.range-box-head-cus .dropdown-toggle:after{
    display: none;
}
.range-box-head-cus.with-arrow .dropdown-toggle{
    padding:4px 8px 5px;
}
.range-box-head-cus.with-arrow .dropdown-toggle >span{
    font-size:1em;
}
.range-box-head-cus.with-arrow .dropdown-toggle:after{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #474d58;
    border-right: 2px solid #474d58;
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    margin-top: -4px;
    margin-left: 7px;
}
.range-box-head-cus .dropdown-toggle i{
    color: #474d58;
    font-size: 1.3em;
}
.range-box-head-cus .dropdown-toggle i.fa-random{
    color: #989898;
    font-size: 1em;
    margin:0 5px;
}
.range-box-head-cus .dropdown-menu,
.status-rd-cus .dropdown-menu{
    border-radius:6px;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    padding: 4px 3px;
    left: auto;
    right: 0;
    transition: opacity 0.3s,transform 0.4s;
}
.range-box-head-cus{
    /*    z-index: 99;*/
}
.range-box-head-cus.r-side .dropdown-menu{
    right:auto;
    left:0;
}
.range-box-head-cus.open .dropdown-menu,
.status-rd-cus.open .dropdown-menu{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    z-index: 99999999;
}
.status-rd-cus .dropdown-menu .dropdown-item > span,
.status-rd-cus > a.btn span{
    display: flex;
    align-items: center;
}
.status-rd-cus.src-t-s > a.btn span.text-sm{
    font-size:0.9em !important;
}
.status-rd-cus .dropdown-menu .dropdown-item i,
.status-rd-cus > a.btn i{
    width: 24px;
    height: 24px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-right: 5px;
    padding-top: 2px;
    background-color: #f7f7f7;
}
.status-rd-cus .dropdown-menu .dropdown-item{
    transition: all 0.4s;
    border: 1px solid #f7f7f7;
    margin-bottom: 2px;
    border-radius: 5px;
    padding: 4px 15px;
}
.status-rd-cus .dropdown-menu .dropdown-item:hover{
    border-color: #2196f3;
    background-color: #fff;
    color:#2196f3;
}

.range-box-head-cus .dropdown-menu .dropdown-item{
    background-color: rgba(71,77,88,0.07);
    border-radius: 4px;
    margin: 0 3px 4px;
    padding: 4px 6px;
    color: #474d58 !important;
    font-size: .9em;
    font-weight: 600;
    width: 48%;
    float: left;
    clear: none;
    transition: all 0.5s;
}
.range-box-head-cus .dropdown-menu .dropdown-item:hover{
    background-color: #474d58;
    color:#fff !important;
}
.range-box-head-cus .dropdown-menu .dif{
    padding: 2px 3px;
    margin:0;
}
.range-box-head-cus .dropdown-menu .dif .form-control{
    padding: .3rem .75rem;
    font-size: 1em;
    font-weight: 500;
}
.range-box-head-cus .dropdown-menu .dif .input-group-addon{
    padding: .2rem .75rem;
    background-color: #474d58 !important;
    color: rgba(255,255,255,0.87) !important;
}

/***********************************/

.pulse {
    margin-top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 8px;
}
.pulse.success{
    box-shadow: 0 0 0 rgba(34,182,110,0.9);
    animation: pulseStatusActive 1000ms infinite;
}

@-webkit-keyframes pulseStatusActive {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(34,182,110,0.9);
    }
    90% {
        -webkit-box-shadow: 0 0 0 8px rgba(34,182,110,0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(34,182,110,0);
    }
}
.pulse.danger{
    box-shadow: 0 0 0 rgba(239,25,60,0.9);
    animation: pulseStatusDeactive 1000ms infinite;
}

@-webkit-keyframes pulseStatusDeactive {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(239,25,60,0.9);
    }
    90% {
        -webkit-box-shadow: 0 0 0 8px rgba(239,25,60,0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(239,25,60,0);
    }
}

.mt--2{
    margin-top:2px;
}

.code-place-holder-wrap{
    padding: 1rem;
    border-radius: 6px;
    box-shadow: 0px 0px 4px 0px rgba(108,172,177,0.40) inset;
    color: #9445de;
}
.d-rang-cus{
    width:100%;
}
.d-rang-cus > a{
    height: 40px;
    line-height: 1.7;
    margin-bottom: 0;
    background-color: transparent !important;
    border: 1px solid #e4e6e8 !important;
    width: 100%;
    float: left;
    border-radius: 4px;
    display: flex;
    align-items: center;
    padding: 10px;
}
.d-rang-cus .dropdown-menu{
    left:0 !important;
    right:auto !important;
}
.d-rang-cus .dropdown-diviter{
    display: none;
}
.d-rang-cus .dropdown-toggle > i{
    margin-right: 6px !important;
}
.d-rang-cus .dropdown-toggle > span{
    font-weight: 400;
    color: #55595c;
}
.d-rang-cus .dropdown-toggle:hover{
    box-shadow: none;
}
.d-rang-cus .dropdown-toggle:after{
    border: none;
    border-bottom: 2px solid #474d58;
    border-right: 2px solid #474d58;
    transform: rotate(45deg);
    border-bottom-right-radius: 2px;
    right: 14px;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    position: absolute;
    display: block;
}
.graph-title-size h6{
    font-size: 0.9em !important;
    font-weight: 600;
}
.main-sidebar-list-wrap.ms-contact li ul li{
    float:left;
    position: relative;
    margin-right:24px;
    overflow: visible;
}
.head-full-box {
    border-bottom: 1px solid #f1f1f1;
    box-shadow: 0px 0 3px 0px #f1f1f1 inset;
    background-color: #fbfbfb;
}
.head-full-box .form-control,.head-full-box .d-rang-cus > a{
    height: 35px;
    background-color: #fff !important;
    font-size: 1em;
}
.head-full-box .col-form-label{
    text-align: right;
}
.head-full-box .btn-w-icon-material{
    height: 35px;
    font-size: 1.1em;
    margin-top: -3px;
}
.group-sort-header-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}
.radio-bx-wrap li:first-child{
    margin-left: 0;
}
.group-sort-header-wrapper .group-search{
    position: relative;

}
.group-sort-header-wrapper .group-search.active .list-search-input-wrap {
    -moz-animation-name: dropHeaderLeft;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;
    -webkit-animation-name: dropHeaderLeft;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;
    animation-name: dropHeaderLeft;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
    visibility: visible;
    opacity: 1;
}
.group-sort-header-wrapper .group-search .list-search-input-wrap{
    visibility: hidden;
    opacity: 0;
    width: 200px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: absolute;
    right: calc(100% + 10px);
    box-shadow: 0px 0px 4px 0px #e2e2e2;
    border: 1px solid #e6e6e6;
    top: 0;
    padding: 0;
    background-color: #fff;
}
.group-sort-header-wrapper .group-search .list-search-input-wrap.l-group-i-wrap{
    height:auto;
    padding:0 10px 10px 10px;
    width:255px;
    right:0;
    top:calc(100% + 10px);
}
.group-sort-header-wrapper .group-search .list-search-input-wrap.l-group-i-wrap:after{
    top:-5px;
    right:8px;
    transform:rotate(-136deg);
}
.group-sort-header-wrapper .group-search .list-search-input-wrap.l-group-i-wrap input{
    border: 1px solid rgba(0,0,0,.15) !important;
    height: 38px !important;
    padding-top: 8px !important;
}
.group-sort-header-wrapper .group-search .list-search-input-wrap:after{
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    background-color: #fff;
    transform: rotate(-45deg);
    right: -5px;
    top: calc(50% - 5px);
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}
.group-sort-header-wrapper .group-search.active .list-search-input-wrap i{
    transition: all 0.5s;
}
@-moz-keyframes dropHeaderLeft {
    0% {
        opacity: .5;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-webkit-keyframes dropHeaderLeft {
    0% {
        opacity: .5;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes dropHeaderLeft {
    0% {
        opacity: .5;
        transform: translateX(-25px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.group-sort-header-wrapper .group-search .list-search-input-wrap input{
    border:none;
    height:27px;
    padding-top: 6px;
}
.group-content-wrap{
    justify-content: end;
}
.group-content-wrap li{
    margin: 0 4px 10px 4px;
    overflow: visible !important;
}
.bg-gradient-success{
    background: -webkit-gradient(linear, left top, right top, from(#0dde7d), color-stop(99%, #22b66e)) !important;
    background: linear-gradient(to right, #0dde7d , #22b66e 99%) !important;
}
.cus-for-head{
    padding-left: 38px;
    padding-right: 10px;
    padding-bottom: 5px;
}
.gcw-f-modal li{
    width: 180px;
}
.placeholder-wrap{
    padding-left: 40px !important;
}
.group-content-wrap {
    justify-content: flex-start !important;
}
.radio-bx-wrap{
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin:0;
}
.radio-bx-wrap li{
    margin: 0 6px;
}
.radio-bx-wrap li .md-check{
    background-color: #f2f2f2;
    padding: 6px 10px;
    border-radius: 3px;
    overflow: hidden;
}
.radio-bx-wrap li .md-check i{
    width: 100%;
    height: 42px;
    z-index: 1;
    border-radius: 0;
    position: absolute;
    top: 0;
    background-color: transparent;
    margin: 0;
    left: 0;
}
.radio-bx-wrap li .md-check i:before{
    border:none;
}
.radio-bx-wrap li .md-check input[type="radio"]:checked + i:after{
    width:100%;
    height:100%;
    top:0;
    left:0;
    border:none;
    background-color: #2196f3;
    border-radius: 0;
    color:#fff;
}
.radio-bx-wrap li .md-check input[type="radio"]:checked + i + b{
    color: #fff;
    font-size: 0.9em;
    letter-spacing: 0.04em;
}
.radio-bx-wrap li .md-check b{
    position: relative;
    z-index: 2;
}
.group-content-wrap{
    border-radius: 5px;
    background-color: #ffffff;
    padding: 1rem;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid #e4e4e4;
    box-shadow: 0px 0px 3px 0px #e0e0e0 inset;
}
.group-content-wrap li{
    border: 1px solid #b5b5b5;
    border-radius: 8px;
    margin-bottom: 8px;
    width: 205px;
    height: 43px;
    overflow: hidden;
    background: #eeeeee;
    background: -moz-linear-gradient(45deg, #bbbbbb 0%, #cdcdcd 100%);
    background: -webkit-linear-gradient(
        45deg, #bbbbbb 0%,#cdcdcd 100%);
    background: linear-gradient(
        45deg, #bbbbbb 0%,#cdcdcd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#cdcdcd',GradientType=1 );
    color: #505050;
    position:relative;
    padding-left: 12px;
    opacity: 0.8;
}
.group-content-wrap li.active,.group-content-wrap li.active:hover{
    background: #a9db80;
    background: -moz-linear-gradient(45deg, #a9db80 0%, #96c56f 100%);
    background: -webkit-linear-gradient(
        45deg, #a9db80 0%,#96c56f 100%);
    background: linear-gradient(
        45deg, #80dba9 0%,#6fc5a1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f',GradientType=1 );
    border-color: #72c9a3;
    opacity: 1;
    color: #001c0f;
}
.group-content-wrap li:hover{
    transition:all 0.5s;
    opacity: 1;
}
.group-content-wrap li .md-check{
    height: 43px;
    display: flex !important;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}
.group-content-wrap li .md-check input:checked + i:before{
    border-width: 1px;
    background-color: inherit;
    border-color: transparent;
}
.group-content-wrap li .md-check input:checked + i{
    background-color:  #fff;
}
.group-content-wrap li .md-check b{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.9em;
    text-shadow:none;
}
.group-content-wrap li .md-check input[type=checkbox]:disabled + i + b{
    color: #fff;
}
.group-content-wrap li .md-check > i{
    margin-right: 0 !important;
    height: 26px;
    margin-top: 0;
    border-radius: 50%;
    position: absolute;
    background-color: #fff;
    right: 6px;
    width:26px;
    overflow: hidden;
}
.group-content-wrap li .md-check > i:before{
    border-width: 1px;
    background-color: inherit;
    border-color: #fff;
    height: inherit;
    width:inherit;
    right:0;
}
.group-content-wrap li .md-check input[type="checkbox"]:checked + i:after{
    left:10px;
    top:4px;
    width:7px;
    height:16px;
    border-color:#4bb187;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-caret {
    font-size: 0.8em;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub {
    border-radius: 4px;
    position: relative;
    padding-left: 11px;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub li {
    border-radius: 4px;
    transition: all 0.5s;
    margin-top: 2px;
}
.nav-stacked.nav-stacked-rounded .nav li li a, .nav-stacked.nav-stacked-rounded .nav li.active {
    color: #fff;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub li a {
    padding-left: 0;
    display: flex;
    align-items: center;
    width:100%;
}
.nav-stacked.nav-stacked-rounded .nav li li a, .nav-stacked.nav-stacked-rounded .nav li.active {
    color: #fff;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub li:hover, .nav-stacked.nav-stacked-rounded .nav li .nav-sub li.active {
    background-color: rgba(14,17,22,0.54);
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub li {
    border-radius: 4px;
    transition: all 0.5s;
    margin-top: 2px;
    display:flex;
    align-items:center;
    margin-left: 10px;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub li a >span.nav-icon {
    margin-right: 4px;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub:after {
    position: absolute;
    content: '';
    width: 2px;
    height: 78%;
    top: 0px;
    left: 10px;
    background-color: #202c3d;
    z-index: -1;
}
.nav-stacked.nav-stacked-rounded .nav li .nav-sub > li:after {
    position: absolute;
    content: '';
    width: 9px;
    height: 2px;
    left: -9px;
    background-color: #202c3d;
    z-index: -1;
}

.nav-stacked.nav-stacked-rounded .nav > li > a, .nav-stacked.nav-stacked-rounded .nav > li > a{
    border-radius: 3px !important;
    transition: all 0.5s;
    padding-left: 0;
}
.inner-start-build-wrap .inner-start-build-list.is-admin-wrap li{
    padding: 20px;
    box-shadow: 0px 0px 6px 0px #c6d9de;
    border-radius: 5px;
    width: 365px;
}
.inner-start-build-wrap .inner-start-build-list.is-admin-wrap li .item-thumb-frame img{
    width:50%;
}
.inner-start-build-wrap .inner-start-build-list.is-admin-wrap li p{
    font-size: 1em;
}
.prd-filter-col-wrap{
    display: flex;
    width:100%;
    flex-direction: column;
    margin-top: 1rem;
    color:#5e6177;
    padding:0 !important;
}
.pfc-box-syl{
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px 0 rgba(50,55,76,0.1);
    padding: 0;
}
.pfc-search-wrap{
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding:10px;
}
.pfc-search-wrap input{
    border:none;
    box-shadow: none;
    border-radius: 0;
    background-color: #fff !important;
}
.pfc-search-wrap i{
    color: #2196f3;
    font-size: 1.3em;
}
.pfc-search-wrap i.fa-times{
    color: #373a3c;
    cursor: pointer;
}
.pfc-types-wrap{
    padding:10px 20px;
}
.pfc-types-wrap .pfc-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding-bottom: 0;
    border: 1px solid #f1f1f1;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 1px 1px 0px 1px #f5f5f5;
}
.pfc-types-wrap .pfc-header-wrap h6 {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 0;
    color: #2196f3;
}
.pfc-types-wrap .pfc-header-wrap h6 i{
    font-size: 0.9em;
    color: #efefef;
}
.pfc-body-wrap {
    max-height: 250px;
}
.pfc-type-list{
    list-style: none;
    padding:10px;
    margin:0;
    width:100%;
}
.pfc-type-list > li.pt-item{
    color: #6b6f82;
    display: block;
    font-size: 14px;
    line-height: 25px;
    text-transform: capitalize;
    cursor: pointer;
    transition: all .3s ease 0s;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pfc-type-list > li.pt-item > .label{
    background-color: transparent;
    color: #bbbbbb;
    font-size: 0.9em;
}
.pfc-type-list > li.pt-item:hover span:after,.pfc-type-list > li.pt-item.active span:after{
    opacity: 1;
}
.pfc-type-list > li.pt-item span:before{
    position: absolute;
    content: '';
    width: 18px;
    height: 18px;
    left: 0;
    border-radius: 50%;
    background-color: #efefef;
    transition: all .4s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    box-shadow: 0px 0px 3px 1px rgba(125 ,125 ,125 ,0.2) inset;
}
.pfc-type-list.pfc-multi-sel > li.pt-item span:before{
    border-radius: 4px;
}
.pfc-type-list.pfc-multi-sel > li.pt-item span:after{
    border-radius: 2px;
}

.pfc-type-list > li.pt-item span{
    position: relative;
    padding-left:25px;
    display: flex;
    align-items: center;
    font-size: 0.99em;
    color: #797979;
    transition: all .3s ease 0s;
}
.pfc-type-list > li.pt-item span:after{
    position: absolute;
    content: "";
    width: 12px;
    height: 12px;
    transition: all .2s ease 0.1s;
    background-color: #2196f3;
    left: 3px;
    border-radius: 50%;
    opacity: 0;
}
.prd-content-col-wrap{
    display: flex;
    width:100%;
    flex-direction: column;
    margin-top: 1rem;
    color:#5e6177;
    padding:0 !important;
}
.pcc-header-wrap{
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 1.5rem;
    margin-bottom: 0;
    box-shadow: 0 2px 3px 0 rgba(50,55,76,0.1);
    position: relative;
    z-index: 1;
}
.pcc-footer-wrap{
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 1.5rem;
    margin-bottom: 0;
    box-shadow: 0 2px 3px 0 rgba(50,55,76,0.1);
    position: relative;
    z-index: 1;
}
.pcc-sort-feature-wrap i{
    font-size: 1.3em;
    cursor: pointer;
    transition: all 0.5s;
}
.pcc-sort-feature-wrap i.active,.pcc-sort-feature-wrap i:hover{
    color:#2196f3;
}
.pcc-sort-feature-wrap i.fa-sliders:hover{
    color:#5e6177;
}
.prd-list-col-wrap{
    width:100%;
    padding: 0 !important;
    margin-top: 0;
}
.prd-list-col-wrap .plc-list{
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-height: 100px !important;
}
.prd-list-col-wrap .plc-list .pl-items{
    background-color: #fff;
    border-radius: 10px;
    padding:0;
    display: flex;
    width: calc(100% / 3.1);
    margin: 0 6px 1rem;
    box-shadow:0 1px 3px 0 rgba(0,0,0,.01), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    float:left;
    min-height: 153px;
    transition:all 0.5s;
}

.prd-list-col-wrap .plc-list .pl-items .pcwh-l{
    background: #283593;
    position: absolute;
    right: -6px;
    color: #fff;
    padding: 3px 10px;
    font-size: 0.9em;
    border-radius: 3px 0 0 4px;
    box-shadow: 2px 2px 3px -2px #0e1759;
}
.prd-list-col-wrap .plc-list .pl-items .pcwh-l::before{
    position: absolute;
    top: -4px;
    right: 2px;
    content: '';
    border-right: 7px solid #0d1658;
    border-bottom: 7px solid transparent;
    transform: rotate(45deg);
    z-index: -1;
}
.prd-list-col-wrap .plc-list.grd-style .pl-items{
    width:100%;
    margin-bottom: 10px;
}
.prd-list-col-wrap .plc-list.grd-style .pl-items .pcw-action-wrap{
    margin-top: 0;
    justify-content: space-between;
    flex-direction: column;
    min-width: 110px;
    align-items: flex-end;
}
.prd-list-col-wrap .plc-list.grd-style .pl-items .pli-content-wrap{
    flex-direction: row;
}
.prd-list-col-wrap .plc-list.grd-style .pl-items .pli-img-frame{
    min-height: 90px;
    transition: all 0.5s;
}
.prd-list-col-wrap .plc-list.grd-style .pl-items .pli-head-cat-wrap{
    width:80%;
}
.prd-list-col-wrap .plc-list.grd-style .pl-items .pcw-action-wrap .pcw-action-btns{
    margin-right: 0;
}
.prd-list-col-wrap .plc-list.grd-style .pl-items .pcw-action-wrap > span{
    margin-right: 40px;
}
.prd-list-col-wrap .plc-list .pl-items:hover{
    box-shadow:0 2px 8px 0 rgba(50,55,76 ,0.1);
}
.prd-list-col-wrap .plc-list .pl-items .pli-img-frame{
    background-color: #f7f6f9;
    border-radius: 10px 0 0 10px;
    min-height: 130px;
    width: 160px;
    margin-right: 0;
    min-width: 140px;
    background-size: cover;
    background-position: center;
    background-repeat-y: no-repeat;
    box-shadow: -2px 0px 7px -6px #686868 inset;
    transition: all 0.5s;
}
.prd-list-col-wrap .plc-list .pl-items .pli-content-wrap{
    width:calc(100% - 150px);
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    padding:1rem;
}
.prd-list-col-wrap .plc-list .pl-items .pli-content-wrap .pcw-header{
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
}
.prd-list-col-wrap .plc-list .pl-items .pli-content-wrap .pcw-header h5{
    margin-bottom: 6px;
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 4px;
    color:#242732;
}
.prd-list-col-wrap .plc-list .pl-items .pli-content-wrap .pcw-header p{
    font-size: 0.9em;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.prd-list-col-wrap .plc-list .pl-items .pli-content-wrap .pcw-header .btn-group{
    height:20px;
    cursor: pointer;
}
.prd-list-col-wrap .plc-list .pl-items .pli-content-wrap .pcw-header .btn-group > i{
    width:20px;
    text-align: center;
    transition: all 0.5s;
    color:#242732;
}
.prd-list-col-wrap .plc-list .pl-items .pli-content-wrap .pcw-header .btn-group > i:hover{
    opacity: 0.6;
}
.pcw-cat-wrap{
    position: relative;
    width: 100%;
    height: 36px;
    overflow: hidden;
    padding-top: 3px;
    border-top: 1px solid #f7f7f7;
}
.pcw-cat-wrap > span{
    font-size: 0.7em;
    width: 100%;
    height: 12px;
    float: left;
}

.pcw-cat-wrap:after{
    position: absolute;
    content: '';
    width: 27px;
    height: 100%;
    box-shadow: -17px 0px 8px -5px #fff inset;
    right: 0;
    top: 0;
}
.pcw-cat-wrap >ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow:auto;
    padding-right: 1rem;
}
.pcw-cat-wrap >ul li{
    font-weight: 100;
    font-size: 0.8em;
    padding: 3px 10px;
    margin-top: 3px;
}
.pcw-action-wrap{
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
}
.pcw-action-wrap .pcw-action-btns{
    background-color: #f3f3f3;
    border-radius: 26px;
    padding: 5px 5px;
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: 38px;
    display: flex;
    flex-direction: row-reverse;
    float: right;
    margin-right:0;
    box-shadow: 1px 1px 1px 1px #ddd inset;
    transition: all 0.5s;
}
.pcw-action-wrap .pcw-action-btns:hover{
    width:138px;
}
.pcw-action-wrap .pcw-action-btns.pab-3th:hover{
    width:105px;
}
.pcw-action-wrap .pcw-action-btns.pab-2th:hover{
    width:72px;
}
.pcw-action-wrap .pcw-action-btns:hover button{
    opacity: 1;
}
.pcw-action-wrap .pcw-action-btns button:first-child{
    opacity: 1;
}
.pcw-action-wrap .pcw-action-btns button:nth-child(2){
    transition-delay: 0.2s;
}
.pcw-action-wrap .pcw-action-btns button:nth-child(3){
    transition-delay: 0.3s;
    ;
}
.pcw-action-wrap .pcw-action-btns button:nth-child(4){
    transition-delay: 0.4s;
    ;
}

.pcw-action-wrap .pcw-action-btns button{
    min-width: 28px;
    float: right;
    margin-left: 5px;
    opacity: 0;
    box-shadow: 0px 0px 6px -3px rgba(0, 0, 0,0.5) inset !important;
    transition: all 0.7s;
}
.pcw-action-wrap .pcw-action-btns button:hover{
    opacity: 0.8;
}
.pcw-action-wrap .pcw-action-btns button > i{
    font-size: 0.7em;
}
.pcw-action-wrap > span{
    font-weight: 600;
    display: flex;
    align-items: center;
    color: #2196f3;
    font-size: 1.1em;
    margin-left: 2px;
}
.holder {
    position: relative;
    z-index: 10;
}
.prd-content-col-wrap .legend-template-wrap{
    margin-top: -3px;
    margin-bottom: 1rem;
    background-color: #fff;
    padding-top: 12px;
    transform: translateY(0);
    transition: all 0.5s;
    display: block !important;
}
.prd-content-col-wrap .legend-template-wrap em{
    color: #2196f3;
}
.prd-content-col-wrap .legend-template-wrap > div i{
    color: #2196f3;
}
.prd-content-col-wrap .legend-template-wrap:empty{
    transform: translateY(-42px);
    transition: all 0.5s;
    margin-bottom: 0;
}
.prd-content-col-wrap .legend-template-wrap[style='display: none;']{
    transform: translateY(-42px);
    transition: all 0.5s;
    margin-bottom: 0;
}
.prd-content-col-wrap .legend-template-wrap *{
    display:unset;
}
.prd-content-col-wrap .legend-template-wrap[style='display: none;'] *{
    display: none;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel{
    list-style: none;
    padding: 10px;
    margin: 0;
    width: 100%;
    display: block !important;
    position:relative;
    top:0;
    left:0;
    border:none;
    box-shadow:none;
    background-color:transparent;
    z-index: 90 !important;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field {
    width: 100%;
    margin-right:0;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > span.ft-label{
    display: none !important;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > fieldset.ft-search{
    display: none;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-tags > li{
    color: #6b6f82;
    display: flex;
    font-size: 14px;
    line-height: 25px;
    font-weight: normal;
    text-transform: capitalize;
    cursor: pointer;
    transition: all .3s ease 0s;
    margin-bottom: 4px;
    padding: 2px 10px 2px 25px;
    border: none;
    align-items: center;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-tags > li:before{
    position: absolute;
    content: '';
    width: 16px;
    height: 16px;
    left: 0;
    border-radius: 3px;
    background-color: #efefef;
    transition: all .4s cubic-bezier(0.39, 0.58, 0.57, 1) 0s;
    border: 3px solid #eaeaea;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-tags > li.ft-hidden{
    /*display: flex !important;*/
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-tags > li:hover{
    background-color: transparent;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-tags > li:hover:before{
    background-color: #2196f3;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-tags > li.ft-hidden:before{
    background-color: #2196f3;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-tags > li:after{
    background-color: #2196f3 !important;
    color: #fff;
    top: unset;
    font-size: 12px;
    font-weight: 600;
    width: 18px;
    height: 17px;
    line-height: 1;
    text-align: center;
    border-radius: 5px;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel:after{
    display: none;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-selected{
    padding: 0 0 8px;
    background: #fefefe;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 10px;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-selected > li{
    margin: 2px 2px;
    padding: 4px;
    background: #208be0;
    overflow: hidden;
    transition: padding 0.4s,transform 0.5s;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-selected > li:after{
    transition: all 0.5s;
    transform: perspective(600px) rotateY(90deg);
    transform-origin: right center;
    background-color: #246fab;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-selected > li:hover{
    padding: 4px 24px 4px 4px;
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-selected > li:hover:after{
    display: flex;
    transform: rotateY(0deg);
}
.cat-list-view-fltr ul.ft-menu > li.ft-field > div.ft-panel > ul.ft-selected > li:active{
    background: #246fab;
}
.pcc-footer-wrap .holder a{
    transform: rotate(0deg) !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border:1px solid #2196f3;
    border-radius: 4px;
    line-height: 1.9;
    color: #2196f3;
    font-weight: 700;
    margin:0 3px;
}
.pcc-footer-wrap .holder a.jp-current,.pcc-footer-wrap .holder a:hover,.pcc-footer-wrap .holder a.jp-current:hover{
    background-color: #2196f3;
    border-color: #2196f3;
    color:#fff !important;
}
.pcc-footer-wrap .holder a.jp-previous:hover:after,.pcc-footer-wrap .holder a.jp-next:hover:after{
    border-color: #2196f3;
}
.pcc-footer-wrap .holder a.jp-previous:after,.pcc-footer-wrap .holder a.jp-next:after{
    border-color: #2196f3;
}
.pcc-footer-wrap .holder a.jp-previous,.pcc-footer-wrap .holder a.jp-next{
    color:#2196f3;
    background-color:#fff;
    border-color:#2196f3;
    width:32px;
    height: 27px;
}
.pcc-footer-wrap .holder a.jp-previous{
    margin-right:3px;
}
.pcc-footer-wrap .holder a.jp-next{
    margin-left:3px;
}
.pcc-footer-wrap .holder a.jp-previous:after{
    transform: rotate(136deg);
    margin-left: 5px;
    width:8px;
    height:8px;
}
.pcc-footer-wrap .holder a.jp-next:after{
    transform: rotate(-45deg);
    margin-right: 5px;
    width:8px;
    height:8px;
}
.pcc-footer-wrap .holder a:before{
    display: none;
}
.pcc-footer-wrap .holder-jump-action .holder-textbox{
    color:#2196f3;
    border-color:#2196f3;
}
.pcc-footer-wrap .holder-jump-action button,.pcc-footer-wrap .holder-jump-action button:hover{
    color:#2196f3;
}
.pcc-footer-wrap .holder-jump-action{
    margin-top: 0;
}
#legend1 > b{
    color:#2196f3;
}
.ifrm-main .sortable{
    overflow: unset;

}
.p-rel{
    position: relative;
}
.loading-ajx{
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.89);
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.loading-ajx img{
    width:200px;
}

.add-to-fav-btn {
    cursor: pointer;
    height: 50px;
    width: 50px;
    background-image:url( '../../images/web_heart_animation.png');
    background-position: left;
    background-repeat:no-repeat;
    background-size:2900%;
    position: absolute;
    right: 0;
    top: 3px;
}

.add-to-fav-btn:hover {
    /*    background-position:right;*/
    opacity: 0.5;
}

.is_animating {
    background-position:right;
    opacity: 1 !important;
    animation: heart-burst .8s steps(28) 1;
}

@keyframes heart-burst {
    from {
        background-position:left;
    }
    to {
        background-position:right;
    }
}

.fav-item-wrap:hover > i{
    color:red
}
.lang-settings-btn-wrap{
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.lang-settings-btn-wrap button{
    background-color: #526d88;
    color: #fff;
    opacity: 1;
    padding: 8px 12px;
}

.lang-settings-btn-wrap button i{
    font-size: 1.2em;
}
.new-lang-selection-wrap .btn-w-icon-material{
    padding-left: 40px;
    padding-right: 25px;
}
.selection-lang-list-wrap{
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}
.selection-lang-list-wrap:empty:after{
    position: relative;
    content: "I can't find any language,Add a new language";
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    box-shadow: 0px 0px 3px 0px #ddd inset;
    background-color: #f9f9f9;
}
.lang-acc-content-wrap{
    max-height: 400px;
    overflow: auto;
}

.lang-section-wrap{
    border: 1px solid #efefef;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 4px;
}
.cus-arrow > a:after{
    transform: rotate(45deg);
    border-bottom: 1px solid #4e4e4e;
    border-right: 1px solid #4e4e4e;
    border-left: none;
    border-top: none;
    width: 7px;
    height: 7px;
    float: right;
    position: absolute;
    top: 14px;
    right: 10px;
}
.cus-arrow .dropdown-search-input{
    margin-left:5px;
}
.cus-arrow > a.btn{
    height: 2.4rem !important;
}
.cus-arrow .dropdown-menu{
    overflow-x: hidden;
}
.cus-arrow .ltr-side{
    left:auto;
    right:0;
}
.shadow-box{
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}
.shadow-box-normalize{
    box-shadow: 0 0rem 12px -5px rgba(0,0,0,.09)!important;
    border: 1px solid #f5f5f5;
}
.apexcharts-toolbar{
    border-radius: 0 0 0 6px !important;
    padding: 2px 10px 6px 6px !important;
    right: 0 !important;
    background-color: #f5f5f5;
}
.apexcharts-toolbar .apexcharts-menu-icon{
    margin-left: 6px;
}
.sl-co-top{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
}
.sl-co-top > span{
    font-weight: 600;
    color: #3F4254;
    font-size: 1.2em;
}
.sl-co-top > span:first-child{
    max-width: 60%;
}
.sl-co-top > span:last-child{
    font-size: 1em;
    line-height: 20px;
}
.sl-co-status-wrap{
    list-style: none;
    padding:0;
    margin:0;

}
.sl-co-status-wrap > li{
    float:left;

}
.sl-co-status-wrap > li i{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:12px;
}
.sl-co-status-wrap > li:last-child i.fa-mobile{
    font-size:18px;
}
.sl-content{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0 4px 4px 0;
    margin-left: 18%;
    min-height: 56px;
    position: relative;
    border-color: inherit;
}
.sl-content:after{
    position: absolute;
    content: '';
    width: 0;
    height: 100%;
    top: 6px;
    left: -10px;
    border-left: 0px solid;
    border-color: inherit;
}
.sl-co-bottom > .sl-co-info{
    font-weight: 600;
    transition: all 0.5s;
    float: left;
    border: 1px solid #d6d6d6;
    border-radius: 26px;
    box-shadow: 0 0 2px 0 rgba(97,97,97,0.33) inset;
    padding: 2px 0;
    background-color: #f3f3f3;
    display: flex;
}
.sl-co-top,.sl-co-bottom{
    z-index: 1;
    position: relative;
    transition: all 0.5s;
}
.sl-co-bottom {
    /*    display: flex;
        justify-content: space-between;
        align-items: flex-end;*/
}
.sl-detail-btn{
    position: absolute;
    right: 5px;
    bottom: 3px;
    color: #2196f3;
    transition: all 0.5s;
}
.sl-item.active .sl-content .sl-detail-btn{
    right: 15px;
    bottom: 10px;
    color: #2196f3;
}
.streamline-theme{
    padding:1rem;
}
.box-header > h6{
    font-size: 1.1em;
    color: #2b3246;
}
.streamline-theme .sl-item:before {
    width: 18px;
    height: 18px;
    border-width: 3px;
    left: 14.7%;
    top: 14px;
    background-color: #fff;
    box-shadow: 0px -5px 0 -2px #fff;
    z-index: 10;
}
.streamline-theme .sl-item:after {
    left: 16.2% !important;
    border-left-width: 3px;
    border-color: inherit;
}
.sl-item.active{
    background-color: transparent !important;
}
.sl-co-bottom > .sl-co-info > span{
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    width: 20px;
    margin: 0 3px;
    transition: all 0.5s;
}
.sl-co-bottom > .sl-co-info > span:hover{
    background-color: #2196f3;
    color:#fff;
}
.sl-item .sl-item-time{
    position: absolute;
    left: 0;
    width: 15%;
}
.apexcharts-legend-marker{
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-color: transparent !important;
}
.browser-chart-wrap .apexcharts-legend-marker[rel='1']{
    background-image: url('../../images/browser-logo/chrome.png') !important;
}
.browser-chart-wrap .apexcharts-legend-marker[rel='2']{
    background-image: url('../../images/browser-logo/firefox.png') !important;
}
.browser-chart-wrap .apexcharts-legend-marker[rel='3']{
    background-image: url('../../images/browser-logo/safari.png') !important;
}
.browser-chart-wrap .apexcharts-legend-marker[rel='4']{
    background-image: url('../../images/browser-logo/ie.png') !important;
}
.browser-chart-wrap .apexcharts-legend-marker[rel='5']{
    background-image: url('../../images/browser-logo/opera.png') !important;
}

.browser-chart-wrap.br-border-w .apexcharts-legend-series[rel='1']{
    border-left: 5px solid #00e396;
}
.browser-chart-wrap.br-border-w .apexcharts-legend-series[rel='2']{
    border-left: 5px solid #feb019;
}
.browser-chart-wrap.br-border-w .apexcharts-legend-series[rel='3']{
    border-left: 5px solid #008ffb;
}
.browser-chart-wrap.br-border-w .apexcharts-legend-series[rel='4']{
    border-left: 5px solid #72bff9;
}
.browser-chart-wrap.br-border-w .apexcharts-legend-series[rel='5']{
    border-left: 5px solid #ff4560;
}

.apexcharts-legend-series{
    margin: 1px 3px !important;
    padding: 2px 8px;
    border-radius: 5px;
    transition: all 0.5s;
}
.apexcharts-legend-series:hover{
    background-color: #e4e4e4;
}
.card-spacer {
    padding: 1rem 1.25rem !important;
}
.flex-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
}
.card-spacer .symbol{
    width: 135px;
    height: 100px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7em;
    -webkit-mask: url(../../images/blob-widgets.svg);
    mask: url(../../images/blob-widgets.svg);
    /* background: #18a8ec no-repeat; */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 120px;
    mask-size: 120px;
    -webkit-mask-position: center;
    mask-position: center;
    position: absolute;
    left: -2rem;
    top: -1.2rem;
}
.card-spacer .symbol .symbol-label{
    color: #fff;
    /* opacity: 0.7; */
    margin-left: 10px;
}
.card-rounded-bottom {
    border-bottom-left-radius: 0.42rem;
    border-bottom-right-radius: 0.42rem;
}
.card-rounded-bottom .apexcharts-canvas svg {
    border-bottom-left-radius: 0.42rem;
    border-bottom-right-radius: 0.42rem;
}
.box-radius-8x{
    border-radius: 6px;
}
.portfoy-list-wrap{
    max-height: 408px;
    overflow: auto;
    margin-bottom: 0;
}
.portfoy-list-content{
    position: relative;
    overflow: hidden;
}
.portfoy-list-content:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 20px;
    bottom: 0;
    left: 0;
    box-shadow: 0 -24px 6px -14px #fff inset;
    border-radius: 0 0 8px 8px;
}
.portfoy-list-wrap li ul li{
    margin-right: 0 !important;
}
.portfoy-list-wrap .list-left > span{
    border-radius: 6px;
    width: 38px;
    height: 38px;
    font-size: 1.2em;
    text-transform: uppercase;
}
.portfoy-list-wrap .list-body{
    margin-left: 52px;
    height: 38px !important;
}
.portfoy-list-wrap >li{
    overflow: visible;
}
.portfoy-list-wrap >li .dropdown-menu{
    padding: 0;
}
.portfoy-list-wrap >li .dropdown-menu > span{
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #565656;
}
.portfoy-list-wrap >li .dropdown-menu > span i{
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}
.portfoy-list-wrap >li .dropdown-menu > span i.fa-mobile{
    font-size: 1.4em;
}
.portfoy-list-wrap >li .dropdown-menu:after{
    position: absolute;
    content: '';
    width:8px;
    height: 8px;
    background-color: #fff;
    border-top:1px solid #ddd;
    border-right:1px solid #ddd;
    transform: rotate(-45deg);
    top: -5px;
    right: 8px;
}
.box-header.bh-abs{
    position: absolute;
    z-index: 8;
}
.tab-into-cus-wrap > a{
    width: 50%;
    padding: 16px !important;
    text-align: center;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    font-size: 1.1em;
    background-color: #f9f9f9;
    font-weight: 600;
    color: #717171 !important;
    transition: all 0.5s;
    box-shadow: 0 -4px 4px -4px #ddd inset;

}
.tab-into-cus-wrap > a.active{
    border-bottom: none;
    background-color: transparent;
    color: #0747b9 !important;
    transition: all 0.5s;
    z-index: 2;
}
.tab-into-cus-wrap > a:first-child.active{
    box-shadow: 4px 1px 4px -4px #ddd;
}
.tab-into-cus-wrap > a:last-child.active{
    box-shadow: -6px 1px 4px -4px #ddd;
}
.tab-into-cus-wrap > a:hover{
    color: #0747b9 !important;
}
.tab-into-cus-wrap > a:last-child{
    border-right: none;
}
.ov-hidden{
    overflow: hidden;
}
.box-header h6.bh-text-size{
    font-size:1em;
}
.main-sidebar-list-wrap.ms-main-menue li.dk .msl-info-wrap{
    background-color: #1d2c42;
}
.main-sidebar-list-wrap.ms-main-menue li:hover .msl-info-wrap{
    background-color: #1d2c42;
}
.main-sidebar-list-wrap.ms-main-menue > li {
    transition: all 0.5s;
    background-color: #2c3c55;
    padding: 0;
}
.main-sidebar-list-wrap.ms-main-menue li .msl-info-wrap{
    padding: 12px 16px;
    transition: all 0.5s;
}
.main-sidebar-list-wrap.ms-main-menue li.pushed-left .msl-info-wrap{
    transition: all 0.5s;
    transform: translateX(0);
}
.main-sidebar-list-wrap.ms-main-menue li .msl-action-btn-wrap{
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    transition:opacity 0.3s, transform 0.6s;
    width: 2.5rem;
    transform: perspective(600px)  rotateY(90deg) translateX(10rem);
    transform-origin: left center;
    height:100%;
}
.main-sidebar-list-wrap.ms-main-menue li.pushed-left .msl-action-btn-wrap{
    transform: perspective(600px) rotateY(0deg) translateX(0);
}
.main-sidebar-list-wrap.ms-main-menue li .msl-action-btn-wrap > button{
    border-radius: 0;
    padding: 6px;
    transition: all 0.5s;
    height:50%;
}
.main-sidebar-list-wrap.ms-main-menue li.pushed-left .msl-action-btn-wrap{
    opacity: 1;
}
#list-tab [connect].active i{
    position: relative;
}
#list-tab [connect].active i:after{
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;

    border-radius: 50%;
    animation: pulseTab 1s;
    animation-iteration-count: 2;
    z-index: 9999;
}
#list-tab li[connect="Aktif-Forms"].active i{
    color:rgb(34 ,182 ,110);
}
#list-tab li[connect="archive"].active i{
    color:rgb(33,150,243);
}
#list-tab li[connect="deleted"].active i{
    color:rgb(239 ,25 ,60);
}
#list-tab li[connect="Aktif-Forms"].active i:after{
    color:rgb(34 ,182 ,110);
    box-shadow: 0 0 0 rgb(34 ,182 ,110);
}
#list-tab li[connect="archive"].active i:after{
    color:rgb(33,150,243);
    box-shadow: 0 0 0 rgb(33,150,243);
}
#list-tab li[connect="deleted"].active i:after{
    color:rgb(239 ,25 ,60);
    box-shadow: 0 0 0 rgb(239 ,25 ,60);
}

@-webkit-keyframes pulseTab {
    0% {
        opacity:0.9;
        -webkit-box-shadow: 0 0 0 0 ;
    }
    70% {
        opacity:0;
        -webkit-box-shadow: 0 0 0 10px ;
    }
    100% {
        opacity:0;
        -webkit-box-shadow: 0 0 0 0 ;
    }
}
@keyframes pulseTab {
    0% {
        opacity:0.9;
        -moz-box-shadow: 0 0 0 0 ;
        box-shadow: 0 0 0 0 ;
    }
    70% {
        opacity:0;
        -moz-box-shadow: 0 0 0 10px ;
        box-shadow: 0 0 0 10px ;
    }
    100% {
        opacity:0;
        -moz-box-shadow: 0 0 0 0 ;
        box-shadow: 0 0 0 0 ;
    }
}
.active-take-photo-btn-wraper{
    width:100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.graph-cus-legend-flex .apexcharts-legend-series{
    display:flex;
    align-content: center;
    justify-content: space-between
}
.apexcharts-legend.apexcharts-align-center{
    justify-content: center !important;
}
.filter-dynamic-query-list{
    margin:0;
    padding:0;
    list-style: none;
}
.filter-dynamic-query-list > li{
    border:1px solid #efefef;
    border-radius: 5px;
    margin-bottom: 4px;
    position: relative;
    overflow: hidden;
    padding: 8px 10px;
    box-shadow: 1px 1px 2px 0 #f3f3f3;
    transition: all 0.2s;
}
.filter-dynamic-query-list > li:hover{
    padding-right: 30px;
    box-shadow: 1px 1px 2px 0 transparent;
}
.filter-dynamic-query-list > li:first-child{
    margin-top:10px;
}
.filter-dynamic-query-list > li:last-child{
    transform-origin: top center;
    -moz-animation-name: DropTr;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;

    -webkit-animation-name: DropTr;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;

    animation-name: DropTr;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}
.filter-dynamic-query-list > li:hover  > i{
    transform: translateX(0);
}
.filter-dynamic-query-list > li > i{
    position: absolute;
    height: 100%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    top: 0;
    transition: all 0.3s;
    transform: translateX(30px);
}
.filter-dynamic-query-list > li .dynmc-rslt-wrap{
    background-color: rgba(120,130,140,0.24);
    display: flex;
    padding: 4px;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    float: left;
    padding-top: 0;
}
.filter-dynamic-query-list > li .dynmc-rslt-wrap.drw-cont-wrap{
    padding-top: 4px;
}
.filter-dynamic-query-list > li .dynmc-rslt-wrap .dy-label{
    background-color: #fff;
    color: #616161;
    border: none;
    box-shadow: 0px 0px 3px 0px #abaaaa inset;
}
.filter-dynamic-query-list > li .dynmc-rslt-wrap .fa-random{
    position: relative;
    top: 1px;
}
.filter-dynamic-query-list.report-rep > li{
    border-left: 4px solid #4BC0C0;
}
.filter-dynamic-query-list.analytics-rep > li{
    border-left: 4px solid #9c27b0;
}
.tb-dt-tooltip-wrap{
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 3px;
}
.tb-dt-tooltip-wrap > b{
    line-height: 0;
    margin-top: 13px;
}
.tb-dt-tooltip-content{
    position: absolute;
    bottom: calc(100% + 3px);
    width: 200px;
    height:auto;
    border-radius: 5px;
    padding: 0 5px;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    background-color: rgba(245,245,245,0.95);
    backdrop-filter: blur(30px);
    box-shadow: 1px 1px 1px 1px rgba(167,167,167,0.33);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.tb-analysis > div:last-child .tb-dt-analysis-tooltip-content{
    right: calc(100% + 3px);
    bottom: unset;
    margin-top: 1px;
}
.tb-analysis > div:last-child .tb-dt-analysis-tooltip-content:after{
    bottom: unset;
    right: -2px;
}
.tb-dt-analysis-tooltip-content > span{
    line-height: 1.4;
    margin-top: 3px;
}
.tb-dt-analysis-tooltip-wrap{
    width:40px !important;
}
.tb-dt-tooltip-content.tb-dt-analysis-tooltip-content{
    width:150px;
}
.tb-dt-tooltip-content > div:first-child{
    width: 100%;
    line-height: 2;
}
.tb-dt-tooltip-content > div:last-child{
    line-height: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.tb-dt-tooltip-content:after{
    position: absolute;
    content: '';
    width:8px;
    height:8px;
    background-color: inherit;
    transform: rotate(45deg);
    bottom: -2px;
    z-index: -1;
}
.tb-dt-tooltip-wrap:hover .tb-dt-tooltip-content{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.pcw-cat-q-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    align-items: center;
}
.pcw-cat-q-wrap > span{
    margin:0.25rem 0.15rem !important;
}
.num-rng-val-wrap{
    margin:1px 0 5px;
}
.tb-dt-analysis-tooltip-content .num-rng-val-wrap{
    margin:1px 0 0;
}
.num-rng-val-wrap .dy-label{
    display: flex;
    align-items: center;
    justify-content: center;
    width:22px;
    height:16px;
    padding:0;
    font-size:1em;
}
.num-rng-val-wrap .dy-label > i{
    top:3px;
}

.num-rng-val-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    align-items: center;
}
.num-rng-val-wrap > span{
    margin:0.25rem 0.15rem !important;
}
.coupon-total-wrap{
    padding:0 6px 0 1rem;
    border-radius: 25px 10px 10px 25px;
    position: relative;
    display: flex;
    align-items:center;
    justify-content: center;
    box-shadow: 2px 1px 2px 0px #141920;
    font-weight: 600;
}
.coupon-total-wrap.ctw-white{
    box-shadow: none;
    color:#fff;

}
.coupon-total-wrap.ctw-white i,.coupon-total-wrap.ctw-white span{
    color:#fff;
}
.coupon-total-wrap.ctw-white:after{
    background-color: #fff;
    border: 1px solid #ccc;
}
.coupon-total-wrap:after{
    position: absolute;
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #2c3c55;
    border: 1px solid #1e2836;
    left: 5px;
}
.avatar-w--status span{
    position: relative;
}
.avatar-w--status span >i{
    position: absolute;
    background-color: #fff;
    border: 2px solid #2c3c55;
    border-radius: 50%;
    top: 0px;
    left: -5px;
    width: 18px;
    height: 18px;
    font-size: 0.6em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.avatar-w--status span >i.fa-times{
    padding-bottom: 1px;
}
.avatar-w--status span{
    box-shadow: 1px 1px 2px 0 #051326;
    color:#fff;
}
.main-sidebar-list-wrap .list-item.dk .avatar-w--status span >i{
    background-color: #fff;
    border: 2px solid #202c3d;
}
.main-sidebar-list-wrap.ms-validate .list-item.dk .avatar-w--status span >i{
    background-color: inherit;
}
.main-sidebar-list-wrap.ms-validate .avatar-w--status span >i{
    background-color: inherit;
}
.main-sidebar-list-wrap.ms-validate .avatar-w--status span >i:last-child:before{
    display: none;
}
.main-sidebar-list-wrap .list-item.dk .avatar-w--status span >i.fa-flash{
    outline: 2px solid #202c3d;
}
.detail-info-avatar-wrap.avatar-w--status > span >i.fa-flash{
    outline: 2px solid #ffffff !important;
}
.detail-info-avatar-wrap.avatar-w--status > span >i.fa-flash:before{
    display: none;
}
.detail-info-avatar-wrap.avatar-w--status > span >i.fa-flash,
.main-sidebar-list-wrap.ms-validate .avatar-w--status span >i.fa-flash{
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    border-color: #4caf50 #236e26;
    box-sizing: border-box;
    animation: loadingSpiner 1.5s linear infinite;
    background-color: #fff !important;
    outline: 2px solid #2c3c55;
}
@-moz-keyframes loadingSpiner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes loadingSpiner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-o-keyframes loadingSpiner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes loadingSpiner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.tb-ico-tooltip span{
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;

}
.tb-ico-tooltip span b{
    position: absolute;
    padding: 3px;
    bottom: calc(100% + 3px);
    background-color: #e9e9e9;
    border-radius: 5px;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    min-width: 115px;
    box-shadow: 1px 1px 2px 0 #bdbdbd;
    z-index: 20;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.tb-ico-tooltip span b:after{
    position: absolute;
    content: '';
    width:10px;
    height:10px;
    background-color: #e9e9e9;
    transform: rotate(45deg);
    bottom:-5px;
}
.no-wrap-ws{
    white-space: nowrap;
}
.tb-ico-tooltip:hover span b{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.range-box-head-cus .dropdown-toggle.lang-cus{
    background-color: #ffffff;
    border: 1px solid #e4e6e8;
    padding: 10px 14px !important;
}
.range-box-head-cus .dropdown-toggle.lang-cus:after{
    margin-top: 0;
    margin-left: 0;
    float:right;
}
.range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 92%;
    float: left;
}
.range-box-head-cus.drp-b-h-cus .dropdown-toggle.lang-cus.w-full-dropdown + .dropdown-menu .dropdown-item{
    overflow: hidden;
}
.range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span > div{
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.se-re-csu{
    margin-top: 4px;
    height: 37px !important;
    border-color: #e4e6e8;
}
.switcher-cus{
    z-index: 1000;
    position: fixed;
    top: 120px;
    right: -4px;
    width: 50px;
    -webkit-transition: right 0.2s ease;
    transition: right 0.2s ease;
    border: 1px solid rgba(120, 120, 120, 0.1);
    background-clip: padding-box;
    background-color: #fff;
    min-height: 46px;
    border-radius: 6px 0 0 6px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    padding-left: 0;
    padding-bottom: 8px;
    box-shadow: 0px 1px 5px 0px rgba(175,175,175,0.41);
}
.switcher-cus:hover{
    right:0;
}
.score-frm-grp{
    background-color: #f5f4f4;
    border-radius: 5px;
    padding-bottom: 10px;
    border: 1px solid #ebebeb;
    margin-bottom: 10px;
}
.score-frm-grp .score-val-holder{
    display: flex;
    align-items: center;
}
.score-frm-grp .score-val-holder > small{
    position: absolute;
    left: 20px;
}
.score-frm-grp .score-val-holder > input{
    padding-left: 3.5rem;
    border: none;
    box-shadow: 0px 1px 3px 0px #e3e3e3;
}
.con-l-side{
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.con-c-side{
    border-radius: 0;
    height: 38px !important;
    box-shadow: 0px 0 50px -13px #dfdfdf inset;
}
.con-r-side{
    border-left:none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.cond-item-wrap{
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
}
.cond-item-wrap > span{
    height: 100%;
    border-radius: 0;
    border: none;
    display: flex;
    align-items: center;
    width: 35%;
    text-align: center;
    justify-content: center;
}
.cond-item-wrap.min-max-cond-item > span{
    width:50%;
}
.cond-item-wrap > span.min--max-cond{
    border-radius: 4px 0 0 4px;
}
.cond-item-wrap > span.rmv-btn{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 0.7em;
    position: absolute;
    left: -6px;
    top: -6px;
    border: none;
    transition: all 0.5s;
}
.cond-btn-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
    background-color: #fff;
    padding:10px;
    border-radius:5px;
}
.show-anim-wrap > .show-anim:last-child{
    transform-origin: top center;
    -moz-animation-name: DropTr;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;
    -webkit-animation-name: DropTr;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;
    animation-name: DropTr;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}
ul.navigator-to-anchor-wrap {
    padding: 0;
    list-style: none;
    margin: 0;
}
ul.navigator-to-anchor-wrap li{
    margin-bottom: 4px;
    border-radius: 3px;
    background-color: #fff;
    border-right: 1px solid #efefef !important;
    border-bottom: 1px solid #efefef !important;
    border-top: 1px solid #efefef !important;
    border-left-width: 4px;
    border-left-style: solid;
    overflow: hidden;
    box-shadow: 2px 0px 4px 0px #f3f3f3;
    position: relative;
    transform-origin: left center;
    transition: all 0.2s;
}
ul.navigator-to-anchor-wrap li:hover {
    transform: perspective(100px) scale(0.98);
    box-shadow: -26px 1px 42px -25px #efefef inset;
}
ul.navigator-to-anchor-wrap li.active{
    background-color: #f3f3f3;
}
ul.navigator-to-anchor-wrap li.active > a{
    color:#000;
}
ul.navigator-to-anchor-wrap li .lbl-edit{
    position: absolute;
    width: 30px;
    height: 100%;
    border-radius: 0;
    top: 0;
    right: 0;
    background-color: rgba(239, 205, 0, 0.59);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3e3e3e;
    transform-origin: top center;
    -moz-animation-name: rollR;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.3s;
    -webkit-animation-name: rollR;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.3s;
    animation-name: rollR;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.3s;
}
@-moz-keyframes rollR {
    0% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0deg);
    }
}
@-webkit-keyframes rollR {
    0% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0deg);
    }
}
@keyframes rollR {
    0% {
        transform: translateX(30px);
    }
    100% {
        transform: translateX(0deg);
    }
}
ul.navigator-to-anchor-wrap li > a{
    padding: 4px 6px;
    display: block;
    width: 100%;
    font-size: 0.9em;
    overflow: hidden;
    position: relative;
    color: #878787;
    font-weight: 600;
}
.obj-txt-get-item{
    /*border: 1px solid #ddd;*/
    border-radius: 5px;
    min-height: 40px;
    display: flex;
    margin: 5px;
    width: 32.1%;
    align-items: flex-start;
    float: left;
}
.obj-txt-get-item.otgi-center{
    align-items: center !important;
    justify-content: center;
}
.obj-txt-get-item > small{
    float: left;
    margin: 5px;
}
.obj-txt-get-item > span{
    margin: 5px;
}
.answer-selectable-itemlist li{
    margin: 5px;
    border: 1px solid #ddd;
    padding: 0px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    background-color: #fff;
}
.cl-to-clx-modal {
    max-width: 60%;
}
.prd-answer-list-wrap{
    list-style: none;
    padding: 0;
    margin:0;
}
.prd-answer-list-wrap li{
    border:1px solid #ddd;
    border-radius:4px;
    margin:4px;
    width:calc(100% / 3.1);
    height: 42px;
    display: flex;
    overflow: hidden;
    float:left;
    background-color: #fff;
}
.prd-answer-list-wrap li .prd-answer-image{
    width:62px;
    height: 100%;
    border-right: 1px solid #ddd;
    margin-right:10px;
}
.prd-answer-list-wrap li .prd-answer-image img{
    width: 100%;
    height: 100%;
}
.prd-answer-list-wrap li .prd-answer-info{
    display: flex;
    flex-direction: column;
    font-weight: 600;
    justify-content: center;
}
.prd-answer-list-wrap li .prd-answer-info > span{
    line-height: 1;
}
.prd-answer-list-wrap li .prd-answer-info > span:first-child{
    margin-bottom: 2px;
}
.ans-status-square{
    position: absolute;
    left: 34px;
    top: 12px;
    width: 20px;
    height: 20px;
    border: 4px solid #fff;
}
.once-minus-i{
    top:-1px !important;
}
.score-lb {
    position: absolute;
    left: 0;
    width: 40px;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*.score-lb:after{
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background-color: #fff;
    transform: rotate(45deg);
    right: -6px;
    border-radius: 50%;
}*/
.w-score-lb{
    padding-left: 3.7rem;
}
.as-ac-shadow{
    box-shadow: 2px 0px 3px -1px #ededed;
}
.ov-visible{
    overflow: visible !important;
}
.blur-alert-box {
    backdrop-filter: blur(45px);
    background-color: rgba(255,255,255,0.66);
}
.action-page-theme{
    margin: 0;
    list-style: none;
    padding: 6px;
    background-color: #f1f1f1;
    border-radius: 3px;
    display: inline-block;
    overflow: auto;
    max-height: 240px;
    box-shadow: 0 0 3px 0 #bfbfbf inset;
}
.action-page-theme > li{
    width:100%;
    margin: 2px;
    padding:2px;
    border:1px solid #ddd;
    border-radius: 4px;
    float:left;
    background-color: #ebebeb;
    cursor:pointer;
    transition: all 0.5s;
}
.action-page-theme > li:hover,.action-page-theme > li.active{
    background-color: #18bd5b
}
.action-page-theme > li > img{
    width:100%;
}

.wrapper-ap-c {
    display: flex;
    min-height: 370px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}
.wrapper-ap-c .col-1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding-left: 16px;

}
.wrapper-ap-c .col-1 img,.wrapper-ap-c .col-2 img {
    width: 100%;
    max-width: 153px;
}
.wrapper-ap-c .col-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    margin-left: 16px;
}
.sec-config-box{
    border:1px solid #ddd;
    padding:1rem;
    margin:4px 8px;
    color:#000;
    border-radius:4px;
    background-color: #fafafa;
}
.sec-config-box .input-group-btn{
    top:-1px;
}
.cf-wizard-steps-status {
    width: 100%;
    display: none;
    justify-content: center;
}
.cf-wizard-steps-status.active {
    display: flex;
}
.cf-wizard-steps-status ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}
/*HOrizental*/
.cf-wizard-steps-status.cf-w-hor ul{
    flex-direction: column;
}
.cf-wizard-steps-status.cf-w-hor ul li{
    margin:2rem 0;
}
.cf-wizard-steps-status.cf-w-hor ul li:after{
    top: calc(100% + -4px);
    left: calc(50% + -2px);
    height:72px;
    width:4px;
}
.cf-wizard-steps-status.cf-w-hor ul li:before{
    height:0;
    width:4px;
    top: calc(100% + -4px);
    left: calc(50% + -2px);
}
.cf-wizard-steps-status.cf-w-hor ul li.active:before {
    height: 72px;
    width: 4px;
}
.cf-wizard-steps-status.cf-w-hor ul li .cf-w-status-tooltip {
    transform: rotate(-90deg);
    bottom: calc(50% - 9px);
    right: calc(50% - 19px);
    left:auto;
    padding:2px 8px;
    width: 96px;
    font-size:0.85em;
}
.cf-wizard-steps-status.cf-w-hor ul li.active .cf-w-status-tooltip {
    opacity: 1;
    visibility: visible;
    -webkit-animation: formItemHor ease-in 1;
    -moz-animation: formItemHor ease-in 1;
    animation: formItemHor ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    animation-duration: 0.3s;
}
.cf-wizard-steps-status.cf-w-hor ul li:last-child .cf-w-status-tooltip{
    left:auto;
    right: calc(50% - 3px);
}
@-webkit-keyframes formItemHor {
    from {
        opacity:0;
        transform: rotate(-90deg) translateY(-40px);
    }
    to {
        opacity:1;
        transform: rotate(-90deg);
    }
}

@-moz-keyframes formItemHor {
    from {
        opacity:0;
        transform: rotate(-90deg) translateY(-40px);
    }
    to {
        opacity:1;
        transform: rotate(-90deg);
    }
}

@keyframes formItemHor {
    from {
        opacity:0;
        transform:rotate(-90deg) translateY(-40px);
    }
    to {
        opacity:1;
        transform: rotate(-90deg);
    }
}
.cf-wizard-steps-status ul li {
    position: relative;
    float: left;
    margin: 0 4rem;
}
.cf-wizard-steps-status ul li .step-i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #f9fafb;
    background-color: #e1e1e1;
    display: block;
    position: relative;
    z-index: 10;
}
.cf-wizard-steps-status ul li .cf-w-status-tooltip {
    position: absolute;
    /*background-color: #81c784;*/
    background-color: #ececec;
    border-radius: 4px;
    padding: 4px 10px;
    /*color: #2e7d32;*/
    color: #767676;
    bottom: calc(100% + 10px);
    opacity: 0;
    transform: translateX(-100%);
    visibility: hidden;
    white-space: nowrap;
    width: 120px;
    left: calc(50% - 58px);
    text-align: center;
    font-size: 0.9em;
    font-weight: 600;
}
.cf-wizard-steps-status ul li .cf-w-status-tooltip:after {
    position: absolute;
    height: 6px;
    width: 6px;
    transform: rotate(45deg);
    bottom: -3px;
    left: calc(50% - 5px);
    content: '';
    background-color: #ececec;
}
.cf-wizard-steps-status ul li.active .step-i {
    background-color: #2e7d32 !important;
    border-color: #fff;
}
.cf-wizard-steps-status ul li.active + li .step-i {
    background-color: #81c784;
}
.cf-wizard-steps-status ul li.active .cf-w-status-tooltip {

    opacity: 1;
    visibility: visible;
    -webkit-animation: formItem ease-in 1;
    -moz-animation: formItem ease-in 1;
    animation: formItem ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    animation-duration: 0.3s;
}
.cf-wizard-steps-status ul li.active:before {
    width: 133px;
}
.cf-wizard-steps-status ul li.active.activated .cf-w-status-tooltip {
    opacity: 0;
    transform: translateX(-100%);
    visibility: hidden;
}
.cf-wizard-steps-status ul li:after {
    height: 4px;
    position: absolute;
    content: '';
    top: calc(50% - 2px);
    left: calc(100% + -4px);
    width: 133px;
    background-color: rgba(217, 217, 217, 0.3);
    opacity: 1;
    transition: all 0.5s;
}
.cf-wizard-steps-status ul li:before {
    height: 4px;
    position: absolute;
    content: '';
    top: calc(50% - 2px);
    left: calc(100% + -4px);
    width: 0;
    border-bottom: 4px dotted #81c784;
    opacity: 1;
    z-index: 1;
    transition: all 0.5s;
}
.cf-wizard-steps-status ul li.active.activated:before {
    border-bottom-style: solid;
}
.cf-wizard-steps-status ul li.active:after{
    background-color: transparent;
}
.cf-wizard-steps-status ul li:last-child .cf-w-status-tooltip {
    width: auto;
}
.cf-wizard-steps-status ul li:last-child:after, .cf-wizard-steps-status ul li:last-child:before {
    display: none !important;
}
/*@-webkit-keyframes formItem { 
    from { 
        opacity:0;
        transform: translateY(-40px);
    } 
    to { 
        opacity:1; 
        transform: none; 
    }
}

@-moz-keyframes formItem { 
    from { 
        opacity:0;
        transform: translateY(-40px);
    } 
    to { 
        opacity:1; 
        transform: none; 
    }
}*/

@keyframes formItem {
    from {
        opacity:0;
        transform: translateX(0);
    }
    to {
        opacity:1;
        transform: none;
    }
}

.w-b-box-items{
    border:1px dashed #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    background-color: #fbfbfb;
}

.item-tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: 99;
    line-height: 1.4;
    margin-left: 0;
    padding: 10px;
    white-space: nowrap;
    /*font-size: 0.99em;*/
    text-align: left;
}
.item-tooltip.sm {
    font-size: 0.7rem;
}
.item-tooltip.right {
    transform: perspective(1000px) rotateY(90deg);
    right: calc(100% + 15px);
    transform-origin: right;
}
.item-tooltip.sm.right {
    transform: perspective(1000px) rotateY(90deg);
    right: calc(100% + 5px);
    transform-origin: right;
}
.item-tooltip.right:after {
    top: calc(50% - 5px);
    right: -5px;
}

.item-tooltip.right.sm:after {
    top: calc(50% - 2px);
    right: -2px;
}
.item-tooltip.left {
    transform: perspective(1000px) rotateY(-90deg);
    left: calc(100% + 15px);
    transform-origin: left;
}
.item-tooltip.left:after {
    top: calc(50% - 5px);
    left: -3px;
}
.item-tooltip.top {
    transform: perspective(1000px) rotateX(90deg);
    transform-origin: bottom;
    bottom: calc(100% + 10px);
}
.item-tooltip.top:after {
    bottom: -2px;
    left: calc(50% - 5px);
}
.item-tooltip.bottom {
    transform: perspective(1000px) rotateX(-90deg);
    transform-origin: top;
    top: calc(100% + 15px);
}
.item-tooltip.bottom.sm {
    top: calc(100% + 5px);
}
.item-tooltip.bottom:after {
    top: -5px;
    left: calc(50% - 5px);
}

.item-tooltip.bottom.sm:after {
    top: -3px;
    left: calc(50% - 3px);
}

.item-tooltip:after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 0 3px 0px 0;
    background-color: inherit;
    transform: rotate(45deg);
}
.item-tooltip.sm:after {
    border-radius: 0 1px 0px 0;
    width: 5px;
    height: 5px;

}
.ov-vis{
    overflow: visible !important;
}
.item-element {
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-element:hover .item-tooltip {
    opacity: 1;
    visibility: visible;
}
.item-element:hover .item-tooltip.left, .item-element:hover .item-tooltip.right {
    transform: perspective(1000px) rotateY(0deg);
}
.item-element:hover .item-tooltip.top, .item-element:hover .item-tooltip.bottom {
    transform: perspective(1000px) rotateX(0deg);
}
.dt-body-syl{
    background-color: #fbfbfb;
    box-shadow: 0px -4px 4px -5px #ddd inset, 0px 4px 4px -5px #ddd inset;
}
.anim--load-trs-top{
    -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.5s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}
.anim--load-scale{
    -moz-animation-name: dropHeaderScale;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.2s;

    -webkit-animation-name: dropHeaderScale;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.2s;

    animation-name: dropHeaderScale;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.2s;
}
@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateY(-40px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateY(-40px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropHeader {
    0% {
        transform: translateY(-40px);
    }
    100% {
        transform: translateY(0);
    }
}
@-moz-keyframes dropHeaderScale {
    0% {
        -moz-transform: scale(0);
    }
    100% {
        -moz-transform: scale(1);
    }
}
@-webkit-keyframes dropHeaderScale {
    0% {
        -webkit-transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes dropHeaderScale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

.mt-toolbar-ico{
    padding-bottom: 5px !important;
}
.cto-list-syl-wrap li{
    overflow: hidden;
    box-shadow: 0 1px 1px 0 rgba(0,0, 0, 0.04), 2px -1px 2px -1px rgba(0, 0, 0, 0.06);
    padding: 6px 50px 6px 18px;
}
.cto-list-syl-wrap li .list-left > span:first-child{
    position: absolute;
    left: -6px;
    top: -7px;
    border-radius: 12px;
    opacity: 0.8;
}
.cto-list-syl-wrap li .list-body{
    position: absolute;
    right:0;
    top:0;
    height:100%;
    display: flex;
}
.cto-list-syl-wrap li .list-body >i{
    width: 34px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.6em;
}
.ad_switch-custom.ad_sc-frm{
    background-color:#f9f9f9;
    border-radius: 6px;
    box-shadow : 0 0 3px 0 #ddd inset;
}
.ad_switch-custom > div:last-child{
    margin-top: 10px;
}
.warning-popup-wrap{
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    background-color: rgba(0,0,0,0.4);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.warning-popup-wrap .wpw-container{
    max-width: 420px;
    background-color: #fff;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out,-webkit-transform .3s ease-out;
    -moz-animation-name: dropTopModal;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.5s;

    -webkit-animation-name: dropTopModal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;

    animation-name: dropTopModal;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 1.5rem;
    border-radius: 4px;
}
@-moz-keyframes dropTopModal {
    0% {
        -moz-transform: translate(0,-50px);
        opacity:0;
    }
    100% {
        -moz-transform: translate(0,0);
        opacity:1;
    }
}
@-webkit-keyframes dropTopModal {
    0% {
        -webkit-transform: translate(0,-50px);
        opacity:0;
    }
    100% {
        -webkit-transform: translate(0,0);
        opacity:1;
    }
}
@keyframes dropTopModal {
    0% {
        transform:translate(0,-50px);
        opacity:0;
    }
    100% {
        transform: translate(0,0);
        opacity:1;
    }
}
.warning-popup-wrap .wpw-container .wpw-header{
    position: relative;
    padding-top: 1.2rem;
}
.warning-popup-wrap .wpw-container .wpw-header .wpw-h-icon-box{
    position: absolute;
    width: 76px;
    height: 57px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -47px;
    color: #fff;
    margin-left: 0;
}
.warning-popup-wrap .wpw-container .wpw-header .wpw-h-icon-box i{
    font-size: 4em;
}
.warning-popup-wrap .wpw-container .wpw-header h4{
    font-weight: 600;
    font-size: 1.9em;
    color: #525252;
}
.warning-popup-wrap .wpw-container .wpw-content-wrap p{
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    color: #626262;
    padding-top: 5px;
    margin-bottom: 10px;
}
.warning-popup-wrap .wpw-container .wpw-content-wrap small{
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: 12px;
    font-size: 1em;
    line-height: 1.2;
    color: #919191;
}
.input-number-wrap{
    position: relative;
    overflow: hidden;
}
.input-number-wrap .input-number{
    position: absolute;
    width: 100%;
    left: 0;
    border-radius: 4px;
    border-color: #e4e6e8;
    padding: 0 25px;
}
.input-number-wrap .input-number-decrement,.input-number-wrap .input-number-increment{
    background-color: transparent;
    position: relative;
    z-index: 9;
    border: none;
    font-weight: 200;
    font-size: 1.7em;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    font-family: 'Montserrat';
}
.input-number-wrap .input-number-increment{
    float: right;
}
.w-box-summery-once{
    border-radius: 10px;
    min-height: 100px;
    width: 90%;
    margin: 1rem 0;
    padding: 10px;
    clear: left;
    display: flex;
    margin-left: 20px;
    background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
    color:#fff;
    box-shadow: 2px 3px 3px 0 rgba(69,65,78,0.17);
    position: relative;
}
.w-box-summery-once .wbs-details{
    position: absolute;
    color: #fff;
    transform: scale(0.7) translate(-30px, 12px);
}
.w-box-summery-once h4{
    font-size: 1.7em;
    font-weight: 700;
}
.w-box-summery-once span{
    font-size: 2em;
    font-weight: 800;
}
.push-btn-float-wrap{
    position: absolute;
    right: 1rem;
    bottom: -32px;
    z-index: 10;
    cursor: pointer;
}
.push-btn-float{
    border-radius: 0 0 6px 6px;
    background-color: #fff;
    border: 1px solid #eeeff0;
    border-top: none;
    padding: 6px 1rem;
    position: relative;
    font-weight: 600;
    color: #1e87da;
    box-shadow: 0px 2px 2px -1px #f1f1f1;
}
.push-btn-float i{
    font-size: 0.9em;
}
.push-btn-float:before, .push-btn-float:after {
    background: #fff;
    width: 10px;
    height: 10px;
}
.push-btn-float:before {
    right: -10px;
}
.push-btn-float:after {
    left: -10px;
}

.push-btn-float  div:before,
.push-btn-float  div:after {
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background: #f6fafb;
    z-index: 2;
}
.push-btn-float  div:before {
    right:-16px;
    border-left: 1px solid #eeeff0;
    transform: rotate(-5deg);
}
.push-btn-float  div:after {
    left: -16px;
    border-right: 1px solid #eeeff0;
    transform: rotate(-26deg);
}
.push-btn-float:before,
.push-btn-float:after,
.push-btn-float  div:before,
.push-btn-float  div:after {
    content:"";
    position: absolute;
    top:0;

}
.sfb-w-corner{
    border-radius: 0 0 6px 6px;
    transition: all 0.2s;
}
.sidebar-filter-box.sd-close{
    margin-top: -118px;
}
.sidebar-filter-box.sd-close .push-btn-float{
    background-color: #ffffff;
    color: #1e87da;
}
.sidebar-filter-box.sd-close .push-btn-float:before,.sidebar-filter-box.sd-close .push-btn-float:after{
    background-color: #ffffff;
}
.sidebar-legend-chart .apexcharts-legend{
    padding:10px;
    border-radius: 8px;
}
.sidebar-legend-chart .apexcharts-legend-series {
    cursor: pointer;
    line-height: normal;
    background-color: #efefef;
    padding: 0;
    margin-bottom: 4px !important;
    display:flex;
    align-items: center;
    height:26px;
    overflow: hidden;
}
.sidebar-legend-chart .apexcharts-legend-series > span{
    display: flex;
    align-items: center;
    margin:0 4px;
}
.sidebar-legend-chart .apexcharts-legend-series > span:first-child{
    min-width: 12px;
    box-shadow: -3px 0 3px -2px rgba(96 ,96 ,96, 0.26) inset;
    margin:0;
    justify-content: center;
}
.sidebar-legend-chart .apexcharts-legend-series > span:last-child{
    height:inherit;
    width:100%;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}
.tb-w-more{
    position: relative;
    display: flex;
    align-items: center;
}
.tb-w-more .dropdown-menu > span {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    font-size: 0.9em;
    color: #565656;
}
.tb-w-more .dropdown-menu:after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    transform: rotate(-45deg);
    top: -5px;
    right: 8px;
}
.tb-w-more .dropdown-menu > span {
    padding: 6px 5px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    font-size: 0.8em;
    color: #565656;
}
.tb-w-more .dropdown-menu{
    right:2.8rem;
}
.tb-w-more .dropdown-menu > span i {
    width: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}
.tb-w-more .dropdown-menu > span i.fa-mobile {
    font-size: 1.4em;
}
.tb-w-more .nav-link{
    padding: 0 4px !important;
    line-height: 0px;
    border-radius: 4px;
    margin-left: 4px;
    height: 16px;
}
.shared-channel-timeline-list{
    margin: 0;
    padding:0;
}
.shared-channel-timeline-list li{
    margin-bottom: 0;
}
.shared-channel-timeline-list li:last-child .bar-span{
    display: none;
}
.shared-channel-timeline-list li .bar-span{
    position: absolute;
    left: 32px;
    content: '';
    height: calc(100% - 45px);
    width: 4px;
    top: 52px;
    z-index: 1;
    border-radius: 15px;
}
.shared-channel-timeline-list li .list-body{
    border: 1px solid #f5f5f5;
    padding: 6px 10px 10px 10px;
    border-radius: 6px;
    background-color: #fdfdfd;
    box-shadow: 1px 1px 0px 1px #f7f7f7;
    margin-left: 45px;
}
.shared-channel-timeline-list li .avatar-w--status{
    position: relative;
    z-index: 6;
}
.shared-channel-timeline-list li .avatar-w--status span{
    outline: 4px solid #fff;
    box-shadow:none;
    width:35px;
    height:35px;
}
.shared-channel-timeline-list li .list-body:after{
    display: none;
}
.share-channel-items{
    background-color: #ebebeb;
    border-radius: 4px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
    height:26px;
    overflow: hidden;
}
.share-channel-items .sci-lbl{
    overflow: hidden;
}
.share-channel-items .sci-lbl span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.share-channel-items i{
    height: 30px;
    width:30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position:relative;
    overflow:hidden;
    max-width: 30px;
    min-width: 30px;
}
.share-channel-items i:after{
    position: absolute;
    content: '';
    width:6px;
    height:6px;
    transform: rotate(45deg);
    right:-3px;
    background-color: #ebebeb;
}
.share-channel-items .label{
    background-color: #e3e3e3;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    color: #2196f3;
    font-size: 1em;
}
.sidebar-legend-chart .apexcharts-toolbar{
    background-color: transparent !important;
}
.custom-marker{
    color:#fff;
    font-size:0.8em;
}
.widgets-list-chart .apexcharts-legend-series {
    width:100%;
    position: relative;
    margin-bottom: 4px !important;
    border: 1px solid #e9e9e9;
    padding: 4px 8px;
    height:34px;
}
.widgets-list-chart .apexcharts-legend-marker {
    position: unset !important;
    display: flex;
    align-items: center;
}
.widgets-list-chart .custom-marker{
    position: absolute;
    right: 10px;
    color: #000;
    font-size: 1em;
    font-weight: 600;
}
.widgets-list-chart .apexcharts-legend-text{
    width:90%;
    line-height: 1;
}
.file-drop-area {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 20px;
    border: 1px dashed #e0e0e0;
    border-radius: 5px;
    transition: 0.2s;
    margin-top: 5px;
    background-color: #fdfdfd;
    justify-content: center;
    flex-direction: column;
    transition: all 0.5s;
}
.file-drop-area:hover{
    background-color: #efefef;
}
.file-drop-area.is-active {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px dashed #3184bb;
}

.fake-btn {
    flex-shrink: 0;
    padding: 8px 15px;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.file-msg {
    font-size: small;
    font-weight: bold;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #757575;
    text-align: center;
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}
.file-input:focus {
    outline: none;
}
.wbbi-no-border{
    border-color: transparent !important;
    background-color: #22b66e;
    color: #fff;
    margin: 0px -9px 6px;
}
.steps{
    width:100%;
}
.single-mail-box-wrap{
    background-color: #f5f5f5;
    padding:1rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 0px 4px 3px -4px #ddd inset, 0px -4px 3px -4px #ddd inset;
}
.single-mail-box-wrap button{
    width:25%;
}

.switch-field {
    padding: 0 0 20px;
    overflow: hidden;
}

.switch-title {
    margin-bottom: 0.5em;
}

.switch-field input {
    display: none;
}

.switch-field label {
    float: left;
}

.switch-field label {
    /*background-color: #efefef;*/
    color: rgba(2, 117, 216, 0.45);
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    text-shadow: none;
    padding: 0.5em 1em;
    width:45%;
    height:46px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 4px solid #e3f4ff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition:    all 0.4s ease-in-out;
    -ms-transition:     all 0.4s ease-in-out;
    -o-transition:      all 0.4s ease-in-out;
    transition:         all 0.4s ease-in-out;
}
.switch-field label.active:before{
    opacity: 1;
    width:100%;
}
.switch-field label:before{
    content:"";
    width:0;
    position: absolute;
    height:4px;
    background-color: #1893fd;
    bottom: -4px;
    opacity: 0;
    transition: all 0.5s;
}

.switch-field label:hover {
    cursor: pointer;
    color:#0275d8;
    text-shadow: 0px 3px 0px #e3f4ff;
}
.switch-field label.active:hover{
    text-shadow: none !important;
}
.switch-field label:hover:after{
    text-shadow: none !important;
}

.switch-field input:checked + label {
    background-color: #007ac2;
    color: white;
}

.switch-field label:first-of-type {
    border-radius: 0;
    position: relative;
    padding-right: 1.5rem;
}
.switch-field label.active:first-of-type:after{
    border-color: #efefef;
    border-left-color: #1995ff;
    border-bottom-color: #1995ff;
    transition: all 0.5s;
}
.switch-field label:first-of-type:after{
    position: absolute;
    content: 'Or';
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0275d8;
    right: -16px;
    bottom: -16px;
    z-index: 10;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #efefef;
    border-right-color: #1995ff;
    border-bottom-color: #1995ff;
    transition: all 0.5s;
}

.switch-field label:last-of-type {
    border-radius: 0;
    padding-left: 1.5rem;
}
.main-language-selections{
    width:82px;
}
.main-language-selections .dropdown-toggle.lang-cus{
    padding:6px 15px 6px 6px !important;
    position: relative;
    border:none !important;
    background-color: rgba(0 ,62 ,133 , 0.07);
}
.main-language-selections .dropdown-toggle.lang-cus:after{
    position: absolute;
    width:6px;
    height:6px;
    border-color: #94989f;
}
.main-language-selections .dropdown-toggle.lang-cus.w-full-dropdown > span{
    font-size: 0.8em;
}
.main-language-selections .dropdown-toggle.lang-cus.w-full-dropdown > span > span{
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-language-selections.range-box-head-cus.drp-b-h-cus .dropdown-toggle i{
    font-size: 1.5em !important;
    margin-right:6px !important;
}
.main-language-selections.range-box-head-cus .dropdown-menu{
    min-width: 68px !important;
    padding: 4px 2px;
    padding-right: 6px;
}
.main-language-selections.range-box-head-cus .dropdown-menu .dropdown-item i{
    opacity: 1;
}
.tb-detail-r-detail tbody tr td:last-child{
    padding: 0;
    position: relative;
    overflow: hidden;
}
.tb-detail-r-detail.ls-ov-vis tbody tr td:last-child{
    overflow:visible !important;
}
.tb-detail-r-detail.no-ovr tbody tr td:last-child{
    overflow:visible;
}
.tb-detail-r-detail tbody tr:hover td:last-child .btn-group{
    width: 90%;
}
.tb-detail-r-detail tbody tr td:last-child .btn-group{
    width: 75%;
    height: 100%;
    float: right;
    transition: all 0.2s;
}
.tb-detail-r-detail tbody tr td:last-child .btn-group .btn{
    width: 100%;
    height: 100%;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
    box-shadow: none;
    outline: none;
}
.tb-detail-r-detail tbody tr td:last-child .btn-group .dl-tb-btn{
    background-color: #2196f3;
}
.tb-detail-r-detail tbody tr td:last-child .btn-group .dl-tb-btn > i{
    font-size:1em !important;
    color:#fff !important;
}
.tb-detail-r-detail tbody tr td:last-child .btn-group .btn i{
    font-size: 0.8em;
    color: #90a4ae;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #eceff1;
}
.tb-detail-r-detail tbody tr td:last-child .btn-group.trash-btn button i{
    color: unset;
    font-size: 1em;
    top: 3px;
}
.tb-detail-r-detail tbody tr:hover td:last-child .btn-group button i{
    animation: arrow-move-r 0.8s infinite;
}
.tb-detail-r-detail tbody tr:hover td:last-child .btn-group.trash-btn button i{
    animation: none !important;
}
@keyframes arrow-move-r
{
    0% {
        margin-right: 6px;
        opacity:0;
    }
    100% {
        margin-right: 0px;
        opacity:1;
    }
}

.toolbar-question-btn{
    background-color: rgba(0 ,62 ,133 , 0.07);
    border: none;
    padding: 4px 11px;
    color: #2196f3;
    font-size: 1.1em;
    margin-top: 4px;
}
.opt-sidebar-wrap.helper-sidebar-tab .nav-active-border .nav .nav-link.active:after{
    display: none;
}
.opt-sidebar-wrap.helper-sidebar-tab .nav-active-border .nav .nav-link:before{
    top: calc(100% - 0px);
    bottom: auto;
}
.opt-sidebar-wrap.helper-sidebar-tab .nav-active-border .nav .nav-link.active{
    background-color: transparent;
    box-shadow: none;
    color: #2196f3;
}
.opt-sidebar-wrap.helper-sidebar-tab .nav-active-border .nav .nav-link{
    border-right:none;
    margin-right: 10px;
    padding:12px;
    white-space: nowrap;
    font-size: 0.94em;
}
.opt-sidebar-wrap.helper-sidebar-tab .nav-active-border .nav .nav-link:hover{
    color: #2196f3;
}
.err-list-wrap{
    padding-left: 1.8rem;
    list-style: none;
}
.err-list-wrap li{
    position: relative;
    display:flex;
    align-items: center;
}
.err-list-wrap li:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    border: 1px solid #c9c9c9;
    transform: rotate(-45deg);
    left: -10px;
}
.list-accord-type-wrap.list-status-latw{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 0;
}
.list-accord-type-wrap.list-status-latw li{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px 0 0 0;
    padding:0;
}
.list-accord-type-wrap.list-status-latw li:last-child{
    margin-right: 0;
}
.list-accord-type-wrap{
    padding:0;
}
.list-accord-type-wrap li{
    border:none;
    display: flex;
    /*cursor: pointer;*/

}
.list-accord-type-wrap li:after{
    display:none;
}
.list-accord-type-wrap li .list-left > span{
    display: flex;
    align-items:center;
    justify-content: center;
    border-radius: 6px;
    background-color: #F3F6F9;
    width:50px;
    height:50px;
}
.list-accord-type-wrap li .list-body:after{
    display: none;
}
.list-accord-type-wrap li .list-body .list-desc{
    color:#757575;
    font-size: 1em;
    display: block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: clip;
}
/*.list-accord-type-wrap li:hover .list-body .list-desc{
    display: block;
}*/
.alert-info > i{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid;
    opacity: 0.9;
}
.row-btn-wrap .btn-icon{
    line-height: unset;
    transition: all 0.2s;
    box-shadow: 0 0 0 0 #e7e7e7;
    box-shadow: 2px 2px 0 0px #e7e7e7;
    cursor: initial;
}
.row-btn-wrap .btn-icon:hover{
    box-shadow: 2px 2px 0 0px #e7e7e7;
}
.row-btn-wrap .btn-icon:hover > i{
    transform: rotate(6deg);
}
.row-btn-wrap .btn-icon > i{
    position: relative;
    top: unset;
    display: flex;
    font-style: normal;
    font-size: .9em;
    transition: all 0.3s;
    transform: rotate(6deg);
}
.info-w-tooltip > div{
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}
.info-w-tooltip > div >i{
    margin:0 !important;
}
.info-w-tooltip > div >i.flag-icon{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-size: cover;
}
.info-w-tooltip > div:hover > span{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.info-w-tooltip > div > span{
    position: absolute;
    display: block;
    white-space: nowrap;
    background-color: inherit;
    border-radius: 4px;
    padding: 1px 6px;
    bottom: calc(100% + 5px);
    opacity: 0;
    transform: translateY(10px);
    transition:all 0.3s;
    font-weight: 600;
    font-size: 0.9em;
    box-shadow: 0 -2px 0 0;
    visibility: hidden;
}
.info-w-tooltip div.iw-t-msg-top > span{
    min-width:170px;
    max-width: 170px;
    white-space: normal;
    z-index:2;
    text-align:center;
}
.info-w-tooltip > div > span:after{
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    background-color: inherit;
    transform: rotate(45deg);
    bottom: -2px;
    left: calc(50% - 2px);
}
.err-alert-box {
    padding: 10px;
}
.err-alert-box ul{
    margin: 0;
    list-style: circle !important;
    padding: 0 2rem;
    font-weight: 600;
    line-height: 2;
}
.valid-card-modal{
    z-index: 1000000;
}
.valid-card-modal .modal-body{
    padding:0;
}
.modal-backdrop{
    z-index: 104000;
}
.modal{
    z-index: 105000;
}
.valid-card-banner{
    position:relative;
    overflow: visible;
    height:90px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.cus-lh-opt-tb{
    line-height: 1.8;
}
.ns-2col-grey tbody tr td:nth-child(2){
    background-color: #f1faff;
}
.ns-3col-grey tbody tr td:nth-child(3){
    background-color: #f1faff;
}
.ns-5col-grey tbody tr td:nth-child(5){
    background-color: #fafafa;
}
.tb-profile-us-mail .nested-tb{
    border-spacing: 0;
}
.tb-profile-us-mail .nested-tb > thead > tr > th:first-child,
.tb-profile-us-mail .nested-tb > thead > tr > th:last-child{
    border-radius: 0;
}
.tb-profile-us-mail .tb-detail-r-detail > thead > tr > th{
    background-color: #f5f5f5 !important;
    color: #00152c !important;
}
.ns-tb-xl-trans.nested-tb > tbody > tr{
    background-color: #fff !important;
}
.ns-tb-xl-trans.nested-tb > tbody > tr > td{
    border-left:none !important;
    border-right:none !important;
    border-top:none !important;
    border-bottom:1px dashed #f3f3f3 !important;
    height:68px;
}
.ns-tb-xl-trans.nested-tb > tbody > tr:last-child > td{
    border-bottom: none !important;
}
.valid-card-banner .avatar{
    width:50px;
    height:50px;
    position: absolute;
    bottom:-38px;
    left:10px;
    border: 5px solid #fff;
    background-color: inherit;
    color:#fff;
    display:flex !important;
    justify-content: center;
    align-items: center;
}
.rv-v3-w .valid-card-banner .avatar{
    bottom:-40px;
    left:12px;
    border:none;
    outline:5px solid #fff;
    border-radius:5px;
}
.rv-v4-w .valid-card-banner .avatar{
    bottom:-32px !important;
}
.rv-v3-w.resualt-verify-v2-wrap .valid-main-status-wrap .valid-card-banner > span{
    margin-left:4.5rem !important;
}
.rv-v3-w.resualt-verify-v2-wrap .valid-card-content-wrap{
    margin-top:-2rem !important;
}
.rv-v3-w .valid-info-main-wrap .v-info-status{
    width:60px !important;
    margin-right:10px;
    margin-left: 5px;
    margin-top: 21px;
}
.rv-v3-w .valid-info-main-wrap .v-info-status ul li >div, .rv-v3-w .valid-info-main-wrap .v-info-status ul li >a{
    border-radius: 6px;
}
.rv-v3-w .valid-info-main-wrap .v-info-status ul li:last-child{
    margin-bottom: 0 !important;
}
.resualt-verify-v2-wrap.rv-v3-w .valid-info-main-wrap .v-info-summery{
    padding: 1rem 1.5rem 0 1.5rem !important;
    box-shadow: 0px 0px 2px 1px rgba(227,227,227,0.62) inset;
}
.rv-v3-w .valid-info-main-wrap .v-info-status ul li .flag-icon{
    width:32px !important;
    height:32px !important;
}
.rv-v3-w .valid-info-main-wrap .v-info-status ul li{
    width:50px !important;
    height:50px !important;
    margin-bottom:10px !important;
    margin-right:9px !important;
    opacity: 0;
    animation: fadeIn 0.3s ease-in both;
}
.rv-v3-w .valid-info-main-wrap .v-info-status ul li:nth-child(1) {
    animation-delay: 0.3s
}
.rv-v3-w .valid-info-main-wrap .v-info-status ul li:nth-child(2) {
    animation-delay: 0.5s;
}
.rv-v3-w .valid-info-main-wrap .v-info-status ul li:nth-child(3) {
    animation-delay: 0.8s;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, -20%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content .form-group{
    border-bottom: none;
    width:50%;
    float:left;
    padding:0 10px;
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content .form-group > div{
    width:50%;
    float:left;
    white-space: nowrap;
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content .form-group > div:last-child{
    text-align:center;
}
/*no action when no grouping*/
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content.vac-no-ac-nogrp .form-group{
    width:100%;
    float:left;
    padding:7px 5px;
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content.vac-no-ac-nogrp .form-group > div{
    width:100%;
    float:left;
    white-space: normal;
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content.vac-no-ac-nogrp .form-group > div{
    width: 100%;
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content.vac-no-ac-nogrp .form-group .lb-status-bg-wrap{
    float:left;
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content.vac-no-ac-nogrp .form-group > div:last-child{
    text-align:left;
}
/*no action when no grouping END*/

.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .box-body,
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-gsm-wrap .box-body{
    height:auto !important;
}
.valid-card-banner .avatar > span{
    color:#fff;
}
.valid-card-banner > span{
    font-size: 2.6em;
    color: rgba(255,255,255,0.27);
    font-weight: 600;
    position: relative;
    top: -24px;
    left: 2rem;
}
.valid-card-content-wrap{
    position: relative;
    padding: 1rem;
    margin-top: -2.6rem;
    display: block;
    float: left;
    width: 100%;
}
.valid-card-acc{
    box-shadow: none;
    border: none;
}
.valid-card-acc .box-header{
    position: relative;
    padding: 1rem;
    border-radius: 5px;
    border: none !important;
    margin-bottom: 4px;
    background-color: rgba(151, 178, 201 , 0.21);
    box-shadow: none;
}
.valid-card-acc .box-header > h6{
    font-size:1em;
    color:#1d2e5e;
    padding: 8px 10px;
}
.valid-card-acc .box-body{
    border-radius: 5px;
    margin: 0 5px;
    background-color: #f9f9f9 !important;
    border-bottom: none;
    padding: 6px 10px;
}
.valid-info-main-wrap{
    width: 100%;
    display: flex;
    margin-bottom: 10px;
}
.valid-info-main-wrap .v-info-status{
    width:152px;
    margin-right: 10px;
}
.valid-info-main-wrap .v-info-status ul{
    list-style: none;
    padding:0;
    margin:0;
}
.valid-info-main-wrap .v-info-status ul li{
    width:70px;
    height:70px;
    float:left;
    margin-right: 6px;
    margin-bottom: 6px;
    border-radius: 5px;
    background-color: #fafafa;
    overflow: hidden;
}
.valid-info-main-wrap .v-info-summery{
    width:65%;
}
.valid-info-main-wrap .v-info-summery .form-group{
    margin-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.65);
    padding-bottom: 7px;
    color: #505c6a;
}
.valid-info-main-wrap .v-info-summery .form-group:last-child{
    border-bottom: none;
}
.valid-info-main-wrap .v-info-status ul li >div,
.valid-info-main-wrap .v-info-status ul li >a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.valid-info-main-wrap .v-info-status ul li > div >span,
.valid-info-main-wrap .v-info-status ul li > div >i,
.valid-info-main-wrap .v-info-status ul li >a >i{
    position: absolute;
    left:0;
    top:0;
    width:inherit;
    height:inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.valid-info-main-wrap .v-info-status ul li > div >span{
    background-color: inherit;
    font-size: 0.6em;
    font-weight: 800;
    text-align: center;
    transition: all 0.2s;
}
.valid-info-main-wrap .v-info-status ul li:first-child > div >span{
    transform: translateX(-100%);
}
/*.valid-info-main-wrap .v-info-status ul li:nth-child(2) > div >span{
    transform: translateY(100%);
}*/
.valid-info-main-wrap .v-info-status ul li:nth-child(2)  >a >i:after{
    transform: translateY(-100%);
}
.valid-info-main-wrap .v-info-status ul li:last-child > div >span{
    transform: translateX(100%);
    background-color: #cfd9e3;
}
.valid-info-main-wrap .v-info-status ul li > div >i{
    font-size:1.5em;
}
.valid-info-main-wrap .v-info-status ul li:hover > div >span,
.valid-info-main-wrap .v-info-status ul li:hover >a >i:after{
    transform: translateY(0);
    transform: translateX(0);
}

.valid-info-main-wrap .v-info-status ul li >a >i{
    font-size:2em;
    font-style: normal;
}
.valid-info-main-wrap .v-info-status ul li >a >i:after{
    position: absolute;
    content: 'Score';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 0.2s;
    background-color: inherit;
    font-size: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.valid-info-main-wrap .v-info-status ul li:last-child{
    background-color: #cfd9e3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.valid-info-main-wrap .v-info-status ul li .flag-icon{
    font-size: 2em;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 1;
    background-size: cover;
    box-shadow: 0 0 3px 0 rgba(22, 22, 22, 0.5), 0 0 6px -1px #6e6e6e inset;
    left: auto;
    top: auto;
}
.valid-main-status-wrap .valid-card-banner{
    height: 40px;
    padding: 0;
    margin-bottom: 0;
    opacity: 0.8;
}
.valid-main-status-wrap .chg-list-view-wrap{
    display: flex;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    z-index: 100;
    font-size: 1.3em;
}
.valid-main-status-wrap .chg-list-view-wrap > div{
    position: relative;
    display: flex;
    justify-content: center;
    margin-left:10px;
}
.valid-main-status-wrap .chg-list-view-wrap > div:first-child i{
    font-size:0.9em;
    padding-top:1px;
}
.valid-main-status-wrap .chg-list-view-wrap > div > span{
    position: absolute;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 0.6em;
    top: calc(100% + 5px);
    right: 0;
    background-color: rgba(255, 255, 255,0.37);
    border-radius: 4px;
    color: #000;
    padding: 2px 6px;
    backdrop-filter: blur(18px);
}
.valid-main-status-wrap .chg-list-view-wrap > div:hover > span{
    transform:translateY(0);
    opacity: 1;
    visibility: visible;
}
.resualt-verify-v2-wrap .valid-main-status-wrap .valid-card-banner > span{
    top: 12px;
    text-transform: uppercase;
    font-size: 1.4em;
    margin-left: 4rem;
    position: relative;
    filter: drop-shadow(1px -1px 0px rgba(225,225,225,0.5));
    height: 82px;
}
.valid-main-status-wrap .valid-card-banner > span{
    position: relative;
    left: 7px;
    top: -20px;
    opacity: 1;
    /*color:#fff !important;*/
}
.resualt-verify-v2-wrap .valid-main-status-wrap .valid-card-banner .avatar{
    display: flex !important;
}
.valid-main-status-wrap .valid-card-banner .avatar{
    display: none !important;
}
.w-trc-statu > div{
    background-color: transparent !important;
}
.w-trc-statu > div > i{
    margin-right:5px;
}
.f-lbl-syl {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.f-lbl-syl > div:first-child{
    font-size: 0.7em;
    /*    opacity: 0.5;*/
    color: #a7b5bc;
    padding: 0 8px;
}
.f-lbl-syl > div:last-child{
    padding-top: 0;
}
.valid-acc-content .form-group {
    border-bottom: 1px dashed #e9e9e9;
    padding: 7px 5px;
    color: #505c6a;
    margin-bottom: 0;
}
.valid-acc-content .form-group:last-child{
    border-bottom: none;
}
.w-tooltip i {
    border: 1px solid;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
}
.valid-leg-fixed .apexcharts-legend{
    display: flex;
    width: 100%;
    left: 0 !important;
}
.valid-leg-fixed .apexcharts-legend-series{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2px !important;
    padding: 0;
    border-radius: 5px;
    float: left;
    width: auto;
}
.valid-leg-fixed .apexcharts-legend-series .apexcharts-legend-marker{
    height: 30px !important;
    border-radius: 6px !important;
}
.valid-leg-fixed .apexcharts-legend-series .apexcharts-legend-text{
    position: absolute;
    color: #fff !important;
    font-weight: 800 !important;
}
.wmap-frame-wrap{
    /*background-color:#f5f5f5;*/
    /*background-color:#1f283e;*/
    border-radius: 6px;
    box-shadow: 1px 1px 5px 1px rgba(225,225,225,0.8);
}
.country-map-list-wrap{
    overflow:hidden;
    position: relative;
}
.country-map-list-wrap:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 38px;
    left: 0;
    bottom: 0;
    box-shadow: 0px -38px 8px -10px #fff inset;
}
.country-map-list-wrap ul{
    padding: 6px 10px 10px 0;
    margin: 0;
    overflow: auto;
    height: 390px;
}
.country-map-list-wrap.cmlw-w-percent{
    padding-top: 3rem;
}

.country-map-list-wrap ul li{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    margin-bottom: 4px;
    background-color: #f1f1f1;
    border-radius: 6px;
    transition:all 0.2s;
    border:1px solid #fff;
    cursor:pointer;
}
.country-map-list-wrap.cmlw-w-percent ul li{
    margin-bottom: 0px;
    background-color: #ffffff;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.country-map-list-wrap ul li:hover{
    background-color: #ddd;
    box-shadow:2px 2px 1px 0 #ddd;
}
.country-map-list-wrap.cmlw-w-percent ul li:hover {
    border: 1px solid #f0f0f0;
    padding-bottom: 8px;
    background-color: transparent;
    box-shadow: none;
}
.country-map-list-wrap ul li:hover i{
    box-shadow:0 1px 4px 0 #000000,0 0 0 0 rgba(0,0,0,0) inset;
}
.country-map-list-wrap.cmlw-w-percent ul li .progress{
    position: relative;
    overflow:visible;
}
.country-map-list-wrap.cmlw-w-percent ul li .progress > span{
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    color: #fff;
    border-radius: 4px;
    padding: 0px 5px;
    display: flex;
    align-items:center;
    justify-content: center;
}
.country-map-list-wrap.cmlw-w-percent ul li .progress > span:after{
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    bottom: -3px;
    right: 7px;
    background-color: inherit;
}
.country-map-list-wrap ul li > div > span.r-circle:after{
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    top: calc(50% - 2px);
    left: -15px;
    border-radius: 50%;
    background-color: #ddd;
}
.country-map-list-wrap ul li > span{
    font-weight: 800;
    color:#455a64;
    font-size: 1.1em;
}
.country-map-list-wrap ul li > div{
    display: flex;
    align-items: center;
}
.country-map-list-wrap.cmlw-w-percent ul li > div:first-child{
    margin-bottom: 10px;
}
.country-map-list-wrap ul li > div > span{
    font-weight: 700;
    color: #4b5a64;
    position: relative;
    transition: all .2s
}
.country-map-list-wrap ul li i{
    margin-right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: 38px 28px;
    box-shadow: 0px 0px 3px 0px #7e7e7e, 0px 0px 10px -1px #4a4a4a inset;
    transition:all 0.5s;
}
.country-map-list-wrap ul li:hover > div > span{
    color:#000;
}
.unknown-flag,.flag-icon-zz{
    background-image: url('../../images/unknown-v.png');
}
.country-map-list-wrap ul li i.unknown-flag,
.country-map-list-wrap ul li i.flag-icon-zz{
    background-size: 30px;
    background-position: center;
    background-repeat: no-repeat;
}
.status-tb-box > div{
    position: relative;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 0 0px #ccc;
    border: 1px solid #fff;
}
.status-tb-box > div > span{
    position: absolute;
    left:calc(100% + 8px);
    white-space: nowrap;
}
.status-tb-box > div > i{
    font-size: 1.1em;
}
.status-tb-box.iw-t-r-side > div > span:after{
    bottom: calc(50% - 2px);
    left: -2px;
}
.status-tb-box.iw-t-r-side > div > span{
    bottom:auto;
    left:calc(100% + 8px);
    box-shadow:2px 0 0 0;
    z-index: 10;
}
.valid-leg-fixed.vlf-w-tooltip .apexcharts-legend-series:hover .apexcharts-legend-text{
    transform: translateY(0);
    opacity: 1;
}
.valid-leg-fixed.vlf-w-tooltip .apexcharts-legend{
    overflow:visible;
}
.valid-leg-fixed.vlf-w-tooltip .apexcharts-legend-series .apexcharts-legend-text{
    position: absolute;
    color: #fff !important;
    font-weight: 500 !important;
    top: -23px;
    background-color: #8f9ebd;
    padding: 2px 6px;
    border-radius: 3px;
    transform: translateY(5px);
    opacity: 0;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.valid-leg-fixed.vlf-w-tooltip .apexcharts-legend-series .apexcharts-legend-text:after{
    position:absolute;
    content:'';
    width:4px;
    height:4px;
    transform: rotate(45deg);
    background-color:#8f9ebd;
    bottom: -2px;
}
.valid-leg-fixed.vlf-w-tooltip .apexcharts-legend-series .apexcharts-legend-marker{
    width:22px !important;
    height: 16px !important;
    border-radius:5px !important;
}
.detail-info-avatar-wrap.avatar-w--status.ms-validate > span >i{
    background-color: inherit !important;
}
.detail-info-avatar-wrap.avatar-w--status.ms-validate > span >i.fa-flash{
    background-color: #ffffff !important;
}
.detail-info-avatar-wrap.avatar-w--status.ms-validate > span >i:before{
    display: none !important;
}

.verify-streamline-wrap .sl-item{
    background-color: #fbfbfb;
    box-shadow: 0 0 3px -1px #c4c4c4;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: all 0.5s;
    padding: 0 16px 4px 16px !important;
}
.verify-streamline-wrap .sl-item.active{
    background-color: #e6f2ff !important;
    box-shadow: -10rem 0rem 90px -4rem rgba(30, 100, 255, 0.24) inset !important;
}
.verify-streamline-wrap .sl-item:last-child:after{
    display: block;
}
.verify-streamline-wrap .sl-item .sl-item-time{
    display: flex;
    align-items: center;
    height:100%;
}
.verify-streamline-wrap.streamline-theme .sl-item:after{
    top:0;
    bottom: 0;
    border-left-width: 4px;
    left: 16% !important;
    opacity: 0.3;
}
.verify-streamline-wrap .sl-content{
    flex-direction: row;
    align-items: center;
}
.verify-streamline-wrap .sl-co-top{
    flex-direction: column;
    width: 90%;
    justify-content: center;
    align-items: flex-start;
}
.verify-streamline-wrap .sl-co-top > span{
    max-width:100% !important;
}
.verify-streamline-wrap .sl-co-top > span:first-child{
    font-size: 0.9em;
}
.verify-streamline-wrap .sl-co-top > span:last-child{
    font-size: 1.1em;
}
.verify-streamline-wrap .sl-item:before{
    display: none !important;
}
.verify-streamline-wrap .sl-item .valid-stream-status{
    position: absolute;
    width: 32px;
    height: 32px;
    outline: 3px solid #fbfbfb;
    left: 13.41%;
    top: 10px;
    background-color: #fff;
    box-shadow: 0px -5px 0 -2px #fff;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.verify-streamline-wrap .sl-item .valid-stream-status > div{
    width:32px;
    height:32px;
    border-radius: 50%;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;

}
.verify-streamline-wrap .sl-item .valid-stream-status > div:hover > span{
    opacity: 1;
    transform: translateY(0);
}
.verify-streamline-wrap .sl-item .valid-stream-status > div > span{
    display: flex;
    position: absolute;
    background-color: inherit;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    padding: 0px 5px;
    font-size: 0.8em;
    border-radius: 4px;
    bottom: calc(100% + 4px);
    border-top: 2px solid;
    transform: translateY(10px);
    opacity: 0;
    transition: all 0.4s;
}
.verify-streamline-wrap .sl-item .valid-stream-status > div > span:after{
    position: absolute;
    content: '';
    width:4px;
    height:4px;
    transform: rotate(45deg);
    background-color: inherit;
    bottom: -2px;
}
.verify-streamline-wrap .sl-co-bottom{
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bebebe;
    border-radius: 50%;
}
.verify-streamline-wrap .sl-item:hover  .sl-co-bottom{
    background-color: #eee;
    color: #607d8b;
}
.nav-float-hvr-wrap{
    background-color: rgba(165 ,177,186, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.nav-float-hvr {
    border-radius: 6px;
    padding:6px;
    position: relative;
}
.nav-float-hvr a.active{
    color:#fff !important;
}
.nav-float-hvr a{
    color: #65696c !important;
    margin-right: 0 !important;
}
.nav-float-hvr a:hover{
    color: #2196f3 !important;
}
.nav-float-hvr a.active:hover{
    color:#fff !important;
}

.nav-float-hvr a:before{
    display: none;
}
.nav-float-hvr.nth-1:before{
    transform: translateX(0);
}
.nav-float-hvr.nth-2:before{
    transform: translateX(100%);
}
.nav-float-hvr:before{
    position: absolute;
    content: '';
    height: 79%;
    width: 47.4%;
    border-radius: 4px;
    background-color: #2196f3;
    transition-property: transform;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0, 1.34, 1, 1);
    transition-delay: 0s;
}
.bcw-percent-wrap .apexcharts-legend{
    display: flex;
    flex-direction: column;
}
.bcw-mail-lg-cus.bcw-percent-wrap .apexcharts-legend{
    flex-wrap: nowrap !important;
    padding: 6rem 12px 1rem;
    margin-top: 0rem;
    max-height: 134px !important;
}
.bcw-percent-wrap.archive-pw-legened .apexcharts-legend{
    padding:0 5rem;
}
.bcw-percent-wrap .apexcharts-legend .apexcharts-legend-series{
    flex-direction: row;
    justify-content: space-between;
    padding: 0;
    margin-top: 4px !important;
    margin-bottom: 10px !important;
    position: relative;
    background-color: #f0f0f0;
    margin-left: 45% !important;
    box-shadow: 0px 0px 5px 0px #dedede inset;
}
.bcw-percent-wrap .apexcharts-legend .apexcharts-legend-marker{
    transition: all 0.5s;
}
.bcw-percent-wrap .apexcharts-legend .apexcharts-legend-marker:after{
    position: absolute;
    content: attr(data-percent);
    width: auto;
    border-radius: 3px;
    z-index: 1;
    color: #fff;
    background-color: inherit;
    padding: 2px 3px;
    right: calc(100% + 6px);
    font-size: 0.7em;
    top: -2px;
}
.bcw-percent-wrap .apexcharts-legend .apexcharts-legend-marker:before{
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background-color: inherit;
    right: calc(100% + 4px);
    top: 2px;
}
.bcw-percent-wrap .apexcharts-legend .apexcharts-legend-text{
    top: 0;
    color: #888 !important;
    position: absolute;
    right: 100%;
    text-align: left;
    width: 80%;
    padding-left: 12px;
    transition:all 0.45s;
}
.bcw-percent-wrap .apexcharts-legend .apexcharts-legend-text:hover{
    color:#000 !important;
}
.bcw-percent-wrap .apexcharts-legend .apexcharts-legend-text:after{
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    left: 0;
    top: calc(50% - 3px);
    z-index: -1;
    border-bottom: 2px solid #888;
    border-right: 2px solid #c6c6c6;
    transform: rotate(-45deg);
}
.box-notification-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.2rem 13rem 2.2rem 2rem;
    background-image: url('../../images/email_verifier_crea.svg');
    background-repeat: no-repeat;
    background-position: center right -22px;
    background-size: 317px;
}
.box-notification-wrap.bnw-validation{
    background-image: url('../../images/email_valid_crea.svg');
}
.box-notification-wrap.bnw-gsm{
    background-image: url('../../images/gsm_crea.svg');
    background-position: center right -74px;
    background-size: 380px;
}
.box-notification-wrap.bnw-gsm.bnw-validation{
    background-image: url('../../images/gsm_valid_crea.svg');
}
.mt-big-btn {
    padding: 12px 30px !important;
    font-size: 1.2em;
}
.mt-big-btn::before {
    background: #fff;
    content: "";
    height: 100px;
    opacity: 0;
    position: absolute;
    top: -37px;
    transform: rotate(35deg);
    width: 37px;
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}
.mt-big-btn::after {
    background: #fff;
    content: "";
    height: 5rem;
    opacity: 0;
    position: absolute;
    top: -24px;
    transform: rotate(35deg);
    transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 1rem;
}
.mt-big-btn::before {
    left: -50%;
}

.mt-big-btn::after {
    left: -20%;
}
.mt-big-btn:hover,
.mt-big-btn:active {
    background-color: #0275d8;
    border-color: #0275d8;
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
}
.mt-big-btn.green-500:hover,
.mt-big-btn.green-500:active {
    background-color: #388e3c;
    border-color: #388e3c;
}
.mt-big-btn:hover::before {
    left: 120%;
    opacity: 0.2;
}
.mt-big-btn:hover::after {
    left: 200%;
    opacity: 0.3;
}
.format-type-cus.range-box-head-cus .dropdown-toggle.lang-cus{
    color:#2196f3  !important;
    background-color: #ffffff !important;
    border-color: #2199f4 !important;
    padding: 6px 14px !important;
    box-shadow: 0 3px 5px -4px #085592;
}
.format-type-cus .dropdown-toggle > span > span{
    display: flex;
    align-items: center;
}
.range-box-head-cus.format-type-cus .dropdown-menu{
    background-color: rgba(138 , 138 , 138  , 0.17);
    border-radius: 0 0 4px 4px;
    border:none !important;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}
.format-type-cus .dropdown-toggle:after{
    border-color: #2199f4 !important;
    margin-top: 6px !important;
}
.format-type-cus .dropdown-menu .dropdown-item{
    width: 47.5% !important;
    padding: 1rem 14px !important;
    background-color: #ffffff;
    color: #4e657a !important;
    margin-top: 4px;
}
.format-type-cus .dropdown-menu .dropdown-item > span{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.2em;
    justify-content: center;
}
.format-type-cus .dropdown-menu .dropdown-item > span > i{
    margin-right: 0 !important;
    margin-bottom: 5px;
    font-size: 1.4em;
    margin-left: 0px;
}
.range-box-head-cus.drp-b-h-cus.format-type-cus .dropdown-toggle i {
    font-size: 1em;
    background-color: #f0f8ff;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    margin-right: 8px;
}
.fg-inner-shadow{
    box-shadow: 0px -4px 6px -7px #6a6a6a inset;
    background-color: #f9f9f9;
}
.filter-list-wrap{
    margin: 0;
    padding: 10px 1rem;
    list-style: none;
    display: flex;
    align-items: center;
}
.filter-list-wrap li{
    margin: 0 10px;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    border-radius: 3px;
    height: 20px;
    width: auto;
    justify-content: center;
}
.filter-list-wrap li span:first-child {
    white-space: nowrap;
    position: absolute;
    background-color: #2196f3;
    padding: 1px 8px;
    border-radius: 3px;
    color: #fff;
    bottom: calc(100% + 0px);
    opacity: 0;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em !important;
}
.filter-list-wrap li span:first-child:after{
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
    background-color: inherit;
    bottom: -2px;
}
.filter-list-wrap li:hover span:first-child{
    opacity: 1;
    transform: translateY(-4px);
}
.filter-list-wrap li span:last-child{
    border-radius: 5px;
    height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
    text-align: center;
    line-height: 1.9;
    white-space: nowrap;
    color: #2196f3;
}
.filter-list-wrap li span.ln-keyword{
    max-width: 80px;
}
.filter-list-wrap li:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    right: -12px;
    background-color: #e2e2e2;
}
.filter-list-wrap li:first-child{
    padding: 0;
    margin: 0;
    font-size: 1.4em;
    background-color: transparent;
}
.filter-list-wrap li:first-child:after,.filter-list-wrap li:last-child:after{
    display: none;
}
.score-head-tb a{
    width:24px !important;
    height:24px !important;

}
.score-head-tb a >i{
    font-size:0.8em !important;
}
.score-polar-chart .apexcharts-legend-series{
    height: 32px;
    position: relative;
    padding: 0;
    display: flex !important;
    justify-content: center;
    border: 1px solid #fff !important;
    box-shadow: 2px 2px 0 0px #e7e7e7;
    border-radius: 7px;
    overflow: visible !important;
}
.score-polar-chart .apexcharts-legend-series:hover {
    background-color: transparent !important;
    opacity: 0.7;
}
.score-polar-chart .apexcharts-legend-marker{
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    margin: 0;
    transform: rotate(4deg);
    border: 1px solid #fff !important;
}
.score-polar-chart .apexcharts-legend-text{
    position: absolute;
    color: #fff !important;
    font-weight: 600 !important;
}
.score-polar-chart .apexcharts-legend{
    height:36px;
    overflow: hidden;
}
.select2-container--default .select2-selection--multiple.score-select-2 .select2-selection__choice{
    padding: 0 8px 0 0 !important;
    margin-top: 6px;
}
.select2-container--default .select2-selection--multiple.score-select-2 .select2-selection__choice__remove{
    padding: 3px 6px 3px 6px !important;
    background-color: rgba(255, 255, 255,0.15);
    margin-left: -16px;
    border:none;
}
.select2-container--default .select2-selection--multiple.score-select-2 .select2-search.select2-search--inline{
    /*display: none !important;*/
}
.select2-dropdown.score-select-2,
.select2-dropdown.category-select{
    border-color: #e0e0e0;
    box-shadow: 0px 0px 9px -3px #ccc;
    z-index: 200;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
.select2-dropdown.category-select .select2-results__option{
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #f7f7f7;
    margin-bottom: 4px;
}
.select2-dropdown.category-select .select2-results__option:hover{
    border-color: #2196f3;
}
.select2-dropdown.category-select .select2-results__option[aria-selected=true]{
    padding-left: 1.4rem !important;
    border-color: #2196f3;
}
.select2-container .select2-selection__rendered li.select2-search--inline{
    position: relative;
    width:100%;
}
.select2-container .select2-selection__rendered li.select2-search--inline:after{
    border: none;
    border-bottom: 2px solid #55595c;
    border-right: 2px solid #55595c;
    transform: rotate(45deg);
    border-bottom-right-radius: 2px;
    right: 5px;
    top: calc(50% - 3px);
    width: 7px;
    height: 7px;
    position: absolute;
    display: block;
    content: "";
}
.select2-container .select2-selection__rendered li.select2-search--inline:last-child{
    display: none;
}
.sc-2-mh-64 .select2-container .select2-selection__rendered li.select2-search--inline:last-child{
    display: block !important;
}
.select2-container .select2-selection__rendered li.select2-search--inline:first-child{
    display: block !important;
}
.select2-dropdown.score-select-2 .select2-results__option{
    width:28px;
    margin-left: 3px;
    margin-right: 2px;
    position: relative;
    border-radius: 5px;
    line-height: 1.2;
    height:28px;
    float:left;
    border:1px solid #ddd;
    padding: 6px 0;
    text-align: center;
}
.select2-container--default .select2-dropdown.score-select-2 .select2-results__option[aria-selected="true"] {
    position: relative;
    color: rgb(255, 255, 255) !important;
    background-color: rgb(33, 150, 243) !important;
    transition: all 0.4s ease 0s;
    padding: 6px 0;
}
.select2-container--default .select2-dropdown.score-select-2  .select2-results__option[aria-selected=true]:after{
    width: 5px;
    height:5px;
    left:2px;
    top:2px;
    border-radius: 50%;
    background-color: #fff;
    border:none !important;
}
.select2-container--default .select2-dropdown.score-select-2 .select2-results__option--highlighted[aria-selected]{
    color: #fff !important;
    background-color: #2196f3 !important;
    border-color: #ffffff !important;
}

.resualt-verify-v2-wrap .valid-main-status-wrap .valid-card-banner > span:after{
    position: absolute;
    content: attr(data-value);
    clip: rect(0, 1000px, 19px, 0);
    color: rgba(0, 0, 0, 0.52) !important;
    left: 8px;
    top: 8px;
}
.resualt-verify-v2-wrap .valid-card-content-wrap{
    margin-top: -1rem;
    padding:1rem;
    width:100%;
}
.resualt-verify-v2-wrap .valid-info-main-wrap{
    width:100%;
}
.resualt-verify-v2-wrap .valid-info-main-wrap .v-info-summery{
    width: 100%;
    /*background-color: rgba(237,249,243,0.59);*/
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    border-radius: 5px;
    box-shadow: 0px 0px 2px 1px #e9f5ef inset;
    backdrop-filter: blur(1px);
}
.resualt-verify-v2-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base{
    background-color:rgba(143, 218 ,182 , 0.32);
    border-radius:5px;
    color:#4ec58b;
    display:flex;
    align-items: center;
    padding:3px 0;
    border:none;
    font-weight: 700;
    position: relative;
}
.resualt-verify-v2-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base:after{
    position: absolute;
    content: attr(data-title);
    width: auto;
    height: 8px;
    right: 8px;
    opacity: 0.7;
    font-size: 0.9em;
    width:auto;
}
.resualt-verify-v2-wrap.rv-disconnected-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base:after,
.resualt-verify-v2-wrap.rv-prediction-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base:after{
    width: 52%;
    font-size: 0.7em;
    line-height: 1.4;
    text-align:right;
}

.resualt-verify-v2-wrap .f-lbl-syl > div:first-child{
    font-size:0.9em;
}
.resualt-verify-v2-wrap .f-lbl-syl > div:last-child {
    /*text-transform: capitalize;*/
}
.resualt-verify-v2-wrap .f-lbl-syl > div:last-child > div {
    background-color:transparent !important;
}
.resualt-verify-v2-wrap .valid-acc-content{
    margin:0 2px;
}
.cut-code-statu{
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cut-code-statu i.flag-icon {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-size: cover;
}
.country-behin-loc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 4px 0;
    background-color: #ececec;
}
.country-behin-loc i.flag-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 44px 32px;
    box-shadow: 0px 0px 3px 0px #7e7e7e, 0px 0px 10px -1px #4a4a4a inset;
    transition: all 0.5s;
    margin-bottom: 6px;
}
.country-behin-loc > span:last-child{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: calc(100% - 52px);
}
.fm-state-wrap{
    background-color: #f0f0f0;
    margin: 10px 0 4px 0px;
    border-radius: 5px;
    overflow:hidden;
}
/*.resualt-verify-v2-wrap .valid-card-acc .box-header{
    background-color: rgba(172, 172, 172 , 0.11);
}
.resualt-verify-v2-wrap .valid-card-acc .box-header > h6{
    color: #747884;
}*/
.resualt-verify-v2-wrap.rv-valid-wrap .valid-info-main-wrap .v-info-summery {
    background-color: rgba(237,249,243,0.59);
    box-shadow: 0px 0px 2px 1px #e9f5ef inset;
}
.resualt-verify-v2-wrap.rv-valid-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base{
    background-color: rgba(143, 218 ,182 , 0.32);
}


.resualt-verify-v2-wrap.rv-invalid-wrap .valid-info-main-wrap .v-info-summery {
    background-color: rgba(249, 237, 237 , 0.59);
    box-shadow: 0px 0px 2px 1px #f5e9e9 inset;
}
.resualt-verify-v2-wrap.rv-invalid-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base{
    background-color: rgba(218, 143, 143,0.32);
    color: #af4c4c;
}

.resualt-verify-v2-wrap.rv-prediction-wrap .valid-info-main-wrap .v-info-summery {
    background-color: rgba(184, 225, 255,0.59);
    box-shadow: 0px 0px 2px 1px #9ed0ff inset;
}
.resualt-verify-v2-wrap.rv-prediction-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base{
    background-color: rgba(68, 132, 205,0.19);
    color:#4484cd;
}

.resualt-verify-v2-wrap.rv-disconnected-wrap .valid-info-main-wrap .v-info-summery {
    background-color: rgba(247, 247, 247, 0.59);
    box-shadow: rgb(236, 236, 236) 0px 0px 2px 1px inset;
}
.resualt-verify-v2-wrap.rv-disconnected-wrap .valid-info-main-wrap .v-info-summery .form-group.info-frame-base{
    background-color: rgba(208, 208, 208, 0.32);
    color: #7e7e7e;
}
.rbw-rslt-status{
    position:relative;
    display:flex;
    align-items:center;
}
.row-btn-wrap.rbw-rslt-status > div{
    position: relative;
}
.row-btn-wrap.rbw-rslt-status > span{
    position: absolute;
    white-space: nowrap;
    border-radius: 4px;
    padding: 1px 6px;
    left: calc(100% + 5px);
    opacity: 0;
    transform: perspective(9cm) translateX(20px) rotateY(90deg);
    transform-origin: left center;
    transition: opacity 0.1s ,all 0.3s;
    font-weight: 600;
    font-size: 0.9em;
    box-shadow: 1px 1px 0 0;
    display:flex;
    align-items: center;
    justify-content: center;
}
.row-btn-wrap.rbw-rslt-status > span:after{
    position:absolute;
    content:'';
    width:6px;
    height:6px;
    transform: rotate(45deg);
    background-color: inherit;
    left:-3px;
}
.row-btn-wrap.rbw-rslt-status:hover i{
    transform: rotate(0deg);
}
.row-btn-wrap.rbw-rslt-status:hover >span{
    opacity: 1;
    transform: perspective(800px) translateX(0) rotateY(0deg);
}
.single-verify-input-wrap{
    background-color: #f5f5f5;
    padding:1rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 0px 4px 3px -4px #ddd inset, 0px -4px 3px -4px #ddd inset;
}
.single-verify-input-wrap button{
    width:25%;
    justify-content: center;
}
.single-verify-input-wrap .iti{
    width:100%;
}
.single-verify-input-wrap .iti--separate-dial-code .iti__selected-flag{
    background-color: transparent !important;
}
.region-status-wrap{
    background-color: #ececec;
    border-radius: 5px;
    margin-bottom: 10px !important;
    margin: 10px 10px;
    padding: 5px 0 !important;
}

/* Timeline Container */
.timeline-story-wrap .outer{
    counter-reset: section;
}
.timeline-story-wrap {
    margin: 0;
    padding: 0 1rem;
}
.timeline-story-card {
    position: relative;
    max-width: 400px;
    counter-increment: section;
}
.timeline-story-card:nth-child(odd) {
    padding: 10px 0 10px 33px;
}
.timeline-story-card:nth-child(even) {
    padding: 10px 30px 10px 0;
}
.timeline-story-card::before {
    content: '';
    position: absolute;
    width: 50%;
    border: solid #00b0ff;
}
.timeline-story-card:nth-child(odd)::before {
    left: 0px;
    top: -4.5px;
    bottom: -4.5px;
    border-width: 4px 0 4px 4px;
    border-radius: 24px 0 0 24px;
}
.timeline-story-card:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 4px 4px 4px 0;
    border-radius: 0 24px 24px 0;
}
.timeline-story-card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
    bottom: -4px;
}
.timeline-story-card:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
}
.timeline-story-card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
}
.timeline-story-card:nth-child(even) > .timeline-story-info > div{
    text-align: right;
}
.timeline-story-info {
    display: flex;
    flex-direction: column;
    /*background: #333;*/
    color: gray;
    border-radius: 10px;
    padding: 10px;
}
.timeline-story-title {
    color: #3b414c;
    position: relative;
    font-size: 1em;
    display:flex;
    align-items: flex-start;
    flex-direction: column;
}

.timeline-story-card:nth-child(odd) .status-tb-box{

    left: -55px;
}
.timeline-story-title .status-tb-box {
    /*    content: counter(section);*/
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    outline: 4px solid #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    color: #00b0ff;
    font-weight: 600;
}
.timeline-story-card:nth-child(even) > .timeline-story-info > .timeline-story-title {
    text-align: right;
    justify-content: flex-end;
    align-items: flex-end;
}
.timeline-story-card:nth-child(odd) > .timeline-story-info > .timeline-story-title  .status-tb-box {
    left: -55px;
}
.timeline-story-card:nth-child(even) > .timeline-story-info > .timeline-story-title  .status-tb-box {
    right: -53px;
}
.copy-w-ico{
    position: relative;
    cursor: pointer;
}
.timeline-story-card:last-child{
    padding-bottom: 3rem;
    margin-bottom: 1rem;
}
.timeline-story-card .status-tb-box-first-step {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    outline: 4px solid #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    color: #00b0ff;
    font-weight: 600;
    right: -13px;
    bottom: 0;
}
.status-tb-box-first-step-wrap{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    text-align: right;
    padding-right: 2rem;
}
.timeline-story-card:nth-child(even) .timeline-story-info{
    align-items: flex-end;
}
.copy-w-ico:before{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f0c5";
    position: absolute;
    right:10px;
    top:5px;
    opacity: 0;
    transition: all 0.5s;
    color:#2e7d32!important
}
.copy-w-ico:hover:before{
    opacity: 1;
}
.score-polar-text-chart .apexcharts-legend-series{
    display: flex !important;
    align-items: center;
    border:1px solid #ddd;
    padding: 6px 14px;
}
.score-polar-text-chart .apexcharts-legend-series .apexcharts-legend-marker{
    margin-right:7px;
}
.score-polar-text-chart .apexcharts-legend-series .apexcharts-legend-text{
    text-transform: capitalize;
}
.select2-container--default .select2-selection--multiple.auto-height-select{
    height:auto !important;
}
.select2-container .auto-height-select .select2-search--inline{
    display:none;
}
.select2-container--open .select2-dropdown--above.ah-select{
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-color: #e4e6e8;
}
/*Horizental Main Menu*/
.hr-nav{
    height:100vh;
    overflow: hidden;
}
.hr-nav .app-aside{
    width:100%;
    min-height:58px;
    height:auto !important;
    top:0;
}
.hr-nav .app-aside .navside{
    flex-direction: row;
    height:58px;
    overflow:visible;
}
.hr-nav .app-aside .navside .navbar{
    display: block;
    order: 1;
    border-right: 1px solid #1f2937;
    border-left: 1px solid #1f2937;
    transform:translateY(0) !important;
    width: 60px;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: auto;
    margin-right:0;
    background-color: transparent;
    box-shadow: none;
    min-height:3.5rem;
}
.hr-nav .app-aside .navside .navbar:after,.hr-nav .app-aside .navside .navbar:before,
.hr-nav .app-aside .navside .navbar > div:after,.hr-nav .app-aside .navside .navbar > div:before{
    display:none;
}
.hr-nav .app-aside .navside .navbar .fa-th-large{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em !important;
}
.hr-nav .app-aside .navside .navbar .fa-th-large:after{
    position: absolute;
    content: 'Switch to Verticaly';
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #2196f3;
    right: 100%;
    font-size: 0.5em;
    white-space: nowrap;
    color: #fff;
    transition: all 0.5s;
    transform: translateX(-10px);
    opacity: 0;
    visibility: hidden;
    font-family: 'Roboto', sans-serif;
}
.hr-nav .navside .nav-header img.main-logo{
    display: none !important;
}
.hr-nav .app-aside .navside .navbar .fa-th-large:hover:after{
    transform: translateX(8px);
    opacity: 1;
    visibility: visible;
}
.hr-nav [flex-no-shrink],.hr-nav [data-flex-no-shrink]{
    order: 1;
}
.hr-nav [data-floded]{
    display: none !important;
}
.hr-nav .user-info-sidemenu-wrap{
    background-color: transparent;
}
.hr-nav .app-aside .navside [flex],.hr-nav .app-aside .navside [data-flex]{
    width:100%;
    overflow:visible;
    display: flex;
    align-items: center;
}
.hr-nav .app-aside:not(.hide) ~ .app-content{
    margin-top: 58px;
    top: 58px;
    left: auto;
    margin-left: 0;
    height: calc(100vh - 58px);
}
.hr-nav .app-aside:not(.hide) ~ .app-content > iframe{
    height:inherit !important;
}
.hr-nav .app-aside,.hr-nav  .app-aside .scroll{
    width: 100%;
    height:100%;
}
.hr-nav .app-aside .scroll .nav,.hr-nav  .app-aside .scroll .nav{
    display: flex;
    flex-direction: row;
    height:inherit;
}
.hr-nav .nav-stacked.nav-stacked-rounded .nav > li > a,.hr-nav  .nav-stacked.nav-stacked-rounded .nav > li > a{
    display: flex;
    padding-right: 30px;
    padding-left:12px;
    height:100%;
    align-items: center;
}
.hr-nav .nav-stacked.nav-stacked-rounded .nav li .nav-caret{
    position: absolute;
    right:6px;
    margin-top: 0;
}
.hr-nav .nav-stacked .nav > li > a .nav-icon{
    margin-right:0;
    padding-top:0;
}
.hr-nav .nav-stacked .nav > li:not(.nav-header){
    padding:0;
}
.hr-nav .nav-stacked .nav > li > a:before{
    border-radius: 0px;
    width: 100%;
    border-width: 1px;
    height: 2px;
    top: 0;
}
.hr-nav .nav-color .nav > li.active > a:before{
    width: 100%;
    left: 0;
    right: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top-width: 2px;
    background-color: #0c1016;
    height: 100%;
    border-radius: 0 !important;
}
.hr-nav .nav-stacked.nav-stacked-rounded .nav li .nav-sub:after{
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    top: -3px;
    left: calc(50% - 3px);
    box-shadow: none !important;
    background-color: #202f42;
}
.hr-nav .nav-stacked.nav-stacked-rounded .nav li .nav-sub{
    border-radius:4px;
    margin-top:6px;
    overflow: visible;
    background-color: #202f42;
    transition: all 0.3s;
    transform: perspective(600px) rotateX(-90deg);
    transform-origin: top center;
    visibility: hidden;
    opacity: 0;
    padding:2px 5px 5px 5px;
    max-height: unset !important;
}
.hr-nav .nav-stacked.nav-stacked-rounded .nav li .nav-sub > li:after{
    display: none;
}
/*.hr-nav .active > .nav-sub{
    transform: unset !important;
    visibility: unset !important;
    opacity:unset !important;
}*/
.hr-nav .navside .nav-header span{
    display: none
}
.hr-nav .navside .nav-header img{
    display: block !important;
    width: 70px;
    height: 100%;
    background-color: rgba(12, 16, 22, 0.68);
    padding: 10px 16px;
}
.hr-nav .navside .nav-header{
    padding:0;
}
.hr-nav .nav > li:hover > .nav-sub{
    transform: perspective(600px) rotateX(0deg) !important;
    visibility: visible !important;
    opacity:1 !important;
}
.hr-nav .user-info-sidemenu-wrap{
    padding:8px 1rem;
}
.hr-nav .user-info-sidemenu-wrap.open .dropdown-menu{
    top: 100%;
    bottom: auto;
    margin-top: 6px;
    box-shadow: none;
    border: none;
    transform-origin: top center;
}
.hr-nav .user-info-sidemenu-wrap.open .dropdown-menu:after{
    top: -3px;
    bottom:auto;
    box-shadow: none !important;
}
.hr-nav .user-info-sidemenu-wrap.open .main-language-selections .dropdown-menu:after{
    top:calc(50% - 5px);
    bottom:auto;
    left:calc(100% - 8px);
}
.hr-nav .user-info-sidemenu-wrap.open .dropdown-menu .dropdown-item.lng-wrap{
    position: relative;
    z-index: 8;
}
.hr-nav .main-language-selections.range-box-head-cus .dropdown-menu{
    top:-13px !important;
    right:calc(100% + 10px);
    width:88px;
}
.hr-nav .lng-wrap .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item{
    margin-left:3px;
}
.hr-nav .user-info-sidemenu-wrap.open .dropdown-menu .dropdown-item:hover{
    background-color: rgba(14,17,22,0.54);
    box-shadow:none;
}
.navside .nav-header img.main-logo{
    margin-bottom: 7px;
    width: 36px;
    margin-top: 10px;
    height: 36px;
    background-color: #5b579b;
    padding: 8px;
    border-radius: 10px;
}
.app-aside .navside .navbar {
    background-color: #4338ca;
    min-height: unset;
    width: 50px;
    display: flex;
    padding: 0;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-right: 20px;
    border-radius: 0 0 6px 6px !important;
    position: relative;
    box-shadow: 0px 1px 2px 0px #1b1952;
    transform: translateY(-3px);
    opacity: 1;
    transition: all 0.5s;
    color:#fff;
}
.app-aside .navside .navbar:hover{
    transform:translateY(0);
    opacity: 1;
}
.app-aside .navside .navbar i{
    width: 20px;
    height: 20px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 0.8em;
}
.app-aside .navside .navbar i.fa-th-large{
    line-height: 2;
}
.app-aside.folded .navside .navbar{
    margin-right:10px;
}
.folded .navbar.t-curv{
    margin-right:10px;
    margin-bottom: 8px;
}
.pr-detail-wrap{
    margin: 1rem 1.5rem;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 20px 0 rgba(76, 87, 125, 0.02);
    background-clip: border-box;
    border: 1px solid #eff2f5;
}
.pr-detail-wrap .dt-body-syl{
    background-color: transparent;
    box-shadow: none;
    padding: 2rem 1.25rem 0.5rem;
}
.pr-detail-wrap .opt-sidebar-wrap .nav-active-border .nav .nav-link{
    font-size: 1.2em;
    color: #a1a5b7;
    border:none !important;
    padding: 10px 22px;
    transition:all 0.1s;
    font-weight: 700;
    opacity:0.8;
}
.pr-detail-wrap .opt-sidebar-wrap .nav-active-border .nav .nav-link:hover{
    opacity: 1;
}
.pr-detail-wrap .opt-sidebar-wrap .nav-active-border .nav .nav-link.active{
    background-color: transparent;
    box-shadow: none;
    border-right:none;
    color: #2196f3;
    opacity: 1;
}
.pr-detail-wrap .opt-sidebar-wrap .nav-active-border .nav .nav-link.active:after{
    width:4px;
    height:4px;
    right: calc(50% - 2px);
    bottom:-2px;
    border: none !important;
    background-color: #2196f3;
}
.pr-detail-wrap .nav-active-border .nav-link:before{
    height:4px;
    border-bottom-width: 2px;
    z-index: 1;
}
.pr-detail-wrap .opt-sidebar-wrap .nav-active-border .nav .nav-link:before{
    bottom:auto;
    top:calc(100% - 4px);
    background-color:#fff;
}
.pr-detail-wrap .detail-info-fue-wrap > .inf-l-side > .info-fue-wrap{
    justify-content: flex-start;
}
.dm-thumb-wrap{
    width:160px;
    height:160px;
    border-radius: 6px;
    display:flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding:1rem;
    border:1px dashed #e4e6ef;
}
.dm-thumb-wrap img{
    width:100%;
    height: auto;
}
.svg-icon {
    -webkit-mask: url(../../images/checkmark.svg);
    mask: url(../../images/checkmark.svg);
    background: #18a8ec no-repeat;
    width: 26px;
    height: 26px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 26px;
    mask-size: 26px;
    -webkit-mask-position: center left;
    mask-position: center left;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
}
.svg-icon:after{
    position: absolute;
    content: '';
    width: 10px;
    height: 5px;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
    top: 9px
}
.svg-icon.unavilable{
    background: #a2a2a2 no-repeat !important;
}
.svg-icon.unavilable:after{
    content:"!";
    width:auto;
    height:auto;
    border:none !important;
    transform: rotate(0deg) !important;
    top:3px;
    color:#fff;
}
.pr-detail-wrap .user-info-detail-list-wrap > li:hover span,.pr-detail-wrap .user-info-detail-list-wrap > li:hover i{
    color:#18a8ec;
}
.pr-detail-wrap .user-info-detail-list-wrap > li > span i {
    font-size: 1em;
    color: #898c98;
    transition: all 0.5s;
}
.pr-detail-wrap .user-info-detail-list-wrap{
    color: #b5b5c3;
}
.pr-detail-wrap .user-info-detail-list-wrap > li > span {
    color: #aaaaac;
    font-weight: 500;
    text-transform: lowercase;
    max-width: 250px;
    font-size: 1.1em;
    transition: all 0.5s;
}
.pr-detail-wrap .detail-info-fue-wrap > .inf-l-side{
    height:auto !important;
}
.inf-r-side .fl-syl legend{
    font-size:1.1em;
    margin-top:-1.8rem;
    font-weight:500;
}
.more-info-wrap{
    margin: 0;
    padding: 16px 0 10px;
    list-style: none;
    display: flex;
}
.more-info-wrap > li{
    border:1px dashed #e4e6ef;
    border-radius:4px;
    padding:18px 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-right: 1rem;
    position: relative;
}
.more-info-wrap > li > span{
    line-height:1;
}
.more-info-wrap > li > span:first-child{
    font-size: 1.5rem;
    font-weight:700;
    color:#181c32;
    margin-bottom: 5px;
}
.more-info-wrap > li > span:first-child small{
    font-size: 0.5em;
    color: #8990b2;
    margin-left: 6px;
    text-transform: uppercase;
    font-weight: 500;
}
.more-info-wrap > li > span:last-child{
    color: #b5b5c3;
    font-size: 1.1em;
    font-weight: 500;
}
.pr-detail-wrap .detail-info-fue-wrap{
    display: flex;
    flex-direction: row;
    height:auto;
}
.bx-w-title-wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.fb a, .fb:before, .fb {
    background: #3b5999;
    color: #3b5999;
}
.tw a, .tw:before, .tw {
    background: #55acee;
    color: #55acee;
}
.inst a, .inst:before, .inst {
    background: #e4405f;
    color: #e4405f;
}
.ytb a, .ytb:before, .ytb {
    background: #f20000;
    color: #f20000;
}
.ln a, .ln:before, .ln {
    background: #0e76a8;
    color: #0e76a8;
}

.social-md-list{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}
.social-md-list li {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    box-sizing: border-box;
    background: transparent;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    transition: .5s;
    margin-right: 8px;
    border: 1px solid #e4e5ee;
}

.social-md-list li a {
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    font-size: 1em;
    background: transparent;
    transition: .5s;
    animation: icon-out .5s forwards;
    animation-timing-function: cubic-bezier(0.5, -0.6, 1, 1);
}

.social-md-list li:before {
    content: "";
    width: 62px;
    height: 62px;
    display: block;
    position: absolute;
    transform: rotate(-45deg) translate(-110%, -23px);
    z-index: 0;
    animation: back-out .5s forwards;
    animation-timing-function: cubic-bezier(0.5, -0.6, 1, 1);
}

.social-md-list li:hover a {
    animation: icon-in .5s forwards;
    animation-timing-function: cubic-bezier(0, 0, 0.4, 1.6);
}

.social-md-list li:hover:before {
    animation: back-in .5s forwards;
    animation-timing-function: cubic-bezier(0, 0, 0.4, 1.6);
}

@keyframes back-in {
    0% {
        transform: rotate(-45deg) translate(-110%, -23px);
    }
    80% {
        transform: rotate(-45deg) translate(5%, -23px);
    }
    100% {
        transform: rotate(-45deg) translate(0%, -23px);
    }
}

@keyframes back-out {
    0% {
        transform: rotate(-45deg) translate(0%, -23px);
    }
    20% {
        transform: rotate(-45deg) translate(5%, -23px);
    }
    100% {
        transform: rotate(-45deg) translate(-110%, -23px);
    }
}

@keyframes icon-in {
    0% {
        font-size: 1.25em;
    }
    80% {
        color: #fff;
        font-size: 1.5em;
    }
    100% {
        color: #fff;
        font-size: 1.35em;
    }
}

@keyframes icon-out {
    0% {
        color: #fff;
        font-size: 1.35em;
    }
    20% {
        color: #fff;
        font-size: 1.5em;
    }
    100% {
        font-size: 1.25em;
    }
}

.inf-r-side{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.bx-w-title-wrap h6{
    border-bottom: 1px dashed #e4e6ef;
    padding-bottom: 8px;
    margin-bottom: 10px;
    font-size: 1em;
    font-weight: 400;
    color: #181c32;
}
.select2-container--default .select2-selection--multiple.side-dark-ctr,
.select2-container--default.select2-container--focus .select2-selection--multiple.side-dark-ctr{
    background-color:transparent !important;
    border-color: #3b4a60 !important;
    min-height: 20px;
    padding-right: 18px;
    position:relative;
}
.select2-container--default .select2-selection--multiple.side-dark-ctr:after{
    position:absolute;
    content:"";
    width:6px;
    height:6px;
    border-bottom: 1px solid #3b4a60;
    border-right:1px solid #3b4a60;
    transform: rotate(45deg);
    right:7px;
    top:calc(50% - 3px);
}
.select2-container .auto-height-select.side-dark-ctr .select2-search--inline{
    display: flex !important;
    align-items: center;
    margin-top: 4px;
}
.select2-container .auto-height-select.side-dark-ctr .select2-search--inline > .select2-search__field{
    margin: 0;
    line-height: 4px;
    padding: 0 4px;
    display: none;

}
.select2-container .auto-height-select.side-dark-ctr .select2-search--inline > input.select2-search__field:placeholder-shown{
    display: block !important;
}
.select2-container .auto-height-select.side-dark-ctr .select2-search--inline > .select2-search__field::placeholder{
    color: #59677c;
    font-weight:500;
}
.keyword-input::placeholder{
    color: #59677c;
    opacity: 1;
    font-weight:500;
}
.select2-container--default .select2-selection--multiple.side-dark-ctr .select2-selection__rendered{
    min-height:inherit !important;
    height:100%;
    display:flex;
    flex-wrap:wrap;
    padding-bottom: 4px;
}
.select2-container--default .select2-selection--multiple.side-dark-ctr .select2-selection__choice{
    font-size: .8em;
    line-height: 1;
}
.select2-dropdown.side-dark-select{
    background-color:rgba(44, 60, 85 , 0.73);
    backdrop-filter:blur(6px);
    border-color:#3b4a60 !important;
    color:#fff;
    transition: transform 0.5s;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}
.select2-container--open .select2-dropdown--below.side-dark-select{
    -moz-animation-name: dropHeaderCat;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 0.2s;

    -webkit-animation-name: dropHeaderCat;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 0.2s;

    animation-name: dropHeaderCat;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.2s;
    transform-origin: top center;
}
@-moz-keyframes dropHeaderCat {
    0% {
        opacity:0;
        -moz-transform:  perspective(600px) translateY(15px);
    }
    100% {
        opacity:1;
        -moz-transform: perspective(600px) translateY(0);
    }
}
@-webkit-keyframes dropHeaderCat {
    0% {
        opacity:0;
        -webkit-transform:  perspective(600px) translateY(15px);
    }
    100% {
        opacity:1;
        -webkit-transform: perspective(600px) translateY(0);
    }
}
@keyframes dropHeaderCat {
    0% {
        opacity:0;
        transform: perspective(600px) translateY(15px);
    }
    100% {
        opacity:1;
        transform: perspective(600px) translateY(0);
    }
}

.side-dark-select .select2-results__option{
    padding:2px 8px;
    margin-bottom: 2px;
    border-radius:4px;
}
.select2-container--default .side-dark-select .select2-results__option[aria-selected=true]{
    background-color: #2196f3 !important;
    color:#fff;
}
.select2-container--default .side-dark-select .select2-results__option--highlighted[aria-selected=true]{
    color:#fff !important;
}
.select2-container--default .side-dark-select .select2-results__option[aria-selected=true]:after{
    border-color:#fff;
}
.side-dark-ctr-statu .range-box-head-cus .dropdown-toggle.lang-cus{
    background-color: transparent;
    border:1px solid #3b4a60;
    padding: 4px 8px !important;
    margin-top:0;
    box-shadow:none !important;
    height:32px;
    padding-top: 7px !important;
}
.side-dark-ctr-statu .sdcs-input{
    height:32px;
}
.side-dark-ctr-statu .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span{
    color:#59677c;
    font-weight:500;
}
.side-dark-ctr-statu .range-box-head-cus.open .dropdown-menu{
    background-color: rgba(44, 60, 85 , 0.73);
    backdrop-filter: blur(6px);
    border-color: #3b4a60 !important;
    border-radius: 0 0 6px 6px;
}
.side-dark-ctr-statu .range-box-head-cus .dropdown-menu .dropdown-item{
    color:#fff !important;
    background-color:transparent;
    font-weight:400;
    font-size: 1em;
    margin: 0 0 2px;
    padding:3px 14px;
    width:100%;
}
.side-dark-ctr-statu .range-box-head-cus .dropdown-menu .dropdown-item:hover{
    background-color: #fff;
    color:#2196f3 !important;
}
.side-dark-ctr-statu .range-box-head-cus.with-arrow .dropdown-toggle:after{
    border-bottom: 1px solid #3b4a60;
    border-right:1px solid #3b4a60;
    width:6px;
    height:6px;
    margin-top:4px;
}
.side-dark-ctr-statu .d-rang-cus > a{
    height:32px;
    border-color: #3b4a60 !important;
    padding:4px;
}
.side-dark-ctr-statu .d-rang-cus .dropdown-toggle > span{
    font-weight: 500;
    color: #59677c;
    height: 100%;
    line-height: 1.5;
}
.side-dark-ctr-statu .range-box-head-cus .dropdown-toggle i{
    color: #59677c;
    font-size:1em;
    margin-left:4px;
}
.side-dark-ctr-statu .d-rang-cus .dropdown-toggle:after{
    width:6px;
    height:6px;
    border-bottom:1px solid #d2e4ff;
    border-right: 1px solid #d2e4ff;
    border-radius:0;
    right:10px;
}
.side-dark-ctr-statu .range-box-head-cus .dropdown-menu .dif .form-control{
    color:#fff;
    padding:0.4rem 0.75rem;
}
.side-dark-ctr-statu .range-box-head-cus.d-rang-cus.open .dropdown-menu{
    width:auto !important;
    transform: translateY(-3px);
}
.side-dark-ctr-statu .d-rang-cus{
    display:flex;
}

.box-header.dl{
    padding: 10px 1rem;

}
.box-header.dl .summary-chart-title{
    font-size: 1.2em;
    font-weight: 500;
    text-transform: uppercase;
}
.dt-list-wrap{
    margin:0;
    width:100%;
    display: flex;
    flex-wrap: wrap;
}
.dt-list-wrap > li{
    padding: 10px 1rem;
    border: 1px dashed #eeeeee;
    width: 49%;
    float: left;
    margin: 4px;
    border-radius: 4px;
    color: #3f4254;
    font-weight: 500;
    position: relative;
    overflow:hidden;
    display:flex;
    align-items: center;
}
.dt-list-wrap.dt-mx-lw > li{
    width: calc(100% / 4.1);
    justify-content: space-between;
    padding: 12px 1rem;
    box-shadow: 3px 3px 2px 0px rgba(236, 236, 236, .35);
    border:1px solid #eee;
    margin-top: 6px;
    opacity: 0;
    animation: fadeIn 0.3s ease-in both;
}
.dt-list-wrap.dt-mx-lw > li:nth-child(1) {
    animation-delay: 0.1s
}
.dt-list-wrap.dt-mx-lw > li:nth-child(2) {
    animation-delay: 0.3s;
}
.dt-list-wrap.dt-mx-lw > li:nth-child(3) {
    animation-delay: 0.5s;
}
.dt-list-wrap.dt-mx-lw > li:nth-child(4) {
    animation-delay: 0.7s;
}
.dt-list-wrap.dt-mx-lw > li > span:first-child{
    font-size: 1.2em;
    color: #2b3246;
}
.dt-list-wrap.dt-mx-lw > li > span:last-child{
    font-size: 1.8em;
    margin-right: 12px;
    position: absolute;
    right: -10%;
    padding-top: 0;
    height: 100px;
    border-radius: 90%;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1.9rem;
    margin-top: 0;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.23);
    box-shadow: 5px 4px 6px 0px rgba(101, 101, 101,0.19) inset;
}
.cy-flag{
    position: absolute;
    right: -3px;
    width: 52px;
    top: -11px;
    display: flex;
    border-radius: 50% 0 0 50%;
    overflow: hidden;
    height: 152%;
    opacity: 0.4;
}
.cy-flag i{
    font-size:4em;
}
.dt-list-wrap > li > span:first-child{
    text-transform: capitalize;
    color: #a1a5b7;
    white-space: nowrap;
}
.cp-btn-wrap{
    opacity: 0.5;
    transition: all 0.4s;
}
.cp-btn-wrap:hover{
    opacity: 1;
}
.info-list-type-wrap{
    width:100%;
    margin:0;
    padding:0;

}
.info-list-type-wrap li{
    padding: 10px 1rem;
    display: flex;
    font-size: 1.2em;
    flex-direction: row;
    margin-bottom: 8px;
    border-radius: 5px;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 500;
    position:relative;
}
.info-list-type-wrap li:last-child{
    margin-bottom: 0;
}
.info-list-type-wrap li > span{
    position: relative;
    z-index: 1;
}
.info-list-type-wrap li >i{
    position: absolute;
    font-size: 2em;
    left: 4px;
    top: 2px;
    opacity: 0.1;
    color: inherit;
}
.fl-syl{
    position:relative;
    border:1px dashed #e4e6ef;
    display: block;
    border-radius: 4px;
    padding:1rem;
}
.fl-syl legend{
    margin-top:-2rem;
    background-color:#fff;
    width:auto;
    max-width:fit-content;
    padding:0 12px;
    font-size:1.4em;
    color: #263238;
}
.fl-syl ul.list-w-bfr{
    margin:0;
    padding:10px 0;
    list-style:none;
    counter-reset: li;
    max-height: 180px;
    overflow: auto;
}
.fl-syl ul.list-w-bfr.l-wo-bfr li{
    padding:5px 1rem 5px 1rem;
}
.fl-syl ul.list-w-bfr li{
    width: 100%;
    padding: 5px 1rem 5px 4rem;
    border: 1px solid #eeeff0;
    border-radius: 4px;
    margin-bottom: 12px;
    counter-increment: li;
    position: relative;
}
.fl-syl ul.list-w-bfr.l-wo-bfr li:before{
    display: none;
}
.fl-syl ul.list-w-bfr li:before{
    content: "ns " counter(li);
    position: absolute;
    height: 127%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    border: 1px solid #eeeff0;
    border-radius: 4px;
    color: #727272;
    left: 10px;
    top: -4px;
    box-shadow: 0px 0px 3px -2px #8e8e8e;
}
.fl-syl ul.list-w-bfr li:last-child{
    margin-bottom: 0;
}
.pos-sticky{
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}
.sticky-wrap{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.modern-info-alert{
    background-color: #f1faff!important;
    border: 1px dashed #009ef7!important;
    color: #5e6278!important;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 1.2em;
}
.modern-info-alert.mia-sm-syl{
    font-size:1em !important;
}
.modern-info-alert-fun-colors{
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 1.2em;
}
.modern-info-alert-fun-colors > i{
    color: #009ef7;
    border: 2px solid #a9defd;
    border-radius: 50%;
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modern-info-alert > i{
    color: #009ef7;
    border: 2px solid #a9defd;
    border-radius: 50%;
    width: 32px;
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pr-detail-wrap .detail-info-fue-wrap > .inf-l-side > .info-fue-wrap .flag-icon{
    border-radius: 50%;
    overflow: hidden;
    width: 20px;
    height: 20px;
    background-size: 26px;
    box-shadow: 1px 1px 1px 1px #ccc;
}
.box-head-n-gen .box-header > i {
    font-size: 1.4em;
    color: #009bff;
    margin-right: 8px;
}
.box-head-n-gen .box-header h6{
    font-size: 1.2em;
    text-transform: uppercase;
    font-weight: 600;
    color: #646e74;
    padding:0;
    margin: 0 10px;
}

.box-head-n-gen .box-header{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items: center;
    padding:1rem;
}
.dt-list-wrap.dt-mdr-cus li{
    border:none;
    overflow:visible;
    padding:0 1rem;
    margin-bottom: 1rem;
    width:100%;
    display:block;
}
.dt-list-wrap.dt-mdr-cus > li > span:first-child{
    color: #009bff;
    font-size: 1.2em;
    width: 100%;
    float: left;
    text-transform: uppercase;
}
.dt-list-wrap.dt-mdr-cus > li > span{
    font-size: 1.1em;
    position: relative;
    z-index: 2;
}
.dt-list-wrap.dt-mdr-cus > li > span:nth-child(2){
    font-size: 1.2em;
    padding-right: 1rem;
    opacity: 0.3;
    transform: scale(2);
    color: #fff;
    text-shadow: -1px -1px 1px rgba(0, 94, 154 , 0.2);
    transform-origin: left center;
    position: absolute;
    text-transform: uppercase;
    left: 16px;
    top: -5px;
    z-index: 0;
}
.single-row-list-w-count{
    margin:0;
    padding:0;
    width:100%;
    counter-reset: count;
}
.single-row-list-w-count li{
    padding: 0;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 1.1em;
    counter-increment: count;
    color: #3f4254;
    font-weight: 500;
    border: 1px solid #e4e6ef;
    border-radius: 5px;
    margin-bottom: 6px;
    height: 34px;
    overflow: hidden;
}

.single-row-list-w-count li:before{
    content: "0" counter(count);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    border-radius: 50%;
    color: #ffffff;
    left: -8px;
    top: -6px;
    padding-top: 10px;
    height: 170%;
    padding-right: 12px;
    padding-left: 18px;
    box-shadow: -5px 0px 3px -4px rgba(0, 44, 80, 0.64) inset;
    background-color: #009bff;
}
.single-row-list-w-count li .cp-btn-wrap{
    position:absolute;
    right:10px;
}
.emp-color{
    background-color: #f1f1f1;
}
.anchor-t-domain{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2196f3;
    color: #2196f3;
    box-shadow: 1px 1px 1px 1px #e4e4e4;
    transition: all 0.4s;
}
.anchor-t-domain:hover,.anchor-t-domain:focus{
    opacity: 0.7;
    color: #2196f3;
    box-shadow: 0 0 0 0 #e4e4e4;
}
.alert-pulse{
    position: absolute;
    top:10px;
    right:10px;
    font-size: 0.6em !important;
    -webkit-animation: wiggle 1.5s infinite;
    animation: wiggle 1.5s infinite;
}
@-webkit-keyframes wiggle {
    0%,
    100% {
        transform: scale(1);
        opacity:0.4;
    }

    50% {
        transform: scale(0.9);
        opacity:1;
    }
}

@keyframes wiggle {
    0%,
    100% {
        transform: scale(1);
        opacity:0.4;
    }

    50% {
        opacity:1;
        transform: scale(0.9);
    }
}
.dt-list-wrap .cp-btn-wrap{
    position: absolute;
    right:1rem;
}
.width-p-85{
    width:85%;
}
.pre-syl{
    display:block;
    padding:10px;
    margin:0 0 10px;
    font-size:13px;
    line-height:1.5;
    color:#333;
    word-break: break-all;
    background-color: #f5f5f5;
    border-radius:4px;
}
.whois-content-txt-wrap{
    position: relative;
}
.whois-content-txt-wrap ul{
    padding:0;
    display: flex;
    justify-content: flex-end;
    margin:0 0 -15px;
    position: relative;
}
.whois-content-txt-wrap ul li{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: center;
    cursor: pointer;
}
.whois-content-txt-wrap ul li >span{
    position: absolute;
    display: block;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 1px 6px;
    border-radius: 4px;
    top: calc(100% + 4px);
    color: #8c8c8c;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
}
.whois-content-txt-wrap ul li:hover >span{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}
.ssl-list-wrap li:last-child{

}
.ssl-list-wrap li >span:last-child{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ssl-list-wrap li:last-child >span:last-child{
    white-space: normal;
}
.expiry-countdown-row{
    padding: 12px 10px !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 5px 0 8px!important;
    flex-direction: row !important;
    box-shadow: 0px 5px 5px -3px rgb(85 85 85 / 10%) inset, 0px -5px 5px -3px rgb(85 85 85 / 10%) inset;
    border-radius: 0 !important;
    background-color: #fafafa;
}
.expiry-countdown-row > span{
    color:#263238;
}
.ssl-status-wrap{
    width:20px;
    height:20px;
    border-radius:50%;
    border:1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.ssl-status-wrap.ssl-sw-m-list{
    position:absolute;
    right:1rem;
    top:calc(50% - 10px);
}
.ssl-status-wrap.ssl-sw-m-list > span{
    bottom: auto;
    top: auto;
    right: calc(100% + 6px);
    transform: perspective(600px) rotateX(-90deg) translateX(-10px);
    transform-origin: center;
    font-size: 0.7em;
    transition:all 0.2s;
}
.ssl-status-wrap.ssl-sw-m-list > span:after{
    display: none !important;
}
.ssl-status-wrap.ssl-sw-m-list:hover > span{
    transform: perspective(600px) rotateY(0) translateX(0);
}
.ssl-status-wrap > span{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: calc(100% + 6px);
    transform: translateY(10px);
    transition: all 0.4s;
    white-space: nowrap;
    border: 1px solid;
    border-radius: 5px;
    padding: 0 5px;
    background-color: #fff;
    display: flex;
    justify-content: center;
}
.ssl-status-wrap > span:after{
    position: absolute;
    content:"";
    width:6px;
    height:6px;
    transform: rotate(225deg);
    border-bottom: 1px solid;
    border-right: 1px solid;
    background-color: #fff;
    top: -4px;
}
.ssl-status-wrap:hover > span{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.mx-tb-wrap{
    /*max-height: 150px;*/
}
.mx-tb-reports-wrap{
    max-height: 400px;
    position: relative;
}
/*.mx-tb-reports-wrap:after{
    position: absolute;
    content:'';
    width:100%;
    height:30px;
    bottom:0;
    left:0;
    background-color: #000;
}*/
.hnp-cus-tb-wrap{
    /*max-height: 110px;*/
}
.h-sticky table{
    overflow: auto;
}
.h-sticky table >thead{
    position: sticky;
    top: 0px;
    z-index: 1;
}
.w-scroll-cloud{
    position:relative;
}
.w-scroll-cloud:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 24px;
    box-shadow: 0 -14px 10px -10px #ffffff inset;
    bottom: 0;
    z-index: 10;
    left: 0;
}
.block-status-wrap{
    position: absolute;
    height: 100%;
    width: 1px;
    border-right: 2px solid rgba(33, 150, 243,0.12);
    left: -5px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.block-status-wrap > span{
    transform: rotate(-90deg);
    position: absolute;
    padding: 0px 10px;
    background-color: #f6fafb;
    font-weight: 600;
    color: #2196f3;
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing:1px;
}

.verification-logo-list{
    margin:-1px 0;
    padding:0;
    display: inline-block;
    width:100%;
    overflow:hidden;
}
.verification-logo-list > li{
    height: 120px;
    width: calc(100% / 2.988);
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    filter: grayscale(1);
    margin: 0px -1px -1px 0;
    border: 1px solid #efefef;
    border-left: none;
    box-shadow: 0 0 10px -6px #bbb;
    padding: 14px;
    background-color: #d9d9d9;
    opacity: 0.6;
}
.verification-logo-list.vll-helper  > li{
    border-left:  1px solid #efefef;
    margin: 0px -1px 0px 0;
}
.verification-logo-list.vll-helper  > li:after{
    display: none !important;
}
.verification-logo-list > li.active{
    filter: grayscale(0);
    position: relative;
    background-color: transparent;
    opacity: 1;
}
.verification-logo-list > li.active:after{
    position: absolute;
    top: 10px;
    right: 10px;
    content: "\f058";
    color: #2196f3;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 1.3em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.verification-logo-list > li > span{
    font-weight: 700;
    font-size: 1em;
    text-transform: capitalize;
}
.verification-logo-list > li > span:first-child{
    height: 40px;
    margin-bottom: 10px;
}
.verification-logo-list > li img{
    width: 100%;
    height: 100%;
    filter: drop-shadow(1px 1px 0px #fff);
}
.pr-detail-wrap .base-info-content{
    transition: all 0.3s,transform 0.5s;
    overflow: hidden;
    max-height: 400px;
}
/*Domain Summary Info*/
.pr-detail-wrap .d-summary-info-content{
    transition: all 0.3s,transform 0.5s;
    overflow: hidden;
    border-bottom: 1px solid #eff2f5;
    transform: perspective(800px) rotateX(-90deg);
    visibility: hidden;
    max-height: 0px;
}
.pr-detail-wrap.info-sticky-c-h .d-summary-info-content{
    transform: perspective(800px) rotateX(0deg);
    visibility: visible;
    max-height: 100px;
}
.d-summary-info-content .dm-thumb-wrap{
    width:60px;
    height:60px;
    padding:5px;
}
.d-summary-info-content .social-md-list{
    justify-content: flex-end;
}
.d-summary-info-content .social-md-list .alert{
    display: none;
}
.pr-detail-wrap .d-summary-info-content .dt-body-syl{
    padding: 0.5rem 1.25rem;
}
.pr-detail-wrap .d-summary-info-content .dt-body-syl > .list-item{
    display:flex;
    justify-content: space-between;
}
.pr-detail-wrap .d-summary-info-content .detail-info-fue-wrap{
    width:100%;
    margin-left:0;
    align-items: center;
}
.pr-detail-wrap .d-summary-info-content .user-info-detail-list-wrap{
    line-height:2;
}
/*Domain Summary Info END*/
.pr-detail-wrap.info-sticky-c-h{
    margin: 0 0 10px 0;
    box-shadow: 0px 4px 6px -5px #e1e1e1;
    border-radius: 0;
    z-index: 9;
    position: relative;
}
.pr-detail-wrap.info-sticky-c-h .base-info-content{
    transform-origin: top center;
    transform: perspective(800px) rotateX(-90deg);
    visibility: hidden;
    max-height: 0px;
}
.scrollable-el-cus{
    overflow: auto !important;
    height: calc(100vh - 347px);
    /*max-height: calc(100vh - 314px);*/
    scroll-behavior: smooth;
}
.pr-collaps-head-wrap{
    overflow: hidden !important;
    position:relative;
    min-height: calc(100vh + 30vh);
}
.h-v-srb-cus{
    height:calc(100vh - 112px);
    /*max-height: calc(100vh - 102px);*/
}
.bx-head-w-helper .w-tooltip > i{
    background-color: #2196f3;
    color: #fff;
    border-color: #2196f3;
    width: 20px;
    height: 20px;
    padding-top: 2px;
    padding-right:2px;
    transition: all 0.5s;
}
.bx-head-w-helper .w-tooltip:hover > i{
    background-color: #ffffff;
    color: #2196f3;
    border-color: #2196f3;
}
.bx-head-w-helper .w-tooltip .tt-fu{
    opacity: 0;
    visibility: hidden;
    transform: translateX(-14px);
    background-color: #2196f3;
    color: #fff;
    border-radius: 5px;
    padding: 0 10px;
    transition:all 0.5s;
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
}
.bx-head-w-helper .w-tooltip .tt-fu:after{
    position: absolute;
    content:"";
    width:6px;
    height:6px;
    transform: rotate(45deg);
    background-color: inherit;
    right:-3px;
}
.bx-head-w-helper .w-tooltip:hover .tt-fu{
    transform: translateX(-3px);
    opacity: 1;
    visibility: visible;
}
.scrol-to-info-btn {
    position: absolute;
    top: 7px;
    right: 12px;
    width: 20px;
    height: 30px;
    border: 2px solid #2196f3;
    border-radius: 50px;
    box-sizing: border-box;
    /*    visibility: hidden;
        opacity: 0;*/
    visibility: visible;
    opacity: 1;
    transition: all 0.2s;
    cursor: pointer;
}
.info-sticky-c-h .scrol-to-info-btn::before{
    -webkit-animation: sdb11 2s infinite;
    animation: sdb11 2s infinite;
}
.scrol-to-info-btn::before {
    position: absolute;
    bottom: 16px;
    left: 50%;
    content: '';
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-left: 1px solid #2196f3;
    border-top: 1px solid #2196f3;
    /*transform:rotate(45deg) translate(0, 0);*/
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
    box-sizing: border-box;

}
.scrol-to-info-btn::after{
    content: "Info";
    position: absolute;
    right: calc(100% - 5px);
    transform: rotate(-90deg);
    top: 4px;
    font-weight: 600;
    color: #2196f3;
    text-transform: uppercase;
    font-size: 0.8em;
}
@-webkit-keyframes sdb10 {
    0% {

        -webkit-transform:rotate(-136deg) translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform:rotate(-136deg) translate(-8px, -8px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb10 {
    0% {
        transform:rotate(-136deg) translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {

        transform:rotate(-136deg) translate(-8px, -8px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes sdb11 {
    0% {

        -webkit-transform:rotate(45deg) translate(8px, 8px);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform:rotate(45deg) translate(0, 0);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb11 {
    0% {
        transform:rotate(45deg) translate(8px, 8px);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {

        transform:rotate(45deg) translate(0, 0);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

ul.cu-list-pr-wrap {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.cu-list-pr-wrap li {
    width: calc(100% / 3.2);
    margin: 5px;
    border: 1px solid #e3e3e3;
    padding: 5px;
    border-radius: 5px;

}
.cu-list-pr-wrap li .cut-code-statu{
    min-width:26px;
}
.cu-list-pr-wrap li div > span:last-child{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}
.aa-status-fixed .apexcharts-legend-marker{
    width:12px !important;
}
.box-footer select.page-size, .box-footer select.page-drop {
    padding: 4px 30px 4px 10px;
    text-align: left;
}
.box-footer.foot-fixed-pager select.page-size, .box-footer.foot-fixed-pager  select.page-drop {
    padding: 7px 30px 5px 10px;
    text-align: left;
}
.box-footer.modal-footer-wrap select.page-size,
.box-footer.modal-footer-wrap select.page-drop {
    padding: 6px 30px 6px 10px;
    text-align: left;
}
.box-footer .btn-group{
    padding-right:0;
}
.lb-status-bgd{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.9em;
}
.resualt-verify-v2-wrap .valid-card-content-wrap.no-grouping-wrap .valid-acc-content .form-group .lb-status-bg-wrap{
    float: right;
}
/*#status-summary-graph .apexcharts-canvas,
#status-summary-graph .apexcharts-canvas > svg,
#status-summary-graph .apexcharts-canvas > svg > foreignObject{
    width:100% !important;
}
#status-summary-graph .apexcharts-canvas{
    top:2rem;
}*/
#status-summary-graph .apexcharts-legend{
    padding: 0 2rem !important;
    width:53%;
}
#status-summary-graph{
    display: flex;
    align-items: center;
}
.status-rd-cus.src-t-s{
    margin-top:3px;
}
.status-rd-cus.src-t-s > a.btn{
    height:38px;
}
.select2-container .side-dark-ctr .select2-selection__rendered li.select2-search--inline:after{
    display: none !important;
    opacity: 0;
}
.sidebar-filter-box.sd-close{
    margin-top: -118px;
}
.sidebar-filter-box.sd-close-sm{
    margin-top: -68px;
}
.sidebar-filter-box.sd-close-sm .push-btn-float,
.sidebar-filter-box.sd-close .push-btn-float{
    background-color: #ffffff;
    color: #1e87da;
}
.sidebar-filter-box.sd-close-sm .push-btn-float:before,.sidebar-filter-box.sd-close-sm .push-btn-float:after,
.sidebar-filter-box.sd-close .push-btn-float:before,.sidebar-filter-box.sd-close .push-btn-float:after{
    background-color: #ffffff;
}
.sidebar-legend-chart .apexcharts-legend{
    padding:10px;
    border-radius: 8px;
}
.sidebar-legend-chart .apexcharts-legend-series {
    cursor: pointer;
    line-height: normal;
    background-color: #efefef;
    padding: 0;
    margin-bottom: 4px !important;
    display:flex;
    align-items: center;
    height:26px;
    overflow: hidden;
}
.sidebar-legend-chart .apexcharts-legend-series > span{
    display: flex;
    align-items: center;
    margin:0 4px;
}
.sidebar-legend-chart .apexcharts-legend-series > span:first-child{
    min-width: 12px;
    box-shadow: -3px 0 3px -2px rgba(96 ,96 ,96, 0.26) inset;
    margin:0;
    justify-content: center;
}
.sidebar-legend-chart .apexcharts-legend-series > span:last-child{
    height:inherit;
    width:100%;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}

.floating-app-overlapping-wrap{
    /*position: absolute;*/
    right:5px;
    top:0;
}
.floating-app-overlapping-wrap.faow-list-wrap{
    right:10px;
    top:calc(50% - 12px);
}

.floating-app-overlapping-wrap.faow-list-wrap ul.fa-overlap-list.show-all >li{
    display: flex !important;
}
.floating-app-overlapping-wrap.faow-list-wrap ul.fa-overlap-list >li{
    width: 32px;
    height: 32px;
    border: 2px solid #ffffff;
    margin-left: -10px;
    font-size: 0.8em;
    box-shadow: 0 0 0 0 rgba(12, 16, 22, 0.27);
    padding-top: 0;
    transition: all 0.5s;
}
.floating-app-overlapping-wrap.faow-list-wrap ul.fa-overlap-list >li.hide-w-anim {
    transform: translateX(200%);
    visibility: hidden;
    opacity: 0;
}
.floating-app-overlapping-wrap.faow-list-wrap ul.fa-overlap-list.show-all >li.hide-w-anim {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}
ul.fa-overlap-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
ul.fa-overlap-list >li{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-left: -10px;
    position: relative;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    padding-top: 2px;
    z-index: 1;
    justify-content: center;
    font-size: 0.9em;
    box-shadow: 1px 2px 2px 0px #ddd;
}
ul.fa-overlap-list >li:hover{
    z-index: 2;
}
.list-left + .list-brand-body {
    margin-left: 50px;
}
.keyword-f-row{
    padding: 0.3rem 0.5rem !important;
}

.profile-detail-stack-wrap {
    margin-left: 0;
    margin-right: 0;
    position: relative;
    height: 160px;
    background-color: rgba(114, 114, 114, 0.35);
    background-image: url('../../images/subtle-grey.png');
    box-shadow: 0px -1px 4px -2px #464646 inset;
}
.bic-p-card-wrap.base-info-content{
    position: relative;
    margin-bottom: 1rem;
}
.bic-p-card-wrap .dt-body-syl {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin: 2px;
}
.bic-p-card-wrap .dt-body-syl .list-item {
    display: flex;
    position: relative;
    padding: 1rem;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.bic-p-card-wrap .dt-body-syl .list-item .detail-info-fue-wrap{
    display:flex;
    margin-left: 0 !important;
    align-items: center;
    height:auto;
}
.bic-p-card-wrap .user-info-detail-list-wrap > li > span i{
    color: #0266b9;
    font-size: 1.2em;
}
.tb-holder-wrap{
    margin-top: -4rem;
    display: flex;
    justify-content: center;
}
.avatar-place-holder-wrap{
    position: relative;
    margin: 0;
    cursor: pointer;
}
.avatar-place-holder-wrap .avarar-upload-btn{
    position: absolute;
    top: 87px;
    background-color: #ffffff;
    right: 10px;
    color: #0266b9;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    width: 24px;
    height: 24px;
    display: flex;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    box-shadow: 0px 0px 8px -1px #b7b7b7;
    cursor: pointer;
    padding-top: 1px;
}
.avatar-place-holder-wrap .avatar-place-holder{
    font-weight: 800;
    font-size: 2rem;
    color: #0266b9;
    box-shadow: 0px 0px 10px 0 rgba(135, 135, 135, 0.34);
    border-style: solid;
    overflow: hidden;
    border-radius: 50%;
    width: 116px;
    height: 116px;
    border: 5px solid rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
}
.avatar-place-holder-wrap:hover .avatar-place-holder{
    border-color:rgba(29, 9, 85, 0.65);
}
.avatar-place-holder-wrap:hover .avarar-upload-btn{
    background-color:#3c1e90;
    color:#fff;
}
.avatar-place-holder-wrap .avatar-place-holder> img{
    width:100%;
}
.uidlw-profile{
    flex-direction: column;
    display: flex;
    margin: 10px 2rem;
    list-style: none;
    padding: 0;
    margin-left: 1rem;
}
.uidlw-profile > li{
    margin-right: 0;
    display: flex;
    justify-content: space-between;
    padding: 14px 1.5rem;
    border-bottom: 1px solid #f3f3f3;
}
.uidlw-profile > li > span:first-child{
    color: #263238;
    font-weight: 600;
    display: flex;
    align-items: center;
}
.uidlw-profile > li > span:last-child{
    color: #9f9f9f;
    font-weight: 600;
}
.uidlw-profile > li:last-child{
    border-bottom: none;
}
.sc-drp-anim > .dropdown-menu{
    width: 100%;
    padding: 0;
    transition: all 0.3s;
    transform: perspective(800px) rotateX(-90deg);
    visibility: hidden;
    opacity: 0;
    transform-origin: top center;
    display: block;
}
.sc-drp-anim > .dropdown-menu .dropdown-item{
    transition: all 0.3s;
    padding:3px 14px !important;
    border-bottom: 1px solid #fbfbfb !important;
}
.sc-drp-anim > .dropdown-menu .dropdown-item:last-child{
    border-bottom: none !important;
}
.sc-drp-anim > .dropdown-toggle{
    transition: all 0.3s;
    height:38px;
    border-color: #e4e6e8;
}
.sc-drp-anim > .dropdown-toggle:after{
    width: 8px;
    height:8px;
    margin-left:14px;
    margin-bottom: 4px;
    border-left: none;
    border-top: none;
    border-right: 2px solid #838383;
    border-bottom: 2px solid #838383;
    transform: rotate(45deg);
}
.sc-drp-anim.open > .dropdown-menu{
    visibility: visible;
    opacity: 1;
    transform:  perspective(800px) rotateX(0deg);
}
.btn-rmv-grid {
    border-radius: 4px;
    transition: all 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    background-color: #F5F8FA;
    box-shadow: 1px 1px 1px 0 #ddd;
}
.btn-rmv-grid > i{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
    font-size: 1.1em;
}
.sm-even-bg-color > .list-item:nth-child(even){
    background-color: #fbfbfb;
}
.uidlw-profile-brand{
    margin: 20px 10px 10px 0;
    border: 1px dashed #e5e3e3;
}
.uidlw-profile-brand > li{
    border-bottom: 1px dashed #e5e3e3;
    padding: 14px 1rem;
}
.more-app-list-wrap{
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    margin: 0;
    min-width: 150px;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.26);
    padding: 0;
    z-index: 100;
    backdrop-filter: blur(6px);
    border-radius: 6px;
    color: #202c3d;
    font-weight: 600;
    box-shadow: 0px 1px 14px 0px rgba(94, 94, 94, 0.13);
    transition: all 0.3s;
    transform: perspective(600px) rotateX(-90deg);
    -webkit-transform: perspective(600px) rotateX(-90deg);
    transform-origin: top center;
    visibility: hidden;
    opacity: 0;
}
.more-app-usr-btn:hover .more-app-list-wrap{
    transform: perspective(600px) rotateX(0deg);
    -webkit-transform: perspective(600px) rotateX(0deg);
    visibility: visible;
    opacity: 1;
}
.more-app-list-wrap > li{
    padding: 8px 10px;
    border-bottom: 1px solid #f1f1f1;
    white-space: nowrap;
}
.more-app-list-wrap > li:last-child{
    border-bottom: none;
}
.sidebar-specific-brand{
    padding: 1rem;
    align-items: flex-start;
    border: 2px dashed #2196f3 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 2px 1px #ddd;
    flex-direction: column;
    font-size: 1em;
}
.sidebar-specific-brand h6{
    font-size: 1.2em;
    color: #0275d8;
}
.mail-template-content-wrap .mail-template-content{
    width:calc(100% - 150px);
    position: relative;
    display: flex;
    flex-direction: column-reverse;
}
.mail-template-content-wrap{
    display: flex;
    flex-direction: row;
    position: relative;
}
.mail-themes-wrap{
    width: 150px;
}
.mail-themes-wrap .action-page-theme{
    max-height: none;
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: 2px 0px 5px -2px #bfbfbf inset;
    display: flex;
    flex-direction: column;
    padding-right: 10px;
}
.box-header.bh-abs.bh-zoom-tools{
    position: absolute;
    width: 100%;
}
.box-header.bh-abs.bh-zoom-tools .box-tool.bt-exp-wrap {
    right: 144px;
    top: 0;
    z-index: 10;
}
.box-header.bh-abs.bh-zoom-tools .box-tool.bt-exp-wrap.d-w-send-st-wrap{
    display: flex;
    flex-direction: row;
    right:151px;
}
.box-header.bh-abs.bh-zoom-tools .box-tool.bt-exp-wrap.d-w-send-st-wrap.d-w-global{

    right:10px;
}
.box-header.bh-abs.bh-zoom-tools .box-tool.bt-exp-wrap.d-w-send-st-wrap.d-w-global .range-box-head-cus{
    min-width: 130px !important;
}
.box-header.bh-abs.bh-zoom-tools .box-tool .range-box-head-cus .dropdown-toggle {
    background-color: #f5f5f5;
    border-radius: 0 0 6px 6px;
    padding: 6px 10px 5px;
    color: #6e8192 !important;
    font-weight: 500;
    box-shadow: none !important;
}
.box-header.bh-abs.bh-zoom-tools .box-tool .range-box-head-cus.valid-send-st-drp .dropdown-toggle{
    margin-top: 0;
    padding: 7px 14px !important;
    border: none;
}
.summary-info-detail-wrap{
    margin: 3rem 0 2rem;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: #f8f8f8;
    border-radius:8px;
}
.summary-info-detail-wrap li{
    width: 100%;
    margin: 5px 5px 12px;
    border: none;
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    opacity: 1;
    animation: widgetLoad 1s ease-out;
}
.summary-info-detail-wrap.in-cus-sid-wrap{
    /*overview*/
    /*margin: 2rem 0 0rem;*/
    margin: 0 0 0rem;
    max-height: 510px;
    overflow: auto;
}
.summary-info-detail-wrap.in-cus-sid-wrap li{
    /*overview*/
    /*    margin: 3px 5px 3px;
        border: 1px solid #ddd;
        border-radius: 6px;
        overflow:hidden;
        padding: 0;*/
    margin: 0px 4px;
    border-bottom: 1px dashed #ddd;
    border-radius: 0;
    overflow: hidden;
    padding: 10px 4px;

}
.summary-info-detail-wrap.in-cus-sid-wrap li:last-child{
    border-bottom: none !important
}
.summary-info-detail-wrap.in-cus-sid-wrap li .list-body .flex-label{
    padding: 0.25rem 4px;
    text-align: center;
    display: flex;
    float: right;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    height: 30px;
    font-size: 0.9em;
    border-radius: 4px;
    min-width: 32px;
}
.summary-info-detail-wrap.in-cus-sid-wrap li .list-body{
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.summary-info-detail-wrap.in-cus-sid-wrap li .list-body:after{
    display: none;
}

.summary-info-detail-wrap li .widget-top-rel{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.tb-ns-info-list {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
}
.tb-ns-info-list li > span {
    display: flex;
    align-items: center;
}
.with-list-buble > li:first-child:after{
    display: none;
}
.with-list-buble > li {
    overflow: visible;
}
.with-list-buble > li:after {
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    background-color: #121922;
    border-radius: 50%;
    top: calc(50% - 1px);
    left: -10px;
}
.lbl-inset-nav-shadow{
    box-shadow: 0px 0px 2px 0px #00060e inset;
}
.tab-v-list-search-items > button{
    position: absolute;
    right: 5px;
    padding: 0;
}
.range-cus-graph-sch{
    right: 151px;
    top: 0;
    z-index: 10;
}
.range-cus-graph-sch.box-tool .range-box-head-cus .dropdown-toggle {
    background-color: #f5f5f5;
    border-radius: 0 0 6px 6px;
    padding: 6px 10px 5px;
    color: #6e8192 !important;
    font-weight: 500;
    box-shadow: none !important;
}
.msg-box-status-shadow {
    box-shadow: 1px 1px 2px 1px #e5e5e5;
}
.ls-dm-left-panel{
    overflow: hidden;
    display: block;
}
.ls-dm-left-panel > .row-row{
    height:calc(100vh - 314px);
    display: flex;
}
.va-hourglass-anim .fa-hourglass:before{
    animation-name: hourglass;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    content: "\f251";
}
@keyframes hourglass {
    0% {
        content: "\f251";
    }
    33.3% {
        content: "\f252";
    }
    66.6% {
        content: "\f253";

    }
}
.arrow-left-cu{
    position:relative;
}
.arrow-left-cu:after{
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    left: -3px;
    transform: rotate(45deg);
    background-color: inherit;
    border-bottom: 1px solid #317bb8;
    border-left: 1px solid #317bb8;
}
ul.breadcrumb-cus-wrap li.validation-brd i:hover{
    background-color: #4caf50!important;
    color:#fff;
    border-color: #4caf50!important;
}
.pos-relative{
    position: relative !important;
}
.box-flex-col-w-doghnut{
    height:100%;
    padding: 0 !important;
}
.box-flex-col-w-doghnut > .summary-info-detail-wrap{
    height:100%;
    align-items: flex-start;
    flex-direction: column;
}
.shadow-box-light{
    box-shadow: 0 0rem 0.6rem rgba(0,0,0,.05)!important;
}
.bh-right-drp{
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 1rem !important;
    z-index:99 !important;
}
.bh-right-drp > h6{
    font-size:1.2em;
}
.bh-right-drp .box-tool{
    right:0 !important;
    height: 100%;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp  .box-tool.bt-exp-wrap.d-w-send-st-wrap.d-w-global .range-box-head-cus{
    height:100%;
    min-width: 150px !important;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp .box-tool .range-box-head-cus.valid-send-st-drp .dropdown-toggle{
    height:100%;
    display:flex;
    align-items: center;
    background-color: #2196f3 !important;
    color:#fff !important;
    border-radius: 0 6px 6px 0 !important;
    font-size:1.1em;
    padding:7px 14px 6px !important;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp .box-tool .range-box-head-cus.valid-send-st-drp .dropdown-toggle:after{
    border-color: #fff;
    margin-top:-2px;
}
.bh-right-drp .range-box-head-cus .dropdown-menu .dropdown-item:hover{
    background-color: #2196f3 !important;
}
.bh-right-drp .range-box-head-cus .dropdown-menu{
    box-shadow: 0px 3px 5px 0px rgba(0, 0 ,0 ,0.21);
    min-width:320px !important;
}
.bh-right-drp .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item{
    width:47.8%;
    min-height:40px;
    display:flex;
    align-items: center;
    margin:2px 3px 2px;
}
.bh-right-drp .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item i{
    font-size:1.3em;
}
.bh-right-drp .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item:hover i{
    color:#fff !important;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp .box-tool .range-box-head-cus.valid-send-st-drp .dropdown-toggle i{
    color:#fff !important;
    font-size:1.1em;
    margin-right: 8px !important;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp .box-tool .range-box-head-cus.valid-send-st-drp .dropdown-toggle > span > span{
    display: flex;
}
.lb-w-arrow-r{
    position:relative;
}
.lb-w-arrow-r:after{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    background-color: inherit;
    transform: rotate(45deg);
    right: -2px;
    z-index:-1px;
}
.tb-list-info-wrap{
    display: inline-block;
    background-color: #ebebeb;
    margin: 0 !important;
    border-radius: 6px;
    border: 1px solid #dbdbdb;
    box-shadow: 1px 20px 10px -5px #f5f5f5 inset;
}
.tb-list-info-wrap li{
    float: left;
    border-right: 1px solid #dbdbdb;
    padding: 8px !important;

    transition: all 0.2s;
    position: relative;
}
.tb-list-info-wrap li:first-child{
    border-radius: 6px 0 0 6px;
}
.tb-list-info-wrap li:last-child{
    border-radius: 0 6px 6px 0;
}
.tb-list-info-wrap li.desc-tb-wrap:hover b,.tb-list-info-wrap li.desc-tb-wrap:hover b i{
    color: #fff !important;
}
.tb-list-info-wrap li.desc-tb-wrap:hover{
    background-color: #2196f3;

}
.tb-list-info-wrap li:last-child{
    border-right: none;
}
.tb-list-info-wrap li b{
    padding:0 6px 0 0;
}
.tb-list-info-wrap li.desc-tb-wrap{
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.tb-list-info-wrap li.desc-tb-wrap > span{
    position: absolute;
    bottom: 100%;
    transform: translateY(-10px);
    opacity: 0;
    min-width: 360px;
    max-width: 360px;
    overflow: hidden;
    visibility: hidden;
    padding: 5px;
    background-color: #fff;
    border-top: 3px solid #2196f3;
    border-radius: 5px;
    font-size: 0.9em;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0,0.15);
    transition: all 0.3s;
    z-index: 21;
    text-align: center;
}
.tb-list-info-wrap li.desc-tb-wrap > span.dtz{
    min-width: 60px;
}
.tb-list-info-wrap li.desc-tb-wrap > span:after{
    position: absolute;
    content:'';
    width:8px;
    height:8px;
    bottom:-4px;
    background-color: #fff;
    left:calc(50% - 4px);
    transform: rotate(45deg);
    box-shadow: 2px 2px 2px 0px rgba(82, 82, 82, 0.13);

}
.tb-list-info-wrap li.desc-tb-wrap:hover > span{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.btn-grp-quar button {
    border-radius: 4px;
    transition: all 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    background-color: #F5F8FA;
    box-shadow: 1px 1px 1px 0 #ddd;
}
.btn-grp-quar button > i {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s;
    font-size: 1.1em;
}
.btn-grp-quar button:hover {
    opacity: 0.8;
}
.bh-right-drp.lang-bh-globe .range-box-head-cus .dropdown-menu{
    min-width:180px;
}
.bh-right-drp.lang-bh-globe .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item{
    width:99%;
    min-height: 30px;
}
.bh-right-drp.lang-bh-globe .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item .flag-icon{
    border-radius: 50%;
    background-size: cover;
    min-height: 1.2rem;
    box-shadow: 1px 1px 1px 1px rgba(64, 64, 64, 0.30);
    border: 1px solid #f2f2f3;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp.lang-bh-globe .box-tool .range-box-head-cus.valid-send-st-drp .dropdown-toggle i.flag-icon{
    border-radius: 50%;
    background-size: cover;
    min-height: 1.5rem;
    min-width: 1.5rem;
    box-shadow: 0 0 2px 1px rgba(0, 56, 100, 0.80);
    border: 1px solid #f2f2f3;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp.lang-bh-globe .box-tool .range-box-head-cus.valid-send-st-drp .dropdown-toggle > span > span{
    align-items: center;
}
.tb-left-side-wrap {
    padding:  0;
    width:100%;
}
.tb-left-side-wrap .nav-sm .nav-link{
    padding: 14px 10px;
    transition: all 0.2s;
    border-radius: 0 2px 2px 0;
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 2px;
    width: 94%;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: #f5f5f5;
    position: relative;
}
.tb-left-side-wrap .nav-sm .nav-link:after{
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    right: 14px;
    top: calc(50% - 5px);
    opacity: 0;
    transition: all 0.6s;
    transform: perspective(50px) rotate(-43deg) rotateX(8deg);
}
.tb-left-side-wrap .nav-sm .nav-link.active:after{
    opacity: 1;
}
.tb-left-side-wrap .nav-sm > .nav-item {
    cursor: pointer;
}
.tb-left-side-wrap > div.white{
    border:none !important;
    padding-top: 0 !important;
}
.tb-left-side-wrap.tb-lsw-ctl .nav-sm > .nav-item:nth-last-child(2) .nav-link,
.tb-left-side-wrap.tb-lsw-ctl .nav-sm > .nav-item:nth-last-child(1) .nav-link{
    color: #fff;
    background-color: #0071cb;
}
.tb-left-side-wrap.tb-lsw-ctl .nav-sm > .nav-item:nth-last-child(1) .nav-link{
    background-color: #2b5e87;
}
.ct-cu-btn-wrap .col-form-label{
    font-size: 1em !important;
    color: #3c3c3c !important;
}
.tb-left-side-wrap.tb-lsw-ctl .nav-sm > .nav-item:nth-last-child(2) .nav-link > span i,
.tb-left-side-wrap.tb-lsw-ctl .nav-sm > .nav-item:nth-last-child(1) .nav-link > span i{
    font-size: 1.2em;
    margin-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.38);
    padding:4px 10px 4px 4px;
    box-shadow: 1px 0px 0px 0px rgba(147, 147, 147, 0.46);
}
.tb-left-side-wrap.tb-lsw-ctl .nav-sm > .nav-item:nth-last-child(1) .nav-link > span i{
    font-size: 1.3em;
    padding-right: 11px;
}
.tb-left-side-wrap.tb-lsw-ctl .nav-sm > .nav-item:nth-last-child(1) .nav-link > span{
    display: flex;
    align-items: center;
}
.tb-left-side-btn .btn i{
    font-size: 1.2em;
    margin-right: 10px;
    border-right: 1px solid rgba(255, 255, 255, 0.38);
    padding:3px 10px 3px 4px;
    box-shadow: 1px 0px 0px 0px rgba(147, 147, 147, 0.46);
}
.tb-left-side-wrap .nav-sm .nav-link > span{
    white-space: nowrap;
    transform: perspective(50px) rotateX(-1deg);
    transform-origin: left center;
    display: block;
    width: 92%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tb-left-side-wrap .nav-sm .nav-link.active:before,
.tb-left-side-wrap .nav-sm .nav-link:hover:before{
    display: none !important;
}
.tb-left-side-wrap .nav-sm .nav-link:hover{
    background-color: #ddd;
    transform: perspective(50px) rotateX(2deg);
    transform-origin: left center;
}
.tb-left-side-wrap .nav-sm .nav-link.active{
    background-color: #2196f3;
    color: #fff;
    width: 100%;
    border-radius: 0 6px 6px 0;
    transform: perspective(50px) rotateX(1deg);
    transform-origin: left center;
}
.tb-left-side-wrap .nav-active-border{
    margin-bottom: 0;
}
.tb-left-side-btn{
    width: 94%;
    margin-top: 3px;
    padding: 0px 0 5px 0px;
    transition: all 0.4s;
}
.tb-left-side-btn:hover{
    width:98%;
}
.tb-left-side-btn .btn{
    width: 100%;
    padding: 14px 10px;
    border-radius: 0 2px 2px 0;
    transition: all 0.5s;
    text-align: left;
}
.tab-content-toolbox-head{
    width: 100%;
    display: flex;
    padding: 14px 10px;
    justify-content: flex-end;
    border-bottom: 1px solid #ffffff;
    box-shadow: 0px 2px 2px 0px rgba(129, 129, 129, 0.08);
    background-color: #fdfdfd;
    align-items: center;
}
.btn-sm-cus-ico{
    padding: 0.18rem 0.5rem;
}
.edit-content-custom-input{
    max-height:200px;
    min-height: 180px;
    overflow: auto;
}
.include-iframe-wrap{
    height:calc(100vh - 263px);
    width:100%;
    max-height: 657px;
    min-height: 600px;
    top:1rem;
}
.include-iframe-wrap iframe{
    border:none;
    box-shadow: none;
    outline: none;
}
.d-w-global-btn .btn{
    height: 46px;
    border-radius: 0;
    padding: 0 15px;
    font-weight: 400;
    transition: all 0.4s;
}
.d-w-global-btn .btn.slider-effect i {
    transition: all 0.6s;
}
.d-w-global-btn .btn.slider-effect{
    max-width: 46px;
    overflow: hidden;
    transition: all 0.6s;
}
.d-w-global-btn .btn.slider-effect:hover{
    max-width:100%;
}
.d-w-global-btn .btn.slider-effect:hover i{
    margin-right:10px !important;
}
.zxy-0-header{
    height:46px;
}
.form-legent-syl{
    position: relative;
    padding-top: 4px;
}
.form-legent-syl .col-form-label > span{
    margin-right: 3px;
}
.form-legent-syl select.form-control{
    padding: 0.8rem 0.75rem 0.6rem;
}
.form-legent-syl .form-control{
    padding: 0.8rem 0.75rem;
    font-size: 0.9rem;
    height: auto !important;
}
.form-legent-syl .col-form-label{
    padding: 0 6px 0 !important;
    margin-bottom: 0;
    background-color: #fff;
    transform: translate(22px ,0px);
    position: relative;
    z-index: 1;
    line-height: 1px;
    display: inline-block;
    font-size: 0.8em;
    color: #858585;
    position: absolute;
}
.form-legent-syl.text-danger .col-form-label{
    color:#ef193c!important;
}
.form-legent-syl.text-danger input{
    border-color: #ef193c;
}
.tab-content-settings-wrap {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /*    overflow-x: hidden;
        overflow-y: auto;*/
}
.tab-content-settings-wrap .tcsw-content-wrap{
    transition: all 0.4s;
    transform: perspective(800px) rotateY(90deg);
    transform-origin: center left;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    width:100%;
}
.tab-content-settings-wrap .tcsw-content-wrap .tcsw-content-items{
    display: none;
}
.tab-content-settings-wrap .tcsw-content-wrap .tcsw-back-to-nav{
    display: none;
    height: 38px;
    border-bottom: 1px solid #ebebeb;
    background-color: #f9f9f9;
    float: right;
    width: 100%;
    z-index: 10;
}
.tab-content-settings-wrap .tcsw-content-wrap .tcsw-back-to-nav >i{
    width: 35px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    float: left;
    color: #2196f3;
    padding-top: 4px;
    padding-right: 6px;
    margin: 0px 8px 0 5px;
    border-right: 1px dashed #ebebeb;
}
.tab-content-settings-wrap.active .tcsw-content-wrap .tcsw-content-items.active,
.tab-content-settings-wrap.active .tcsw-content-wrap .tcsw-back-to-nav{
    display: block;
}
.tab-content-settings-wrap .tcsw-tabs-wrap{
    display: flex;
    transform: perspective(800px) rotateY(0deg);
    transform-origin: center left;
    visibility: visible;
    transition: all 0.4s;
    flex-direction: row;
    padding: 0;
    margin: 0;
    min-width: 100%;
    position: relative;
    z-index: 10;
    flex-wrap: wrap;
}
.tab-content-settings-wrap.active .tcsw-content-wrap{
    min-width: 100%;
    transform: translateX(-100%) !important;
    visibility: visible;
}
.tab-content-settings-wrap.active .tcsw-tabs-wrap{
    width: 100%;
    min-width: 100%;
    transform: perspective(500px)  translateX(-100%);
    visibility: hidden;
    transition: all 0.4s;
}
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item{
    padding: 0 16px;
    transition: all 0.2s;
    cursor: pointer;
    border-bottom: 1px dashed #ededed;
    font-weight: 500;
    background-color: #fff;
    transition-timing-function: ease-in-out;
    width: 100%;
    margin: 0px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #263238;
}
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item > span{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    height: 100%;
}
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item > span i{
    font-size: 1.4em;
    width: 42px;
    min-width: 42px;
    height: 42px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #2196f3;
    transition: all 0.2s;
}
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item > span >div{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px dashed #ededed;
    padding-left: 18px;
}
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item:hover > span > div {
    transform: perspective(700px) rotateY(-3deg);
    transform-origin: right center;
}
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item > span > div >p{
    margin: 0;
    font-size: 0.8em;
    opacity: 0.4;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item:last-child{
    border-bottom: none;
}
.tab-content-settings-wrap .tcsw-tabs-wrap > li{
    width:100%;
}
/*.tab-content-settings-wrap .tcsw-tabs-wrap > li:first-child{
    border-bottom: 1px solid #edf7ff;
}*/
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item:hover{
    background-color: #2196f3;
    color:#fff;
    padding-left: 22px;
}
.tab-content-settings-wrap .tcsw-tabs-wrap .tcsw-tabs-item:hover i{
    box-shadow: 2px 2px 1px 0px #0478dd;
}
/*Appearance*/
.list-radio-quee-wrap.lrqw-profile-frq{
    flex-direction:column;
}
.list-radio-quee-wrap.lrqw-profile-frq >li{
    border-style: solid;
}
.list-radio-quee-wrap.lrqw-profile-frq >li .md-check{
    width: 100%;
}
.list-radio-quee-wrap{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding:0;
    margin: 0;
}
.list-radio-quee-wrap >li{
    margin: 5px;
    border: 1px dashed #e4e6ef;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7e8299;
    transition: all 0.5s;
}
.list-radio-quee-wrap >li:hover,
.list-radio-quee-wrap >li.active{
    color: #009ef7;
    border-color: #009ef7;
    background-color: #f1faff!important;
}
.list-radio-quee-wrap >li .md-check{
    padding: 10px 20px;
    font-size: 1.1em;
    white-space: nowrap;
}
.list-radio-quee-wrap >li .md-check > i{
    display: none !important;
}
.list-radio-quee-wrap + p{
    font-weight: 600;
    margin-top: 4px;
    color:#7e8299;
}
.list-radio-quee-wrap.mockup-selection-radio >li{
    width:47%;
    height: 70px;
    margin:4px;
    background-color: transparent !important;
    border:none;
    position: relative;
    overflow:hidden;
    border: none;
    border-radius: 4px;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu{
    overflow: visible;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i{
    position: absolute;
    z-index: 2;
    right:5px;
    top:5px;
    opacity: 0.8;
    transition: all 0.4s;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i:hover{
    z-index: 4;
    opacity: 1;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i > div:after {
    background-color: #4dabf5;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i > div {
    background-color: #4dabf5;
    width:160px;
    line-height: 1.2;
    box-shadow: 0 0 3px -1px rgba(0, 0, 0,0.62);
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i.left > div {
    right: calc(100% + 5px);
    left:auto;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i.left > div:after{
    border-radius: 33px 0px 0px 29px;
    left: auto;
    transform: rotate(66deg);
    right: 1px;
    top: -3px;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i.right > div {
    left: calc(100% + 5px);
    right:auto;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i.right > div:after{
    border-radius: 6px 0px 0px 31px;
    right: auto;
    transform: rotate(85deg);
    left: -1px;
    top: -3px;
}
.list-radio-quee-wrap.mockup-selection-radio >li.item-hint-cu .info-inpt-tooltip-i > span {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #e76c96;
    font-size: 16px;
    margin-left: 0;
    color: #eef2f3;
}
.list-radio-quee-wrap.mockup-selection-radio >li .md-check{
    position: relative;
    z-index: 1;
    background-color: transparent;
    padding: 0;
    width: 100%;
    height: 100%;
    /*visibility: hidden;Remove*/
}
.list-radio-quee-wrap.mockup-selection-radio >li .md-check > input{
    opacity: 0;
}
.list-radio-quee-wrap.mockup-selection-radio >li .md-check > b{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.76);
    color: #2196f3;
    text-shadow: rgba(255, 255, 255, 0.55) 1px 1px 1px;
    transform: perspective(800px) rotateY(90deg) translateX(100%);
    transform-origin: left center;
    transition: all 0.4s;
    visibility: hidden;
    opacity: 0;
    font-size: 0.9em;
}
.list-radio-quee-wrap.mockup-selection-radio >li:hover .md-check > b,
.list-radio-quee-wrap.mockup-selection-radio >li.active .md-check > b{
    transform: perspective(800px) rotateY(0deg) translateX(0);
    visibility: visible;
    opacity: 1;
}
.list-radio-quee-wrap.mockup-selection-radio >li.active .md-check > b{
    color: #029400;
    border:1px solid #029400;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: 4px;
}
.list-radio-quee-wrap.mockup-selection-radio >li .md-check > i{
    display: block !important;
    opacity: 0;
    transition: all 0.4s;
    width: 20px;
    height: 20px;
    border-radius: 0 0 6px 0;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: #029400;
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0 , 0.18);
}
.list-radio-quee-wrap.mockup-selection-radio >li .md-check > i:before{
    display:none !important;
}
.list-radio-quee-wrap.mockup-selection-radio >li .md-check input[type="radio"]:checked + i:after {
    position: absolute;
    left: 5px;
    top: 5px;
    display: table;
    width: 11px;
    height: 6px;
    background: transparent;
    border-radius: 0;
    content: ' ';
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: rotate(-45deg);
}

.list-radio-quee-wrap.mockup-selection-radio >li.active .md-check > i{
    opacity: 1;
}
.mockup-method{
    position: absolute;
    width:99%;
    height:100%;
    top:0;
    left:0;
    background-color: #e3f3fc!important;
}
.mockup-method:after{
    width: 20px;
    height: 20px;
    background-color: #2196f3;
    content: "";
    position: absolute;
    border-radius: 50%;
}
.mockup-method .d-b-i{
    width:100%;
    height:30px;
    background-color: #2196f3;
    content:"";
    position:absolute;
    border-radius: 2px;
    display: none;
}
.mockup-method.mc-footerline .d-b-i,.mockup-method.mc-footerline:after{
    bottom:0;
}
.mockup-method .d-b-i:after{
    position: absolute;
    content: "";
    left: 5px;
    top: 4px;
    height: 4px;
    width: 30%;
    background-color: rgba(255, 255, 255, 0.2);
}
.mockup-method .d-b-i > i{
    position: absolute;
    bottom: 3px;
    left: 5px;
    width: 14px;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    box-shadow: 16px 0 0 0 rgba(255, 255, 255, 0.2);
}
.mockup-method .d-b-i > i:after{
    position: absolute;
    content: "";
    bottom: 0px;
    left: 32px;
    width: 22px;
    height: 6px;
    background-color: rgba(3, 44, 77,0.14);
    border-radius: 2px;
}
.mockup-method .d-b-i:before{
    position: absolute;
    content: "";
    left: 5px;
    top: 10px;
    height: 8px;
    width: 90%;
    background-color: rgba(255, 255, 255, 0.2);
}
.mockup-method .d-b-i:before{
}
/*.mockup-method .d-p-i*/
/*simple*/
.mockup-method.mc-simple:after{
    bottom: 6px;
    right: 8px;
}
.mockup-method.mc-simple .d-b-i{
    bottom: 19px;
    right: 8px;
    width: 60%;
}
/*headline*/
.mockup-method.mc-headline:after{
    bottom: 6px;
    right: 8px;
}
.mockup-method.mc-headline .d-b-i{
    top: 0;
    right: 0;
    width: 100%;
}
/*interstitial*/
.mockup-method.mc-interstitial{
    background-color: #bbd5e4 !important;
    backdrop-filter: blur(5px);
}
.mockup-method.mc-interstitial:after{
    bottom: 6px;
    right: 8px;
}
.mockup-method.mc-interstitial .d-b-i{
    bottom: 19px;
    right: 8px;
    width: 90%;
}
/*interstitial*/
.mockup-method.mc-standalone{
    background-color: rgba(0, 109, 255,0.16) !important;
    backdrop-filter: blur(5px);
}
.mockup-method.mc-standalone:after{
    bottom: 6px;
    right: 8px;
}
.mockup-method.mc-standalone .d-b-i{
    bottom: 19px;
    right: 8px;
    width: 90%;
}
/*left_top*/
.mockup-method.mc-left_top:after{
    top: 6px;
    left: 8px;
}
.mockup-method.mc-left_top .d-b-i{
    top: 19px;
    left: 8px;
    width: 75%;
}
/*right_top*/
.mockup-method.mc-right_top:after{
    top: 6px;
    right: 8px;
}
.mockup-method.mc-right_top .d-b-i{
    top: 19px;
    right: 8px;
    width: 75%;
}
/*left_bottom*/
.mockup-method.mc-left_bottom:after{
    bottom: 6px;
    left: 8px;
}
.mockup-method.mc-left_bottom .d-b-i{
    bottom: 19px;
    left: 8px;
    width: 75%;
}
/*right_bottom*/
.mockup-method.mc-right_bottom:after{
    bottom: 6px;
    right: 8px;
}
.mockup-method.mc-right_bottom .d-b-i{
    bottom: 19px;
    right: 8px;
    width: 75%;
}
/*d-left*/
.mockup-method > span.d-p-i{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.mockup-method > span.d-p-i:before{
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
    background-color: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(4px);
    z-index: 1;
}
.mockup-method > span.d-p-i:after{
    width: 40px;
    height: 89%;
    position: absolute;
    background-color: #2196f3;
    content: "";
    box-shadow: 0 0 4px -1px rgba(0, 0, 0, 0.53);
    z-index: 2;
    border-radius: 4px;
}
.mockup-method.mc-d-left > span:after{
    left: 4px;
    top:4px;
}
.mockup-method.mc-d-right > span:after{
    right: 4px;
    top:4px;
}
.mockup-method.mc-d-center > span:after{
    width:80%;
    left: 10%;
    height:50px;
    top:calc(50% - 25px);
    border-radius: 4px;
}
/*Appearance END*/
/*Appearance Switch mode*/
.tcsw-toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.toggle-slot {
    position: relative;
    height: 2.2em;
    width: 5.3em;
    border: 2px solid #ffe925;
    border-radius: 10em;
    background-color: #fff7a5;
    transition: background-color 250ms;
    overflow: hidden;
}

.tcsw-toggle-checkbox:checked ~ .toggle-slot {
    background-color: #374151;
    border-color: #1a3156;
}

.toggle-button {
    transform:translate(40px, 2px);
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: rgba(255, 194, 10, 0.21);
    box-shadow: inset 0 0 0 1px #ffe38f;
    transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.tcsw-toggle-checkbox:checked ~ .toggle-slot .toggle-button {
    background-color: #5d6574;
    box-shadow: inset 0px 0px 0px 1px #1d2128;
    transform: translate(3px, 2px);
}

.sun-icon {
    position: absolute;
    height: 14px;
    width: 14px;
    color: #ffbb52;
}

.sun-icon-wrapper {
    position: absolute;
    height: 23px;
    width: 23px;
    font-size: 1.6em;
    color: #ffbf5d;
    opacity: 1;
    transform: translate(4px, -2px) rotate(15deg);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.tcsw-toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
    opacity: 0;
    transform: translate(-23px, 3px) rotate(0deg);
}

.moon-icon {
    position: absolute;
    height: 14px;
    width: 14px;
    color: white;
}

.moon-icon-wrapper {
    position: absolute;
    height: 23px;
    width: 23px;
    font-size: 1.6em;
    color: #009ef7;
    opacity: 0;
    transform: translate(65px, -2px) rotate(0deg);
    transform-origin: 50% 50%;
    transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
}

.tcsw-toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
    opacity: 1;
    transform: translate(34px, -2px) rotate(-105deg);
}
.tcsw-theme-mode {
    width: 100%;
    display: flex;
    flex-direction: column;
    /*border-bottom: 1px solid #efefef;*/
    margin: 0;
    padding: 0 10px;
}
.tcsw-theme-mode .tcsw-theme-mode-switch {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 57px;
}
.tcsw-theme-mode .tcsw-theme-mode-switch > label{
    margin-bottom: 0;
    display: flex;
    font-weight: 500;
    align-items: center;
    color: #212121;
    cursor:pointer;
}
.custom-theme-btn{
    color: #2196f3;
    transition: all 0.5s;
    cursor: pointer;
    font-weight: 500;
    opacity: 0.7;
}
.custom-theme-btn:hover,.custom-theme-btn.active{
    opacity: 1;
}
.tcsw-theme-mode-custom{
    max-height: 100%;
    width:100%;
    transition: all 0.3s;
    overflow: visible;
    padding-top: 1rem;
    /*border-top: 1px solid #eeeff0;*/
}
/*.tcsw-theme-mode-custom > *{
    visibility: hidden;
    opacity: 0;
}*/
.tcsw-theme-mode-custom.active{
    max-height: 100%;
    overflow: visible;
    padding-top: 1rem;
    border-color:#eeeff0;
}
/*Appearance Switch mode End*/
/*Language Settings*/
.lang-defualt-settings-wrap {
    margin-bottom: 0;
    border-bottom: 1px solid #f7f7f7;
    padding: 18px 10px;
    display: flex;
    align-items: center;
}
.lang-defualt-settings-wrap .range-box-head-cus .dropdown-toggle.lang-cus{
    border:none !important;
    margin:0 !important;
    display:flex;
    padding: 6px !important;
    justify-content: flex-end;
    box-shadow: none;
}
.lang-defualt-settings-wrap .range-box-head-cus .dropdown-menu{
    z-index: 9999999;
}
.lang-defualt-settings-wrap .d-lang-banner-flag .dropdown-toggle > span > span {
    display: flex;
    align-items: center;
    float: right;
    color: #2196f3;
    padding-right: 6px;
}
.lang-defualt-settings-wrap .range-box-head-cus.with-arrow .dropdown-toggle:after{
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #2196f3;
    border-right: 2px solid #2196f3;
    border-radius: 1px;
    margin-top: 5px;
}
.lang-defualt-settings-wrap:hover .range-box-head-cus .dropdown-toggle.lang-cus{
    /*    box-shadow: 0px 0px 3px 1px #cbe8ff;*/
}
.lang-defualt-settings-wrap .d-lang-banner-flag .dropdown-toggle i.flag-icon{
    border-radius: 4px;
    min-height: 1.3rem;
    min-width: 1.3rem;
    margin-right: 7px;
    background-size: 34px 30px;
    font-size: 1.6em;
}
.lang-defualt-settings-wrap:hover .range-box-head-cus.with-arrow .dropdown-toggle:after{
    border-color:#2196f3;
}
.sc-2-mh-64 .select2-container--default .select2-selection--multiple{
    min-height:100px;
}
/*Language Settings END*/
.code-cutom-view-script pre{
    width:100%;
    word-break: break-word;
    position: relative;
    overflow: hidden;
}
.code-cutom-view-script pre .fa-copy{
    position: absolute;
    background-color: #fff;
    color: #2196f3;
    z-index: 20;
    right: 8px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    top: 10px;
    cursor: pointer;
    transition: all 0.3s;
    transform: perspective(1000px) rotateY(90deg);
    visibility: hidden;
    opacity: 0;
}
.code-cutom-view-script pre:hover .fa-copy{
    transform: perspective(1000px) rotateY(0deg);
    visibility: visible;
    opacity: 1;
}
.code-cutom-view-script .CodeMirror{
    width:100%;
    border-radius: 4px;
    height:auto;
}
.howitwork-list-wrap > ul{
    counter-reset: hiw-counter;
}
.howitwork-list-wrap > ul > li:before {
    content: counter(hiw-counter);
    counter-increment: hiw-counter;
    position: absolute;
    font-size: 1.1em;
    font-weight: 600;
    width: 32px;
    height: 32px;
    left: -14px;
    top: calc(50% - 15px);
    background-color: #2196f3;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 4px solid #fff;
}

.howitwork-list-wrap > ul > li{
    padding: 10px 1.5rem;
    margin-bottom: 10px;
    background-color: #f6fafb;
    line-height: 2.5;
    border-radius: 4px;
    box-shadow: 0px 0px 3px 0px #ddd inset;
    font-weight: 600;
}
.howitwork-list-wrap > ul >  li:last-child{
    margin-bottom:0;
}
.howitwork-list-wrap > ul >  li > ul > li{
    padding: 16px 10px 10px;
    line-height: 1.5;
    margin: 20px 10px 0;
    border-radius: 5px;
    position: relative;
    border: 1px solid #bcdff1;
    color: #424f6c;
    font-weight: 400;
}
.howitwork-list-wrap > ul > li>span.alert{
    font-weight: 400;
}
.howitwork-list-wrap > ul >  li > ul > li>span.alert{
    position: absolute;
    top: -12px;
    left: 10px;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 1;
    padding: 4px 10px;
}
.p-t-0-lb > .col-form-label{
    padding-top:0;
}
.select-btn-toolbox-wrap{
    display: flex;
    height: 46px;
    position: relative;
}
.select-btn-toolbox-wrap .range-box-head-cus .dropdown-toggle{
    margin-top: 0;
    border: none;
    background-color: #2196f3;
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    height:100%;
    color: #fff !important;
    font-size: 1.1em;
}
.select-btn-toolbox-wrap .range-box-head-cus.drp-b-h-cus{
    min-width:170px;
    height:100%;
}
.select-btn-toolbox-wrap .range-box-head-cus .dropdown-toggle.lang-cus:after{
    border-color:#fff;
    margin-top:-3px;
}
.select-btn-toolbox-wrap .range-box-head-cus.open .dropdown-menu{
    min-width: 230px;
    overflow-x:hidden;
}
.select-btn-toolbox-wrap .dropdown-search-input{
    margin-left:3px;
}
.select-btn-toolbox-wrap .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item{
    line-height:2.3;
    padding:5px 14px 3px;
}
.select-btn-toolbox-wrap .range-box-head-cus .dropdown-menu .dropdown-item:hover,
.select-btn-toolbox-wrap .range-box-head-cus .dropdown-menu .dropdown-item.active{
    background-color: #2196f3;
    color:#fff !important;
}
.select-btn-toolbox-wrap > .btn {
    /*background-color: #4caf50;*/
    color:#fff;
    border-radius:0 !important;
    border-right: 1px solid #147ed3;
    font-size: 1.1em;
}
.sct-f-s-cus{
    font-size:1.3em !important;
}

.side-dark-ctr-statu .range-box-head-cus.open .dropdown-menu .dropdown-search-input{
    width: 99%;
    background-color: #2c3c55 !important;
    box-shadow: -6px -12px 0 17px #2c3c55 !important;
    border: 1px solid #3b4a60;
    margin-left: 3px !important;
    color:#fff;
}
.form-legent-syl.fls-sidebar .col-form-label{
    background-color: #2c3c55;
    color: #2196f3;
}
.fls-sidebar .side-dark-ctr-statu  .range-box-head-cus .dropdown-toggle.lang-cus{
    padding: 8px 8px 5px !important;
}
.fls-sidebar{
    padding-top:10px;
}
ul.purpose-list-wrap {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
ul.purpose-list-wrap > li{
    width: calc(100% / 2.1);
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    margin: 5px 5px;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    box-shadow: 1px 1px 2px 1px #ededed;
}
.mf-title-wrap{
    border-left: 5px solid #2196f3;
    padding: 4px 7px !important;
    margin: 10px 0 !important;
    font-size: 1em;
}
ul.purpose-list-wrap .fa-check,.to-check-cus i.fa-check{
    background-color: rgba(76, 175, 80, 0.29);
    color: #4caf50;
}
ul.purpose-list-wrap .fa-question{
    background-color: rgba(33, 150, 243, 0.29);
    color: #2196f3;
}
ul.purpose-list-wrap .fa-times,.to-check-cus i.fa-times{
    background-color: rgba(244, 67, 54, 0.29);
    color: #f44336;
}
ul.purpose-list-wrap i{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    width:24px;
    min-width:24px;
    height:24px;
}
.to-check-cus i{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    width: 20px;
    min-width: 20px;
    height: 20px;
    line-height: 2;
}
.tb-non-head thead{
    display: none;
}
.tb-non-head {
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 1px 1px 1px 1px #f3f3f3;
    border-bottom: 4px solid #f7f7f7;
}
.tb-non-head table tbody tr td{
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}
.tb-non-head table{
    margin-bottom: 0;
}
.country-lbl-info-wrap{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.country-lbl-info-wrap .country-flag-frame{
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
}
.country-lbl-info-wrap .flag-icon{
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    position: relative;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 27px 24px;
    box-shadow: 1px 1px 1px 1px rgba(64, 64, 64,0.28);
    z-index: 2;
}
.country-lbl-info-wrap  .country-flag-frame:after{
    position:absolute;
    content: '';
    width:6px;
    height:6px;
    background-color: #dfdfdf;
    transform: rotate(45deg);
    left: -2px;
}
.side-dark-ctr-statu.sdcs-light .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span{
    color: #d2e4ff;
    font-weight: 400;
}
.side-dark-ctr-statu.sdcs-light .d-rang-cus .dropdown-toggle > span{
    color: #d2e4ff;
    font-weight: 400;
}
.side-dark-ctr-statu.sdcs-light .range-box-head-cus.with-arrow .dropdown-toggle:after{
    border-color:#d2e4ff;
}
.side-dark-ctr-statu.sdcs-light .range-box-head-cus .dropdown-toggle i{
    color: #d2e4ff;
}
.legend-vci-wrap .apexcharts-legend-series{
    display: flex !important;
    align-items: center;
    border: 1px solid #ddd;
    padding: 5px 8px;
}
.flag-rounded-custom i{
    margin-right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: 38px 28px;
    box-shadow: 0px 0px 3px 0px #7e7e7e, 0px 0px 10px -1px #4a4a4a inset;
    transition: all 0.5s;
}
.brs-custom-legend{
    /*    height:450px;*/
    height: calc(100% - 257px);
}
.brs-custom-legend .apexcharts-legend .apexcharts-legend-series{
    border: 1px solid #e9e9e9;
    padding: 12px 14px;
    margin-bottom: 4px !important;
    position: relative;
    overflow: hidden;
    width: calc(100% / 3.8);
    text-align: center;
    justify-content: center;
}
.brs-custom-legend .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker{
    position: absolute;
    width: 16px !important;
    min-width: 16px;
    height: 26px !important;
    min-height: 16px;
    left: -6px !important;
    top: -6px !important;
    transition: all 0.2s;
}
.brs-custom-legend .apexcharts-legend .apexcharts-legend-series:hover .apexcharts-legend-marker{
    width:20px !important;
    min-width: 20px;
    height:20px !important;
    min-height: 20px;
}
.d-lang-banner-flag .dropdown-toggle i.flag-icon{
    border-radius: 50%;
    background-size: cover;
    min-height: 1.2rem;
    min-width: 1.2rem;
    color: #fff !important;
    font-size: 1em;
}
.d-lang-banner-flag .dropdown-toggle > span > span{
    display:flex;
    align-items: center;
}
.form-legent-syl.fls-4t .col-form-label{
    transform: translate(22px ,4px);
}
.form-legent-syl.fls-4t .dropdown-search-input{
    margin-left:4px;
}
.form-legent-syl.fls-4t .range-box-head-cus > .btn{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.form-legent-syl.fls-4t .range-box-head-cus > .btn:after {
    margin-top: -1px !important;
}
.tags-dyni-slc .col-form-label {
    z-index: 9999999;
}
.cookie-logo-list-wrap{
    width: 100%;
    min-width: 50px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    height: 38px;
    justify-content: space-between;
}
.cookie-logo-list-wrap .minicolors-theme-bootstrap .minicolors-input{
    width:140px;
    text-align: center;
}
.cookie-logo-list-wrap .dropdown-toggle{
    width: 100%;
    height: 38px;
    padding-right: 16px;
    padding-left: 0;
    display: flex;
    align-items: center;
    border-color: #e4e6e8;
    background-color: #2696ff !important;
    transition: all 0.4s;
}
.cookie-logo-list-wrap .dropdown-toggle > span{
    width: 60px;
    height: 100%;
    display: flex;
    flex-flow: column;
    padding: 3px;
}
.cookie-logo-list-wrap .dropdown-toggle > span > *{
    width: 100%;
    height:100%;
    fill:#fff;
}
.cookie-logo-list-wrap .dropdown-menu .dropdown-item:hover {
    background-color: #f1f1f1;
    box-shadow: 0px 0px 3px 0px #c2c1c1 inset;
}
.cookie-logo-list-wrap .dropdown-menu{
    transform: translateY(15px);
    opacity: 0;
    visibility: hidden;
    right: 0px;
    left: auto;
    min-width: 378px;
    flex-wrap: wrap;
    background-color: #fcfcfc;
    padding: 0 !important;
    justify-content: flex-end;
    border-radius: 6px;
    transition: all 0.4s;
    display: flex;
}
.cookie-logo-list-wrap .custom-filter-drop-down.open>.dropdown-menu{
    transform: translateY(4px);
    opacity: 1;
    visibility: visible;
}
.cookie-logo-list-wrap .dropdown-menu .dropdown-item{
    max-width: calc(100% / 4.4);
    height: 57px;
    border: 1px solid #ddd !important;
    border-radius: 5px;
    margin: 4px;
    display: flex;
    padding: 10px;
    background-color: #2696ff;
    transition: all 0.4s;
}
.cookie-logo-list-wrap .dropdown-menu .dropdown-item > *{
    width:100%;
    height:100%;
}
.cookie-logo-list-wrap .dropdown-toggle:after{
    content: '';
    width: 8px;
    height: 8px;
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    margin-left: 10px;
    margin-top: -3px;
}
.cookie-logo-list-wrap > li{
    width: calc(100% / 4.3);
    margin: 3px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding:10px;
    transition: all 0.5s;
    position: relative;
    cursor: pointer;
}
.cookie-logo-list-wrap > li:hover{
    background-color: #dbdbdb;
    box-shadow: 0px 0px 2px 0px #555;
}
.cookie-logo-list-wrap > li.active{
    background-color: #dbdbdb;
    box-shadow: 0px 0px 2px 0px #555;
}
.cookie-logo-list-wrap > li.active:after{
    position: absolute;
    content: "";
    width: 7px;
    height: 12px;
    border-right: 2px solid #0b8f0b;
    border-bottom: 2px solid #0b8f0b;
    transform: rotate(45deg);
    right: 7px;
    top: 1px;
}
.cookie-logo-list-wrap > li svg{
    width:100%;
    height:100%;
}
.box-header-search{
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0px rgba(0,0,0,.06)!important;
}

.box-header-search h6{
    padding: 12px 8px;
    margin: 0 !important;
    border: none;
    color: #2196f3;
}
.box-header-search .bh-full-p-search-wrap{
    flex-direction: row;
    border-top: 1px solid #f6f6f6;
    padding: 10px;
    box-shadow: 0px -2px 2px -1px #f4f4f4;
    width: 100%;
    display: flex;
    align-items: center;
}
.box-header-search .bh-full-p-search-wrap > i{
    color: #878787;
    font-size: 1.4em;
    margin-left:2px;
}
.box-header-search .bh-full-p-search-wrap > input{
    border:none !important;
    outline: none !important;
    box-shadow:none !important;
    padding-left: 8px;
}
.box-header-search .bh-full-p-search-wrap > input::placeholder{
    color: #878787;
}
.box-header-search .bh-full-p-search-wrap .full-search-action-btn{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.box-header-search .bh-full-p-search-wrap .full-search-action-btn > button{
    border-radius: 4px;
    padding: 6px 30px;
    text-transform: uppercase;
    transition: all 0.5s;
}
.box-header-search .bh-full-p-search-wrap .full-search-action-btn > button.btn-clear-search{
    margin-left: 10px;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 6px 15px;
    color: #b6b6b6;
    font-size: 1em;
    letter-spacing: 1px;
}
.box-header-search .bh-full-p-search-wrap .full-search-action-btn > button.btn-clear-search:hover{
    color:#000;
}
.tsbw-scan-co .fb-head{
    padding: 2px 12px;
    background-color: #fff;
    border: none;
    box-shadow: 0 0 3px 0 rgba(177, 177, 177 , 0.40);
    border-radius: 5px;
    margin-top: 12px !important;
}
.tsbw-scan-co .sidebar-list-items-wrap{
    overflow: auto;
    max-height: calc(100vh - 365px);
    /*min-height: calc(100vh - 360px);*/
}
.tsbw-scan-co .sidebar-list-items-wrap >li:hover,.tsbw-scan-co  .sidebar-list-items-wrap >li.active{
    background-color: #fff;
    border-left: 4px solid #66bb6a;
    color: #fff;
}
.tsbw-scan-co .sidebar-list-items-wrap >li:hover .user-info-detail-list-wrap > li > span,
.tsbw-scan-co  .sidebar-list-items-wrap >li.active .user-info-detail-list-wrap > li > span{
    /*color:#fff !important;*/
}
.tsbw-scan-co .sidebar-list-items-wrap .user-info-detail-list-wrap > li > span{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    transition: all 0.3s;
    display:block;
}
.tsbw-scan-co .sidebar-list-items-wrap >li{
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 6px;
    margin-bottom: 4px;
    box-shadow: 0px 1px 1px 0px #f1f1f1;
    border:1px solid #f1f1f1;
    transition: all 0.3s;
    min-height:57px;
}
.tsbw-scan-co .sidebar-list-items-wrap >li:after{
    display:none !important;
}
.bh-w-se-t{
    padding-top:10px !important;
}
.tsbw-scan-co .fb-body{
    position:relative;

}
.tsbw-scan-co .fb-body:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 25px;
    /*box-shadow: 0px -22px 10px -11px #f6fafb inset;*/
    left: 0;
    bottom: 0;
    z-index: 10;
}
.url-details-meta-list-wrap{
    margin: 10px 0 0;
    max-height: 450px;
    overflow: auto;
    background-color: #f6faff;
    padding: 0 10px;
    list-style: none;
    width: 100%;
    border-radius: 8px;
    box-shadow: 0px 0px 3px 0px #d3e3ff inset;
}
.url-details-meta-list-wrap > li{
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e2ebf7;
    border-radius: 0;
    margin: 0;
    padding: 10px;
    align-items: flex-start;
}
.url-details-meta-list-wrap > li:last-child{
    border-bottom: none;
}
.url-details-meta-list-wrap > li > span{
    font-weight: 600;
    font-size: 1.2em;
    text-transform: capitalize;
    color: #2296f3;
}
.url-details-meta-list-wrap > li > div{
    overflow-wrap: anywhere;
    color: #060274;
}
.coo-s-l-respo-btn{
    margin-top:-4px !important;
}
.elip-title-flow{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
    width:100%;
    color: #001534;
    font-size: 0.96em;
}
.co-status-action-wrap{
    position: absolute;
    right: -15px;
    top: -10px;
    width: 35px;
    height: 56px;
    background-color: rgba(233, 233, 233, 0.39);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    box-shadow: -1px 0px 5px -1px #e2e2e2;
}
.co-status-action-wrap i.fa-spinner {
    -webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
.box-w-overview-acc .acc-more-detail-row {
    display:flex;
    flex-direction: row;
    margin:0;
    padding:0;
    align-items: center;
    list-style: none;
}
.box-w-overview-acc .acc-more-detail-row > li{
    position: relative;
    margin-right: 20px;
    max-width: calc(100% / 3);
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.box-w-overview-acc .acc-more-detail-row > li:after{
    position: absolute;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #aed9fd;
    right: -12px;
    top: calc(50% - 2px);
}
.box-w-overview-acc .acc-more-detail-row > li:last-child:after{
    display:none;
}
.acc-elm-action {
    border-radius: 4px;
    padding: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition:all 0.5s;
    color:#fff !important;
}
.acc-elm-action:hover{
    opacity: 0.6;
}
.acc-elm-action .acc-elm-count{
    border: 1px solid rgba(255, 255, 255, 0.46);
    border-radius: 2px;
    margin-right: 4px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 400;
}
.acc-elm-action > i {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.26);
}
.scanner-loading-spinner-overly{
    width:100%;
    height:100%;
    background-color: rgba(255,255,255,0.5);
    backdrop-filter: blur(3px);
    position: absolute;
    top:0;
    left:0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scanner-loading-spinner-wrap{
    margin: 10% auto 20px;
    position: relative;
    width: 320px;
    height: 186px;
    z-index: 10;
}
.scanner-loading-spinner-wrap .slsw-screen
{
    margin: auto;
    margin-top: 10px;
    width: auto;
    height: 186px;
    background: url(../../images/animation-loading-scan.svg) center center no-repeat, url(../../images/layout.svg) center center no-repeat;
    background-size: contain, contain;
    background-color: rgba(0, 0, 0, 0);
    background-repeat: no-repeat;
}

.scanner-loading-spinner-wrap .slsw-scan
{
    width: 100%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.20);
    position: absolute;
    z-index: 9999;
    -moz-animation: scan 5s infinite;
    -webkit-animation: scan 5s infinite;
    animation: scan 5s infinite;
    -webkit-animation-direction: alternate-reverse;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.50);
}

@-webkit-keyframes scan {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(186px);
        transform: translateY(186px);
    }
}
.external-pager-wrap {
    width: 100%;
    border-top: 1px solid #efefef;
    display: flex;
    justify-content: space-between;
    padding: 8px 4px 8px 10px;
    align-items: center;
    background-color: #fff;
}
.external-pager-wrap > .count{
    display:none;
}
.external-pager-wrap > .page-size,
.external-pager-wrap > .btn-group > .page-drop{
    min-width: 60px;
    text-align: left;
    background-color: #ffffff;
    border-color: #e9e9e9;
}
.external-pager-wrap > .btn-group{
    display:flex;
}
.external-pager-wrap > .btn-group > a{
    background-color: #ffffff;
    border-color: #e9e9e9;
    font-size: 0.8em;
    color: #585858;
}
.tracker-count-sum-wrap {
    border: 1px solid #ddd;
    padding: 8px 20px;
    border-radius: 5px;
    margin: -41px 10px 10px;
    font-size: 1.23em;
    font-weight: 600;
    float: right;
}
.scan-icon-fa{
    -webkit-mask: url(../../images/scan-icon.svg);
    mask: url(../../images/scan-icon.svg);
    background: #4CAF50 no-repeat;
    width: 35px;
    height: 30px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 30px;
    mask-size: 30px;
    -webkit-mask-position: center left;
    mask-position: center left;
}
.cookiepedia-icon-fa{
    -webkit-mask: url(../../images/cookie-pedia-icon.svg);
    mask: url(../../images/cookie-pedia-icon.svg);
    background: #21a3f6 no-repeat;
    width: 35px;
    height: 30px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 30px;
    mask-size: 30px;
    -webkit-mask-position: center left;
    mask-position: center left;
}
.tsfb-coo{
    position: sticky;
    top:0;
}
.d-grid-gap10-temp3{
    display: grid;
    gap:10px;
    grid-template-columns: calc(100% / 3.02) calc(100% / 3.02) calc(100% / 3.02);
}
.bck-list-wrap{
    padding:10px;
    margin:0;
    list-style: none;
    max-height: calc(100vh - 477px);
    min-height: 65px;
    overflow: auto;
}
.bck-list-wrap:empty:after{
    position: relative;
    content: "No values have been added to this list.";
    width: 100%;
    height: 45px;
    background-color: #f6faff;
    border: 1px dashed #cedfff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #80beff;
    opacity: 0.8;
}

.bck-list-wrap > li{
    border: 1px solid #eff1f5;
    border-radius: 8px;
    margin-bottom: 6px;
    box-shadow: 0 0 0 0 #eff1f5;
    transition: all 0.3s;
    color: #444e5a;
    font-weight: 600;
    overflow:hidden;
    animation: changeStyle .5s ease-in-out;
    position: relative;
}
.bck-list-wrap > li:hover{
    box-shadow: 2px 2px 3px 0 #dee1e6;
}
.bck-list-wrap > li.active{
    background-color: #3185fc;
    box-shadow: 1px 2px 3px 0 #dee1e6;
    border-color:#3185fc;
    color:#ffffff;
}
.bck-list-wrap > li > label{
    width: 100%;
    margin: 0;
    padding: 0;
    height: 45px;
    display: flex;
    align-items: center;
    padding-right: 3rem;
    padding-left:10px;
}

.bck-list-wrap > li > label > span{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow:hidden;
}
.bck-list-wrap > li > label > i{
    position: absolute;
    right:10px;
}
.bck-list-wrap > li > label > i:before{
    background:#eff1f5;
    box-shadow: 0px 0px 3px 0px rgba(9, 9, 9, 0.21) inset;
    border-radius: 50%;
    border:none;
}
.bck-list-wrap > li> i{
    display: none;
}
.blw-as-level-wrap.bck-list-wrap > li> i{
    display: flex;
    position: absolute;
    right: 8px;
    top: calc(50% - 10px);
    color: #fff;
    font-size: 0.87em;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
    transition: all 0.4s;
}
.blw-as-level-wrap.bck-list-wrap > li> i:hover{
    opacity: 1;
}
.blw-as-level-wrap.bck-list-wrap > li > label{
    padding-left: 2rem;
}
.blw-as-level-wrap.bck-list-wrap > li > label > i{
    right:auto;
    left:8px;
    height:16px;
}
.blw-as-level-wrap.bck-list-wrap > li > label > i:before{
    background: #f8f8f8;
    box-shadow: 0px 0px 3px 0px rgba(9, 9, 9, 0.21) inset;
    width: 16px;
}
.blw-as-level-wrap.bck-list-wrap > li > label > i:after,
.blw-as-level-wrap.bck-list-wrap > li > label input[type="checkbox"]:checked + i:after{
    font:normal normal normal 14px/1 FontAwesome;
    content: "";
    position: absolute;
    display: block;
    color: #fff;
    left: 3px;
    top: 3px;
    font-size: 0.8em;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg) !important;
    border:none !important;
}
.blw-as-level-wrap.bck-list-wrap > li > label input[type="checkbox"]:checked + i:after{
    color: #ff9191;
    content: "\f00c";
}
.blw-as-level-wrap.bck-list-wrap > li > label input[type="checkbox"]:checked + i:before{
    background: #fff;
}
.blw-as-level-wrap.bck-list-wrap > li{
    animation: changeStyle .5s ease-in-out;
}
.blw-as-level-wrap.bck-list-wrap > li.active{
    background: #ff9191;
    border-color:#ff9191;
}
.bck-list-wrap > li > label input[type="checkbox"]:checked + i:after{
    border-color:#3185fc!important;
}
.action-input-blocker {
    display: flex;
    align-items: center;
    padding: 20px 1.5rem;
    background-color: #e5e5e5;
    box-shadow: 0px 5px 5px -4px #c8c8c8 inset;
}
.abtest-list-wrap .action-input-blocker{
    padding: 12px 1.5rem;
}
@keyframes changeStyle {
    from {
        transform-origin: top center;
        transform: perspective(800px) rotateX(90deg);
        opacity: 0;
        box-shadow: 0px 400px 400px -40px #f8f8f8 inset;
    }
    to{
        transform-origin: top center;
        transform: perspective(800px) rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 0 0 #f8f8f8 inset;
    }
}

.ellips-drp-wrap .dropdown-menu{
    margin: 0;
    padding: 0;
    min-width:140px;
    border-radius: 5px;
}
.ellips-drp-wrap .dropdown-menu:after{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    top: -4px;
    right: 7px;
    transform: rotate(45deg);
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    background-color: #fff;
}
.ellips-drp-wrap .dropdown-item{
    padding: 5px 15px;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 500;
    font-size: 0.9em;
    transition: all 0.4s;
}
.ellips-drp-wrap .dropdown-item:last-child{
    border-bottom: none;
}
.url-details-meta-list-wrap.udmlw-dns-record{
    background-color: transparent;
    border:none;
    border-radius: 0;
    box-shadow: none;
    margin-top: 1rem;
}
.url-details-meta-list-wrap.udmlw-dns-record > li{
    border:none;
    padding-top:0;
    padding-right:0;
    padding-left:2rem;
    position: relative;
}
.url-details-meta-list-wrap.udmlw-dns-record > li table{
    margin-bottom: 0;
}
.url-details-meta-list-wrap.udmlw-dns-record > li:first-child table > thead{
    visibility: visible;
    height:auto;
}
.url-details-meta-list-wrap.udmlw-dns-record > li:first-child{
    margin-bottom: 9px;
}
.url-details-meta-list-wrap.udmlw-dns-record > li table > thead{
    visibility: collapse;
    height: 0;
    overflow: hidden;
}
.dns-grade-label{
    height: 4px;
    margin-bottom: 7px;
    border: none;
    border-bottom: 1px dashed #dbe0e3 !important;
    width: 101%;
    position: relative;
    left: -10px;
}
.dns-grade-label> span{
    position: absolute;
    right: 97%;
    font-weight: 600;
    top: calc(50% - 9px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    width: 47px;
    height: 22px;
    font-size: 0.8em;
    line-height: 2;
}
.dns-grade-label> span b{
    position: relative;
    z-index:4;
}
.dns-grade-label> span:before{
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    top: calc(50% - 4px);
    left: calc(100% - 6px);
    background-color: inherit;
    transform: rotate(45deg);
}
.nested-tb.ns-dns > tbody > tr{
    background-color: #f6f6f6 !important;
}
/*grade Proccess*/
.header-grade-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
grade-view-info-wrap{
    width:100%;
}
.grade-view-info-wrap > ul{
    padding:0;
    list-style: none;
    margin:0;
}
.grade-view-info-wrap > ul > li{
    border-bottom: 1px dashed #ddd;
    padding:10px;
}
.grade-view-info-wrap > ul > li:last-child{
    border:none !important;
}
.grade-view-info-wrap > ul > li > ul{
    padding: 0;
    margin:0;
    list-style: none;
}
.grade-view-info-wrap > ul > li > ul > li{
    border-radius: 4px;
    padding: 6px 10px;
    margin: 4px;
    float: left;
}
.grade-view-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*grade Proccess END*/
.tcsw-headers{
    border-radius:0;
    width:100%;
    margin:0;
    border:none;
    border-bottom:1px dashed #ddd;
}
.ssl-summary-wrap > li{
    float: left;
    width: 47%;
    margin: 5px 5px;
    flex-direction: column;
}
.ssl-summary-wrap li > span{
    text-shadow: 1px 1px 1px rgba(0, 0, 0,0.40);
}
.ssl-summary-wrap li:first-child > span{
    text-shadow:none;
}
.dt-list-wrap.ssl-list-wrap > li{
    width:100%;
    border: 1px dashed #e0e0e0;
    align-items: baseline;
}
.dt-list-wrap.ssl-list-wrap > li > span:first-child{
    width:50%;
}
.dt-list-wrap.ssl-list-wrap .flag-icon{
    background-position: 50% 11px;
}
.reg-x320_tb{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 320px;
}
.btn-cus-abss{
    padding-right:36px !important;
}
.ov-btn-visible-corner button:first-child{
    border-radius: 0 6px 6px 0 !important;
}
.drp-header-srp-wrap.ellips-drp-wrap .dropdown-menu:after{
    border: none;
    border-top: 1px solid #c7c7c7;
    border-left: 1px solid #c7c7c7;
    top: -5px;
}
.drp-header-srp-wrap.ellips-drp-wrap .dropdown-item{
    padding: 10px 15px !important;
    position:relative;
    z-index: 2;
}
.drp-header-srp-wrap.ellips-drp-wrap .dropdown-menu{
    box-shadow: 0 2px 10px 0 rgba(89, 89, 89,0.32);
    margin-top: 6px;
}
.collapse-form-group{
    height:auto;
    overflow: hidden;
    transition: all .4s;
}
.collapse-form-group.active{
    height:37px;
}
.srp-cus-modal .modal-body{
    padding:0 !important;
}
.single-summary-validation ul{
    padding:0;
    margin:0;
    list-style: none;
    font-weight: 500;
}

.bck-list-wrap > li> i.coppy-clipboard{
    position: absolute;
    background-color: #fff;
    color: #2196f3;
    z-index: 20;
    right: 0;
    height: 100%;

    width: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    top: 0;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0,0.10);
    transform-origin: right center;
    transform: perspective(1000px) rotateY(90deg);
    visibility: hidden;
    opacity: 0;
}
.bck-list-wrap > li:hover > .coppy-clipboard{
    transform: perspective(1000px) rotateY(0deg);
    visibility: visible;
    opacity: 1;
}
.blw-as-level-wrap.bck-list-wrap > li> i.coppy-clipboard{
    width: 28px;
    right:auto;
    left:0;
    transform-origin: left center;
}
.blw-as-level-wrap.bck-list-wrap > li.active > i.fa-times{
    border:1px solid #fff;
}
.fls-single-syl{
    padding:6px 0;
    border: 1px solid #ebebeb;
    height: 50px;
    margin-left: -10px;
    margin-right: -10px;
}
.fls-single-syl select{
    border: none;
    cursor: pointer;
    font-weight: 600;
    color: #2196f3 !important;
    font-size: 1em;
    text-align:right;
    padding-right:1.4rem;
    padding-left:0;
    background-position: right 4px center !important;
    background-image: url("../../images/select-arrow-blue.png") !important
}
.fls-single-syl input:focus{
    color: #1467a8 !important;
}
.fls-single-syl input{
    border: none;
    text-align: right;
    font-weight: 600;
    font-size: 1em;
    min-width: 10px;
    float: right;
    line-height: 1.5;
    color: #2196f3 !important;
    transition: all 0.4s;
}
ul.sidebar-grp-btn-wrap {
    margin: 0 2px 10px 2px;
    padding: 0;
    box-shadow: 0 0rem 0.6rem rgba(0,0,0,.05)!important;
    list-style: none;
    display: flex;
    border: 1px solid #ebebeb;
    border-radius: 6px;
    background-color: #fff;
    flex-direction: row-reverse;
    overflow:hidden;
}
ul.sidebar-grp-btn-wrap > li{
    /*background-color: #fff;*/
    font-size: 1.4em;
    padding: 0;
    width: calc(100% / 4);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 50px;
    cursor: pointer;
    overflow: hidden;
    border-left: 1px solid #f1f1f1;
    transition: all 0.4s;
    flex-direction: column;
}
ul.sidebar-grp-btn-wrap.sgbw-wo-lic > li{
    width: calc(100% / 2);
}
ul.sidebar-grp-btn-wrap > li:first-child{
    border-radius: 0 6px 6px 0;
}
ul.sidebar-grp-btn-wrap > li:last-child{
    border:none;
    border-radius: 6px 0 0 6px;
}
ul.sidebar-grp-btn-wrap > li >i{
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: perspective(800px) rotateX(0deg) translateY(0px);
    transform-origin: top center;
    transition: all 0.4s ease 0s;
}
ul.sidebar-grp-btn-wrap > li >span{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    text-align: center;
    line-height: 1;
    font-weight: 500;
    width: 100%;
    min-height: 50px;
    transform: perspective(800px) rotateX(90deg);
    transform-origin: top center;
    transition: all 0.4s ease 0s;
}
ul.sidebar-grp-btn-wrap > li:hover{
    box-shadow: 0px 0px 300px 30px rgba(0, 0, 0, 0.16);
    z-index: 1;
}
ul.sidebar-grp-btn-wrap > li:hover > i{
    transform: perspective(800px) rotateX(90deg) translateY(-20px);
}
ul.sidebar-grp-btn-wrap > li:hover > span{
    transform: perspective(800px) rotateX(0deg) translateY(-50px);
}

.browser-mockup {
    border-top: 2.5em solid rgba(205, 205, 205, 0.7);
    box-shadow: 0 0 5px -1px rgba(110, 110, 110, 0.27);
    position: relative;
    border-radius: 5px;
}

.browser-mockup:before {
    display: block;
    position: absolute;
    content: '';
    top: -20px;
    opacity: 0.6;
    left: 1em;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background-color: #f44;
    box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
}

.browser-mockup:after {
    display: block;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #ededed;
    z-index: 4;
}

.browser-mockup > * {
    display: block;
}
.browser-mockup >  .title-b-wrap{
    position: absolute;
    top: -28px;
    left: 5rem;
    background-color: #ededed;
    height: 28px;
    padding: 5px 16px 3px 28px;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #6b7079;
    z-index: 1
}
.browser-mockup >  .title-b-wrap.tbw-cus-style{
    left: 17.5rem;
    background-color: #e2e2e2;
    z-index: 0;
    border-top: 1px solid #d2d2d2;
    border-left: 1px solid #d2d2d2;
    border-right: 1px solid #d2d2d2;
    padding-left: 2.5rem;
    cursor: pointer;
    transition: all 0.4s;
}
.browser-mockup >  .title-b-wrap.tbw-cus-style:hover,
.browser-mockup >  .title-b-wrap.tbw-cus-style.active{
    background-color: #263238;
    left: 18rem;
    border-color: #263238;
    color: #fff;
    padding-bottom: 6px;
}
.browser-mockup >  .title-b-wrap.tbw-cus-style.active:after,
.browser-mockup >  .title-b-wrap.tbw-cus-style.active:before{
    display: block !important;
}
.browser-mockup >  .title-b-wrap.tbw-cus-style:before{
    width: 5px !important;
    height: 5px !important;
    background-color: #18db0b !important;
    left: auto !important;
    right: 5px;
    top: 5px !important;
    display: none !important;
}
.browser-mockup >  .title-b-wrap.tbw-cus-style:after{
    width:5px;
    height:5px;
    background-color: #3db72f !important;
    left:auto;
    top:5px;
    display: none !important;
    right:5px;
}
.browser-mockup >  .title-b-wrap:after{
    position: absolute;
    content: '';
    top: 9px;
    left: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #64ab65;
}
.acw-tab-head {
    padding: 12px 16px 12px 12px;
    cursor: pointer;
    font-size: 1.1em;
    transition: all 0.4s;
    border: 1px solid #f5f5f5;
    margin-bottom: 5px;
    border-radius: 8px;
}

.acw-tab-head  i.fa{
    transform: rotate(90deg);
    margin-top: 2px;
    transition: all 0.3s
}
.collapsed .acw-tab-head i.fa{
    transform: rotate(0deg);
    margin-top: 0;
}
.collapsed .acw-tab-head{
    color: #212121;
    border-color: #f5f5f5;
}
.acw-tab-head,.acw-tab-head:hover{
    color:#2196f3;
    border-color: #82c8ff;
}
.cmbtn-cus{
    font-size: 1.1em;
    font-weight: 600;
    padding-left: 6px;
}
.color-pallet-list-wrap{
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    height: 32px;
    justify-content: flex-end;
}
.color-pallet-list-wrap .dropdown{
    width:100%;
}
.color-pallet-list-wrap .dropdown-toggle{
    width: 100%;
    height: 32px;
    padding-right: 12px;
    padding-left: 6px;
    padding-top: 5px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    background-color: transparent;
    border-radius: 25px;
    border-color: #2196f3;
    transition: all 0.4s ease 0s;
    box-shadow: 0 1px 3px rgba(77, 77, 77,0.08), 0 1px 2px rgba(117, 117, 117, 0.02);
}
.color-pallet-list-wrap .dropdown-toggle:hover{
    border-color: #0861a9;
    box-shadow: 0 0 0px #f0f0f0 !important;
}
.color-pallet-list-wrap .dropdown-toggle > span{
    width: 100px;
    height: 100%;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 2px;
    line-height: 2;
    color: #2196f3;
    font-weight: 600;
    font-size: 0.9em !important;
    text-align: left;
}
.color-pallet-list-wrap .dropdown-toggle > span > span{
    height:100%;
    width:100%;
    border-radius: 25px;
    box-shadow: 0px 0px 5px #e3e3e3;
}

.color-pallet-list-wrap .dropdown-menu .dropdown-item:hover {
    background-color: #f1f1f1;
    box-shadow: 0px 0px 3px 0px #c2c1c1 inset;
}
.color-pallet-list-wrap .dropdown-menu{
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    right: -5px;
    left: auto;
    min-width: 373px;
    flex-wrap: wrap;
    background-color: #fcfcfc;
    padding: 0 !important;
    justify-content: flex-end;
    border-radius: 6px;
    transition: all 0.4s;
    display: flex;
    height:0;
    max-height: 287px !important;
}
.color-pallet-list-wrap .custom-filter-drop-down.open>.dropdown-menu{
    transform: translateY(8px);
    opacity: 1;
    visibility: visible;
    height:auto;
}
.color-pallet-list-wrap .dropdown-menu .dropdown-item{
    max-width: calc(100% / 2.1);
    height: 45px;
    border: 1px solid #ddd !important;
    border-radius: 5px;
    margin: 4px;
    display: flex;
    padding: 10px;
    background-color: #fff;
    transition: all 0.4s;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}
.color-pallet-list-wrap .dropdown-menu .dropdown-item > *{
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 2px 2px 1px #f1f1f1;
}
.color-pallet-list-wrap .dropdown-toggle:after{
    content: '';
    width: 7px;
    height: 7px;
    border-bottom: 1px solid #2196f3;
    border-right: 1px solid #2196f3;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    margin-left: 10px;
    margin-top: -2px;
}
.normal-info-drop-wrap .dropdown-toggle{
    box-shadow: none !important;
    background-color: transparent;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.normal-info-drop-wrap .dropdown-toggle >span{
    color: #2196f3;
    padding-right: 4px;
}
.normal-info-drop-wrap.range-box-head-cus.with-arrow .dropdown-toggle:after{
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #2196f3;
    border-right: 2px solid #2196f3;
    border-radius: 1px;
}
.normal-info-drop-wrap.range-box-head-cus .dropdown-menu .dropdown-item:hover,
.range-box-head-cus.d-lang-banner-flag .dropdown-menu .dropdown-item:hover{
    background-color: #2196f3;
}
.normal-info-drop-wrap.range-box-head-cus.with-arrow .dropdown-toggle{
    padding: 4px 6px 4px;
}
.range-slider-t-tooltip .range-slider{
    width:100%;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    position:relative;
}
.range-slider-t-tooltip .range-slider .range-slider__range{
    width:100% !important;
    margin:10px 0 !important;
}
.range-slider-t-tooltip .range-slider .range-slider__value{
    position: absolute;
    top: -31px;
    right: -6px;
    width: 32px;
    border-radius: 50%;
    height: 32px;
    min-height: 32px;
    min-width: 32px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding-right: 11px;
}
.range-slider-t-tooltip .range-slider .range-slider__value:after{
    position: absolute;
    top: calc(100% - 4px);
    left: 9px;
    width: 0;
    height: 0;
    border-top: 7px solid #2c3e50;
    border-right: 7px solid transparent;
    border-bottom: none;
    border-left: 7px solid transparent;
    content: '';
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-domain-drp-and-action-wrap{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.btn-add-grp-drp-b-edit{
    width: 34px;
    background-color: #fff;
    height: 38px;
    margin-top: 4px;
    margin-right: 0;
    border-radius: 5px 0 0 5px;
    transition: all 0.3s;
    border: 1px solid #ddd;
    border-right: none;
}
.btn-add-grp-drp-b-edit:hover{
    background-color: #2196f3 !important;
    border-color: #2196f3 !important;
    color:#fff;
}
.btn-add-grp-drp-b{
    height: 37px;
    margin-top: 3px;
    padding: 0px 13px;
    margin-left: 6px;
    z-index: 222;
}
.domain-cus-grp.form-legent-syl.fls-4t .col-form-label{
    /*transform: translate(46px ,4px);*/
    transform: translate(91px ,4px);
}
.domain-cus-grp .range-box-head-cus .dropdown-toggle.lang-cus{
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    padding-left: 5px !important;
}
.mbtn-p-cus .col-sm-8{
    padding-left: 0 !important;
}
.h-scroller{
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    display: inline-block;
    vertical-align: middle;
    width:100%;
}
.cpl-lb-w-arrow-r{
    background-color: #fff;
    border: 1px solid #ddd;
    color: #ddd;
    padding: 0;
    overflow: hidden;
}
.cpl-lb-w-arrow-r > img{
    width: 80%;
    height: 80%;
    border-radius: 50%;
}
.co-logo-syl{
    width: 24px;
    height: 24px;
    margin-right: 4px;
    border-radius: 50%;
    border: 1px solid #ddd;
    padding: 2px;
}
.tb-profile-us-mail .flag-icon {
    border-radius: 50%;
    overflow: hidden;
    background-size: cover;
    width: 18px;
    height: 18px;
    box-shadow: 0 0 2px 0 #000;
}
.text-nowrap{
    white-space: nowrap;
}
.word-break-all{
    word-break: break-word;
}
.space-break-word{
    white-space: break-spaces;
}
.cpl-acc-box-wrap{
    border-radius: 4px;
}
.cpl-acc-box-wrap > .box-header{
    height: 40px;
    border-radius: 5px 5px 0 0;
    background-color: #fcfcfc;
}
.cpl-acc-arrow {
    border-left: 1px solid #eeeff0;
    color: #909497;
    padding: 0 0 0 10px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
}
.cpl-abw-f-p-wrap .cpl-acc-arrow{
    padding: 0 4px 0 12px;
}
.box-header.collapsed .cpl-acc-arrow i:before{
    content: "\f067";
}
.cc-open i:before{
    content: "\f066";
}
.cpl-paragraph-wrap{
    white-space: break-spaces;
    border-radius: 6px;
    background-color: #f9f9f9;
}
.cpl-text-overflow-cloud{
    max-height: 400px;
    overflow: hidden;
    position: relative;
}
.cpl-text-overflow-cloud.active{
    max-height: 100%;
    padding-bottom: 60px;
}
.cpl-text-overflow-cloud.active .r-m-btn-wrap > i:before{
    content: "\f102";
}
.cpl-text-overflow-cloud:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 68px;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-shadow: 0px -76px 34px -16px #f9f9f9 inset;
}
.r-m-btn-wrap{
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #2196f3;
    height: 50px;
    z-index: 20;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.r-m-btn-wrap > i{
    -webkit-animation: ca3_fade_move_down 1.5s ease-in-out infinite;
    -moz-animation:    ca3_fade_move_down 1.5s ease-in-out infinite;
    animation:         ca3_fade_move_down 1.5s ease-in-out infinite;
}
@-webkit-keyframes ca3_fade_move_down {
    0%   {
        -webkit-transform:translate(0,-10px);
        opacity: 0;
    }
    50%  {
        opacity: 1;
    }
    100% {
        -webkit-transform:translate(0,10px);
        opacity: 0;
    }
}
@-moz-keyframes ca3_fade_move_down {
    0%   {
        -moz-transform:translate(0,-10px);
        opacity: 0;
    }
    50%  {
        opacity: 1;
    }
    100% {
        -moz-transform:translate(0,10px);
        opacity: 0;
    }
}
@keyframes ca3_fade_move_down {
    0%   {
        transform:translate(0,-10px);
        opacity: 0;
    }
    50%  {
        opacity: 1;
    }
    100% {
        transform:translate(0,10px);
        opacity: 0;
    }
}
.cpl-di-social-media-list{
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 2em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.cpl-di-social-media-list li{
    margin: 0 10px;
    width:auto !important;
}
.ico-appgallery{
    background-image: url('../../images/Huawei_AppGallery.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50px;
}
.over-view-other-tabs{
    list-style: none;
    margin: 0;
    padding: 1rem 10px 0;
    display: flex;
    flex-direction: row;
    width: 100%;
}
.over-view-other-tabs > li{
    width: 120px;
    height: 90px;
    border: 1px dashed #E4E6EF;
    border-radius: 10px;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position:relative;
    overflow: hidden;
    transition: all 0.4s;
}
.over-view-other-tabs > li i{
    color: #A1A5B7;
    font-size: 1.3em;
    margin-bottom: 10px;
    transition: all 0.4s;
}
.over-view-other-tabs > li:hover i,.over-view-other-tabs > li.active i{
    color:#009ef7;
}
.over-view-other-tabs > li.active{
    border-bottom-color: #009ef7;
    border-style: solid;
    box-shadow: 0 5px 11px -4px rgba(0, 0, 0,0.20);
}
.over-view-other-tabs > li:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 4px;
    background-color: #009ef7;
    bottom: 0;
    left: 0;
    transition: all 0.4s;
    transform: perspective(800px) rotateY(90deg);
}
.over-view-other-tabs > li.active:after{
    transform: perspective(800px) rotateY(0deg);
}
.over-view-other-tabs > li span{
    color:#3F4254;
    font-weight: 600;
    text-transform: capitalize;
}
.sidw-n-g{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    height:100%;
}
.sidw-n-g .ch-va-ng{
    width:50%;
}
.sidw-n-g .summary-info-detail-wrap{
    width:50%;
    max-height: 400px;
}
.sidw-n-g .summary-info-detail-wrap > li{
    width: calc(100% / 2.1);
    height: 105px;
    border-bottom: none;
    background-color: #f5f8fa;
    padding: 1rem;
    border-radius: 6px;
    margin: 0 11px 12px 0;
    flex-direction: column;
    justify-content: space-around;
    box-shadow: 2px 2px 1px 0 #efefef;
}
.sidw-n-g .summary-info-detail-wrap > li b{
    display: flex;
    flex-direction: row;
    font-size: 1.2em;
    color: #8086a3;
    align-items: center;
}
.sidw-n-g .summary-info-detail-wrap > li .list-body{
    overflow:visible !important;
    align-items: flex-start;
}
.sidw-n-g .summary-info-detail-wrap > li b .ng-vc-icon{
    width: 42px;
    height: 42px;
    border-radius: 25%;
    padding: 6px;
    font-size: 1.1em;
    margin-right: 10px;
    padding-top: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 1px 3px rgba(255, 255, 255,0.47) inset;
    color: #fff;
    margin-bottom: 18px;
}
.sidw-n-g .summary-info-detail-wrap.in-cus-2st > li b .ng-vc-icon{
    margin-bottom: 0;
}
.sidw-n-g .summary-info-detail-wrap > li b  i.cookiepedia-icon-fa{
    background-color: #fff;
    position: relative;
    -webkit-mask-size: 22px;
    mask-size: 22px;
    -webkit-mask-position: center;
    mask-position: center;
}
.sidw-n-g .summary-info-detail-wrap > li label.label{
    color: #607d8b!important;
    background-color: #eceff1 !important;
    font-size: 1.2em !important;
}

.sidw-n-g .summary-info-detail-wrap.in-cus-sm > li{
    width: calc(100% / 3.2);
    height: 56px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.sidw-n-g .summary-info-detail-wrap.in-cus-sm > li b .ng-vc-icon{
    margin-bottom: 0;
}
.sidw-n-g .summary-info-detail-wrap.in-cus-sm > li .list-body{
    align-items: center;
}
.sidw-n-g .summary-info-detail-wrap.in-cus-sm > li i{
    font-size:1.2em;
}
.sidw-n-g .summary-info-detail-wrap.in-cus-2st > li{
    width: 100% !important;
}
.sidw-n-g.sidw-n-g-full .summary-info-detail-wrap{
    width:100% !important;
}
.head-tb-question-btn{
    position: absolute;
    right: 0;
    top: calc(50% - 11px);
}
.rpf-list-wrap{
    list-style: none;
    padding:0;
    margin:0;

}
.rpf-list-wrap > li{
    width: calc(100% / 2.1);
    height: 100px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    float: left;
    margin: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 0.9em;
    position: relative;
    overflow:hidden;
    opacity: 0.7;
}
.rpf-list-wrap > li > i{
    margin-bottom: 15px;
    font-size: 1.1em;
    width: 32px;
    height: 32px;
    border: 2px solid;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(255, 255, 255,0.34);
    transition: all 0.4s;
}
.rpf-list-wrap > li > span{
    position: relative;
    z-index: 1;
}
.rpf-list-wrap > li .after-elm{
    height:100%;
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    z-index: 0;
    transform: perspective(600px) rotateX(-88deg) scale(1.1);
    transform-origin: bottom center;
    transition: all 0.4s;
}
.rpf-list-wrap > li:hover .after-elm{
    transform: perspective(600px) rotateX(-87deg) scale(1.1);
}
.rpf-list-wrap > li:hover i{
    transform: perspective(100px) rotateX(14deg);
    transform-origin: center;
    box-shadow: 0px 4px 4px -2px;
}
.rpf-list-wrap > li.active:hover i{
    transform: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255,0.34);
}
.rpf-list-wrap > li:hover{
    opacity: 1;
}
.rpf-list-wrap > li.active{
    color:#fff !important;
    opacity: 1;
}
.rpf-list-wrap > li.active .after-elm{
    transform: perspective(600px) rotateX(0deg) scale(1);
}
.over-view-other-tabs.o-v-o-t-vertical{
    padding: 0;
    margin: 0;
    height: 100%;
    box-shadow: -5px 0px 6px -3px #e3e3e3 inset;
    flex-direction: column;
    background-color: #f7f8fa;
}
.over-view-other-tabs.o-v-o-t-vertical > li{
    border: none !important;
    width:100%;
    height:105px;
    margin:0;
    box-shadow: none !important;
    border-radius: 0;
    border-bottom: 1px solid #efefef !important;
}
.over-view-other-tabs.o-v-o-t-vertical > li.active{
    background-color: #fff;
    width: 100%;
    flex-direction: row;
    align-items: center;
    padding-left: 2rem;
    box-shadow: -7px 0px 4px 0px #e3e3e3 !important;
}
.over-view-other-tabs.o-v-o-t-vertical > li i{
    font-size: 1.7em;
}
.over-view-other-tabs.o-v-o-t-vertical > li.active span{
    margin-left: 8px;
}
.over-view-other-tabs.o-v-o-t-vertical > li.active i{
    margin-bottom: 0;
}
.over-view-other-tabs.o-v-o-t-vertical > li:after{
    width: 4px;
    height: 100%;
}
.over-view-other-tabs.o-v-o-t-vertical > li:not(.active):hover{
    box-shadow: 0px 3px 4px -3px #dfdddd, 0px -3px 4px -3px #dfdddd !important;
}
.over-view-other-tabs.o-v-o-t-horizental{
    margin: 0;
    box-shadow: 0px -4px 6px -3px #e3e3e3 inset;
    flex-direction: row;
    background-color: #f7f8fa;
    width: 100%;
    padding: 10px 10px 0px 10px;
}
.over-view-other-tabs.o-v-o-t-horizental > li.active {
    background-color: #fff;
    align-items: center;
    border-radius: 6px 6px 0 0;
}
.over-view-other-tabs.o-v-o-t-horizental > li {
    min-width: 200px;
    border: none !important;
    height: 65px;
    margin: 0;
    box-shadow: none !important;
    border-radius: 0;
    align-items: center;
    flex-direction: row;
    border-right: 1px solid #efefef !important;
    animation: none !important;
}
.over-view-other-tabs.o-v-o-t-horizental > li:last-child{
    border-right: none !important;
}
.over-view-other-tabs.o-v-o-t-horizental > li i{
    margin-bottom: 0;
    margin-right: 10px;
}
.o-t-horizental-wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    margin: 0;
    justify-content: space-between;
}
.over-view-other-tabs.o-v-o-t-horizental > li:after{
    bottom:auto;
    top:0;
}
.vw-20 {
    max-width: 400px;
}
.w-verfy-action-wrap{
    position: relative;
}
.co-cu-btn-validation > ul{
    display: flex;
    flex-wrap: wrap;

}
.co-cu-btn-validation > ul > li{
    width: calc(100% / 3);
    float: left;
}
.cookie-script-title-wrap{
    display: flex;
    flex-direction: column;
    min-width: 100px;
    font-weight: 600;
    line-height: 1.2;
    padding-left: 5px;
    padding-right: 10px;
}
.modern-info-alert h6{
    line-height: 1.2;
}
.modern-info-alert ul{
    list-style: circle;
    padding: 0 16px;
    margin: 10px 0 0;
    font-size: 0.9em;
}
.modern-info-alert ul>li{
    margin-bottom: 0;

}
.licence-alert-wrap{
    background-color: #fffefb!important;
    border: none;
    color: #50546a!important;
    display: flex;
    align-items: center !important;
    font-weight: 500;
    border-radius:14px;
    font-size: 1.2em;
    border: none !important;
    box-shadow: 0px 0px 3px 2px rgba(165, 165, 165, 0.06);
    flex-direction: row;
}
.modern-info-alert.alert-warning{
    background-color: #fffef1!important;
    border: 1px dashed #f7bd00!important;
}
.licence-alert-wrap.lic-alert-danger-wrap{
    background-color: #fffbfb!important;
}
.modern-info-alert.lic-alert-danger-wrap .lc-icon-set > i{
    color: #ff2626;
}
.licence-alert-wrap.lic-alert-danger-wrap h6{
    text-transform: unset;
}
.modern-info-alert .lc-icon-set{
    display: flex;
    align-items: center;
    justify-content: center;
    height:100%;
    margin-right: 1rem;
}
.licence-alert-wrap ul{
    padding: 0;
}
.modern-info-alert .lc-icon-set > i{
    font-size: 3em;
    color:#ffa726;
}
.modern-info-alert .lc-detail-set{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.licence-alert-wrap h6{
    font-size:1.3em;
    text-transform: capitalize;
}
.license-overview-wrap .list-body{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.license-overview-wrap .list-body b{
    display: flex;
    flex-direction: row;
    font-size: 0.8em;
    color: #8086a3;
    align-items: center;
}
.license-overview-wrap .list-body b > span:last-child{
    display:flex;
    flex-direction: column;
    line-height: 1.1;
}
.license-overview-wrap .list-body .ng-vc-icon{
    width: 42px;
    min-width: 42px;
    height: 42px;
    border-radius: 25%;
    padding: 6px;
    font-size: 1.9em;
    margin-right: 6px;
    padding-top: 7px;
    display: flex;
    align-items: center;
    border:none;
    justify-content: center;
    color: #fff;
}
.lc-date-holder {
    font-size: 0.7em;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    margin-bottom: 3px;
    margin-top: 4px;
    color: #b3b6b9;
}
.license-overview-wrap .progress {
    height: 8px;
    font-size: 0.9em;
    border-radius: 6px;
    float:left;
    width: 100%;
}
.license-overview-wrap .label{
    display: inline-block;
    padding: 10px 12px;
    font-size: 75%;
    line-height: 1;
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    font-weight: bold;
    border-radius: 25px;
}
.license-overview-wrap .lblc-danger{
    background-color: rgba(240, 47, 47, 0.07);
    color: #f02f2f;
}
.license-overview-wrap .lblc-success {
    background-color: rgba(76, 175, 80, 0.07);
    color: #4caf50;
}
.license-overview-wrap .lblc-warning {
    background-color: rgba(255, 169, 5 , 0.07);
    color: #ffa905;
}
.license-overview-wrap .prc-sec-v:hover .percent-hanle-tooltip{
    font-size:0.8em !important;
    box-shadow: 0px 1px 3px 0px #6f6f6f !important;
    top:auto !important;
    width: 38px !important;
    height:38px !important;
}
.license-overview-wrap  .percent-hanle-tooltip{
    top:1rem;
}
.w-lic-box-cus{
    margin-top: 22px;
    height:100% !important;
}
.nested-tb .flex-label{
    margin-bottom: 5px;
    padding: 7px 12px;
    font-size: 0.88em;
    box-shadow: 1px 1px 1px 0px;
}
.nested-tb .license-overview-wrap .progress {
    overflow: visible;
}
.nested-tb .prc-sec-v .percent-hanle-tooltip,
.nested-tb .license-overview-wrap .prc-sec-v:hover .percent-hanle-tooltip{
    left: auto;
    right: -24px;
    color: #000;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em !important;
    box-shadow: unset !important;
    top: auto !important;
    bottom: -17px;
    width: 61px !important;
    height: auto !important;
    background-color: transparent;
}
.nested-tb .prc-sec-v .percent-hanle-tooltip:after{
    display: none !important;
}
.lc-assign-box-wrap .range-box-head-cus .dropdown-toggle.lang-cus{
    padding:14px !important;
}
.lc-assign-box-wrap .form-legent-syl .col-form-label{
    font-size:1em !important;
}
.lc-assign-box-wrap .form-legent-syl.fls-select-lic .col-form-label{
    margin-top: 4px !important;
}
.w-xxl-domain-main{
    width:400px;
}
.btn-add-grp-drp-b-archive {
    margin-top: 3px;
    height: 37px;
    padding: 10px;
    position: relative;
}
.btn-add-grp-drp-b-archive:hover,
.btn-add-grp-drp-b-archive.active{
    background-color: #bcaaa4 !important;
    color:#fff !important;
}
.btn-add-grp-drp-b-archive.active:after{
    position: absolute;
    content: "";
    height: 9px;
    width: 5px;
    border-bottom: 2px solid #4caf50;
    border-right: 2px solid #4caf50;
    transform: rotate(45deg);
    bottom: calc(100% - 3px);
    left: 16px;
}
.btn-add-grp-drp-b-archive.active:before{
    position: absolute;
    content: "";
    width: 18px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.42);
    border: 2px solid #b6a8a3;
    bottom: calc(100% - 8px);
    left: 9px;
    border-radius: 50%;
    backdrop-filter: blur(2px);
}
.licence-alert-wrap.lic-alert-info-wrap {
    background-color: #f6fdff!important;
}
.modern-info-alert.lic-alert-info-wrap .lc-icon-set > i {
    color: #2699ff;
}
.d-main-lcus i{
    display: none !important;
}

.dashboard-cards {
    position: relative;
    padding-bottom: 0;
    margin: 0 !important;
}
.dashboard-cards .card {
    background: #ffffff;
    display: inline-block;
    -webkit-perspective: 1000;
    perspective: 1000;
    z-index: 20;
    padding: 0 !important;
    margin: 0 0 5px 0;
    position: relative;
    text-align: left;
    z-index: 1;
    cursor: pointer;
    transition: all 0.3s ease-out;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    min-height: 65px;
}
.dashboard-cards .card.card-lagr  .card-title{
    padding:0;
    height:100%;
}
.dashboard-cards .card:hover {
    transition: all 0.3s ease-out;
    box-shadow: 0px 5px 8px -3px rgba(183 , 183 , 183 , 0.2);
}
.dashboard-cards .card:hover .card-title{
    /*top: -4px;*/
}
.dashboard-cards .card .card-title {
    background: #ffffff;
    padding: 5px 15px;
    position: relative;
    z-index: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 6px;
    min-height: 63px;
    display: flex;
    align-items: center;
}
.dashboard-cards .card .card-title h2 {
    font-size: 16px;
    letter-spacing: -0.05em;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #48566a;
    width: 55%;
    float: left;
}
.dashboard-cards .card .card-title .card-st-list ul{
    margin: 2px 0 !important;
    padding: 7px 0 !important;
}
.dashboard-cards .card .card-title .card-st-list ul li{
    padding: 5px 0;
    padding-left: 0;
    margin: 0 4rem 0 0;
    display: flex;
    border:none;
    position: relative;
    align-items: center;
}
.dashboard-cards .card .card-title .card-st-list ul li .label{
    font-size: .7em;
    font-weight: 500;
    padding: 3px 10px;
    display: flex;
    align-items: center;
    margin-right: 5px;
}
.dashboard-cards .card .card-title .card-st-list ul li small{
    font-weight: 400;
    margin:0;
    text-transform: capitalize;
    white-space: nowrap;
}
.dashboard-cards .card .card-title .status-txt-wrap{
    width: 100%;
    height:100%;
    float: left;
    padding: 14px 15px 2px;
}
.dashboard-cards .card .card-title .task-charts{
    width: 45%;
    float: left;
    padding-top: 10px;
}
.dashboard-cards .card .card-title .act-wrap{
    width:100%;
    float:left;
}
.dashboard-cards .card .card-title h2 small {
    display: block;
    font-size: 12px;
    margin-top: 2px;
    letter-spacing: -0.025em;
    color: #b3b3b3;
    font-weight: 500;
    white-space: nowrap;
}
.dashboard-cards .card .card-title h2 small > span{
    font-size: 1.7em;
    font-weight: 600;
}
.dashboard-cards .card .card-description {
    position: relative;
    font-size: 14px;
    border-top: 1px solid #f2f2f2;
    padding: 0 15px 0 15px;
    min-height: 42px;
    max-height: 168px;
    overflow: auto;
}
.dashboard-cards .card .card-actions {
    padding: 1px;
    text-align: center;
}
.dashboard-cards .card .card-flap {
    background: #d9d9d9;
    position: absolute;
    width: 100%;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
.dashboard-cards .card .flap1 {
    -webkit-transition: all 0.3s 0.3s ease-out;
    transition: all 0.3s 0.3s ease-out;
    z-index: -1;
}
.dashboard-cards .card .flap2 {
    -webkit-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    z-index: -2;
    border-top: 1px solid #ececec;
}
.dashboard-cards.showing .card {
    cursor: pointer;
    opacity: 0.6;
    /*    -webkit-transform: scale(0.88);
        transform: scale(0.88);*/
}
.dashboard-cards .no-touch .dashboard-cards.showing .card:hover {
    opacity: 0.94;
    -webkit-transform: scale(0.92);
    transform: scale(0.92);
}
.dashboard-cards .card.d-card-show {
    opacity: 1 !important;
    -webkit-transform: scale(1) !important;
    transform: scale(1) !important;
}
.dashboard-cards .card.d-card-show .card-flap {
    background: #ffffff;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.dashboard-cards .card.d-card-show .flap1 {
    -webkit-transition: all 0.3s 0s ease-out;
    transition: all 0.3s 0s ease-out;
    box-shadow: 0px 0px 8px -1px #ddd;
}
.dashboard-cards .card.d-card-show .flap2 {
    -webkit-transition: all 0.3s 0.2s ease-out;
    transition: all 0.3s 0.2s ease-out;
    box-shadow: 0px 5px 8px 0px #ddd;
}
.dashboard-cards .card .task-count {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: -8px;
    border-radius: 100%;
    color: #fff;
    font-weight: 600;
    transition: all .5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(3);
    font-size: 1.4em;
}
.dashboard-cards .card .task-count:after{
    position: absolute;
    content: '';
    width: 40px;
    height: 40px;
    top: 0;
    right: -1px;
    border-radius: 100%;
    transform: scale(1);
    background-color: rgba(225,225,225,0.3);
    backdrop-filter: blur(12px);
}

.dashboard-cards .list {
    padding: 0 !important;
    margin: 0 !important;
}
.dashboard-cards .list li {
    padding: 10px 0;
    padding-left: 10px;
    margin: 0;
    list-style-type: none;
    border-bottom: 1px dashed #eeeeee;
    transition: all .2s ease;
}
.dashboard-cards .list li:last-child{
    border-bottom: none;
}
.dashboard-cards .list li .list-body{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.dashboard-cards .list li span.label{
    font-size: .9em;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    background-color: #e57373;
}
.dashboard-cards.showing .card.d-card-show .task-count {
    transition: all .2s ease;
    transform: scale(3.5);
}
.dashboard-cards .card .task-count > i{
    transition: all 0.1s;
    font-size: 0.2em;
    margin-right: 1rem;
    margin-top: 0px;
    position: relative;
    z-index: 2;
}
.dashboard-cards.showing .card.d-card-show .task-count > i{
    transform: rotate(90deg);
    font-size: 0.2em;
    margin-top: 0 !important;
}
.dashboard-cards .card-actions .btn {
    color: #333;
    width: 100%;
    transition: all 0.5s;
}
.dashboard-cards .card-actions .btn:hover {
    color: #f36525;
}
.dashboard-cards .wi-float-icon{
    position: absolute;
    left: 0;
    top: -6px;
    font-size: 3.5em;
    opacity: 0.1;
    transform: rotate(20deg);
}
.dashboard-cards .lb-url-cus{
    display: flex;
}
.dashboard-cards .lb-url-cus .label{
    margin-top:6px;
}
.dashboard-cards .lb-url-cus > div{
    display: flex;
    flex-direction: column;
}
.pulsating-circle {
    position: relative;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-top: 0;
}
.pulsating-circle:before {
    content: "";
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 45px;
    background-color: #f3c111;
    -webkit-animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
.pulsating-circle:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f3c111;
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    -webkit-animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
    animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) -0.4s infinite;
}

@-webkit-keyframes pulse-ring {
    0% {
        transform: scale(0.03);
    }
    80%, 100% {
        opacity: 0;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.03);
    }
    80%, 100% {
        opacity: 0;
    }
}
@-webkit-keyframes pulse-dot {
    0% {
        transform: scale(0.6);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.6);
    }
}
@keyframes pulse-dot {
    0% {
        transform: scale(0.6);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.6);
    }
}
.dashboard-cards .card .task-count.success{
    top: 14px;
    font-size: 3em;
}
.btn-inline-popup-notify {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    transform: translateY(12px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
}
.select-btn-toolbox-wrap > .btn:hover + .btn-inline-popup-notify{
    transform: translateY(0px);
    visibility: visible;
    opacity: 1;
}
.btn-inline-popup-notify .alert{
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.18);
    position: relative;
    margin-bottom: 0 !important;
    min-width:320px;
}
.btn-inline-popup-notify .alert:after{
    position: absolute;
    width: 10px;
    height: 10px;
    content: '';
    background-color: inherit;
    transform: rotate(45deg);
    top: -5px;
    right: 7rem;
    box-shadow: -2px -1px 2px 0 rgba(0, 0, 0, 0.08);
}
.btn-inline-popup-notify .modern-info-alert .lc-icon-set{
    margin-right: 0 !important;
}
.btn-inline-popup-notify .modern-info-alert .lc-icon-set > i{
    font-size:1.5em !important;
}
.btn-inline-popup-notify .modern-info-alert ul>li{
    margin-top:6px;
    line-height: 1.4;
}
.headers-table-d-cust{
    max-height:260px;
    min-height:260px;
    overflow: auto;
}
.headers-table-d-cust .nested-tb > thead > tr > th{
    top:0;
}
.lic-capacity-summary-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0 14px;
    margin: 6px 0 6px;
    width: 50%;
}
.lic-capacity-summary-wrap > li{
    display: flex;
    flex-direction: row;
    line-height: 1;
    margin-bottom: 7px;
    border: 1px solid #f1f1f1;
    padding: 6px 1rem 6px 9px;
    min-width: 170px;
    border-radius: 25px;
    align-items: center;

}
.lic-capacity-summary-wrap > li > div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.lic-capacity-summary-wrap > li span{
    font-size: 1.3em !important;
    color: #575f72;
    margin-left: 10px;
}
.lic-capacity-summary-wrap > li i{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
    margin-right: 10px;
}
.lic-capacity-progress-wrap .progress-sm {
    height: 22px;
    font-size: 1.2em;
}
.lic-capacity-progress-wrap .prc-sec-v:hover .percent-hanle-tooltip{
    width:50px;
    height:50px;
}
.modern-info-alert ul>li > b{
    color:#000;
}
.w-al-cus-list > li{
    text-align: justify;
}
.bc-ico-align-f-start{
    align-items: flex-start !important;
}
.widget-fill-box{
    display: flex;
    flex-direction: column;
}
.widget-fill-box .box-header{
    height:190px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.widget-fill-box .box-header:after{
    position: absolute;
    content: '';
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    top: -140px;
    right: -120px;
    opacity: 0.6;
    box-shadow: 0 0 12px -2px rgba(0, 0, 0, 0.34) inset;
}
.widget-fill-box .box-header > h6{
    font-size: 1.3em;
    padding: 0;
}
.widget-fill-box .box-header > h6:last-child{
    font-size:1.6em;
}
.widget-fill-box .box-body{
    box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border-radius: 8px;
    margin:-100px 1.25rem 1.25rem;
    min-height: 200px;
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
}
.widget-fill-info-list{
    list-style: none;
    padding:0;
    margin:0;
    width:100%;
}
.widget-fill-info-list > li{
    width: 100%;
    float: left;
    display: flex;
    margin-bottom: 7px;
    border-bottom: 1px dashed #efefef;
    padding-bottom: 8px;
}
.widget-fill-info-list > li:last-child{
    border-bottom: none !important;
    margin-bottom: 0;
    padding-bottom: 0;
}
.ic-cover{
    position: relative;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    width:45px;
    height:45px;
    min-width:45px;
    background-color: #f1f1f1;
    color: #505260;
    font-size: 1.3em;
}
.widget-fill-info-list > li > div > span{
    color:#3F4254;
}
.widget-fill-info-list > li .info-even-info{
    width: 100%;
    display:flex;
    justify-content: space-around;
}
.widget-fill-info-list > li .info-even-info > div{
    display: flex;
    flex-direction: column;
    float: left;
    justify-content: center;
    min-width: 36%;
}
.ico-sp-pdd{
    padding: 1px 4px;
}
.gauge-chart-info-wrap {
    position: absolute;
    bottom: 26px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
}
.gauge-chart-info-wrap >  h6{
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 2px;
    padding:4px 10px;
    font-weight: 600;
    border-width: 1px;
    border-style:solid;
    font-size:0.9em;
}
.gauge-chart-info-wrap > div{
    width: 100%;
    display:flex;
    justify-content: space-between;
    position: relative;
    font-size: 1.3em;
    margin-bottom: 1rem;
}
.gauge-chart-info-wrap > div > span{
    display: flex;
    font-size: 1.2em;
    flex-direction: column;
    line-height: 1;
    align-items: center;
    color: #000;
    width: 40%;
    text-align: center;
}
.gauge-chart-info-wrap > div > span > small{
    font-size: 0.4em;
    opacity: 0.7;
}
.total-spend-content-wrap {
    background-color: #ededed;
    border-radius: 0 0 6px 6px;
    display: flex;
    box-shadow: 0px 4px 11px -7px #c7c7c7 inset;
    margin-top: 1rem;
}
.total-spend-wrap {
    font-size: 2em;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-transform: capitalize;
    color: #1a1a54;
    font-weight: 700;
}
.inf-r-side-w-t{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#ip-list:empty:after{
    position: relative;
    content: "Authorized IP Address Has Not Been Added.";
    width: 100%;
    height: 45px;
    background-color: #eff6ff;
    border: 1px dashed #89aff7;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #6fb5ff;
    opacity: 0.8;
}
.status-acc-user-wrap {
    display: flex;
    align-items: center;
    height: 100%;
}
.status-acc-user-wrap > span{
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.floating-app-overlapping-wrap.faow-history {
    position: relative;
    right: 0;
    top: 0;
}
.floating-app-overlapping-wrap.faow-history .cookiepedia-icon-fa{
    -webkit-mask-size: 18px;
    mask-size: 18px;
    -webkit-mask-position: center center;
}
.cookiepedia-icon-fa.white{
    background-color: #fff !important;
}
.floating-app-overlapping-wrap.faow-history ul.fa-overlap-list >li{
    font-size: 1em !important;

}
.status-acc-user-wrap.history-scan-status-type > span {
    padding: 6px 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    min-width: 120px;
}
.tb-detail-r-detail.ov-last-vis tbody tr td:last-child{
    overflow: visible;
}

.h-icon-head-tb i.cookiepedia-icon-fa{
    -webkit-mask-size: 19px;
    mask-size: 19px;
    -webkit-mask-position: center center;
    mask-position: center center;
}
.h-icon-head-tb i{
    width: 26px;
    height: 26px;
    margin-left: 0;
    font-size: 1.4em;
    box-shadow: 0 0 0 0 rgba(12, 16, 22, 0.27);
    padding-top: 0;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-drp-scan-title{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px 0 18px;
    font-size: 1.2em;
    font-weight: 600;
    position: relative;
    cursor: pointer;
    border-right: 1px solid #fff;
    color:#fff;
    border-radius: 0 6px 6px 0;
}
.main-drp-scan-title:after{
    position: absolute;
    content:"";
    width:8px;
    height:8px;
    border-bottom: 2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
    right:14px;
}
.scan-btn-drp-wrap{
    position: relative;
}
.scan-rs-wrap{
    position: absolute;
    display:flex;
    flex-direction: column;
    top: 100%;
    width: calc(100% + 50px);
    background-color: #fff;
    right: 0;
    box-shadow: 0px 3px 5px 0px rgba(0, 0 ,0 ,0.21);
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    padding: 4px 8px 4px 3px;
    border-radius: 6px;
    transition: opacity 0.3s,transform 0.4s;
}
.scan-btn-drp-wrap.active .scan-rs-wrap{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.scan-rs-wrap .btn{
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    margin: 2px 3px 2px;
    background-color: rgba(71,77,88,0.07);
    border-radius: 4px;
    color: #474d58 !important;
    font-size: .9em;
    font-weight: 600;
    transition: all 0.5s;
    position: relative;
}
.scan-rs-wrap .btn .inelm-tip-wrap{
    position: absolute;
    right: 5px;
    top: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid;
    cursor: help;
    color: #6eb4ff;
    opacity: 0.6;
    transition: all 0.4s;
}
.scan-rs-wrap .btn .inelm-tip-wrap:hover{
    opacity: 1;
}
.scan-rs-wrap .btn .inelm-tip-wrap > p{
    opacity: 0;
    visibility: hidden;
    background-color: #fff;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 0 10px 0 #ddd;
    transition: all 0.4s;
    right: 100%;
    max-width: 200px;
    min-width: 200px;
    position: absolute;
    height: auto;
    white-space: normal;
    z-index: 2;
    top: 0;
    text-align: left;
    color: #6e7591;
}
.scan-rs-wrap .btn .inelm-tip-wrap:hover > p{
    visibility: visible;
    opacity: 1;
}
.btn-banner-update-cus{
    padding: 4px 6px 6px;
    font-size: 1em;
    margin-top: 7px;
}
.sidw-n-g .summary-info-detail-wrap.technology-list-wrap{
    width:100% !important;
    padding :0 10px !important;
}
.sidw-n-g .summary-info-detail-wrap.technology-list-wrap > li{
    width:100%;
    padding: 0 10px;
    margin: 0 0 10px 0;
    height:60px;
    justify-content: center;
}
.sidw-n-g .summary-info-detail-wrap.technology-list-wrap > li b .ng-vc-icon{
    margin-bottom: 0 !important;
}
.sidw-n-g .summary-info-detail-wrap.technology-list-wrap > li .list-body{
    align-items: center !important;

}
.sidw-n-g .summary-info-detail-wrap.technology-list-wrap > li:last-child{
    margin-bottom: 0 !important;
}

.sidw-n-g .summary-info-detail-wrap.ov-tags-list-wrap{
    padding-right:0;
    justify-content: space-between;
    align-content: center;
    padding: 2.8rem 10px;
}
.sidw-n-g .summary-info-detail-wrap.in-cus-sm.ov-tags-list-wrap > li {
    width: calc(100% / 2.08);
    height: 44px;
    padding: 0 6px 0 0;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-right: 0;
    margin-bottom: 8px;
    overflow:hidden;
}
.sidw-n-g .summary-info-detail-wrap.in-cus-sm.ov-tags-list-wrap > li b .ng-vc-icon{
    width:40px;
    height:48px;
    border-radius: 25% 0 0 25%;
    padding:6px;
    margin-right: 6px;
    box-shadow: -4px 0 3px -3px rgba(0, 0, 0, 0.20) inset;
}
.ove-forms-widget-wrap.sidw-n-g .summary-info-detail-wrap{
    width:100%;
    align-content: center;
}
.ove-forms-widget-wrap.sidw-n-g .summary-info-detail-wrap > li{
    height:92px;
    padding:10px 1rem;
}
.bg-crawler-wrap{
    background-image: url(../../images/crawler-vector.svg);
    background-repeat: no-repeat;
    width: 50%;
    height: 100px;
    background-size: 225px;
    background-position: center right -1rem;
    position: relative;
}
.crawler-scan-status-wrap .list-body b{
    display: flex;
    flex-direction: column;
    font-size: 1em;
    color: #fff;
    align-items: flex-start;
    width: 50%;
}
span.ls-cgeck-wrap {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    font-size: 0.8em;
    font-weight: 600;
    align-items: center;
}
.pulse-op-elm{
    animation: pulse-opacity 800ms ease-out infinite;
}


@-webkit-keyframes pulse-opacity {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0.6;
    }
}
@keyframes pulse-opacity {
    0% {
        opacity: 0.6;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0.6;
    }
}
.scanning-mode-wrap{
    position: relative;
}
.scanning-mode-wrap .btn {
    padding: 5px 6px;
    font-size: 1.2em;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.script-tab-list-wrap {
    background: #5192cb;
    padding: 5px 10px;
    border-radius: 0;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    box-shadow: 36px 0px 30px -20px rgba(15, 57, 94,0.44) inset;
    transform: perspective(500px) rotateX(0deg);
    transition: all 0.4s;
    display:flex;
    align-items: center;
}
.stlw-ab-test-wrap.script-tab-list-wrap{
    background: #959b9a;
    box-shadow: none;
}
.stlw-ab-test-wrap.script-tab-list-wrap.active{
    background: #51cbb5;
    transform: perspective(500px) rotateX(0deg);
}
.script-tab-list-wrap.active{
    transform: perspective(500px) rotateX(360deg);
}
.script-tab-list-wrap:hover{
    opacity: 0.8;
}
.lbl-w-switch-wrap {
    display: flex;
    align-items: center;
}
.lbl-w-switch-wrap button {
    font-size: 0.9em;
    padding: 5px 10px !important;
    font-weight: 600;
    background-color: #ededed;
}


.shorten-link-dashboard-banner > div:last-child{
    width:100%;
    margin-right: 2rem;
}
.qrcode-link-dashboard-banner > div:last-child{
    width:40%;
    max-width: 240px;
}
.shorten-link-dashboard-banner.sldb-custom-wrap{
    background-color: #3f51b5 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}
.shorten-link-dashboard-banner h6{
    font-size: 2em;
    text-transform: capitalize;
    font-weight: 600;
    color:#fff;
    text-shadow: 2px 2px 0px rgba(0, 59, 118, 0.56);
    white-space: nowrap;
}
.shorten-link-dashboard-banner.sldb-custom-wrap p {
    font-size: 1.2em;
    color: #84a5ff;
}
.shorten-link-dashboard-banner p{
    font-size: 1.2em;
    color: #99d5ff;
}

.shorten-link-dashboard-banner .pdb-l-side{
    padding: 0rem 0 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.toolbar-button-wrapper.tbw-scroll-wrap {
    float: left;
    padding: 0;
    flex-direction: revert;
    margin-right: 0;
    margin-left: 0;
    height: 56px;
    display: flex;
    min-width: 300px;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
.toolbar-button-wrapper.tbw-scroll-wrap .range-box-head-cus.drp-b-h-cus{
    height: 100%;
    max-width: 300px;
    margin-left: -1rem;
}
.toolbar-button-wrapper.tbw-scroll-wrap .range-box-head-cus .dropdown-toggle.lang-cus {
    border: none;
    height: 100%;
    border-radius: 0;
    justify-content: space-between;
    align-items: center;
    background-color: #dfdfdf;
}
.toolbar-button-wrapper.tbw-scroll-wrap .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span{
    line-height: 2;
}
.toolbar-button-wrapper.tbw-scroll-wrap .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span i{
    color: #00d2ff;
    font-size: 1.2em;
    margin: 0 10px;
    position: relative;
    top: 3px;
}
.toolbar-button-wrapper.tbw-scroll-wrap .range-box-head-cus .dropdown-toggle.lang-cus:after{
    margin-top: -2px;
}
.toolbar-button-wrapper.tbw-scroll-wrap .range-box-head-cus .dropdown-menu{
    left: 12px;
    right: auto;
}
.toolbar-button-wrapper.tbw-scroll-wrap .range-box-head-cus.drp-b-h-cus .dropdown-menu .dropdown-item{
    line-height: 2;
    font-size: 1.1em;
}
.toolbar-button-wrapper.tbw-scroll-wrap button{
    border-right: 1px solid #eeeeee !important;
    border-left: none;
    margin-right: -1rem;
}
.cookie-main-menu-ico{
    display: flex;
    margin-top:-9px;
    background-color:#fff;
    width: 28px;
    height: 30px;
    -webkit-mask-size: 18px;
    mask-size: 18px;
    -webkit-mask-position: left 5px center;
    mask-position: left 5px center;
}
.folded .nav-stacked-rounded .nav > li > a .cookie-main-menu-ico {
    width: 40px;
    height: 30px;
    -webkit-mask-position: center ;
    mask-position: center;
}
.hr-nav .nav-stacked .nav > li > a .cookie-main-menu-ico{
    margin-top:-4px;
}
.iwt-nowrap-ov{
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.script-tb-nst-wrap .nested-tb > tbody > tr > td:first-child{
    padding:0;
}
.lbl-script-cus-fill{
    height:100%;
}
.lbl-script-cus-fill .lb-w-arrow-r {
    height:100%;
    width:100%;
    border-radius: 0 2px 2px 0;
    font-size:1.4em;
}
.lbl-script-cus-fill .lb-w-arrow-r:after {
    width:14px !important;
    height:14px !important;
    right:-7px !important;
}

.script-tb-nst-wrap .nested-tb > tbody > tr:nth-child(odd) td .lbl-script-cus-fill .lb-w-arrow-r:after{
    background-color: #fbfbfb;
}
.script-tb-nst-wrap .nested-tb > tbody > tr td .lbl-script-cus-fill .lb-w-arrow-r:after{
    background-color: #fff;
}
.brw-arch-icon-btn{
    background-color: #bcaaa4 !important;
    color: #494040 !important;
}
.toolbar-button-wrapper > button {
    margin-right: 0;
    transition: all 0.2s;
    background-color: #fff;
    line-height: 2.3;
    overflow: visible !important;
    border: none;
    height: 100%;
    display: flex;
    align-items: center;
    width: 54px;
    border-right: 1px solid #eeeeee !important;
    border-radius: 0;
    box-shadow: 0 0 0 0 #9f9f9f inset !important;
}
.toolbar-button-wrapper {
    float: right;
    padding: 0;
    flex-direction: row-reverse;
    /*margin-right: -1rem;*/
    height: 56px;
    display: flex;
    align-items: center;
}
.toolbar-button-wrapper > button:hover, .toolbar-button-wrapper .zoom-btn-wrap > button:hover {
    box-shadow: 0px -15px 14px -16px #9f9f9f inset !important;
    z-index: 999;
}
.toolbar-button-wrapper > button{
    z-index: 99;
}
.toolbar-button-wrapper > button:hover i{
    transform: perspective(800px) translateY(-4px);
    transform-origin: center top;
}
.toolbar-button-wrapper > button > i {
    transition: all 0.4s;
}
.toolbar-button-wrapper > button > .item-tooltip.bottom.sm {
    right: 4px;
}
.toolbar-button-wrapper > button > .item-tooltip.bottom.sm:after {
    left: auto !important;
    right: 20px;
}
.toolbar-button-wrapper.tbw-scroll-wrap > .item-element{
    margin-right: -2rem;
}
/*Limited Sections Style */
.pkg--limited {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    padding-left: 16px !important;
}
.pkg--update-overly-frame{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.03);
    z-index: 10;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

.pkg--update-overly-frame > div{
    visibility: hidden;
    transition:all 0.4s;
    transform: rotateX(90deg);
    opacity:0;
    background-color: #2196f3;
    border-radius: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:10px 16px;
    color:#fff;
}
.pkg--update-overly-frame > div:after{
    position: absolute;
    content: '';
    width: 11px;
    height: 18px;
    transform: rotate(6deg);
    background-color: #2196f3;
    right: -4px;
    top: 3px;
    border-radius: 16px 2px 29px 0px;
}
.pkg--update-overly-frame > span > i,
.pkg--limited > span  i{
    box-shadow: unset !important;
}
.pkg--limited:hover > span > div{
    transform: perspective(700px) rotateY(0deg) !important;
    transform-origin: right center;
}
.pkg--update-overly-frame > span{
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #2196f3;
    position: absolute;
    right: 10px;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.45) inset;
    color: #fff;
}
.pkg--update-overly-frame.puof-plt > span{
    right:4px;
    top:4px;
}
.pkg--limited_acci .pkg--update-overly-frame.puof-plt > div {
    width: 100%;
    right: 2rem;
}
.pkg--update-overly-frame > span:hover + div{
    visibility: visible;
    opacity:1;
    transform: rotateX(0deg);
}
/*modal la ng*/
.pkg--limited_mlng {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1rem;
    padding-top: 0;
    margin:0;
    margin-top:15px;
}
.pkg--limited_mlng .pkg--update-overly-frame{
    z-index: 999999999;
}
.tcsw-content-items .pkg--limited_mlng:first-child{
    margin-top:0;
}
.pkg--limited_mlng .col-form-label + div{
    height: 100%;
    position: initial;
}
.pkg--limited_mlng .col-form-label{
    display: none;
}
.pkg--limited_mlng .col-form-label + div > div{
    padding-left: 5px;
}
.pkg--limited_mlng .pkg--update-overly-frame > div{
    width: 75%;
    padding: 4px 16px;
    visibility: visible;
    opacity: 1;
    transform: rotateX(0deg);
}
.pkg--limited_mlng .pkg--update-overly-frame > div:after{
    transform: rotate(54deg);
    top: 7px;
    border-radius: 16px 2px 12px 0;
}
/*Checkbox*/
.pkg--limited_rdi {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1rem;
    padding-top: 1rem;
    margin:0;
    margin-top:15px;
}
.pkg--limited_scan-rdi {
    position: relative;
    /*    background-color: #f6fafb !important;
        color: #263238 !important;*/
    margin:0;
    padding:0;
}
.pkg--limited_scan-rdi .pkg--update-overly-frame > div{
    right: 67%;
    top: calc(100% - 2px);
}
.pkg--limited_scan-rdi  .pkg--update-overly-frame > div:after {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background-color: #2196f3;
    right: 17px;
    top: -4px;
    border-radius: 2px;
}
.pkg--limited_scan-rdi .pkg--update-overly-frame{
    padding: 0 2rem 0 0;
}
.pkg--limited_scan-rdi .pkg--update-overly-frame > span{
    background-color: #ffffff;
    color: #2196f3;
}
.b-lic-chart-wrap .gauge-chart-info-wrap {
    position: absolute;
    bottom: -29px;
    width: 100%;
}
.b-lic-chart-wrap .gauge-chart-info-wrap > div {
    width: 100%;
    display: flex;
    position: relative;
    font-size: 1em;
    margin-bottom: 0;
}
.b-lic-chart-wrap .gauge-chart-info-wrap >  h6 {
    margin-bottom: 1px;
    padding: 2px 6px;
    font-size: 0.7em;
}
.b-lic-chart-wrap .gauge-chart-info-wrap > div > span > small {
    font-size: 0.6em;
}
.tcsw-content-items .pkg--limited_rdi:first-child{
    margin-top:0;
}
.pkg--limited_rdi .col-form-label + div{
    height: 100%;
    position: initial;
}
.pkg--limited_rdi .col-form-label{
    display: none;
}
.pkg--limited_rdi.pkg-w-lbl-rdi .col-form-label{
    display: block;
}
.pkg--limited_rdi .col-form-label + div > div{
    padding-left: 5px;
}
.pkg--limited_rdi .pkg--update-overly-frame > div{
    width: 75%;
    padding: 4px 16px;
}
.pkg--limited_rdi .pkg--update-overly-frame > div:after{
    transform: rotate(54deg);
    top: 7px;
    border-radius: 16px 2px 12px 0;
}
/*accardion Items*/
.pkg--limited_acci {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin:0;
}
.tcsw-content-items .pkg--limited_acci:first-child{
    margin-top:0;
}
.pkg--limited_acci .col-form-label + div{
    height: 100%;
    position: initial;
}
.pkg--limited_acci .col-form-label{
    display: none;
}
.pkg--limited_acci.pkg-w-lbl-rdi .col-form-label{
    display: block;
}
.pkg--limited_acci .col-form-label + div > div{
    padding-left: 5px;
}
.pkg--limited_acci .pkg--update-overly-frame > div{
    width: 75%;
    padding: 4px 16px;
}
.pkg--limited_acci .pkg--update-overly-frame > div:after{
    transform: rotate(54deg);
    top: 7px;
    border-radius: 16px 2px 12px 0;
}
.pkg--limited_acci .info-inpt-tooltip-i{
    display: none;
}
/*content Live tab Items*/
.pkg--limited_lvtab {
    position: relative;
    color: #263238 !important;
    margin:0;
}
.pkg--limited_lvtab .pkg--update-overly-frame{
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background-color:rgba(0, 0, 0, 0.33);
}
.pkg--limited_lvtab.pll-inner-lvtab {
    background-color: #f6fafb !important;
}
.pkg--limited_lvtab.pll-inner-lvtab .pkg--update-overly-frame{
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background-color:rgba(0, 0, 0, 0.33);
}
.pkg--limited_lvtab .pkg--update-overly-frame > span{
    top:15px;
}
.tcsw-content-items .pkg--limited_lvtab:first-child{
    margin-top:0;
}
.pkg--limited_lvtab .col-form-label + div{
    height: 100%;
    position: initial;
}
.pkg--limited_lvtab .col-form-label{
    display: none;
}
.pkg--limited_lvtab.pkg-w-lbl-rdi .col-form-label{
    display: block;
}
.pkg--limited_lvtab .col-form-label + div > div{
    padding-left: 5px;
}
.pkg--limited_lvtab .pkg--update-overly-frame > div{
    visibility: visible;
    transition: all 0.4s;
    transform: rotateX(0deg);
    opacity: 0.8;
    border: 1px solid #2196f3;
    border-radius: 7px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    color: #2196f3;
    background-color: #fff;
}
.pkg--limited_lvtab .pkg--update-overly-frame > div:after{
    display: none !important;
}
.pkg--limited_lvtab .info-inpt-tooltip-i{
    display: none;
}
/*Inputs*/
.pkg--limited_inpt {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1rem;
    margin:0;
}
.tcsw-content-items .pkg--limited_inpt:first-child{
    margin-top:0;
}
.pkg--limited_inpt .col-form-label + div{
    height: 100%;
    position: initial;
}
.pkg--limited_inpt .col-form-label + div > div{
    padding-left: 5px;
}
.pkg--limited_inpt .pkg--update-overly-frame > div{
    width: 75%;
    padding: 4px 16px;
}
.pkg--limited_inpt .pkg--update-overly-frame > div:after{
    transform: rotate(54deg);
    top: 7px;
    border-radius: 16px 2px 12px 0;
}
/*Exports*/
.pkg--limited_footer {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    height: 50px;
    padding: 0 !important;
}
.pkg--limited_footer .pkg--update-overly-frame{
    justify-content: flex-start;
}
.pkg--limited_footer .pkg--update-overly-frame > span{
    position: relative;
    right: 0;
    top: 0;
    margin-left:1rem;
    cursor: not-allowed;
}
.tcsw-content-items .pkg--limited_footer:first-child{
    margin-top:0;
}
.pkg--limited_footer .col-form-label + div{
    height: 100%;
    position: initial;
}
.pkg--limited_footer .col-form-label + div > div{
    padding-left: 5px;
}
.pkg--limited_footer .pkg--update-overly-frame > div{
    width: 95%;
    padding: 4px 10px;
    visibility: visible;
    opacity: 1;
    justify-content: flex-start;
    transform: rotateX(0deg);
    color: #2196f3;
    background-color: transparent;
}
.pkg--limited_footer .pkg--update-overly-frame > div:after{
    display: none !important;
}
.pkg--limited_footer > div[data-current]{
    position: relative;
    z-index: 9;
    margin-right: 10px;
}
/*Tabs*/
.pkg--limited_tabs {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1rem;
    margin:0;
}
.pkg--limited_tabs .pkg--update-overly-frame >  span{
    width: 18px;
    height: 18px;
    right: 5px;
    top: -6px;
    font-size: 0.8em;
    color: #2196f3;
    background-color:#eef2f3;
}
.pkg--limited_tabs .pkg--update-overly-frame > span > i {
    margin:0 !important;
}
.pkg--limited_tabs .pkg--update-overly-frame > div{
    width: 175px;
    position: absolute;
    padding: 4px 10px;
    bottom: calc(100% + 12px);
    right: -10px;
}
.pkg--limited_tabs .pkg--update-overly-frame > div:after{
    transform: rotate(45deg);
    top: auto;
    bottom: -5px;
    border-radius: 2px;
    right: 1.2rem;
    width: 10px;
    height: 10px;
}
.nav-active-border .nav-link.pkg--limited_tabs:hover:before{
    border-bottom-color: transparent !important;
}
/*trigger*/
.pkg--limited_trigger {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
    margin:0;
}
.pkg--limited_trigger .pkg--update-overly-frame >  span{
    width: 18px;
    height: 18px;
    right: 5px;
    top: -6px;
    font-size: 0.8em;
    color: #2196f3;
    background-color:#eef2f3;
}
.pkg--limited_trigger .pkg--update-overly-frame > span > i {
    margin:0 !important;
}
.pkg--limited_trigger .pkg--update-overly-frame > div{
    width: auto;
    position: absolute;
    padding: 4px 10px;
    bottom: 0;
    left: 100%;
    border-radius: 5px;
    white-space: nowrap;
}
.pkg--limited_trigger .pkg--update-overly-frame > div:after{
    transform: rotate(45deg);
    top: 2px;
    bottom: 0;
    border-radius: 2px;
    left: -2px;
    width: 10px;
    height: 10px;
}
.nav-active-border .nav-link.pkg--limited_trigger:hover:before{
    border-bottom-color: transparent !important;
}
/*Bar*/
.pkg--limited_bars {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 1rem;
    margin:0;
}
.pkg--limited_bars .pkg--update-overly-frame {
    z-index: 9999;
}
.pkg--limited_bars .pkg--update-overly-frame:hover > div {
    visibility: visible;
    opacity: 1;
    transform: rotateX(0deg);
}
.pkg--limited_bars .pkg--update-overly-frame >  span{
    width: 18px;
    height: 18px;
    right: calc(50% - 11px);
    top: calc(100% - 8px);
    font-size: 0.8em;
    color: #2196f3;
    background-color: #eef2f3;
}
.pkg--limited_bars .pkg--update-overly-frame > span > i {
    margin:0 !important;
}
.pkg--limited_bars .pkg--update-overly-frame > div{
    width: 175px;
    position: absolute;
    padding: 4px 10px;
    top: calc(100% + 2px);
    right: -2px;
    font-size: 0.8em;
}
.pkg--limited_bars .pkg--update-overly-frame > div:after{
    transform: rotate(45deg);
    top: auto;
    top: -5px;
    border-radius: 2px;
    right: 1.3rem;
    width: 10px;
    height: 10px;
}
.nav-active-border .nav-link.pkg--limited_bars:hover:before{
    border-bottom-color: transparent !important;
}
/*cookie expt btn*/
.pkg--limited_expbtn {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
    margin:0;
}
.pkg--limited_expbtn > .btn {
    color: #fff;
    border-radius: 0 !important;
    border-right: 1px solid #147ed3;
    font-size: 1.1em;
    height:100%;
}
.pkg--limited_expbtn .pkg--update-overly-frame >  span{
    width: 18px;
    height: 18px;
    right: 5px;
    top: -6px;
    font-size: 0.8em;
    color: #2196f3;
    background-color:#eef2f3;
}
.pkg--limited_expbtn .pkg--update-overly-frame > span > i {
    margin:0 !important;
}
.pkg--limited_expbtn .pkg--update-overly-frame > div{
    width: 175px;
    position: absolute;
    padding: 4px 10px;
    top: 15px;
    box-shadow: 0 1px 6px -3px #000;
    right: 2px;
    border-radius: 4px;
}
.pkg--limited_expbtn .pkg--update-overly-frame > div:after{
    transform: rotate(45deg);
    top: -4px;
    bottom: auto;
    border-radius: 2px;
    right: 7px;
    width: 10px;
    height: 10px;
}

.pkg--limited_drpdwn {
    position: relative;
}
.bh-right-drp .range-box-head-cus .dropdown-menu .dropdown-item.pkg--limited_drpdwn:hover{
    background-color: rgba(71,77,88,0.07) !important;
}
.bh-right-drp .range-box-head-cus .dropdown-menu .dropdown-item.pkg--limited_drpdwn:hover i{
    color: #008eff !important;
}
.pkg--limited_drpdwn > span{
    color: #aaabad !important;
}
.pkg--limited_drpdwn > span:after{
    position: absolute;
    content:'';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.08);
    z-index: 2;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
.pkg--limited_drpdwn > span > i{
    position: relative;
    z-index: 4;
    color: #008eff;
}
/*dashboard Limited*/
.pkg--limited_widget{
    position: relative;
    background-color: #f6fafb !important;
}
.pkg--update-overly-widget{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.03);
    z-index: 2;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    padding: 0 3rem;
    text-align: center;
}
.pkg--update-overly-widget > div{
    visibility: visible;
    transition: all 0.4s;
    transform: rotateX(0deg);
    opacity: 0.8;
    border: 1px solid #2196f3;
    border-radius: 7px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    color: #2196f3;
    background-color: #fff;
}
.pkg--update-overly-widget > div:after{
    position: absolute;
    content: '';
    width: 11px;
    height: 18px;
    transform: rotate(6deg);
    background-color: #2196f3;
    right: -4px;
    top: 3px;
    border-radius: 16px 2px 29px 0px;
    display:none;
}
.pkg--update-overly-widget > span > i,
.pkg--limited > span  i{
    box-shadow: unset !important;
}
.pkg--limited:hover > span > div{
    transform: perspective(700px) rotateY(0deg) !important;
    transform-origin: right center;
}
.pkg--update-overly-widget > span{
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #2196f3;
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.45) inset;
    color: #fff;
}
.pkg--update-overly-widget > span:hover + div,
.pkg--update-overly-widget:hover > span + div{
    visibility: visible;
    opacity:1;
    transform: rotateX(0deg);
}
/*dashboard Limited END*/
/*Limited Section Style END*/
.browser-mockup >  .title-b-wrap.live-preview-mode:before{
    content: "";
    display: block;
    position: absolute;
    top: 9px;
    left: 10px;
    width: 12px;
    height: 12px;
    background: #d36464;
    border-radius: 50%;
    z-index: 0;
    animation: grow 1s ease-in-out infinite;
}
@keyframes grow{
    0%{
        transform: scale(1,1);
        opacity: 1;
    }
    100%{
        transform: scale(1.8,1.8);
        opacity: 0;
    }
}
.browser-mockup >  .title-b-wrap.live-preview-mode:after{
    background-color: #d36464;
}
.fixed-cookie-banner-act-wrap{
    height: 64px;
}
.fixed-cookie-banner-act-wrap ul.sidebar-grp-btn-wrap{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: fixed;
    top: auto;
    left: auto;
    width: 23.59%;
    z-index: 999;
    margin-left: 0;
    border-radius: 4px;
    margin-right: 0;
    border: 1px dotted #f1f1f1;
    margin-top: 0rem;
    outline: 6px solid rgba(255, 255, 255, 0.89);
    background-color: rgba(255, 255, 255, 0.83);
    box-shadow: 0px -10px 0px 6px rgb(246, 250, 251), 0 2px 7px 3px rgba(0,0,0,.1)!important;
}
.scan-coockie-detail-wrap {
    /*    z-index: 9999;
        position: relative;*/
}
.tab-content-settings-wrap .tcsw-content-wrap .minicolors-theme-bootstrap .minicolors-input{
    border-color: #ecf1fd;
    cursor: pointer;
}
.tab-content-settings-wrap .tcsw-content-wrap .minicolors-theme-bootstrap .minicolors-swatch:after{
    background-color: #ecf1fd;
}
.tab-content-settings-wrap .tcsw-content-wrap .minicolors-theme-bootstrap .minicolors-swatch{
    cursor: pointer;
}
.tab-content-settings-wrap .tcsw-content-wrap .input-number-wrap .input-number{
    border-color: #ecf1fd;
}


/*Form Group help tooltip*/
.info-inpt-tooltip-i{
    position: relative;
    display: flex;
    align-items: center;
}
.info-inpt-tooltip-i > div{
    visibility: hidden;
    transition: all 0.4s;
    transform: rotateX(90deg);
    opacity: 0;
    background-color: #2196f3;
    border-radius: 10px;
    position: absolute;
    padding: 6px 10px;
    color: #fff;
    width: 150px;
    left: calc(100% + 5px);
    top: -3px;
    z-index: 222;
}
.info-inpt-tooltip-i > div:after{
    position: absolute;
    content: '';
    width: 12px;
    height: 18px;
    transform: rotate(15deg);
    background-color: #2196f3;
    left: -2px;
    top: 2px;
    border-radius: 33px 2px 29px 0;
}

.info-inpt-tooltip-i > span{
    cursor: pointer;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #eef2f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em;
    margin-left: 6px;
    box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.45) inset;
    color: #2196f3;
}
.info-inpt-tooltip-i > span:hover + div{
    visibility: visible;
    opacity:1;
    transform: rotateX(0deg);
}
/*Form Group help tooltip end*/
.lbl-cus-script-status{
    text-transform: uppercase;
    width: 50px;
    padding: 0 2px 0 13px;
    border-radius: 4px;
    text-align: center;
    font-size: 0.8em;
    position: relative;
}
.lbl-cus-script-status:after{
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: 5px;
    background-color: #62b366;
    top: calc(50% - 3px);
}
.lbl-cus-script-status:before {
    content: "";
    display: block;
    position: absolute;
    left: 4px;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    background: #62b366;
    border-radius: 50%;
    z-index: 0;
    animation: grow 1.3s ease-in-out infinite;
}
/*script save popup*/
.script-start-build-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 260px;
}
.script-start-build-wrap > div {
    width: 80%;
}
.script-start-build-wrap > div.isb-title-wrap {
    margin: 2rem 0;
}
.script-start-build-wrap > div.isb-title-wrap h3 {
    font-weight: 600;
    color: #1d375f;
    margin-bottom: 4px;
    display: flex;
}
.script-start-build-wrap > div.isb-title-wrap h3 > i {
    border: 2px solid #b1b8c1;
    display: flex;
    color: #b1b8c1;
    align-items: center;
    justify-content: center;
    font-size: 0.5em;
    width: 32px;
    border-radius: 50%;
    height: 32px;
    padding-right: 3px;
    padding-top: 2px;
    transition: all 0.5s;
    cursor: pointer;
    display: none;
}
.script-start-build-wrap > div.isb-title-wrap h3 > i.active {
    display: flex;
}
.script-start-build-wrap > div.isb-title-wrap h3 > i:hover {
    background-color: #1d375f;
    color: #fff;
    border-color: #1d375f;
}
.script-start-build-wrap > div.isb-title-wrap p {
    font-size: 1.2em;
    color: #868686;
}
.script-start-build-wrap .inner-start-build-list {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    min-height:140px;
}
.script-start-build-wrap .inner-start-build-list.active{
    min-height: 40px;
}
.script-start-build-wrap .inner-start-build-list.active li{
    padding:0;
}
.script-start-build-wrap .inner-start-build-list.active li:hover{
    margin-top: 0 !important;
}
.script-start-build-wrap .inner-start-build-list.active li.active .item-thumb-frame{
    background-color: #3F51B5;
    border-color: #3F51B5;
    box-shadow: unset;
    opacity: 1;
}
.script-start-build-wrap .inner-start-build-list.active li.active .item-thumb-frame > i{
    color:#fff;
    border:1px solid #fff;
}
.script-start-build-wrap .inner-start-build-list.active li.active .item-thumb-frame > h3{
    color:#fff;
}
.script-start-build-wrap .inner-start-build-list.active li .item-thumb-frame{
    height:56px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding:0 6px;
    opacity: 0.7;
}
.script-start-build-wrap .inner-start-build-list.active li .item-thumb-frame > i{
    font-size: 1.3em;
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin-right: 7px;
    min-height: 36px;
}
.script-start-build-wrap .inner-start-build-list.active li .item-thumb-frame > h3{
    font-size:0.9em;
}
.script-start-build-wrap .inner-start-build-list li {
    padding: 10px;
    margin: 0 4px;
    width: 230px;
    transition: all 0.5s;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-40px);
    position: relative;
    -webkit-animation: formItem ease-in 1;
    -moz-animation: formItem ease-in 1;
    animation: formItem ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    animation-duration: 0.7s;
}
.script-start-build-wrap .inner-start-build-list li:nth-child(1) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.script-start-build-wrap .inner-start-build-list li:nth-child(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.script-start-build-wrap .inner-start-build-list li:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.script-start-build-wrap .inner-start-build-list li .item-thumb-frame {
    width: 100%;
    height: 100px;
    background-color: #ebebeb;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 0;
    border: 2px solid transparent;
    transition: all 0.5s;
    border-radius: 4px;
    position: relative;
    flex-direction: column;
    padding: 1rem;
}
.script-start-build-wrap .inner-start-build-list li .item-thumb-frame i {
    font-size: 1.5em;
    color: #fff;
    transition: all 0.5s;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border-radius: 50%;
    background-color: #3F51B5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.script-start-build-wrap .inner-start-build-list li .item-thumb-frame img {
    width: 60%;
    -webkit-filter: drop-shadow(2px 2px 3px #c9c9c9);
    filter: drop-shadow(2px 2px 3px #c9c9c9);
}
.script-start-build-wrap .inner-start-build-list li h3 {
    font-size: 1.1em;
    margin-top: 10px;
    padding-left:2px;
    font-weight: 600;
    color: #1d375f;
    transition: all 0.5s;
}
.script-start-build-wrap .inner-start-build-list li p {
    font-size: 0.9em;
    font-weight: 500;
    color: #636363;
    transition: all 0.5s;
}
.script-start-build-wrap .inner-start-build-list li:hover {
    margin-top: -10px;
}
.script-start-build-wrap .inner-start-build-list li:hover .item-thumb-frame {
    border-color: #3F51B5;
    box-shadow: 0 0 8px 2px rgba(63, 81, 181, 0.25);
    opacity: 1;
}
.script-start-build-wrap .inner-start-build-list li:hover h3 {
    color: #3F51B5;
}

@-webkit-keyframes formItem {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@-moz-keyframes formItem {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes formItem {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.script-tab-main-wrap{
    overflow:hidden;
    height:0;
    position: relative;
    opacity: 0;
    transition: all 0.2s;
}
.script-tab-main-wrap.active{
    overflow:visible;
    height:190px;
    opacity: 1;
}
.script-tab-main-wrap.active .script-tab-main-item{
    position: absolute;
    width:100%;
    top:0;
    left:0;
    visibility: hidden;
    opacity: 0;
    transform: perspective(500px) rotateX(90deg);
    transform-origin: center;
    transition: all 0.4s;
}
.script-tab-main-wrap.active .script-tab-main-item:last-child{
    transform: perspective(500px) rotateX(-90deg);
}
.script-tab-main-wrap.active .script-tab-main-item.active{
    visibility: visible;
    opacity: 1;
    transform: perspective(500px) rotateX(0deg);
    margin-top:2rem;
}
.script-tab-main-wrap.active .script-tab-main-item.active .range-box-head-cus .dropdown-toggle.lang-cus{
    padding:13px 14px !important;
}

/*script save popup The END*/

.range-box-head-cus.drp-b-h-cus .dropdown-menu.scpt-drp-wrap .dropdown-item{
    padding: 0;
    height: 25px;
    display: flex;
    align-items: center;
    text-indent: 10px;
}
.dropdown-menu.scpt-drp-wrap .dropdown-item > span{
    display: flex;
    align-items: center;
}

.dropdown-menu.scpt-drp-wrap .dropdown-item i {
    width: 25px;
    min-width: 25px;
    font-style: normal;
    margin-left: 0;
    margin-right: 0;
    text-align: center;
    opacity: 1;
    height: 25px;
    display: block;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-indent: 0;
}
.dropdown-menu.scpt-drp-wrap .dropdown-item > span > i:after{
    position: absolute;
    content:'';
    width: 6px;
    height:6px;
    transform: rotate(45deg);
    right:-3px;
    background-color: #f2f2f3;
    transition: all 0.4s;
}
.dropdown-menu.scpt-drp-wrap .dropdown-item:hover i:after,
.dropdown-menu.scpt-drp-wrap .dropdown-item:hover{
    background-color: #2196f3 !important;
}

.cus-ver-scrpt{
    text-transform: lowercase;
    border: 1px solid;
    border-radius: 4px;
    padding:0 3px;
}
.live-preview-mode-scrp-act {
    position: relative;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    float: left;
}
.live-preview-mode-scrp-act:before{
    content: "";
    display: block;
    position: absolute;
    left: 2px;
    width: 12px;
    height: 12px;
    background: #22b66e;
    border-radius: 50%;
    z-index: 0;
    animation: grow 1.3s ease-in-out infinite;
}
.live-preview-mode-scrp-act:after {
    position: absolute;
    content: '';
    left: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #64ab65;
}
.range-box-head-cus.with-arrow.scpt-drp-main-wrap .dropdown-toggle >span > span{
    display:flex;
    align-items: center;
}
.src-act-btn-wrap{
    flex-direction: row;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm{
    background-color: #f9f9f9;
    color: #7f99b1 !important;
    height: 30px;
    min-height: 30px;
    width: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border:1px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0 2px !important;
    font-size:1.2em;
}
.info-w-tooltip > div.src-act-btn-wrap  > .act-itm.st-copy:hover{
    color: #42a5f5!important;
    border:1px solid #42a5f5;
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm.st-trash:hover{
    color: #ef5350!important;
    border:1px solid #ef5350;
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm.st-gtm:hover{
    color: #4487f1!important;
    border:1px solid #4487f1;
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm.st-image:hover{
    color: #66bb6a!important;
    border:1px solid #66bb6a;
}
.src-bn-preview{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
}
.src-bn-preview img{
    width: 360px;
    height: auto;
    padding: 5px;
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 0 13px -3px rgba(0, 0, 0, 0.52);
    display: none;
}
.src-popup-bn-preview{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
}
.src-popup-bn-preview img{
    width: 300px;
    height: auto;
    padding: 5px;
    background-color: #fff;
    border-radius: 13px;
    box-shadow: 0 0 13px -3px rgba(0, 0, 0, 0.52);
    display: none;
}
.bu-src-ov-wrap{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.bu-src-ov-wrap .srcpt-wrap{
    position:relative;
}
.img-scr-popup-preview-btn{
    width: 0;
    height: 46px;
    display: flex;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e6e8;
    border-radius: 4px;
    margin-left: 5px;
    font-size: 1.2em;
    color: #3f51b5;
    transform: perspective(300px) rotateY(90deg);
    transform-origin: left center;
    transition: all 0.4s;
}
.img-scr-popup-preview-btn.active{
    width: 40px;
    visibility: visible;
    opacity: 1;
    transform: perspective(300px) rotateY(0deg);
}
.brs-custom-legend.brs-custom-legend-records .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker {
    position: absolute;
    width: 100%;
    min-width: 100%;
    height: 2px !important;
    min-height: 4px;
    left: 0px !important;
    top: auto !important;
    bottom: 0;
    transition: all 0.2s;
    border-radius: 0 !important;
}
.dropdown-menu.scpt-drp-wrap .dropdown-item > span > span > i{
    width: auto;
    height: auto;
    margin-right: 6px;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.3;
    opacity: 0.8;
}
.tb-active-ab-anim .md-check{
    animation-name: jiggle;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 30% 5%;
    animation-delay: -0.75s;
    animation-duration: .25s
}
@keyframes jiggle {
    0% {
        transform: translate(6px, 0);
        opacity:0.2;
        animation-timing-function: ease-in;
    }
    50% {
        transform: translate(-2px, 0);
        opacity:1;
        animation-timing-function: ease-out;
    }
}

@keyframes jiggle {
    0% {
        transform: translate(6px, 0);
        opacity:0.2;
        animation-timing-function: ease-in;
    }
    50% {
        opacity:1;
        transform: translate(-2px, 0);
        animation-timing-function: ease-out;
    }
}

.btn-alignment.wiz-form-items {
    background-color: #fbfbfb;
    margin: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    box-shadow: 0px 4px 2px -2px #f3f3f3 inset, 0px -4px 2px -2px #f3f3f3 inset;
    transform: perspective(600px) rotateX(-90deg);
    transform-origin:top center;
    height: 0;
    visibility: hidden;
    opacity: 0;
    position: relative;
    z-index: 2;
    transition: all 0.4s,height 0.2s;

}
.btn-alignment.wiz-form-items.active{
    transform: perspective(600px) rotateX(0deg);
    height: auto;
    visibility: visible;
    opacity: 1;
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm .md-check{
    margin:0 !important;
    padding:0;
    width: 100%;
    height: 100%;
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm .md-check > i{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    margin-top: 0;
    font-family: IcoFont!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    line-height: 1;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    background-color: transparent !important;
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm .md-check:hover > i:before{
    animation-name: jiggle;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transform-origin: 30% 5%;
    animation-delay: -0.75s;
    animation-duration: 1s
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm .md-check > i:before{
    width: 100%;
    text-align: center;
    line-height: 1.8;
    border: none;
    border-radius: 50%;
    content: "\efc2";
    color: #51cbb5;
}

.info-w-tooltip > div.src-act-btn-wrap > .act-itm .md-check input:checked + i:before{
    background-color: #51cbb5;
    color:#fff;
    animation: none;
    content: "";
}
.info-w-tooltip > div.src-act-btn-wrap > .act-itm .md-check input[type="checkbox"]:checked + i:after{
    content: "\eaf2";
    border: none;
    width:100%;
    height:100%;
    text-align: center;
    line-height: 1.8;
    left:auto;
    top:auto;
    color:#fff;
    transform: none;
}
.act-itm.st-abtest{
    border-color: #51cbb5 !important;
}
.act-itm.st-abtest:hover{
    border-color: #51cbb5 !important;
}
.ab-select-all-wrap .md-check{
    margin: 0;
    padding:0;

}
.ab-select-all-wrap .md-check > i{
    margin-right: 0;
    width: 26px;
    height: 26px;
    background-color: transparent !important;
}
.ab-select-all-wrap .md-check > i:before{
    border-radius: 50%;
    content: "\ea9d";
    border-color: #51cbb5;
    color:#51cbb5;
    width:100%;
    height:100%;
    text-align: center;
    border-width: 1px;
    line-height:1.7;
    transition: all 0.4s;

    font-family: IcoFont!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

.ab-select-all-wrap .md-check input:checked + i:before,
.ab-select-all-wrap:hover .md-check > i:before{
    border-color: #51cbb5;
    border-width: 1px;
    color:#fff;
    background-color: #51cbb5;
}
.ab-select-all-wrap:hover .md-check > i:after{
    display: table !important;
}
.ab-select-all-wrap .md-check > i:after{
    width: 6px !important;
    height: 6px !important;
    transform: rotate(45deg) !important;
    border: none !important;
    background-color: #51cbb5;
    bottom: -2px;
    top: auto !important;
    left: calc(50% - 3px) !important;
}
span.ab-select-all-wrap {
    width: 26px;
    height: 26px;
    display: flex;
}

.ax-test-list-scp-wrap {
    padding: 10px;
    margin: 0;
    list-style: none;
    max-height: calc(100vh - 477px);
    min-height: 65px;
    overflow: auto;
}
.ax-test-list-scp-wrap:empty{
    display: none;
}
.ax-test-list-scp-wrap > li {
    background-color: #fff;
    border: 1px solid #eff1f5;
    border-radius: 8px;
    margin-bottom: 6px;
    box-shadow: 0 0 0 0 #eff1f5;
    transition: all 0.3s;
    color: #444e5a;
    font-weight: 600;
    overflow: hidden;
    animation: changeStyle .5s ease-in-out;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height:54px;
}
.ax-test-list-scp-wrap > li > div{
    height:54px;
}
.ax-test-list-scp-wrap > li .info-w-tooltip.iwt-nowrap-ov {
    justify-content: center;
    max-width: 300px;
}
.ax-test-list-scp-wrap > li .info-w-tooltip.iwt-nowrap-ov > span{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ax-test-list-scp-wrap > li:hover {
    box-shadow: 2px 2px 3px 0 #dee1e6;
}
.ax-test-intro-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}
.backbtn-header{
    display: flex;
    height:100%;
}
.backbtn-header > div{
    width: 46px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #efefef;
    height: 100%;
    color: #6c6c6c;
    cursor: pointer;
}

.ax-tst-btn-wrap{
    min-width: 34%;
    border-radius: 4px;
    background-color: #66bb6a;
    color: #fff;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0px 2px 5px -1px #b9b9b9;
    transition: all 0.4s;
    text-align: center;
    padding-bottom: 12px;
    padding-top: 13px;
}
.ax-tst-btn-wrap:hover{
    opacity: 0.6;
    box-shadow:none;
}
.ax-test-intro-wrap > span{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #33659b;
    margin: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #33659b;
    font-size: 1.1em;
    line-height: 1;
    text-align: center;
}
.ax-tst-select-wrap {
    display: flex;
    align-items: center;
    min-width: 34%;
    background-color: #2196f3;
    color: #fff;
    font-size: 1.1em;
    font-weight: 600;
    box-shadow: 0px 2px 5px -1px #b9b9b9;
    padding: 0;
    border-radius: 4px;
}
.ax-tst-select-wrap .normal-info-drop-wrap .dropdown-toggle >span {
    color: #ffffff;
}
.ax-tst-select-wrap .normal-info-drop-wrap.range-box-head-cus.with-arrow .dropdown-toggle:after{
    border-color:#fff;
}
.ax-tst-select-wrap .range-box-head-cus.drp-b-h-cus{
    height:41px;
}
.ax-tst-select-wrap .normal-info-drop-wrap.range-box-head-cus.with-arrow .dropdown-toggle >span{
    height: 100%;
    display: flex;
    align-items: center;
    border-right: 1px solid #fff;
    margin-right: 8px;
    padding-right: 13px;
}
.ax-tst-select-wrap .normal-info-drop-wrap.range-box-head-cus.with-arrow .dropdown-toggle{
    height:41px;
    padding: 0;
    padding-right: 15px !important;
}
.edit-axtest-drp-cus .range-box-head-cus.drp-b-h-cus{
    height: 43px;
}
.edit-axtest-drp-cus .range-box-head-cus.with-arrow .dropdown-toggle{
    height: 100%;
    background-color: #fff;
    border: 1px solid #cfd1d3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.btn-edit-axtest-cus{
    padding-left: 41px;
    padding-right: 40px;
}
.search-bn-list-wrap {
    position: absolute;
    width: 100%;
    top: 46px;
    background-color: #ffffff3d;
    padding: 1rem;
    z-index: 2;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.4s;
    transform: perspective(700px) rotateX(-90deg);
    transform-origin: top center;
    visibility: hidden;
    opacity: 0;
}
.search-bn-list-wrap div > i{
    position: absolute;
    left: 10px;
}
.search-bn-list-wrap button{
    position: absolute;
    right: 13px;
}
.search-bn-list-wrap input{
    border: 1px solid #d5d5d5;
    height: 45px;
    padding: 0 2rem;
}
.search-bn-list-wrap.active{
    transform: perspective(700px) rotateX(0deg);
    visibility: visible;
    opacity: 1
}
.ax-test-list-scp-wrap > li.tv-in-tm {
    animation-name: fadeIn;
    animation-duration: 1s;
}
.ax-test-list-scp-wrap > li.tv-out-tm {
    opacity: 0;
    animation-name: fadeOut;
    animation-duration: 1s;
    height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    min-height:0 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
        height:auto;
        overflow:hidden;
    }

    to {
        opacity: 0;

    }
}

.toolbar-calendar-btn {
    width: auto !important;
    z-index: 9;
    background-color: #f3f3f3;
    border-radius: 0 0 0 10px;
    box-shadow: -2px 2px 1px -1px rgba(14, 14, 14, 0.08);
}
.toolbar-calendar-btn:hover .d-rang-cus .dropdown-toggle,
.toolbar-calendar-btn:hover i{
    transform: perspective(800px) translateY(0px) !important;
    transform-origin: center top;
}
.toolbar-calendar-btn .d-rang-cus .dropdown-toggle:after,
.toolbar-calendar-btn .d-rang-cus .dropdown-toggle > i{
    display: none !important;
}

.toolbar-calendar-btn .range-box-head-cus .dropdown-toggle{
    border-radius: 0;
    border: none !important;
    background-color: transparent !important;
    font-size: 0.7em;
    padding: 5px 9px 4px;
}
.toolbar-calendar-btn .d-rang-cus .dropdown-toggle > span{
    font-weight: 600;
    color: #a1a5b7;
    font-size: 1.3em;
}

.toolbar-calendar-btn .d-rang-cus .dropdown-menu{
    left:auto !important;
    right:0 !important;
}
.toolbar-calendar-btn > .btn{
    background-color: transparent !important;
    border:none ;
    border-left: 1px solid #e9e9e9;
    padding-left: 16px;
    transition: all 0.4s;
}
.toolbar-calendar-btn > button > i {
    transition: all 0.4s;
    color: rgb(94, 106, 159);
    font-size: 1.1em !important;
    margin-top: 3px;
}
.toolbar-calendar-btn > button:hover > i {
    transform : perspective(800px) translateY(0px) !important;
    transform-origin: center top;
    color: #009ef7 !important;
}
.box-header.bh-abs.bh-zoom-tools.bh-right-drp .box-tool.bt-exp-wrap.d-w-send-st-wrap.d-w-global .toolbar-calendar-btn .range-box-head-cus{
    min-width: 50px !important;
}
.type-bn-alert-wrap .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span{
    color: #a8acbc;
    font-size: 1.5em;
}
.type-bn-alert-wrap .select-btn-toolbox-wrap .range-box-head-cus.drp-b-h-cus{
    min-width:60px;
}
.type-bn-alert-wrap .range-box-head-cus .dropdown-toggle.lang-cus:after{
    border-color: #5e6a9f !important;
}
.type-bn-alert-wrap .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown:hover > span,
.toolbar-calendar-btn .btn:hover .d-rang-cus .dropdown-toggle > span,
.type-bn-alert-wrap .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown:hover > span i{
    color: #009ef7 !important;
}
.type-bn-alert-wrap .range-box-head-cus .dropdown-toggle.lang-cus.w-full-dropdown > span i{
    margin-right: 10px;
}
.type-bn-alert-wrap .cookiepedia-icon-fa{
    width: 20px;
    height: 24px;
    display: flex;
    float: left;
    -webkit-mask-size: 18px;
    mask-size: 18px;
    background-color: #7a7e86;
}
.type-bn-alert-wrap .select-btn-toolbox-wrap .range-box-head-cus.open .dropdown-menu{
    min-width: 120px !important;
}
.cookiepedia-icon-fa.alert-ck-cus{
    width: 19px;
    height: 19px;
    -webkit-mask-size: 19px;
    mask-size: 19px;
    background-color: #ff8f00;
}
.slct-cookie-cus.cookiepedia-icon-fa{
    width: 17px;
    height: 16px;
    display: flex;
    float: left;
    -webkit-mask-size: 16px;
    mask-size: 16px;
    background-color: #7a7e86;
}
.status-acc-user-wrap.sauw-alert-wrap > span{
    min-width: 150px !important;
}
.drop-arro-lg-cus .range-box-head-cus .dropdown-toggle.lang-cus:after{
    margin-left: 23px;
}
.tab-content-settings-wrap .minicolors-position-top .minicolors-panel {
    top: -256px !important;
}
.tab-content-settings-wrap .minicolors-with-opacity.minicolors-position-top .minicolors-panel {
    top: -232px !important;
}
.select2-container {
    z-index: 999999;
}
.form-legent-syl.fls-slc2-syl .col-form-label{
    z-index: 99999999;
}
.form-legent-syl.fls-slc2-syl.fls-lng-syl .col-form-label{
    z-index: 999999999;
}
.dsar-form-wrap .form-legent-syl.fls-slc2-syl .range-box-head-cus.drp-b-h-cus{
    z-index: 999999997;
}
.dsar-form-wrap .form-legent-syl.fls-select-drop .col-form-label{
    top:8px;
}
.dsar-form-wrap .form-legent-syl.fls-slc2-syl .select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-top:10px !important;
}
.dsar-form-wrap .pos-sticky{
    z-index: 999999999;
    top: -24px;
}
.main-bx-header{
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 10px;
    box-shadow: 0px 4px 7px -5px #e7e7e7;
}
.selection-lang-list-wrap .lg-items {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    margin: 10px 0;
    font-size: 1.2em;
    transition: all 0.2s;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    align-items: center;
    overflow: hidden;
}
.selection-lang-list-wrap .lg-items:hover {
    box-shadow: 0 0 0 0 #02355e;
}
.selection-lang-list-wrap .lg-items:hover .lg-item-action-btn > button {
    box-shadow: 1px 1px 4px 0px #002c52;
}
.selection-lang-list-wrap .lg-items > span {
    width: 67%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    height: 28px;
    font-size: 0.88em;
    top: 2px;
    position: relative;
}
.selection-lang-list-wrap .lg-items > span > i {
    width: 28px;
    height: 28px;
    position: relative;
    top: -6px;
    border-radius: 50%;
    box-shadow: 0px 1px 3px 0px #001e38;
    background-size: cover;
}
.selection-lang-list-wrap .lg-items > i {
    position: absolute;
    bottom: -3px;
    font-size: 2.8em;
    opacity: 0.06;
    left: 0;
}
.selection-lang-list-wrap .lg-items .lg-item-action-btn {
    display: flex;
    flex-direction: row;
}
.selection-lang-list-wrap .lg-items .lg-item-action-btn > button {
    transition: all 0.5s;
    box-shadow: 0 0 0 0px #002c52;
}
.selection-lang-list-wrap .lg-items .lg-item-action-btn > button:hover {
    box-shadow: 0 0 0 0px #002c52;
}

.primary-lang-btn-wrap:hover .primary-lang-btn {
    max-width: 112px;
    transition: all 0.5s;
}
.primary-lang-btn-wrap .primary-lang-btn {
    position: relative;
    overflow: hidden;
    max-width: 13px;
    display: block;
    transition: all 0.5s;
    display: flex;
    align-items: center;
}
.primary-lang-btn-wrap .primary-lang-btn > b {
    font-size: 0.8em;
}
.desc-ellps-single-wrap{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}
.detail-info-fue-wrap .t-w-flag .flag-icon {
    border-radius: 50%;
    overflow: hidden;
    width: 20px;
    min-width: 20px;
    height: 20px;
    background-size: 26px;
    box-shadow: 1px 1px 1px 1px #ccc;
    margin-left: 4px;
}
.summary-info-detail-wrap.in-cus-sid-wrap.icsw-dsar-custom{
    max-height: 310px;
}
.msg-field-r-side .dropdown-menu{
    left:auto !important;
    right:0;
}
.nto-overly-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
    padding: 1rem 2rem;
    transition: all 0.4s;
    opacity: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
}
.nto-content-wrap {
    background-color: #fff;
    padding: 1rem;
    width: 100%;
    border-radius: 6px;
    position: relative;
}
.nto-close-btn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    bottom: calc(100% + 15px);
    left: calc(50% - 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    cursor: pointer;
}
.cursor-auto{
    cursor: auto;
}
.single-row-holder-st {
    max-width: 200px;
    padding: 6px 1rem;
    position: relative;
}
.status-tb-box.status-valid-box-wrap > div{
    width: 26px;
    min-width: 26px;
    height: 26px;
}
.valid-card-email-template-modal{
    z-index: 105001;
}

ul.btn-list-dl-wrap {
    display: flex;
    align-items: center;
    margin: 0;
    list-style: none;
    padding: 0 0 10px;
}
ul.btn-list-dl-wrap > li{
    margin-right: 10px;
    padding: 6px 15px 6px 6px;
    color: #186ac3;
    font-size: 1em;
    border: 1px solid #186ac3;
    border-radius: 5px;
    margin-top: 10px;
    transition: all 0.4s;
    font-weight: 600;
    cursor: pointer;
}
ul.btn-list-dl-wrap > li > span{
    display: flex;
    align-items: center;
}
ul.btn-list-dl-wrap > li:hover{
    background-color: #186ac3;
    color:#fff;
}
.tmp-cont-btn-wrap {
    box-shadow: 0 0rem 0.6rem rgba(0,0,0,.05)!important;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #42a5f5;
    color: #fff;
    font-weight: 400;
    cursor:pointer;
    font-size: 1rem !important;
    transition: all 0.4s;
    padding: 10px;
    margin-left: -10px;
    margin-right: -10px;
    position: relative;
}
.tmp-cont-btn-wrap:after {
    position: absolute;
    content: "";
    width: 2px;
    height: 15px;
    background-color: #42a5f5;
    top: 100%;
}
.tmp-cont-btn-wrap:hover{
    opacity: 0.8;
}
.smb-tmp-save-btn{

    height: 25px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    font-weight: 500;
    border-radius: 3px;
    font-size: 0.9em;
}
.smb-tmp-save-btn.stsb-policy-btn{
    position: absolute;
    top: -30px;
    right: 4px;
}
.smb-tmp-save-btn > span{
    display: flex;
    align-items: center;
}
.modern-info-alert.alert-warning.aw-alert-policy {
    background-color: #fffef1!important;
    border: 1px solid #f7bd00!important;
    border-radius: 10px;
}
.sm-legend-cus {
    position: relative;
    top: 12px;
    z-index:4;
    background-color: #fff;
    padding: 8px 10px;
    border: 1px solid #eaebec;
    border-radius: 6px;
    text-transform: capitalize;
    font-weight: 600;
}

/*Qr Code Share*/
.menu-open-button {
    border-radius: 100%;
    width: 40px;
    height: 40px;
    position: absolute;
    margin-bottom: 0;
    color: #FFFFFF;
    display:flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: translate3d(4px, 4px, 0);
    transform: translate3d(4px, 4px, 0);
    -webkit-transition: -webkit-transform ease-out 200ms;
    transition: -webkit-transform ease-out 200ms;
    transition: transform ease-out 200ms;
    transition: transform ease-out 200ms, -webkit-transform ease-out 200ms,background 0.3s,color 0.3s;
}
.c-share {
    width: 40px;
    height: 40px;
    text-align: center;
    box-sizing: border-box;
    font-size: 18px;
    margin-right: 10px;
    position: relative;
    z-index: 12;
}

.c-share__input {
    display: none;
}

.c-share__input:checked ~ .menu-open-button .c-share__icon:before {
    content: "\f00d";
}
.c-share__input:checked ~ .c-share__toggler .c-share__icon::before {
    transform: rotate(-45deg);
}
.c-share__input:checked ~ .c-share__toggler .c-share__icon::after {
    transform: rotate(45deg);
}
.c-share__input:checked ~ .c-share_options {
    width: 11.0625em;
    height: 17em;
    border-radius: 0.3125em;
}
.c-share__input:checked ~ .c-share_options::before,
.c-share__input:checked ~ .c-share_options li {
    transition: 0.3s 0.15s;
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.c-share__toggler,
.c-share_options {
    position: absolute;
    right: 0;
    width: inherit;
    height: inherit;
    border-radius: 50%;
    background-color: #f2f2f2;
}

.c-share__toggler {
    cursor: pointer;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-share_options {
    list-style: none;
    margin: 0;
    padding: 0.0625em 0.25em;
    box-sizing: border-box;
    /*overflow: hidden;*/
    box-shadow: 0 1px 5px 0 rgba(179, 179, 179, 0.48);
    transition: 0.2s;
}
.c-share_options::before {
    content: attr(data-title);
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
    margin-top: 8px;
    text-align: left;
    padding-left: 8px;
}
.c-share_options li {
    font-size: 0.875em;
    color: #464646;
    cursor: pointer;
}
.c-share_options li:not(:last-child) {
    margin-bottom: 0.75em;
}
.c-share_options::before,
.c-share_options li {
    opacity: 0;
    transform: translateY(0.625em);
    transition: 0s;
    visibility: hidden;
}
.menu-open-button {
    z-index: 2;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    transform: scale(1.1, 1.1) translate3d(0, 0, 0);
    cursor: pointer;
}

.menu-open-button:hover {
    -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
    transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

/*Share Button END*/
.prgs-xxs-wrap .progress-xs {
    height: 4px;
}
.prgs-valid-cus .progress-xs {
    height: 6px;
}
.prgs-valid-cus small {
    font-weight: 600;
}
.pre-frame-main-wrap{
    transition: all 0.3s;
    transform: perspective(8000px) rotateX(90deg);
    transform-origin: center center;
    position: absolute;
    opacity: 0;
    z-index: 1;
}
.pre-frame-main-wrap.active{
    transform: perspective(8000px) rotateX(0deg);
    opacity: 1;
    z-index: 2;
}
.event-trgr-main-wrap{
    transition: all 0.3s;
    transform: perspective(8000px) rotateX(-90deg);
    transform-origin: center center;
    opacity: 0;
    z-index: 1;
    position: absolute;
    background-color: #dedede;
    overflow: auto;
}
.event-trgr-main-wrap.active{
    opacity: 1;
    z-index: 2;
    transform: perspective(8000px) rotateX(0deg);
}
.bn-prw-action-btn-wrap{
    position: absolute;
    top: -28px;
    right: 4px;
    height: 25px;
    padding: 0;
    display: flex;
    align-items: center;
    font-weight: 500;
    border-radius: 3px;
    font-size: 0.9em;
}
.event-trgr-main-wrap .tb-left-side-wrap > div{
    background-color: transparent !important;
    border:none !important;
    padding:0 !important;
}
.event-trgr-main-wrap .tb-left-side-wrap > div .nav-active-border{
    background-color: transparent !important;
}
.event-trgr-main-wrap .tb-left-side-wrap .nav-sm .nav-link{
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 5px;
    text-transform: capitalize;
}
.event-trgr-main-wrap .tb-left-side-wrap .nav-sm .nav-link.active{
    background-color: #2196f3 !important;
    color: #fff !important;
    border-radius: 10px;
}
.event-trgr-main-wrap .tb-left-side-wrap .nav-sm > .nav-item:last-child .nav-link{
    background-color: #fff;
    color: inherit;
}
.event-trgr-main-wrap .tb-left-side-wrap .nav-sm > .nav-item:last-child .nav-link i{
    display: none !important;
}
.event-trgr-main-wrap pre{
    width: 100%;
    word-break: break-word;
    position: relative;
    overflow: hidden;
    padding:10px;
}
.event-trgr-main-wrap .CodeMirror {
    height: 260px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 0 2px 2px rgba(14, 20, 22, 0.15);
}
.code-format-btn-ico {
    border: 1px solid #263238;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #263238;
}
.head-event-trgr-wrap h6{
    font-size: 1.8em;
    color: #252f3e;
    font-weight: 700;
    margin-bottom: 0;
}
.n-t-save > div{
    pointer-events: none;
}
.live-mode-wrap.lmw-trgg-wrap .tgl + .tgl-btn{
    height: 25px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    font-weight: 500;
    border-radius: 3px;
    font-size: 0.9em;
    width:11em !important;
}
.live-mode-wrap.lmw-trgg-wrap .tgl-flip + .tgl-btn:after, .live-mode-wrap.lmw-trgg-wrap  .tgl-flip + .tgl-btn:before{
    border-radius:3px !important;
    line-height: 2.5;
    padding-left: 1.4rem !important;
    background-size: 16px !important;
}
.live-mode-wrap.lmw-trgg-wrap .tgl-flip + .tgl-btn:before{
    background: #2782cb url(../../images/trigger.svg) no-repeat;
    background-position: center left 10px !important;
}
.live-mode-wrap.lmw-trgg-wrap .tgl-flip + .tgl-btn:after{
    background: #37a272 url(../../images/preview.svg) no-repeat;
    background-position: center left 6px !important;
}
.lang-defualt-settings-wrap .d-lang-banner-flag{
    border:1px solid #e4e6e8;
    border-radius: 4px;
    width:auto;
    padding:4px;
}

.lang-defualt-settings-wrap .d-lang-banner-flag .dropdown-toggle > span > span{
    float:left;
}
.cpl-drp-cus .range-box-head-cus{
    border:1px solid #e4e6e8;
    border-radius: 4px;
    width:auto;
    padding:4px;
}
.cpl-drp-cus .range-box-head-cus .dropdown-toggle > span{
    width:100%;
}
.cpl-drp-cus .range-box-head-cus .dropdown-toggle > span > span{
    float:left;
}
.info-inpt-tooltip-i.audit-tb-iit > div{
    visibility: hidden;
    transition: all 0.4s;
    transform: rotateX(90deg);
    opacity: 0;
    background-color: #2196f3;
    border-radius: 10px;
    position: absolute;
    padding: 6px 10px;
    color: #fff;
    width: 210px;
    left: calc(100% + 5px);
    bottom: 2px;
    top:auto;
    z-index: 222;
}
.info-inpt-tooltip-i > div:after{
    top:auto;
    bottom: 5px;
}
.fls-w-hlp.form-legent-syl .col-form-label{
    padding: 0 6px 0 !important;
    margin-bottom: 0;
    background-color: #fff;
    transform: translate(22px ,0px);
    position: relative;
    z-index: 1;
    display: flex;
    font-size: 0.8em;
    color: #858585;
    position: absolute;
    height: 1px;
    line-height: 1px;
}
.fls-w-hlp.form-legent-syl .col-form-label .info-inpt-tooltip-i > span{
    width: 18px;
    height: 18px;
}
.fls-w-hlp.form-legent-syl .col-form-label .info-inpt-tooltip-i > div:after{
    top: 3px;
    bottom: auto;
    height: 12px;
    transform: rotate(86deg);
    left: -3px;
}
.fls-w-hlp.form-legent-syl .col-form-label .info-inpt-tooltip-i.audit-tb-iit > div{
    line-height: 1.2;
    font-size: 1.1em;
    bottom: auto;
    top: 2px;
}
.sc-2-mh-64.mlt-slc-fls .select2-container--default .select2-selection--multiple{
    padding: 6px;
    min-height: 84px;
    border-radius: 3px !important;
}
.sc-2-mh-64.mlt-slc-fls .select2-container--default .select2-selection--multiple:after{
    border: none;
    border-bottom: 2px solid #55595c;
    border-right: 2px solid #55595c;
    transform: rotate(45deg);
    border-bottom-right-radius: 2px;
    right: 10px;
    top: 16px;
    width: 7px;
    height: 7px;
    position: absolute;
    display: block;
    content: "";
}
.sc-2-mh-64.mlt-slc-fls .select2-container .select2-selection__rendered li.select2-search--inline:after{
    display: none !important;
}
.sc-2-mh-64.mlt-slc-fls .select2-container .select2-selection__rendered li.select2-search--inline:last-child{
    width:auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice[title="Strictly Necessary"] {
    padding: 3px 8px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice[title="Strictly Necessary"] .select2-selection__choice__remove{
    display: none;
}
.i-w-btn-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px dashed #dfdfdf;
}
.i-w-btn-wrap:last-child{
    border-bottom: none;
}
.i-w-btn-wrap h6 {
    font-size: 1em;
    color: #466e91;
    line-height: 1.3;
    padding: 0 8px;
}
.info-inpt-tooltip-i.iiti-align > div{
    top:auto;
    bottom:-3px;
}
.renew-set-date-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ebebeb;
    padding: 8px;
    border-radius: 6px;
    margin-top: 10px;
    color: #0269c2;
}
.renew-set-date-wrap > small{
    color: #878787;
    font-weight: 500;
    font-size: 0.86em;
}
.new-m-l-wrap {
    padding: 1rem;
    background-color: #fafafa;
    border-radius: 7px;
    border: 1px solid #efefef;
}
.new-m-l-wrap .btn-w-icon-material{
    padding: 14px 10px 14px 48px;
    width: 100%;
    margin-top: 4px;
    font-weight: 600;
}

.fls-select-normal-drop .range-box-head-cus .dropdown-toggle.lang-cus{
    padding: 13px 12px !important;
    margin-top: 0;
    display: flex;
    align-items: center;
}
.menu-links-list-syl-wrap{
    min-height: 100px;
    max-height: 380px;
    height: auto;
    overflow: visible;
    padding-bottom: 10px;
    position: relative;
}
.menu-links-list-syl-wrap:after{
    position: absolute;
    content: "";
    width: 18px;
    height: calc(100% - 46px);
    left: -19px;
    top: -8px;
    border-left: 1px dashed #d5d5d5;
    border-bottom: 1px dashed #d5d5d5;
    border-bottom-left-radius: 8px;
}
.menu-links-list-syl-wrap > li{
    width:100%;
    position: relative;
}
.menu-links-list-syl-wrap > li:after{
    position: absolute;
    content: "";
    width: 18px;
    height: 1px;
    right: 100%;
    top: calc(75px / 2);
    border-bottom: 1px dashed #d5d5d5;
    display: block !important;
}
.menu-links-list-syl-wrap > li:last-child:after{
    display: none !important;

}
.menu-links-list-syl-wrap > li .list-left{
    width:100%;
}
.menu-links-list-syl-wrap > li .remove-row-cmp-btn{
    height: 42px;
    margin-top: 4px;
    width: 42px;
    border-color: #e4e6e8;
    transition: all 0.4s;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > .dbi-btn-main{
    background-color: #4e95e9;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    transition: all 0.4s;
}
.tmbw-links-wrap.theme-mockup-box-wrap {
    padding: 1rem 0 1rem 2rem;
    height:300px;
}
.tmbw-links-wrap .tmb-notic-wrap .mockup-method{
    justify-content: flex-end;
    padding: 10px;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > .dbi-btn-main svg {
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: rotate(0deg);
    transition: all 0.2s;
    animation: roundedAnim 0.6s ease;
    transform-origin: center;
}
@keyframes roundedAnim {
    0% {
        transform: perspective(500px) rotateY(360deg);
    }

    100% {
        transform: perspective(500px) rotateY(0deg);
    }
}
.tmbw-links-wrap .tmb-notic-wrap .mockup-method > ul{
    margin: 0;
    padding:0 0 0 5px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > ul li{
    width:auto !important;
    float:left;
    height:25px;
    border-radius: 25px;
    background-color: #4e95e9;
    opacity: 0;
    transform: perspective(400px) rotateX(90deg) translateY(-200%);
    transform-origin: center;
    cursor: pointer;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    padding: 4px 12px;
    /*transition: all 0.4s;*/
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method:hover > ul li{
    opacity: 1 !important;
    transform: perspective(400px) rotateX(0deg) translateY(0%);
}
.tmbw-links-wrap.active  .tmb-notic-wrap .mockup-method > ul li{
    animation: widgetLoad 1s ease-out;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > ul li:hover{
    background-color: #285fa1;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > ul li:nth-child(1){
    width:80px;
    transition: all 100ms ease 0s;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > ul li:nth-child(2){
    width:90px;
    transition: all 200ms ease 66.6667ms;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > ul li:nth-child(3){
    width:100px;
    transition: all 400ms ease 133.333ms;
}
.tmbw-links-wrap  .tmb-notic-wrap .mockup-method > ul li:nth-child(4){
    transition: all 800ms ease 266.667ms;
}
.tmbw-links-wrap .tmb-notic-wrap .mockup-method > .dbi-btn-main:hover{
    outline:2px solid rgba(126, 126, 126, 0.33);
    opacity: 0.8;
}
.menu-links-list-syl-wrap:empty:after{
    display: none !important;
}
.menu-links-list-syl-wrap:empty:before{
    content: "No links found for this language.";
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding: 1rem;
    font-weight: 600;
    margin-top: 10px;
    box-shadow: 0px 0px 7px -2px #d9d9d9 inset;
}
.tmbw-links-wrap .tmb-notic-wrap{
    border-radius: 6px;
}
.tmbw-links-wrap .tmb-notic-wrap .mockup-method > .dbi-btn-main > span{
    position: absolute;
    left: calc(100% + 20px);
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #639de1;
    top: 11px;
}
.tmbw-links-wrap .tmb-notic-wrap .mockup-method > .dbi-btn-main > span > i{
    animation: bounceArrowLeft 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
@keyframes bounceArrowLeft {
    50% {
        transform: translateX(-8px);
    }
}
/*Dashboard*/
.flip-list-wrap {

    overflow: hidden;
    position: relative;
}
.flip-list-wrap.active > .hidden-content {
    transform: none;
}

.flip-list-wrap.active > .visible-content {
    transform: translateX(0) translateY(-100%);
}
.flp-icon-head{
    width: 36px;
    height: 30px;
    color: #666;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    cursor: pointer;
    transition: all 0.4s;
    position: absolute;
    right: 0;
    border-right: none;
    z-index: 8;
}
.flp-icon-head:hover{
    color: #2196f3;
    border-color: #2196f3;
}
.flp-icon-head > span{
    position: absolute;
    white-space: nowrap;
    right: calc(100% + 5px);
    font-size: 0.8em;
    opacity: 0;
    transition: all 0.2s;
}
.flp-icon-head.rbot-w > span{
    right: 5px;
    top: calc(100% + 2px);
}
.flp-icon-head:hover > span{
    opacity: 1;
}
.box-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.6s ease-in-out;

}
.hidden-content {
    transform: translateX(0) translateY(100%);
}
/*Dashboard END*/
.f-list-chr-wrap .w-scroll-cloud {
    position: relative;
    overflow: auto;
    height: 100%;
}
.no-data-chr{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #838383;
}
.no-data-chr > img{
    width: 35%;
    height: 45%;
}
.no-data-chr.ndc-lic {
    color: #cb8080;
}
.no-data-chr.ndc-lic > img{
    filter: blur(2px);
}
.no-data-chr.ndc60 > img{
    width:60%;
    height:60%;
}
.box-header.bh-abs.bh-abs-nozx {
    z-index: unset;
}
.toolbar-button-wrapper.tbw-scroll-wrap.ticket-cus-mr > .item-element{
    margin-right: -1rem;
}
.prf-frame-wrap {
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 10px;
    margin: auto;
    border: 1px solid #ddd;
    box-shadow: 0px 0px 3px 0px rgba(221, 221, 221, 0.63);
}
.prf-frame-wrap > img{
    width:100%;
}
.policy-themes-wrapper.dsar-form-wrap .counter {
    font-weight: 600;
    background-color: #c5c5c5;
    padding: 0px 6px;
    margin-top: 3px;
    border-radius: 25px;
    box-shadow: 0px 0px 2px 1px #b7b7b7 inset;
}
.policy-themes-wrapper.dsar-form-wrap .policy-inner-start-build-wrap .cf-wizard-steps-status ul li:last-child .cf-w-status-tooltip{
    left: calc(50% - 72px);
}

.container-f-view-wrap{
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}
.container-f-view-wrap .fv-form-view{
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 375px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 20px 0 #f5f5f5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    align-items: center;
    padding: 1.5rem 1rem;
    position: relative;
    margin-bottom: 2rem;
}
.container-f-view-wrap .fv-alert-box-wrap:after{
    position: absolute;
    content: "";
    width: 30px;
    height: 14px;
    border-top: 3px solid #2196f3;
    border-right: 3px solid #2196f3;
    top: 6px;
    right: 6px;
    border-top-right-radius: 10px;

    opacity: 0.2;
}
.container-f-view-wrap .fv-alert-box-wrap:before{
    position: absolute;
    content: "";
    width: 30px;
    height: 14px;
    border-right: 3px solid #2196f3;
    top: 28px;
    right: 6px;
    opacity: 0.2;
}
.container-f-view-wrap .fv-alert-box-wrap{
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 20px 0 #f5f5f5;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    width: 400px;
    height: 70px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1em;
    position: relative;
    color: #010238;
}
.fv-alert-logo-frame{
    width: 40px;
    min-width: 40px;
    height: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
}
.container-f-view-wrap .form-legent-syl .form-control{
    border-radius: 25px;
    background-color: #f9f9f9;
    border-color: #e7eaf1;
    resize: none;
    color: #090d4a;
}
.fv-alert-logo-frame .cookiepedia-icon-fa{

}
.container-f-view-wrap .btn-w-icon-material.btn-warning {
    width: auto;
    min-width: unset;
    height: 40px;
    min-height: 40px;
    border-radius: 30px;
    padding: 0 16px 0 0;
    top: 1.3rem;
    align-self: center;
    right: 0rem;
    box-shadow:unset;
    transition: all 0.4s;
    transform: perspective(400px) rotateY(0deg);
    cursor: auto;
}
.container-f-view-wrap .btn-w-icon-material.btn-warning i{
    background-color: rgba(0,0,0,0.1);
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
    position: relative;
    margin-right: 1rem;
    border-radius: 50%;
    font-size: 1.3em;
}
.container-f-view-wrap .form-legent-syl .col-form-label{
    background-color: #f9f9f9;
    padding: 0 8px 0 !important;
    margin-left: 10px;
}
.container-f-view-wrap .btn-w-icon-material{
    width: 60px;
    min-width: 60px;
    min-height: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 0;
    position: relative;
    top: 1rem;
    align-self: end;
    right: 2rem;
    box-shadow: 3px -1px 10px 3px rgba(92,184, 92, 0.52);
    transition: all 0.4s;
    transform: perspective(400px) rotateY(-8deg);
    transform-origin: center right;
}
.container-f-view-wrap .btn-w-icon-material:hover{
    transform: perspective(400px) rotateY(0deg);
}
.container-f-view-wrap .btn-w-icon-material i{
    width:100%;
    background-color: transparent;
    font-size:2em;
}
.ic-capacity-main-wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.lic-capacity-progress-wrap{
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 10px;
}
.helper-parph{
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: from-font;
    cursor: help;
    text-transform: capitalize;
}
.bck-list-wrap > li.active.deactivated-list{
    border: 1px solid #eff1f5;
    background-color: #fff;
    box-shadow: 0 0 0 0 #eff1f5;
}
.eye-drp-color {
    position: absolute;
    right: 6px;
    top: calc(50% - 10px);
    cursor: pointer;
    opacity: 1;
    transition: all 0.4s;
    color: #2a2f39;
    background-color: #fff;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    box-shadow: -10px 0px 5px -2px #fff;
}
.eye-drp-color >i{
    opacity: 0.4;
    transition: all 0.4s;
}
.eye-drp-color:hover >i{
    opacity: 1;
}
.rb-selekton-wrap{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    position: relative;
}
.rb-selekton-wrap .tab-to-style-editor{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: perspective(700px) rotateY(-90deg);
    transform-origin: right center;
    width:100%;
    transition: all 0.4s;
}

.rb-selekton-wrap.active_code .tab-to-style-editor{
    visibility: visible;
    opacity: 1;
    transform: perspective(700px) rotateY(0deg);
}
.rb-selekton-wrap .tab-content-settings-wrap{
    width:100%;
    visibility: visible;
    opacity: 1;
    transform: perspective(700px) rotateY(0deg);
    transform-origin:left center;
    transition: all 0.3s;
}
.rb-selekton-wrap.active_code .tab-content-settings-wrap{
    visibility: hidden;
    opacity: 0;
    transform: perspective(700px) rotateY(90deg);
}

.rb-selekton-wrap .tab-to-style-editor > div{
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    /*min-height: 420px;*/
    max-height: 420px;
    border-radius: 6px;
}

.rb-selekton-wrap .tab-to-style-editor > div pre{
    width:100%;
    word-break: break-word;
    position: relative;
    overflow: hidden;
}
.rb-selekton-wrap .tab-to-style-editor > div  pre .fa-copy{
    position: absolute;
    background-color: #fff;
    color: #2196f3;
    z-index: 20;
    right: 8px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    top: 10px;
    cursor: pointer;
    transition: all 0.3s;
    transform: perspective(1000px) rotateY(90deg);
    visibility: hidden;
    opacity: 0;
}
.rb-selekton-wrap .tab-to-style-editor > div pre:hover .fa-copy{
    transform: perspective(1000px) rotateY(0deg);
    visibility: visible;
    opacity: 1;
}
.rb-selekton-wrap .tab-to-style-editor > div  .CodeMirror{
    width: 100%;
    border-radius: 0 0 6px 6px;
    height: calc(400px - 128px);
    border-top: none;
    overflow: hidden;
}
.cs-head-line-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cs-head-line-wrap h6{
    color: #293e54;
}
.cs-head-line-wrap .code-tools-b{
    height: 40px;
    width:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #293e54;
    cursor: pointer;
}
.cs-head-line-wrap .code-tools-b .item-tooltip{
    padding:6px !important;
}
.cs-head-line-wrap .code-tools-b.active{
    color:blue !important;
}
.cus-editor-tabline-wrap {
    width: 100%;
    background-color: #172025;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;

}
.cus-editor-tabline-wrap > ul{
    margin: 0;
    padding: 0 4px;
    display: flex;
    flex-direction: row;

    align-items: center;
}
.cus-editor-tabline-wrap > ul > li{
    padding: 5px 1.5rem 5px 2rem;
    margin-top: 8px;
    position: relative;
    color: #939393;
    transition: all 0.3s;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}
.cus-editor-tabline-wrap > ul > li:after{
    position: absolute;
    width: 6px;
    height: 6px;
    left: 20px;
    top: calc(50% - 3px);
    background-color: #3db72e;
    content: '';
    transition: all 0.2s;
    border-radius: 50%;
    opacity: 0.2;
}
.cus-editor-tabline-wrap > ul > li.active:after{
    opacity: 1;
}
.cus-editor-tabline-wrap > ul > li:hover{
    color: #fff;
    background-color: #313a3d;
}
.cus-editor-tabline-wrap > ul > li:last-child:hover:not(.active){
    border-top-left-radius: 0;
}
.cus-editor-tabline-wrap > ul > li.active{
    color: #fff;
    background-color: #263238;
    box-shadow: 0px -2px 6px -1px #121517;
}
.chg-to-mobile-wrap{
    min-height: 700px;
}
.chg-to-mobile-wrap .browser-mockup{
    background-color: #303742;
    background-image: linear-gradient(45deg, #3b4450 25%, transparent 25%), linear-gradient(-45deg, #3b4450 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #3b4450 75%), linear-gradient(-45deg, transparent 75%, #3b4450 75%);
    background-size: 20px 20px;
    background-position: 0px 0px, 0px 10px, 10px -10px, -10px 0px;
    border-top: 2.5em solid #cdcdcd;
    padding: 1rem 0;
}
.bwr-mobile-config{
    position: relative;
    width: 300px;
    height: 600px;
    margin: 2.2rem auto 1rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 14px #959595, 0 0 0 16px #bbbbbb;
}
.pre-frame-main-wrap > .ph-mockup__notch{
    display: none;
}
.bwr-mobile-config > .ph-mockup__notch{
    display: block;
    position: absolute;
    z-index: 10;
    width: 95px;
    height: 24px;
    top: 2.563063%;
    left: calc(50% - 46px);
    border-radius: 30px;
    background: rgba(10, 10, 10, 0.75);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.bwr-mobile-config > .ph-mockup__notch::before {
    top: 11px;
    left: 77%;
    width: 1.66px;
    filter: blur(0.566461px);
    height: 3.22px;
    z-index: 2;
    content: "";
    position: absolute;
    transform: rotate(-135deg);
    background: rgba(62, 137, 204, 0.79);
    box-shadow: -4px 5px 0px 0px rgba(62, 137, 204, 0.79);
    border-radius: 50%;
}
.bwr-mobile-config > .ph-mockup__notch::after {
    content: "";
    position: absolute;
    width: 10.056872%;
    height: 39.170213%;
    top: 31.425532%;
    left: 76.824645%;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, #202836 68.49%, #3e424a 100%);
}
.CodeMirror-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 9;
}
span.tb-logo-frame {
    width: 45px;
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background-color: #F5F8FA;
    margin-right: 6px;
}
.sub-act-wrap{
    display: flex;
    flex-direction: column;
    line-height: 1;
    padding-left: 8px;
    position: relative;
    margin-top: 3px;
    font-size: 0.9em;
    color: #909090;
    padding-top: 6px;
}
.sub-act-wrap > small{
    font-size: 0.8em;
    margin-bottom: 3px;
}
.main-act-wrap{
    position: relative;
}
.main-act-wrap:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #ddd;
    left: -1px;
    top: 7px;
}
.main-act-wrap:before{
    position: absolute;
    content: '';
    width: 1px;
    height: 62%;
    border-left: 1px dashed #ddd;
    left: 1px;
    top: 7px;
}
.sub-act-wrap:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #ddd;
    left: -1px;
    top: 10px;
}
.sub-act-wrap:before{
    position: absolute;
    content: '';
    width: 5px;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    left: -6px;
    top: 12px;
}
.fs-w-new-frm-chk{
    position: relative;
}
.fs-w-new-frm-chk .col-form-label > .label{
    position: absolute;
    right: 70px;
    top: 18px;
    opacity: 0.6;
}
.nbla-txt-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    padding: 0 0 15px;
    margin: 18px 0 16px;
    width: 100%;
    border-bottom: 1px dashed #f3f3f3;
}
.sw-act-wrap{
    margin: 0 ;
    float: left;
    width: 100%;
    display: block;
}
.sw-act-wrap.sw-active{
    box-shadow: 0 0 5px 0 rgba(145, 145, 145, 0.25);
    padding: 1rem 1rem 0 1rem;
    border-radius: 5px;
    transition: all 0.6s;
    border-bottom: 2px solid #2196f3 !important;
    background-color:#fff;
}
/*Report New Version*/

.sfb-new-vs-wrap .sidebar-scrolling-wrap{
    border-radius: 6px;
    background-color: #fff;
    width: 100%;
    margin: 0;
    box-shadow: 0px 0px 4px 0px #cfcfcf;
    padding: 0;
    overflow: visible !important;
}
.sfb-new-vs-wrap .rpf-list-wrap{
    overflow-y: hidden;
    overflow-x: auto;
    display:flex;
    width:100%;
}
.sfb-new-vs-wrap .sidebar-scrolling-wrap > .rp-n-type-wrap{
    /*border-radius: 6px;*/
    /*background-color: #fff;*/
    width: 100%;
    margin: 0;
    /*box-shadow: 0px 0px 4px 0px #cfcfcf;*/
    padding: 10px 0;
}
.sfb-new-vs-wrap .rpf-list-wrap > li{
    width: calc(100% / 8.55);
    min-width: 120px;
    height: 100px;
    margin: 0 6px;
    padding-bottom: 10px;
}
.sfb-new-vs-wrap .rpf-list-wrap > li.active{
    padding-bottom:0 !important;
}
.rt-n-title-box-wrap {
    width: 185px;
    height: 100px;
    border: 1px solid #ffe1ea;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: center;
    font-size: 1.2em;
    padding: 0 2rem;
    white-space: nowrap;
    color: #715a64;
    position:relative;
    padding-bottom: 10px;
}
.rt-n-title-box-wrap > i{
    right:5px;
}
.sfb-new-vs-wrap .rpf-list-wrap > li{
    transition:0.3s;
}
.sfb-new-vs-wrap .rpf-list-wrap > li:hover{
    background-color: #fce4ec;
}
.sfb-new-vs-wrap .rpf-list-wrap > li > i {
    margin-bottom: 4px;
    font-size: 1.6em;
    width: 42px;
    height: 42px;
    border: 0px solid;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(255, 255, 255,0.34);
    transition: all 0.4s;
}
.sfb-new-vs-wrap .rpf-list-wrap > li.active > i{
    margin-bottom: 10px;
}
.sfb-new-vs-wrap .rpf-list-wrap > li:hover i{
    box-shadow: 0px 4px 4px -2px !important;
}
.rpt-title-wrap {
    width: 100%;
    background-color: #faf0f4;
    border-radius: 0 0 6px 6px;
    display: flex;
    align-items: center;
    min-height: 50px;
    margin: 0;
    /* box-shadow: 0px 0px 4px 0px #dfdfdf; */
    padding: 10px;
    justify-content: space-between;
}
.rpt-title-wrap .rpt-new-date-wrap .range-box-head-cus .dropdown-toggle{
    color: #fff !important;
    border: none;
    font-size: 1em;
    background-color: #1B84FF;
    transition: all 0.5s;
    font-weight: 400;
    text-shadow: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
}
.rpt-title-wrap .range-box-head-cus .dropdown-toggle i {
    color: #ffffff;
    font-size: 1.2em;
    margin-right: 9px;
}
.rpt-title-wrap .range-box-head-cus .dropdown-toggle i.fa-random{
    position: relative;
    top:2px;
}
.rpt-fsw-btn-wrap {
    background-color: #eaebec;
    color: #252F4A;
    padding: 7px 1rem;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.4s;
}

.rpt-fsw-btn-wrap.rfbw-detail-wrap {
    background-color: #fff !important;
}

.rpt-fsw-btn-wrap:hover {
    opacity: 0.5;
}
.rpt-filer-settings-wrap {
    position: relative;
}
.rpt-fsw-popup-wrap {
    position: absolute;
    z-index: 9;
    background-color: #fff;
    right: 0;
    top: 2.5rem;
    padding: 1rem;
    min-width: 300px;
    border-radius: 6px;
    box-shadow: 0px 0px 10px 0px #efefef;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.4s;
}
.rpt-fsw-popup-wrap.active{
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}
.rpt-dash-nw-wrap .box-footer {
    width: 100%;
    background-color: #e8edee;
    margin-top: 12px;
    border-radius: 0 0 6px 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px;
    color: #42507a;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0px 4px 2px -2px #e4e4e4 inset;
}
.rpt-dash-nw-wrap .box-footer:hover{
    background-color: #fff8fa;
    box-shadow: 0px 4px 2px -2px #ffdce8 inset;
    color:#e91e63;
}
.rpt-dash-nw-wrap .box-footer i{
    position: relative;
}
.rpt-dash-nw-wrap .box-footer:hover i{
    animation-name:arrowRightMove;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-play-state:running;
    -webkit-animation-name:arrowRightMove;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-animation-play-state:running;
}

.btn-bk-to-rpt-dash{
    white-space: nowrap;
    position: absolute;
    bottom: 2px;
    left: 4px;
    opacity: 0.4;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.btn-bk-to-rpt-dash:hover{
    opacity: 1;
}
.btn-bk-to-rpt-dash i{
    position: relative;
}
.btn-bk-to-rpt-dash:hover i{
    animation-name:arrowLeftMove;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-play-state:running;
    -webkit-animation-name:arrowLeftMove;
    -webkit-animation-duration:1s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-delay:0s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:normal;
    -webkit-animation-play-state:running;
}
@keyframes arrowRightMove{
    0%   {
        left:0px;
    }
    75% {
        left:8px;
    }
    100% {
        left:0px;
    }
}
@-webkit-keyframes arrowRightMove{
    0%   {
        left:0px;
    }
    75% {
        left:8px;
    }
    100% {
        left:0px;
    }
}
@keyframes arrowLeftMove{
    0%   {
        right:0px;
    }
    75% {
        right:4px;
    }
    100% {
        right:0px;
    }
}
@-webkit-keyframes arrowLeftMove{
    0%   {
        right:0px;
    }
    75% {
        right:4px;
    }
    100% {
        right:0px;
    }
}
.sfb-new-main-wrap .mx-tb-reports-wrap {
    max-height: 393px;
    min-height: 393px;
    position: relative;
}
.sfb-new-reslist-wrap .summary-chart-title{
    border-left:none !important;
    position: relative;
    padding-left: 18px;
}
.sfb-new-reslist-wrap .summary-chart-title:after{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #e91e63;
    position: absolute;
    left: 0;
    top: calc(50% - 7px);
    content: "";
}
.rpt-title-wrap .rpt-new-date-wrap .rpt-main-btn-cus .dropdown-toggle {
    color: #fff !important;
    border: none;
    font-size: 1em;
    background-color: #1B84FF;
    transition: all 0.5s;
    font-weight: 400;
    text-shadow: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    height: 35px;
    line-height: 1.5;
}
.rpt-title-wrap .rpt-new-date-wrap .rpt-main-btn-cus .dropdown-toggle:after {
    display: none !important;
}
/*Report New Version End*/

.chk-w-dobl-lbl {
    margin: 0 4px 1rem;
    display: flex;
    align-items: center;
}
.chk-w-dobl-lbl.fs-w-new-frm-chk .col-form-label > .label {
    right: -14px;
    top: 12px;
}
.chk-w-dobl-lbl > div:last-child > div {
    padding: 0 0 0 30px;
}
.chk-w-dobl-lbl > div:last-child > div span{
    padding: 0;
    color: #455265;
}
.lbl-dbl-cookie {
    margin: 0;
}
.ov-hide{
    overflow: hidden;
}
.main-score-wg-list-wrap{
    display: flex;
    align-items: center;
    flex-direction: row;
    margin:0;
    padding: 0;
}
.main-score-wg-list-wrap > li {
    border-right: 1px solid #ededed;
    height: 80px;
    display: flex;
    flex-direction: row;
    width: calc(100% / 4);
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 1.8em;
    font-weight: 800;
}
.main-score-wg-list-wrap > li i {
    font-size: 1.5em !important;
}
.main-score-wg-list-wrap > li small {
    opacity: 0.6;
}
.main-score-wg-list-wrap > li:last-child{
    border-right: none;
}
.main-score-wg-list-wrap > li > div:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
ul.main-score-wg-list-wrap {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
ul.main-score-wg-list-wrap.cus-scan-wrap {
    /*background-color: #e6eef9;*/
    border-radius: 6px;
    position: relative;
}
ul.main-score-wg-list-wrap.cus-scan-wrap .indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    width: calc(100% / 4 - 2px);
    border-radius: 6px;
    z-index: 1;
    transition:
        transform 0.45s cubic-bezier(.34,1.56,.64,1),
        box-shadow 0.25s ease;
    will-change: transform;
    background: #185ee0;
    backdrop-filter: blur(6px);
    box-shadow:0 4px 3px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
ul.main-score-wg-list-wrap.cus-scan-wrap .indicator {
    filter: saturate(1.05);
}
ul.main-score-wg-list-wrap.cus-scan-wrap .indicator.moving {
    filter: blur(0.6px) saturate(1.1);
}

ul.main-score-wg-list-wrap.cus-scan-wrap > li.active  * {
    color: #fff !important;
}
ul.main-score-wg-list-wrap.cus-scan-wrap > li{
    height: 64px;
    font-size: 1.7em;
    gap: 6px;
    border:none !important;
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: all 0.4s;
}
.main-score-wg-list-wrap.cus-scan-wrap > li > div:last-child {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
    line-height: 1;
    align-items: center;
    transition: all 0.4s;
}
.main-score-wg-list-wrap.cus-scan-wrap > li i{
    font-size: 1em !important;
}
.main-score-wg-list-wrap.cus-scan-wrap > li small{
    opacity: 1;
}
.main-score-wg-list-wrap.cus-scan-wrap > li > div:last-child > span {
    background-color: #e6eef9;
    padding: 4px 8px;
    border-radius: 25px;
    font-size: 0.8em;
    font-weight: 400;
    transition: all 0.4s;
}
.main-score-wg-list-wrap.cus-scan-wrap > li.active > div:last-child,.main-score-wg-list-wrap.cus-scan-wrap > li:hover > div:last-child{
    color:#185ee0;
}
.main-score-wg-list-wrap.cus-scan-wrap > li.active > div:last-child > span,.main-score-wg-list-wrap.cus-scan-wrap > li:hover > div > span{
    background-color: #ffffff;
    color: #155ee7 !important;
}
.scan-website-info-wrap {
    padding: 1rem;
}

.scan-website-info-wrap .sw-img-frame{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    max-height: 300px;
    min-height: 280px;
    background-image: url(../../images/layout.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #eeeeee;
}
.sw-img-website-info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(49, 56, 64, 0.89);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    color: #ffffff;
    font-size: 1.1em;
    padding: 1rem;
    font-weight: 600;
}
.sw-img-website-info > div{
    width: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.widget-rslt-info-wrap {
    display: flex;
    flex-direction: column;
    padding: 5px 0 10px;
    gap: 3px;
    align-items: center;
}
.widget-rslt-info-wrap.inner-scan-wriw{
    padding: 2px 0;
}
.widget-rslt-info-wrap > div {
    font-size: 1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.widget-rslt-info-wrap > div > i {
    font-size: 2.4em;
}
.widget-rslt-info-wrap > p {
    font-size: 1em;
    opacity: 0.7;
    padding: 0 1rem;
    margin: 0;
    line-height: 1.3;
}
.impact-list {
    list-style: none;
    margin: 3rem;
    padding: 0;
}
.impact-list .impact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 14px;
    padding: 10px;
    border: 1px solid;
    border-radius: 10px;
}
.impact-list .impact-item > span:first-child{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.impact-list .impact-item > span:nth-child(2){
    text-transform:uppercase;
}

.top-issues-list{
    list-style:none;
    margin:10px;
    padding:0;
}
.top-issues-list > li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 3px;
    margin-bottom: 6px;
    font-size: 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    border: 1px solid #e5e7eb;
    transition: all .2s ease;
    cursor: default;
}
.top-issues-list > li >div{
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.top-issues-list > li small{
    color: #4338ca;
}
.top-issues-list > li span:first-child{
    font-weight: 600;
    color: #4338ca;
    background: #e0e7ff;
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: .3px;
    width: fit-content;
    font-size: 0.9em;
}
.top-issues-list > li span:last-child{
    min-width: 35px;
    padding: 0 5px;
    height: 28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#fff;
    background:#ef4444;
    border-radius:6px;
    box-shadow:0 4px 10px rgba(239,68,68,.35);
}
ul.top-issues-list {
    max-height: 180px;
    overflow: auto;
}
.scan-website-info-wrap .sw-img-frame img {
    width: 100%;
}

/*Accardion Scan*/
.aria-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.09);
    margin-bottom: 11px;
    overflow: hidden;
}

.aria-header {
    padding: 16px 20px 16px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.4s;
}

.aria-header:hover {
    background:#e7e7e7;
}

.aria-chevron {
    font-size:16px;
    transition:.2s;
    transition: all 0.3s;
}

.collapsed .aria-chevron {
    transform: rotate(180deg);
    display: inline-block;
}

.aria-title {
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.aria-title > i {
    font-size: 1.2em;
}
.aria-header .badge {
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 15px;
    background-color:#fff;
}

.badge-level {
    border: 1px solid #1565c0;
    color: #1565c0;
}
.badge-type {
    border: 1px solid #4527a0;
    color: #4527a0;

}
.badge-count {
    border: 1px solid #2e7d32;
    color: #2e7d32;

}

.aria-content {
    padding:16px 18px;
    border-top:1px solid #eee;
}

.aria-node pre {
    background: #101828;
    color: #fff;
    border-radius: 0 0 8px 8px;
    padding: 12px;
    margin-bottom: 0;
    font-size: 10px;
}
.aria-node{
    background:#f3f6fb;
    border:1px dashed #e2e8f0;
    border-radius:10px;
    padding:14px 16px;
    margin-top:14px;
}

.node-title{
    font-weight:600;
    margin-bottom:6px;
}

.tag-wrap{
    margin:12px 0;
}

.tag-chip{
    display:inline-block;
    background:#eef2ff;
    color:#3f51b5;
    padding:4px 10px;
    border-radius:14px;
    font-size:11px;
    margin-right:6px;
    margin-bottom:6px;
}

.wcag-box{
    border: 1px solid;
    border-radius:10px;
    padding:12px 14px;
    margin:12px 0;
}

.wcag-title{
    font-weight:600;
    margin-bottom:4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wcag-meta{
    font-size:11px;
    color:#777;
}

.wcag-desc{
    font-size:12px;
    margin-top:6px;
}
.impact-critical{
    border:1px solid #c62828;
    color:#c62828;
}
.impact-serious{
    border:1px solid #ef6c00;
    color:#ef6c00;
}
.impact-moderate{
    border:1px solid #f9a825;
    color:#f9a825;
}
.impact-minor{
    border: 1px solid #16c21f;
    color: #16c21f;
}

.cat-chip {
    background: #ffffff;
    border: 1px solid;
    border-radius: 14px;
    padding: 6px 12px;
    font-size: 13px;
    margin-right: 6px;
    font-weight: 500;
}

.wcag-help{
    display:inline-block;
    margin-top:0;
    font-size:12px;
    color:#1976d2;
}

.code-box{
    border:1px solid #e0e0e0;
    border-radius:10px;
    overflow:hidden;
    margin-top:8px;
    margin-bottom:8px;
}

.code-toolbar{
    background:#ebebeb;
    padding:6px 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.copy-btn{
    cursor:pointer;
    color:#555;
}
.copy-btn:hover{
    color:#000;
}

/*Widget v*/
.acc-summary-bar.light{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    margin-bottom:20px;
    box-shadow:0 6px 20px rgba(0,0,0,.04);
}

.acc-kpi{
    display:flex;
    gap:10px;
    align-items:center;
    padding:6px 14px;
    border-radius:12px;
    background:#f8fafc;
    color:#0f172a;
    min-width:150px;
}

.acc-kpi i{
    font-size:3em !important;
    color:#6366f1;
}


.acc-kpi.serious i{
    color:#ef4444;
}
.acc-kpi.nodes i{
    color:#2e7d32;
}

.acc-kpi-title{
    font-size:11px;
    color:#64748b;
}
.acc-kpi-value{
    font-size:22px;
    font-weight:700;
}

.acc-chart-wrap{
    width:200px;
    text-align:center;
}

.acc-chart{
    width:180px;
    height:120px;
    margin:auto;
}

.acc-chart-title{
    font-size:12px;
    font-weight:600;
    color:#334155;
    margin-bottom:6px;
}

/* WCAG progress */

.acc-progress-wrap{
    min-width:260px;
}

.wcag-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}

.wcag-label{
    width:60px;
    font-size:12px;
    color:#334155;
}

.wcag-bar{
    flex:1;
    height:8px;
    background:#e5e7eb;
    border-radius:99px;
    overflow:hidden;
}

.wcag-fill{
    height:100%;
    background:linear-gradient(90deg,#60a5fa,#34d399);
}

.wcag-val{
    width:30px;
    font-size:11px;
    color:#64748b;
}
.acc-summary-bar > div {
    width: calc(100% / 5);
}
.impact-score,.principle-score{
    display:flex;
    gap:10px;
}

.impact-item,.principle-item {
    flex: 1;
    padding: 6px 10px;
    border-radius: 6px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}
.principle-item {
    color: #906058;
}
.impact-item i,
.principle-item i{
    font-size:20px;
}

.impact-item.serious{
    border-left:4px solid #ef4444;
}
.impact-item.moderate{
    border-left:4px solid #f59e0b;
}
.impact-item.minor{
    border-left:4px solid #3b82f6;
}

.impact-name,.principle-name{
    flex:1;
    font-size:12px;
    color:#475569;
    text-transform:capitalize;
}
span.wcag-leg {
    border: 1px solid #ddd;
    border-radius: 25px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.impact-val,.principle-val{
    font-size:22px;
    font-weight:700;
}
.acc-kpi.risk-high-risk{
    background:#fee2e2;
    border-left:4px solid #ef4444;
}
.acc-kpi.risk-medium-risk{
    background:#fef3c7;
    border-left:4px solid #f59e0b;
}
.acc-kpi.risk-low-risk{
    background:#dbeafe;
    border-left:4px solid #3b82f6;
}

.acc-kpi.risk i{
    color: #f16363;
}
.acc-card{
    background:#fff;
    border-radius:12px;
    padding:16px;
    box-shadow:0 4px 14px rgba(0,0,0,.06);
    height:100%;
}
.acc-card.ac-btow {
    height:calc(96% / 2);
}
.acc-card.acc-prgs {
    height: 80px;
    padding-top: 10px;
}
.acc-card.acc-imp-prc {
    height: 66%;
    padding-top: 10px;
}

.acc-summary-cards .acc-kpi{
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-direction: column;
}

.acc-summary-cards i{
    font-size:20px;
}

.impact-numbers{
    display:flex;
    justify-content:space-between;
    margin-top:12px;
}

.impact.serious{
    color:#e74c3c
}
.impact.moderate{
    color:#f39c12
}
.impact.minor{
    color:#27ae60
}
.wcag-stacked{
    display:flex;
    height:14px;
    border-radius:10px;
    overflow:hidden;
    background:#eef1f7;
    margin-top:8px;
}

.wcag-seg{
    height:100%;
}

.wcag-legend{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:12px;
    color:#555;
}
.wcag-seg:hover{
    opacity:.8;
    cursor:pointer;
}
/*Widget v end*/
.all-check-scans-widget {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    margin-top: -46px;
    margin-bottom: 19px;
    font-size: 1.2em;
    gap: 6px;
    font-weight: 600;
}
/*Accardion Scan End*/
/*Search Scan*/
.spotlight-box-wrap {
    display: flex;
    justify-content: center;
    align-items: baseline;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(26, 26, 26, 0.05);
    backdrop-filter: blur(3px);
    z-index: 999;
    padding: 1rem;
}
.spotlight-box {
    width: 700px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15);

}

.spot-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

.spot-search-icon {
    position: relative;
    top: 3px;
}

.spot-close-btn{
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.4s;
}
.spot-close-btn:hover{
    opacity: 1;
    color: #ed5959;
}

.spot-header input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
}

.spot-tabs {
    display: flex;
    gap: 8px;
    padding: 10px 20px 0;
    font-size: 13px;
    color: #666;
}

.spot-tabs .active {
    font-weight: 600;
    color: #000;
}

.spot-section-title {
    padding: 10px 20px;
    font-size: 12px;
    color: #888;
}

.spot-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s;
}

.spot-item:hover {
    background: #f3f4f6;
}

.spot-icon {
    width: 36px;
    height: 36px;
    background: #eef2ff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spot-title {
    font-weight: 600;
}

.spot-sub {
    font-size: 12px;
    color: #9a99a1;
    font-weight:600;
}
.spot-sub > span {
    margin-right: 16px;
    position: relative;
    font-weight: 500;
}
.spot-sub > span > span{
    display: flex;
    align-items: center;
}
.spot-sub > span:after{
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #e5e5e5;
    left: calc(100% + 5px);
    top: calc(50% - 3px);
}
.spot-more {
    margin-left: auto;
    color: #999;
}

.spot-item.hide {
    display: none;
}

.spot-meta {
    font-size: 11px;
    display: flex;
    flex-direction: column;
}
.spot-results {
    max-height: 300px;
    overflow: auto;
    padding:0 8px 8px;
}
.spot-tabs span {
    cursor: pointer;
    padding: 2px 8px;
    transition: all 0.4s;
    border-radius: 5px;
}
.spot-tabs span:hover,.spot-tabs span.active {
    background-color: #e9e9e9;
}
/*Search Scan End*/

.spotlight-box-wrap {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spotlight-box-wrap {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn .2s ease;
}

.spotlight-box {
    background: #fff;
    border-radius: 14px;
    /*width: 50%;*/
    box-shadow: 0 25px 80px rgba(0,0,0,.25);
    overflow: hidden;
    transform: translateY(20px) scale(.96);
    animation: popIn .25s ease forwards;
    display: flex;
    flex-direction: column;
}
.popup-header {
    display: flex;
    align-items: center;
    gap: 0px;
    padding: 12px 17px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}

.popup-body {
    padding: 20px 22px;
}

.popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 22px;
    border-top: 1px solid #eee;
    background: #fafafa;
    margin-top: 1rem;
}

@keyframes popIn {
    to {
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.shorten-link-dashboard-banner.sldb-scan{
    background-image: url(../../images/access-dbd-bg.svg);
}
.shorten-link-dashboard-banner{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 7rem 33%;
    background-repeat: no-repeat;
    background-color: #11316d;
    background-image: url(../../images/access-dbd.svg);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #fff;
    flex-wrap: nowrap;
    padding: 2rem 0;
    box-shadow: 0 10px 20px -2px #23448078;
    border-radius: 16px;
}
.shorten-link-dashboard-banner > div:last-child{
    width:100%;
}
.qrcode-link-dashboard-banner > div:last-child{
    width:40%;
    max-width: 240px;
}
.shorten-link-dashboard-banner.sldb-custom-wrap{
    background-color: #3f51b5 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}
.shorten-link-dashboard-banner h6{
    font-size: 2em;
    text-transform: capitalize;
    font-weight: 600;
    color:#fff;
    text-shadow: 2px 2px 0px rgba(0, 59, 118, 0.56);
    white-space: nowrap;
}
.shorten-link-dashboard-banner.sldb-custom-wrap p {
    font-size: 1.2em;
    color: #84a5ff;
}
.shorten-link-dashboard-banner p{
    font-size: 1.2em;
    color: #99d5ff;
}
.shorten-link-dashboard-banner img{
    width: auto;
    height: 100%;
    max-width: 80%;
    float: right;
}
.shorten-link-dashboard-banner .pdb-l-side{
    padding: 0rem 0 0 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dash-start-action-btn {
    float: left;
    box-shadow: none;
    border: 2px solid #fff;
    background-color: #fff;
    padding: 10px 22px;
    align-self: flex-start;
    border-radius: 7px;
    font-weight: 600;
    font-size: 1.1em;
    position: relative;
    letter-spacing: 0.03em;
    transition: all 0.4s;
}

.dash-start-action-btn:hover{
    background-color: transparent;
    color: #fff !important;
}
.dash-start-action-btn > i{
    transition: all 0.4s;
}
.dash-start-action-btn:hover > i{
    margin-left: 15px;
}
/*Table Score*/
.site-tb-score-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    margin: 8px;
    gap: 12px;
}

.site-tb-score-wrap .score-title {
    font-weight: 500;
    min-width: 140px;
    color: #e5e7eb;
}

.site-tb-score-wrap .score-bar {
    flex: 1;
    height: 8px;
    background: #eaeaea;
    border-radius: 99px;
    overflow: hidden;
}

.site-tb-score-wrap .score-bar-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
}

/* Badge */
.site-tb-score-wrap .score-badge {
    min-width: 80px;
    text-align: center;
    padding: 4px 10px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 12px;
}

/* GOOD */
.site-tb-score-wrap.good .score-bar-fill {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}
.site-tb-score-wrap.good .score-badge {
    background: rgba(34,197,94,.15);
    color: #22c55e;
}

/* MEDIUM */
.site-tb-score-wrap.medium .score-bar-fill {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
.site-tb-score-wrap.medium .score-badge {
    background: rgba(245,158,11,.15);
    color: #f59e0b;
}

/* CRITICAL */
.site-tb-score-wrap.critical .score-bar-fill {
    background: linear-gradient(90deg, #ef4444, #fb7185);
    animation: pulse 1.5s infinite;
}
.site-tb-score-wrap.critical .score-badge {
    background: rgba(239,68,68,.15);
    color: #ef4444;
}

/* Pulse animation */
@keyframes pulse {
    0% {
        box-shadow:0 0 0 0 rgba(239,68,68,.4);
    }
    70% {
        box-shadow:0 0 0 8px rgba(239,68,68,0);
    }
    100% {
        box-shadow:0 0 0 0 rgba(239,68,68,0);
    }
}

/*Table Score END*/
.d-badge-view{
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    font-weight: 600;
}
.d-badge-view.dbv-lic{
    margin-left: 5px;
}
.tb-detail-r-detail.scan-site-cus{
    border-spacing: 0 !important;
}
.tb-detail-r-detail.scan-site-cus > thead > tr > th {
    background-color: #fff !important;
    color: #1565c0 !important;
    border-bottom: 1px dashed #ddd;
    border-radius: 0 !important;
    border-top: none;
    padding-bottom: 14px !important;
    padding-top: 16px !important;
}
.nested-tb.scan-site-cus > tbody > tr {
    border-radius: 0 !important;
    transition: all 0.4s;
    cursor: pointer;
}
.nested-tb.scan-site-cus > tbody > tr:hover {
    background-color: #e8e8e8;
}
small.time-to-scan-wrap {
    margin: 0 !important;
}
.widget-rslt-info-wrap.inner-scan-wriw > div {
    font-size: 0.8em;
    padding: 2px 8px 2px 4px;
    font-weight: 400;
}
.widget-rslt-info-wrap.inner-scan-wriw > div > i {
    font-size: 1.8em;
}
h6.issues-list-title-wrap {
    padding: 0px 15px;
    font-size: 1.3em;
    color: #312e44;
    margin-bottom: 1px;
    display:flex;
    align-items: center;
}
.wcag-stacked {
    position: relative;
    display: flex;
    height: 26px;
    border-radius: 8px;
    overflow: hidden;
}

.wcag-seg {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wcag-label {
    /*    position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);*/
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
}
.score-circle-row .sc-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.score-circle-row svg {
    transform: rotate(-90deg);
    flex-shrink: 0;
}

.sc-bg {
    fill: none;
    stroke: #e5e7eb;
    stroke-width: 4;
}

.sc-progress {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dasharray .4s ease;
}

.sc-label {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.sc-percent {
    font-size: 11px;
    font-weight: 600;
}

.sc-text {
    font-size: 11px;
    opacity: .7;
    color: #9a99a1;
}

/* renkler */
.sc-good .sc-progress {
    stroke: #22c55e;
}
.sc-medium .sc-progress {
    stroke: #f59e0b;
}
.sc-critical .sc-progress {
    stroke: #ef4444;
}
.sc-good .sc-label {
    color: #22c55e;
}
.sc-medium .sc-label {
    color: #f59e0b;
}
.sc-critical .sc-label {
    color: #ef4444;
}
.sidw-widget-amount-list > ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}
.sidw-widget-amount-list > ul li {
    width: 100%;
    border: none !important;
    background-color: #fff;
    box-shadow: 0 0rem 0.6rem rgba(0, 0, 0, .05) !important;
    border-radius: 5px;
    height: calc(100% / 4);
    justify-content: flex-start;
    padding: 0 1rem;
}
.sidw-widget-amount-list .main-score-wg-list-wrap > li > div:last-child {
    display: flex;
    flex-direction: row-reverse;
    line-height: 1;
    align-items: center;
    gap: 0px;
    width: 100%;
    justify-content: space-between;
    padding-right: 1rem;
}
.l-dot{
    position: relative;
}
.l-dot:after{
    position: absolute;
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: #a8a8a8;
    right: calc(100% + 5px);
    top: calc(50% - 3px);
}
.filter-st-wrap.rpt-title-wrap{
    margin-bottom: 0.25rem !important;
}
.filter-st-wrap .rpt-fsw-btn-wrap {
    background-color: #2196f3;
    color: #ffffff;
}
.filter-st-wrap .range-box-head-cus .dropdown-toggle.lang-cus {
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    padding: 8px 10px 8px 8px !important;
    display: flex;
    min-width: 130px;
    border-radius: 6px;
}
.reset-filter-btn {
    height: 33px;
    margin-top: 1px;
    padding-right: 5px;
    width: 32px;
    border-radius: 6px;
}
.filter-st-wrap .range-box-head-cus.open .dropdown-menu,.filter-st-wrap .status-rd-cus.open .dropdown-menu{
    z-index: 9999999;
}
.no-permission-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    background: #f6f8fb;
}

.no-permission-card {
    background: #fff;
    border-radius: 16px;
    padding: 48px 56px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    animation: fadeIn 0.4s ease;
}

.no-permission-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.no-permission-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1f2933;
}

.no-permission-desc {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
    line-height: 1.5;
}

.no-permission-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.no-permission-actions .btn {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.no-permission-icon {
    font-size: 52px;
    color: #e54646;
    margin-bottom: 16px;
    background-color: #ffe3e3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    justify-self: center;
}

.m-r-1 {
    margin-right: 6px;
}
.input-notify-wrap {
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-left-width: 6px;
    border-left-color: #2196f3;
    padding: 10px 0px 8px 10px;
    border-radius: 6px;
    background-color: #fcfcfc;
}
.input-notify-wrap h6 {
    margin-bottom: 10px;
}
.input-notify-wrap h6 > span {
    font-size: 0.9em;
}
.form-legent-syl.sc-2-mh-64 .col-form-label{
    z-index: 9999999;
}
.pkg--limited_trigger-email {
    position: relative;
    background-color: #f6fafb !important;
    color: #263238 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0;
    margin: 0;
}
.pkg--limited_trigger-email .pkg--update-overly-frame{
    z-index: 99999999;
}
.pkg--limited_trigger-email .pkg--update-overly-frame > div {
    bottom: 38%;
    left: 10%;
    visibility: visible;
    opacity: 1;
    transform: rotateX(0deg);
    position: absolute;
}
.pkg--limited_trigger-email .pkg--update-overly-frame > div:after {
    display:none !important;
}

.cb-filter {
    margin-bottom: 14px;
}

.cb-filter-title {
    font-weight: 700;
    margin-bottom: 12px;
    border-bottom: 1px solid #f8f8f8;
    padding: 6px 2px;
    position: relative;
}

.cb-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cb-item {
    padding: 6px 12px;
    border-radius: 18px;
    border: 1px solid #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: .6;
    transition: .2s;
    user-select: none;
}

.cb-item i {
    font-size: 14px;
}

.cb-item.active {
    background: #22b66e;
    color: #fff;
    border-color: #22b66e;
    opacity: 1;
}

.cb-item:hover {
    opacity: 1;
}
.filter-title-wrap{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f3f3f3;
    min-height: 50px;
}
.gfilter-block {
    padding: 0 10px;
}
.filter-popup.acc-card{
    height:auto;
}


/*InfoGraph*/
.infographic-container {
    /*max-width: 1400px;*/
    margin: 0 auto;
    padding: 17px 0;
}

.infographic-title {
    text-align: center;
    margin-bottom: 80px;
}

.infographic-title h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 10px;
}

.infographic-subtitle {
    font-size: 1.2rem;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.steps-wrapper {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    position: relative;
}

.steps-wrapper::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 120px;
    right: 120px;
    height: 4px;
    background: linear-gradient(90deg, #62b9ff, #6ab3ee, #4facfe, #044eb1);
    z-index: 0;
}

.step-card {
    flex: 1;
    background: white;
    border-radius: 15px;
    padding: 5px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    margin: 0px 25px;
}

.step-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.step-icon-wrapper {
    position: absolute;
    left: -16px;
    top: -16px;
}

.step-number {
    background: transparent !important;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    font-weight: 800;
    color: #2196f3 !important;
    position: relative;
    /*box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);*/
}

.step-icon {
    position: absolute;
    top: 7px;
    right: -16px;
    font-size: 20px;
    opacity: 0.5;
    color: #0084ff;
}

.step-content {
    width: 100%;
}

.step-title {
    font-size: 1rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0px;
    text-transform: uppercase;
    letter-spacing: 0px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-description {
    font-size: 0.8rem;
    line-height: 1.7;
    color: #5a6c7d;
    text-align: left;
    margin-bottom: 5px;
}

.code-snippet {
    display: inline-block;
    background: #fff3cd;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: #856404;
    border: 1px solid #ffeaa7;
    font-weight: 600;
}

.success-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
    padding: 4px 15px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 6px;
    box-shadow: 0 5px 15px rgba(67, 233, 123, 0.3);
}

.decorative-dot {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 4px solid;
    top: 72px;
    z-index: 2;
    right: -10px;
    border-color: #2196f3 !important;
}

@media (max-width: 968px) {
    .steps-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .steps-wrapper::before {
        display: none;
    }

    .step-card {
        margin: 0;
    }

    .step-number {
        width: 120px;
        height: 120px;
        font-size: 3.5rem;
    }

    .decorative-dot {
        display: none;
    }
}
/*infograph end*/


/* Scripts Card Wrapper */
.scripts-card-wrapper {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Header */
.scripts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #1976d2;
    color: white;
    border-bottom: 1px solid #e0e0e0;
}

.scripts-header-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.scripts-header-title i {
    font-size: 1.3rem;
}

/* Toggle Button */
.script-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
    font-weight: 500;
}

.script-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.script-toggle-btn i {
    font-size: 1rem;
}

/* Scripts Content */
.scripts-content {
    padding: 0;
}

/* Script Item */
.script-item {
    display: grid;
    gap: 16px;
    padding: 14px 20px;
    border: 1px solid #f0f0f0;
    align-items: center;
    transition: all 0.4s;
    background-color: #fff;
    margin: 10px;
    border-radius: 10px;
}

.script-item:hover {
    border: 1px solid #2196f3;
}

.script-item:last-child {
    border-bottom: none;
}

/* Script Number */
.script-number {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    background: #1976d2;
}

.script-info {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: space-between;
}

.script-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.script-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #212121;
}

.script-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #4caf50;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}

.script-status-badge i {
    font-size: 0.75rem;
}

.script-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #757575;
}

.script-date i {
    color: #1976d2;
    font-size: 1rem;
}

/* Code Preview */
.script-code-box {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
    position: relative;
}

.code-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.code-label {
    font-size: 1.2em;
    font-weight: 600;
    text-transform: uppercase;
    color: #757575;
    padding: 2px 10px;
}

.code-copy-btn {
    background: #1976d2;
    color: white;
    border: none;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.2s;
}

.code-copy-btn:hover {
    background: #1565c0;
}

.code-copy-btn i {
    font-size: 0.8rem;
}

.code-content {
    background: #263238;
    color: #aed581;
    padding: 8px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    overflow-x: auto;
    max-height: 60px;
    overflow-y: auto;
}

/* Actions */
.script-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.action-btn {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}

.action-btn i {
    font-size: 1.1rem;
    color: #616161;
}

.action-btn:hover {
    background: #e0e0e0;
    transform: translateY(-2px);
}

.action-btn-preview:hover {
    background: #e3f2fd;
}
.action-btn-preview:hover i {
    color: #1976d2;
}

.action-btn-download:hover {
    background: #fce4ec;
}
.action-btn-download:hover i {
    color: #e91e63;
}

.action-btn-delete:hover {
    background: #ffebee;
}
.action-btn-delete:hover i {
    color: #f44336;
}

/* Empty State */
.scripts-empty {
    text-align: center;
    padding: 60px 20px;
}

.scripts-empty i {
    font-size: 4rem;
    color: #bdbdbd;
    margin-bottom: 16px;
}

.scripts-empty-title {
    font-size: 1.2rem;
    color: #616161;
    margin-bottom: 8px;
    font-weight: 600;
}

.scripts-empty-text {
    color: #9e9e9e;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 968px) {
    .script-item {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .script-code-box {
        width: 100%;
    }

    .scripts-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

.code-cutom-view-script .CodeMirror {
    min-height: 50px;
    border-radius: 8px;
}
.CodeMirror-wrap pre.CodeMirror-line{
    min-height: 40px;
    align-items: center;
    display: flex;
}
.cm-s-material .CodeMirror-activeline-background {
    background: transparent !important;
}

@font-face {
    font-family: 'mdevWeyIcon';
    src: url('https://cloud.mobildev.com/fonts/mdevWeyIcon.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

[class^='icon-w-']::before,
[class*=' icon-w-']::before{
    display:inline-block;
    font-family:'mdevWeyIcon';
    font-style:normal;
    font-weight:normal;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.icon-w-accessibility:before{
    content:'\0041';
}
.icon-w-photos:before{
    content:'\0042';
}
.icon-w-dehb:before{
    content:'\0043';
}
.icon-w-mask:before{
    content:'\0044';
}
.icon-w-bolt2:before{
    content:'\0045';
}
.icon-w-bluecolor:before{
    content:'\0046';
}
.icon-w-check:before{
    content:'\0047';
}
.icon-w-close:before{
    content:'\0048';
}
.icon-w-tooltip:before{
    content:'\0049';
}
.icon-w-pointer:before{
    content:'\004A';
}
.icon-w-eye:before{
    content:'\004B';
}
.icon-w-info:before{
    content:'\004C';
}
.icon-w-eyeclose:before{
    content:'\004D';
}
.icon-w-bolt:before{
    content:'\004E';
}
.icon-w-masksize:before{
    content:'\004F';
}
.icon-w-ealder:before{
    content:'\0051';
}
.icon-w-empty:before{
    content:'\0052';
}
.icon-w-link:before{
    content:'\0053';
}
.icon-w-microphone:before{
    content:'\0054';
}
.icon-w-wordspace:before{
    content:'\0055';
}
.icon-w-theme:before{
    content:'\0056';
}
.icon-w-lineheight:before{
    content:'\0057';
}
.icon-w-pause:before{
    content:'\0058';
}
.icon-w-fonts:before{
    content:'\0059';
}
.icon-w-question:before{
    content:'\005A';
}
.icon-w-refresh:before{
    content:'\0061';
}
.icon-w-contrast:before{
    content:'\0062';
}
.icon-w-headers:before{
    content:'\0063';
}
.icon-w-alignment:before{
    content:'\0064';
}
.icon-w-linemask:before{
    content:'\0065';
}
.icon-w-play:before{
    content:'\0066';
}
.icon-w-charspace:before{
    content:'\0067';
}
.icon-w-brightness:before{
    content:'\0068';
}
.icon-w-fontsize:before{
    content:'\0069';
}
.icon-w-speech:before{
    content:'\006A';
}
.icon-w-saturation:before{
    content:'\006B';
}

.wid-addons-wrap {
    display: flex;
    align-items: center;
    padding: 0px 1px 0 14px;
}
.wid-addons-wrap > i {
    font-size: 1.5em;
    display: flex;
    color: #0764da;
}

.acc-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 3px solid #3498db;
}

.acc-content {
    font-size: 1em;
}

.acc-content p {
    margin: 0 0 1em 0;
    color: #555;
}

.acc-content strong {
    color: #2c3e50;
    font-weight: 600;
}

.acc-subtitle {
    font-size: 0.95em;
    color: #2c3e50;
    margin: 1.5em 0 0.8em 0;
    font-weight: 600;
}

.acc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-top: 0.8em;
}

.acc-badges span {
    background: #667eea;
    color: white;
    padding: 0.4em 0.9em;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.acc-badges span:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.inner-detail-head-wrap{
    display:flex;
    justify-content: space-between;
    align-items: center;
    border:1px solid #ddd;
    padding:1rem;
    border-radius: 8px;
}
.cto-list-syl-wrap:empty{
    position: relative;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}
.cto-list-syl-wrap:empty:after{
    position: absolute;
    content: "No recipients found. Add a new recipient.";
    width: auto;
    background-color: #e8e8e8;
    border-radius: 6px;
    padding: 5px 14px;
}



/********/

/* stat cards */
.scan-stat-cards {
    display: flex;
    gap: 14px;
    margin-bottom: 0;
    flex-direction: column;
    width: 100%;
}
.scan-stat-card {
    flex: 1;
    border-radius: 10px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    overflow: hidden;
}
.scan-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 3px 0 0 3px;
}
.scan-stat-card.card-remain::before {
    background: #47be7d;
}
.scan-stat-card.card-total::before  {
    background: #3e97ff;
}
.scan-stat-card.card-credit::before {
    background: #f6c000;
}
.scan-stat-card .card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #a1a5b7;
}
.scan-stat-card .card-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #181c32;
}
.scan-stat-card .card-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    /*opacity: .08;*/
}

/* gauge area */
.scan-gauge-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* main message */
.scan-message-box {
    background: linear-gradient(135deg,#f0fdf4,#dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}
.scan-message-box.danger {
    background: linear-gradient(135deg,#fff5f5,#ffe4e4);
    border-color: #fecaca;
}
.scan-message-box .msg-icon {
    font-size: 20px;
    margin-top: 1px;
}
.scan-message-box h6 {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 700;
}
.scan-message-box p  {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

/* accordion confirm box */
.scan-confirm-accordion {
    display: none;
    overflow: hidden;
    width: 100%;
}
.scan-confirm-inner {
    background: linear-gradient(135deg,#fffbeb,#fef3c7);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 0;
}
.scan-confirm-inner .confirm-title {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.scan-confirm-inner .confirm-deduction {
    background: rgba(0,0,0,.05);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: #78350f;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
.scan-confirm-inner .confirm-deduction strong {
    color: #b45309;
}

/* buttons */
.scan-btn-row {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.sec-header {
    padding: 14px 16px 5px;
    border-bottom: 1px solid rgba(99, 102, 241,0.28);
    margin-bottom: 8px;
}
.sec-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.sec-title {
    font-size: 18px;
    font-weight: 700;
    color: #f1f0ff;
    line-height: 1.2;
}
.sec-group {
    padding: 4px 0 15px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.28);
}
.sec-group-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #6a65d3;
    padding: 0 20px 2px;
    margin-bottom: 0;
}
ul.sec-nv-menu {
    padding: 0;
    margin: 0;
    list-style: none;
}
.sec-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: #9b99c9;
    text-decoration: none;
    border-radius: 0;
    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), color 0.28s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
}
/*.sec-link.active {
    color: #818cf8;
    background: rgba(99,102,241,0.1);
    font-weight: 500;
}*/
.sec-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2.5px;
    background: linear-gradient(180deg, #6366f1, #818cf8);
    border-radius: 0 3px 3px 0;
}
.sec-link:hover,.sec-link.active {
    background: rgba(99,102,241,0.24);
    color: #f1f0ff;
    padding-left: 24px;
}
.quick-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid rgba(99, 102, 241, 0.31);
    background: rgba(0, 0, 0, 0.16);
    color: #9b99c9;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    margin-bottom: 6px;
}
.quick-btn:hover {
    background: linear-gradient(135deg, rgba(67,56,202,0.5), rgba(99,102,241,0.35));
    box-shadow: 0 4px 20px rgba(99,102,241,0.2);
    color: #fff;
}
.sec-quick-actions {
    padding: 12px 16px 4px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.project-wizard-modal{
    height: 100vh;
}
.project-wizard-modal .modal-content{
    background-color: #fcfcfc;
    overflow: visible;
}
.project-wizard-modal .modal-body{
    padding:0 !important;
}
.project-wizard-modal .wt-title-box{
    background-color: rgba(0, 53, 158, 0.05);
    color:#1d2939;
    padding: 1rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.project-wizard-modal .wt-title-box > div.wttb-r-side{
    display:flex;
    align-items: center;
}
.project-wizard-modal .wt-title-box > div.wttb-r-side > span{
    width:32px;
    height:32px;
    border-radius: 50%;
    background-color: #fff;
}
.project-wizard-modal .sw-form-box{
    background-color: #ffffff;
    padding:1rem;
}
.project-header-wrap{
    padding:1rem;
    background-color: #fff;
    border-bottom: 1px solid #e5e9f2;
    border-radius: 4px 4px 0 0;
}
.project-footer-wrap {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid #eeeeee;
}

.new-pg-pop-wrap {
    display: none;
}
.new-pg-pop-wrap.active {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.22);
    position: absolute;
    top: 0;
    left: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.new-pg-pop-wrap.active .form-horizontal{
    background-color: #fff;
    box-shadow: 0 0 6px -1px rgba(57, 57, 57, 0.48);
    min-width: 350px;
    max-width: 350px;
    border-radius: 7px;
    cursor: auto;
    animation: loading-bottom 0.4s 1 ease-in-out;
    padding:1rem;
}

@keyframes loading-bottom {
    0% {
        transform: perspective(500px) translateY(300%);
    }
    100% {
        transform: perspective(500px) translateY(0);
    }
}
.project-inner-start-build-wrap {
    position: relative;
}
.form-legent-syl.fls-select-drop .col-form-label{
    top:8px;
}
.po-social-wrap .form-horizontal {
    min-width: 90% !important;
    max-width: 90% !important;
}
.imp-hide{
    display: none !important;
}
.avatar-place-holder-wrap.aphw-cat-wrap .avatar-place-holder {
    font-size: 2rem;
    color: #0266b9;
    box-shadow: 0px 0px 10px 0 rgba(135, 135, 135, 0.17);
    border-radius: 6px;
    width: 100%;
    height: 88%;
    max-height: 180px;
    border: 5px solid #e2e2e2;

}
.avatar-place-holder-wrap.aphw-cat-wrap .avarar-upload-btn {
    top: auto;
    bottom: 11px;
    background-color: #24bf5d;
    right: 15px;
    color: #fff;
    width: 24px;
    height: 24px;
}
ul.alf-list-wrap {
    list-style: none;
    margin: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 6px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    background-color: #fafafa;
    max-height: 150px;
    overflow: auto;
}
ul.alf-list-wrap >li {
    padding: 6px 10px;
    border-bottom: 1px dashed #ececec;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
ul.alf-list-wrap >li:last-child {
    border-bottom: none;
}
.act-alph-btn{
    width: 20px;
    height: 20px;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 0.6em;
    border-width: 2px;
    cursor: pointer;
}
.alph-echg-wrap h6 {
    margin-bottom: 0;
    padding: 0 6px;
    font-size: 0.9em;
    text-transform: capitalize;
    color: #031346;
    border-bottom: none;
    position: absolute;
    top: -7px;
    left: 1.5rem;
    z-index: 1;
}
.alph-echg-wrap h6:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    top: 50%;
    left: 0;
    z-index: -1;
}
.alph-echg-wrap .btw-icon-wrp{
    position: absolute;
    width: 42px;
    height: 42px;
    background-color: #eff6ff;
    color: #6396c0;
    left: calc(100% - 20px);
    top: calc(50% - 5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 1.2em;
}
.alph-echg-wrap h6 {
    margin-bottom: 0;
    padding: 0 6px;
    font-size: 0.9em;
    text-transform: capitalize;
    color: #031346;
    border-bottom: none;
    position: absolute;
    top: -7px;
    left: 1.5rem;
    z-index: 1;
}
.alph-echg-wrap h6:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #fff;
    top: 50%;
    left: 0;
    z-index: -1;
}
.alph-echg-wrap .btw-icon-wrp{
    position: absolute;
    width: 42px;
    height: 42px;
    background-color: #eff6ff;
    color: #6396c0;
    left: calc(100% - 20px);
    top: calc(50% - 5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 1.2em;
}
.member-btn-normalize-cus {
    padding: 9px 9px;
    margin-top: 4px;
}
.inner-start-build-list {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 250px;
    justify-content: center;
    align-items: center;
}
.inner-start-build-list li {
    padding: 10px;
    margin: 0 4px;
    width: 116px;
    transition: all 0.5s;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-40px);
    position: relative;
    -webkit-animation: formItem ease-in 1;
    -moz-animation: formItem ease-in 1;
    animation: formItem ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.7s;
    -moz-animation-duration: 0.7s;
    animation-duration: 0.7s;
}
.inner-start-build-list li:nth-child(1) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.inner-start-build-list li:nth-child(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.inner-start-build-list li:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    animation-delay: 0.4s;
}
.inner-start-build-list li .item-thumb-frame {
    width: 100%;
    height: 100px;
    background-color: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border: 2px solid transparent;
    transition: all 0.5s;
    border-radius: 4px;
}
.inner-start-build-list li .item-thumb-frame i {
    font-size: 2em;
    color: #000;
    transition: all 0.5s;
}
.inner-start-build-list li .item-thumb-frame img {
    width: 60%;
    -webkit-filter: drop-shadow(2px 2px 3px #c9c9c9);
    filter: drop-shadow(2px 2px 3px #c9c9c9);
}
.inner-start-build-list li h3 {
    font-size: 1.2em;
    margin-bottom: 4px;
    font-weight: 600;
    color: #1d375f;
    text-align: center;
    transition: all 0.5s;
}
.inner-start-build-list li p {
    font-size: 0.9em;
    font-weight: 500;
    color: #636363;
    transition: all 0.5s;
}
.inner-start-build-list li.active,
.inner-start-build-list li:hover {
    margin-top: -10px;
}
.inner-start-build-list li.active .item-thumb-frame,
.inner-start-build-list li:hover .item-thumb-frame {
    border-color: #1d375f;
    box-shadow: 0px 0px 8px 2px rgba(29, 55, 95, 0.25);
    background-color: #d8e9ff;
}
.inner-start-build-list li.active h3,
.inner-start-build-list li:hover h3 {
    color: #1068f1;
}
.inner-start-build-list li.active p,
.inner-start-build-list li:hover p {
    color: #1d375f;
}
.inner-start-build-list li.active .item-thumb-frame i,
.inner-start-build-list li:hover .item-thumb-frame i{
    color: #1d375f;
}
ul.alf-list-wrap.alw-tree-str li > li {
    padding-left: 10px;
}
ul.alf-list-wrap.alw-tree-str li {
    display: block;
    position:relative;
    padding: 0px;
    border-bottom: none;
}
ul.alf-list-wrap.alw-tree-str li .act-alph-btn{
    width: 16px;
    height: 16px;
    min-width: 16px;
    border-width: 1px;
}
ul.alf-list-wrap.alw-tree-str li ul{
    position: relative;
}
ul.alf-list-wrap.alw-tree-str li ul:after {
    position: absolute;
    height: 100%;
    content: "";
    width: 1px;
    left: 16px;
    border-left: 1px dashed #d6d6d6;
    top: 0;
}

ul.alf-list-wrap.alw-tree-str ul li:after {
    position: absolute;
    height: 1px;
    content: "";
    width: 22px;
    left: -23px;
    border-bottom: 1px dashed #d6d6d6;
    top: 13px;
}
ul.alf-list-wrap.alw-tree-str {
    min-height: 200px;
    max-height: 250px;
    padding:1rem;
}
/*wizard*/
.cf-wizard-steps-status {
    width: 100%;
    display: none;
    justify-content: center;
    background-color: #f9fafb;
    border-bottom: 1px solid #f4f4f4;
}
.cf-wizard-steps-status.active {
    display: flex;
}
.cf-wizard-steps-status ul {
    list-style: none;
    margin: 0;
    padding: 16px 10px;
    display: flex;
    align-items: center;
}
/*HOrizental*/
.cf-wizard-steps-status.cf-w-hor ul{
    flex-direction: column;
}
.cf-wizard-steps-status.cf-w-hor ul li{
    margin:2rem 0;
}
.cf-wizard-steps-status.cf-w-hor ul li:after{
    top: calc(100% + -4px);
    left: calc(50% + -2px);
    height:72px;
    width:4px;
}
.cf-wizard-steps-status.cf-w-hor ul li:before{
    height:0;
    width:4px;
    top: calc(100% + -4px);
    left: calc(50% + -2px);
}
.cf-wizard-steps-status.cf-w-hor ul li.active:before {
    height: 72px;
    width: 4px;
}
.cf-wizard-steps-status.cf-w-hor ul li .cf-w-status-tooltip {
    transform: rotate(-90deg);
    bottom: calc(50% - 9px);
    right: calc(50% - 19px);
    left:auto;
    padding:2px 8px;
    width: 96px;
    font-size:0.85em;
}
.cf-wizard-steps-status.cf-w-hor ul li.active .cf-w-status-tooltip {
    opacity: 1;
    visibility: visible;
    -webkit-animation: formItemHor ease-in 1;
    -moz-animation: formItemHor ease-in 1;
    animation: formItemHor ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    animation-duration: 0.3s;
}
.cf-wizard-steps-status.cf-w-hor ul li:last-child .cf-w-status-tooltip{
    left:auto;
    right: calc(50% - 3px);
}
@-webkit-keyframes formItemHor {
    from {
        opacity:0;
        transform: rotate(-90deg) translateY(-40px);
    }
    to {
        opacity:1;
        transform: rotate(-90deg);
    }
}

@-moz-keyframes formItemHor {
    from {
        opacity:0;
        transform: rotate(-90deg) translateY(-40px);
    }
    to {
        opacity:1;
        transform: rotate(-90deg);
    }
}

@keyframes formItemHor {
    from {
        opacity:0;
        transform:rotate(-90deg) translateY(-40px);
    }
    to {
        opacity:1;
        transform: rotate(-90deg);
    }
}
.cf-wizard-steps-status ul li {
    position: relative;
    float: left;
    margin: 0 3.5rem;
    display: flex;
    align-items: center;
}
.cf-wizard-steps-status ul li .step-i {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background-color: #e1e1e1;
    display: block;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.cf-wizard-steps-status ul li .cf-w-status-tooltip {
    position: relative;
    background-color: transparent;
    border-radius: 4px;
    padding: 4px 12px 4px 3px;
    color: #9ca3af;
    bottom: 0;
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
    white-space: nowrap;
    width: auto;
    left: 0;
    text-align: center;
    font-size: 0.9em;
    font-weight: 500;
}
.cf-wizard-steps-status ul li .cf-w-status-tooltip:after {
    display: none;
}
.cf-wizard-steps-status ul li.active .step-i {
    background-color: #4f46e5 !important;
    border-color: #fff;
    color: #fff;
}
.cf-wizard-steps-status ul li.active + li .step-i {
    background-color: #a7a2fc;
}
.cf-wizard-steps-status ul li.active .cf-w-status-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    -webkit-animation: formItem ease-in 1;
    -moz-animation: formItem ease-in 1;
    animation: formItem ease-in 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    animation-duration: 0.3s;
}
.cf-wizard-steps-status ul li.active:before {
    width: 133px;
}
.cf-wizard-steps-status ul li.active.activated .cf-w-status-tooltip {
    opacity: 0;
    transform: translateX(-100%);
    visibility: hidden;
}
.cf-wizard-steps-status ul li:after {
    height: 4px;
    position: absolute;
    content: '';
    top: calc(50% - 2px);
    left: calc(100% + -4px);
    width: 133px;
    background-color: rgba(217, 217, 217, 0.57);
    opacity: 1;
    transition: all 0.5s;
}
.cf-wizard-steps-status ul li:before {
    height: 4px;
    position: absolute;
    content: '';
    top: calc(50% - 2px);
    left: calc(100% + -4px);
    width: 0;
    border-bottom: 4px dotted #4f46e5;
    opacity: 1;
    z-index: 1;
    transition: all 0.5s;
}
.cf-wizard-steps-status ul li.active.activated:before {
    border-bottom-style: solid;
}
.cf-wizard-steps-status ul li.active:after{
    background-color: transparent;
}
.cf-wizard-steps-status ul li:last-child .cf-w-status-tooltip {
    width: auto;
}
.cf-wizard-steps-status ul li:last-child:after, .cf-wizard-steps-status ul li:last-child:before {
    display: none !important;
}

@keyframes formItem {
    from {
        opacity:0;
        transform: translateX(0);
    }
    to {
        opacity:1;
        transform: none;
    }
}
.cf-wizard-steps-status.cf-hor ul{
    flex-direction: column;
    padding: 2rem 0 2rem 2rem;
    align-items: flex-start;
}
.cf-wizard-steps-status.cf-hor.active{
    display: block;
}
.cf-wizard-steps-status.cf-hor ul li{
    margin: 0 0 40px;
}
.cf-wizard-steps-status.cf-hor ul li:before{
    top: 0;
    left: 20px;
}
.cf-wizard-steps-status.cf-hor ul li:last-child{
    margin-bottom: 0 !important;
}
.cf-wizard-steps-status.cf-hor ul li:before{
    width: 4px;
    height:0;
    border-left:1px dashed #1B84FF;
    border-bottom: none !important;
}
.cf-wizard-steps-status.cf-hor ul li.active:before {
    height: 40px;
    top: calc(100% + -4px);
    left: calc(50% - 0px);
}
.cf-wizard-steps-status.cf-hor ul li .step-i {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 2px solid #ffffff;
    background-color: #E9F3FF;
    position: relative;
    z-index: 10;
    color:#1B84FF;
    font-weight: 600;
    display:flex;
    align-items: center;
    justify-content: center;
}
.cf-wizard-steps-status.cf-hor ul li.active .step-i {
    background-color: #1B84FF !important;
    color:#fff;
}
.cf-wizard-steps-status.cf-hor ul li.active + li .step-i {
    background-color: #bcd9fb;
}
.cf-wizard-steps-status.cf-hor ul li:after {
    height: 40px;
    position: absolute;
    content: '';
    top: calc(100% + -4px);
    left: calc(50% - 0px);
    width: 4px;
    opacity: 1;
    transition: all 0.5s;
    background-color: transparent !important;
    border-left: 1px dashed #b2d5ff;
}
.cf-wizard-steps-status.cf-hor ul li .cf-w-status-tooltip{
    background-color: transparent;
    padding: 10px 8px;
    color: #818a94;
    bottom: calc(50% - 20px);
    left: 100% !important;
    text-align:left;
}
.cf-wizard-steps-status.cf-hor ul li .cf-w-status-tooltip:after{
    display: none !important;
}
.cf-wizard-steps-status.cf-hor ul li.active .cf-w-status-tooltip{
    color:#1d2939;
}
.cf-wizard-steps-status.cf-hor ul li.active.activated .cf-w-status-tooltip{
    opacity: 1;
    visibility: visible;
}
/*wizard END*/
.form-multi-add-syl {
    background-color: #fafafa;
    margin: 0;
    border-radius: 8px;
    padding: 26px 3px 8px;
    height: 100%;
}
.form-multi-add-syl .col-form-label {
    color: #858585;
    font-size: 0.8em;
    transform: translate(12px, -12px);
}
.form-multi-add-syl input.form-control {
    height: 30px;
    padding: 0 7px;
    font-size: 1em;
}
.form-multi-add-syl .act-alph-btn {
    height: 29px;
    width: 29px;
    border-width: 1px;
}
.sc-2-mh-64.mlt-slc-fls.tag-adv-fgrp .select2-container--default .select2-selection--multiple{
    min-height: 42px;
}
.d-cover-box-wrap .avatar-place-holder-wrap {
    width: 100%;
    height: 100%;
}
.d-cover-box-wrap .avatar-place-holder {
    background-color: #fafafa;
    border: 2px dashed #ddd !important;
    box-shadow: unset !important;
    height: 150px !important;
    margin-top: 3px;
}
.d-cover-box-wrap .avatar-place-holder-wrap.aphw-cat-wrap .avarar-upload-btn {
    top: auto;
    bottom: 32%;
    background-color: transparent;
    right: calc(50% - 47px);
    color: #aeaeae;
    width: auto;
    height: auto;
    border-radius: inherit;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    opacity: 0.5;
    white-space: nowrap;
}
.d-cover-box-wrap .avatar-place-holder-wrap.aphw-cat-wrap .avarar-upload-btn > i {
    font-size: 2.5em;
}
.sc-2-mh-64.mlt-slc-fls.laf-nrml-size .select2-container--default .select2-selection--multiple{
    min-height: 46px;
}
.mdl-sortable-list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 60px;
}

.mdl-sortable-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #e8edf3;
    border-left: 3px solid #4a90e2;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.18s ease;
    user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.mdl-sortable-list li:hover {
    border-left-color: #2563eb;
    box-shadow: 0 3px 10px rgba(74,144,226,0.15);
    transform: translateX(2px);
}

.mdl-sortable-list li.dragging {
    opacity: 0.4;
    cursor: grabbing;
    transform: scale(0.98);
    box-shadow: 0 8px 24px rgba(74,144,226,0.25);
}

.mdl-sortable-list li.drag-over {
    border-color: #2563eb;
    background: #f0f6ff;
    border-style: dashed;
}

.mdl-drag-handle {
    display: flex;
    align-items: center;
    color: #6e7274;
    margin-right: 8px;
    font-size: 20px;
    cursor: grab;
}

.mdl-item-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #e3f0ff;
    color: #2563eb;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    margin-right: 10px;
    flex-shrink: 0;
}

.mdl-item-title {
    flex: 1;
    font-weight: 600;
    font-size: 13px;
    color: #2d3748;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mdl-empty-state {
    text-align: center;
    padding: 28px 0;
    color: #b0bec5;
    font-size: 13px;
    border: 2px dashed #e2e8f0;
    border-radius: 8px;
}
.close{
    opacity: 1;
}

.course-preview-box {
    padding: 24px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

/* Cover */
.cpb-cover-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpb-cover-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.cpb-cover-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
}
.cpb-cover-placeholder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f0fe 0%, #dbeafe 100%);
    font-size: 48px;
}
.cpb-cover-badges {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cpb-badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}
.cpb-badge-diff {
    background: #dbeafe;
    color: #2563eb;
}
.cpb-badge-lang {
    background: #dcfce7;
    color: #16a34a;
}

/* Info */
.cpb-info-col {
    padding-left: 20px;
}
.cpb-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.4;
}
.cpb-description {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
    line-height: 1.6;
}
.cpb-meta-row {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.cpb-meta-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #475569;
    font-weight: 500;
}
.cpb-status-dot.active {
    color: #16a34a;
    font-weight: 600;
}
.cpb-status-dot.passive {
    color: #dc2626;
    font-weight: 600;
}
.cpb-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cpb-tag {
    padding: 2px 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 11px;
    color: #475569;
}


.cpb-divider {
    border: none;
    border-top: 1px dashed #cbd5e1;
    margin: 20px 0;
}

.cpb-detail-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
    min-height: 154px;
}
.cpb-detail-title {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.cpb-detail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 100px;
    overflow: auto;
}
.cpb-detail-list li {
    font-size: 12px;
    color: #475569;
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #f1f5f9;
}
.cpb-detail-list li:last-child {
    border-bottom: none;
}

/* Module List */
.cpb-module-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cpb-module-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: #dbeafe;
    color: #2563eb;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.cpb-module-name {
    font-size: 12px;
    color: #334155;
    font-weight: 500;
}
.cpb-diff-beginner  {
    background: rgba(220,252,231,0.95);
    color: #16a34a;
}
.cpb-diff-intermediate {
    background: rgba(254,243,199,0.95);
    color: #d97706;
}
.cpb-diff-advanced  {
    background: rgba(254,226,226,0.95);
    color: #dc2626;
}

.cpb-badge-lang {
    background: rgba(255,255,255,0.92);
    color: #334155;
}
.cpb-badge-lang .flag-icon,
.cpb-meta-item .flag-icon {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
}
.cpb-status-dot.active  {
    color: #16a34a;
    font-weight: 600;
}
.cpb-status-dot.passive {
    color: #dc2626;
    font-weight: 600;
}
.cpb-status-dot.draft   {
    color: #3b82f6;
    font-weight: 600;
}
/*List Kurs*/
.cl-page-wrap {
    padding: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cl-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.cl-stat-card {
    flex: 1;
    min-width: 160px;
    border-radius: 8px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    transition: transform 0.18s, box-shadow 0.18s;
    background-color: #fff;
    cursor: default;
}
.cl-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.cl-stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cl-stat-blue   .cl-stat-icon-wrap {
    background: #2563eb22;
}
.cl-stat-green  .cl-stat-icon-wrap {
    background: #16a34a22;
}
.cl-stat-orange .cl-stat-icon-wrap {
    background: #ea580c22;
}
.cl-stat-purple .cl-stat-icon-wrap {
    background: #7c3aed22;
}
.cl-stat-teal   .cl-stat-icon-wrap {
    background: #0d948822;
}

.cl-stat-icon {
    font-size: 22px;
}
.cl-stat-blue   .cl-stat-icon {
    color: #2563eb;
}
.cl-stat-green  .cl-stat-icon {
    color: #16a34a;
}
.cl-stat-orange .cl-stat-icon {
    color: #ea580c;
}
.cl-stat-purple .cl-stat-icon {
    color: #7c3aed;
}
.cl-stat-teal   .cl-stat-icon {
    color: #0d9488;
}

.cl-stat-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cl-stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cl-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.1;
}
.cl-stat-sub   {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}

.cl-filter-bar {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.cl-filter-search-wrap {
    flex: 1;
    min-width: 220px;
    position: relative;
    display: flex;
    align-items: center;
}
.cl-search-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    font-size: 14px;
}
.cl-search-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px 8px 36px;
    font-size: 13px;
    color: #334155;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #f8fafc;
}
.cl-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
    background: #fff;
}
.cl-filter-selects {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.cl-filter-selects .range-box-head-cus .dropdown-toggle.lang-cus {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    background: #f8fafc;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
    padding-right: 1rem !important;
    min-width: 100px;
    margin-top: 0;
}
.cl-filter-selects .cfs-l .range-box-head-cus .dropdown-toggle.lang-cus {
    min-width: 135px;
}
.cl-filter-selects .range-box-head-cus .dropdown-toggle.lang-cus:after {
    position: absolute;
    right: 10px;
    width: 6px;
    height: 6px;
}
.cl-filter-select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    background: #f8fafc;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.cl-filter-select:focus {
    border-color: #3b82f6;
}
.cl-filter-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
}
.cl-filter-btn:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}
.cl-filter-clear-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.cl-filter-clear-btn:hover {
    background: #e2e8f0;
}

.cl-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
}
.cl-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafbfc;
}
.cl-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cl-section-icon {
    font-size: 18px;
    color: #3b82f6;
}
.cl-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.cl-section-sub {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.cl-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.cl-course-card {
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
    margin: 8px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}
.cl-course-card:hover {
    background: #fafbff;
}
img.cl-card-cover-img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: cover;
    object-position: center;
}

.cl-card-cover {
    height: 140px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px 12px;
}
.cl-card-cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.35) 100%);
}
.cl-card-status-badge {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(6px);
}
.cl-card-cover-meta {
    position: relative;
    z-index: 1;
}
.cl-card-dur {
    background: rgba(0,0,0,0.45);
    color: #fff;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.cl-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.cl-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cl-card-tag {
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 10px;
    color: #475569;
    font-weight: 600;
}
.cl-card-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-card-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}
.cl-card-modules {
    font-size: 11px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
}

.cl-diff-pill, .cl-card-diff {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.cl-diff-beginner    {
    background: #dcfce7;
    color: #16a34a;
}
.cl-diff-intermediate{
    background: #fef9c3;
    color: #ca8a04;
}
.cl-diff-advanced    {
    background: #fee2e2;
    color: #dc2626;
}

.cl-status-pill, .cl-card-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.cl-status-active  {
    background: rgba(220,252,231,0.9);
    color: #16a34a;
}
.cl-status-passive {
    background: rgba(254,226,226,0.9);
    color: #dc2626;
}
.cl-status-draft   {
    background: rgba(219,234,254,0.9);
    color: #2563eb;
}

.cl-table-wrap {
    overflow-x: auto;
}
.cl-table {
    width: 100%;
    border-collapse: collapse;
}
.cl-table thead tr {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.cl-table th {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    white-space: nowrap;
}
.cl-table-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s;
}
.cl-table-row:hover {
    background: #f8fbff;
}
.cl-table-row:last-child {
    border-bottom: none;
}
.cl-table td {
    padding: 12px 16px;
    vertical-align: middle;
}

.cl-tbl-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cl-tbl-cover-thumb {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 16px;
}
.cl-tbl-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}
.cl-tbl-slug  {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}
.cl-tbl-tags  {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.cl-tbl-tag {
    padding: 2px 8px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 10px;
    color: #475569;
    font-weight: 600;
}
.cl-tbl-date {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.cl-tbl-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.cl-act-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.14s;
    color: #64748b;
}
.cl-act-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.cl-act-edit:hover {
    background: #dbeafe;
    color: #2563eb;
    border-color: #bfdbfe;
}
.cl-act-copy:hover {
    background: #dcfce7;
    color: #16a34a;
    border-color: #bbf7d0;
}
.cl-act-more:hover {
    background: #f1f5f9;
    color: #334155;
}

.cl-table-empty {
    text-align: center;
    padding: 40px;
    color: #94a3b8;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.cl-table tbody >tr {
    transition: all 0.4s;
    cursor: pointer;
}
.cl-table tbody >tr:hover {
    background-color: #f1f1f1;
}

/* ===================== COURSE DETAIL HEADER ===================== */
.cdh-wrap {
    position: relative;
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.09);
    background: #fff;
    border: 1px solid #e2e8f0;
}

/* Cover strip at top */
.cdh-cover-strip {
    height: 8px;
    width: 100%;
    position: relative;
}
.cdh-cover-strip-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.08);
}

/* Main card */
.cdh-card {
    display: flex;
    align-items: stretch;
    padding: 24px 28px;
    gap: 24px;
}

/* Left section */
.cdh-left {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

/* Thumbnail */
.cdh-thumb-wrap {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
}
.cdh-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cdh-thumb-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cdh-thumb-initials span {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Info */
.cdh-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cdh-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.cdh-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}
.cdh-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Status badge */
.cdh-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.cdh-status-active  {
    background: #dcfce7;
    color: #16a34a;
}
.cdh-status-passive {
    background: #fee2e2;
    color: #dc2626;
}
.cdh-status-draft   {
    background: #dbeafe;
    color: #2563eb;
}

/* Badges */
.cdh-badges-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.cdh-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.cdh-badge-category {
    background: #ede9fe;
    color: #7c3aed;
}
.cdh-badge-tag      {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.cdh-diff-beginner    {
    background: #dcfce7;
    color: #16a34a;
}
.cdh-diff-intermediate{
    background: #fef9c3;
    color: #ca8a04;
}
.cdh-diff-advanced    {
    background: #fee2e2;
    color: #dc2626;
}

/* Meta row */
.cdh-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cdh-meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}
.cdh-meta-item .flag-icon {
    width: 16px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
}
.cdh-meta-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}
.cdh-meta-update {
    color: #94a3b8;
    font-style: italic;
}

/* Stats col */
.cdh-stats-col {
    display: flex;
    align-items: center;
    gap: 0;
    border-left: 1px solid #f1f5f9;
    padding-left: 28px;
    flex-shrink: 0;
}
.cdh-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    gap: 4px;
}
.cdh-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
}
.cdh-stat-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.cdh-stat-divider {
    width: 1px;
    height: 40px;
    background: #f1f5f9;
    flex-shrink: 0;
}

/* Progress strip */
.cdh-progress-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}
.cdh-progress-item {
    padding: 16px 20px;
    border-right: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 14px;
}
.cdh-progress-item:last-child {
    border-right: none;
}
.cdh-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cdh-progress-val {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
}
.cdh-progress-track {
    height: 6px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.cdh-progress-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}
.cdh-prog-icon-blue   {
    background: #dbeafe;
    color: #2563eb;
}
.cdh-prog-icon-green  {
    background: #dcfce7;
    color: #16a34a;
}
.cdh-prog-icon-orange {
    background: #ffedd5;
    color: #ea580c;
}
.cdh-prog-icon-purple {
    background: #ede9fe;
    color: #7c3aed;
}

.cdh-prog-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Back bar */
.cdh-back-bar {
    display: flex;
    align-items: center;
}

.cdh-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px 6px 8px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.16s;
    outline: none;
}
.cdh-back-btn:hover {
    background: rgba(0,0,0,0.05);
}
.cdh-back-btn:hover .cdh-back-arrow {
    transform: translateX(-3px);
    background: rgba(0,0,0,0.08);
}
.cdh-back-btn:active {
    background: rgba(0,0,0,0.09);
}

.cdh-back-arrow {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #334155;
    transition: transform 0.18s cubic-bezier(.4,0,.2,1), background 0.16s;
    flex-shrink: 0;
}

.cdh-back-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.cdh-back-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.cdh-back-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #94a3b8;
    font-weight: 400;
    line-height: 1.2;
}

.cdh-back-code {
    font-weight: 600;
    color: #64748b;
}

.cdh-back-dot {
    color: #cbd5e1;
    font-size: 10px;
}
/* Taxonomy row: category + difficulty */
.cdh-taxonomy-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cdh-taxonomy-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
}
.cdh-taxonomy-category {
    background: #ede9fe;
    color: #7c3aed;
    border: 1.5px solid #ddd6fe;
}
.cdh-taxonomy-diff.cdh-diff-beginner    {
    background: #dcfce7;
    color: #16a34a;
    border: 1.5px solid #bbf7d0;
}
.cdh-taxonomy-diff.cdh-diff-intermediate{
    background: #fef9c3;
    color: #ca8a04;
    border: 1.5px solid #fde68a;
}
.cdh-taxonomy-diff.cdh-diff-advanced    {
    background: #fee2e2;
    color: #dc2626;
    border: 1.5px solid #fecaca;
}

/* Tags row */
.cdh-tags-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cdh-tags-icon {
    font-size: 13px;
    color: #94a3b8;
    flex-shrink: 0;
}
.cdh-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    transition: all 0.13s;
}
.cdh-tag:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #2563eb;
}

/* Progress strip — icon + body layout */

.cdh-prog-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.cdh-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cdh-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px 6px 12px;
    background: rgba(37,99,235,0.07);
    border: 1.5px solid rgba(37,99,235,0.18);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    transition: all 0.16s cubic-bezier(.4,0,.2,1);
    outline: none;
    white-space: nowrap;
}
.cdh-toolbar-btn i {
    font-size: 15px;
    transition: transform 0.16s;
}
.cdh-toolbar-btn:hover {
    background: rgba(37,99,235,0.07);
    border-color: rgba(37,99,235,0.18);
    color: #2563eb;
}
.cdh-toolbar-btn:hover i {
    transform: rotate(-8deg) scale(1.1);
}
.cdh-toolbar-btn:active {
    background: rgba(37,99,235,0.12);
    transform: scale(0.97);
}

/* ===================== COURSE DETAIL TABS ===================== */
.cdt-tabs-wrap {
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.cdt-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: #fff;
    border-bottom: 2px solid #f1f5f9;
    padding: 0;
}
.cdt-tabs-scroll::-webkit-scrollbar {
    display: none;
}

.cdt-tabs-nav {
    display: flex;
    align-items: stretch;
    min-width: max-content;
}

/* Tab item */
.cdt-tab-item {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 8px;
    min-width: 90px;
    max-width: 110px;
    cursor: pointer;
    text-decoration: none !important;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: border-color 0.2s, background 0.18s;
}

.cdt-tab-item:hover {
    background: #f8fafc;
}
.cdt-tab-item:hover .cdt-tab-icon-wrap {
    background: #e0e7ff;
    transform: translateY(-1px);
}
.cdt-tab-item:hover .cdt-tab-icon {
    color: #4f46e5;
}
.cdt-tab-item:hover .cdt-tab-label {
    color: #334155;
}

/* Icon wrap */
.cdt-tab-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.18s, transform 0.18s cubic-bezier(.34,1.56,.64,1);
}
.cdt-tab-icon {
    font-size: 15px;
    color: #94a3b8;
    transition: color 0.18s;
}

/* Label */
.cdt-tab-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.18s;
    letter-spacing: 0.1px;
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.3;
    width: 100%;
}

/* Active */
.cdt-tab-item.cdt-tab-active {
    border-bottom-color: #4f46e5;
    background: #fafaff;
}
.cdt-tab-item.cdt-tab-active .cdt-tab-icon-wrap {
    background: #e0e7ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(79,70,229,0.15);
}
.cdt-tab-item.cdt-tab-active .cdt-tab-icon {
    color: #4f46e5;
}
.cdt-tab-item.cdt-tab-active .cdt-tab-label {
    color: #4f46e5;
    font-weight: 700;
}
.cdt-tab-item::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 6px;
    background: linear-gradient(180deg, #6366f1, #818cf8);
    border-radius: 34px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s;
}
.cdt-tab-item.cdt-tab-active::after {
    opacity: 1;
    visibility: visible;
    width: 46px;
}

/* Content */
.cdt-tab-content {
    padding: 24px;
    min-height: 200px;
}

/* Responsive */
@media (max-width: 768px) {
    .cdt-tabs-scroll {
        padding: 0 8px;
    }
    .cdt-tab-item {
        padding: 12px 14px;
        gap: 7px;
    }
    .cdt-tab-icon-wrap {
        width: 28px;
        height: 28px;
    }
    .cdt-tab-icon {
        font-size: 13px;
    }
    .cdt-tab-label {
        font-size: 12px;
    }
    .cdt-tab-content {
        padding: 16px;
    }
}

/* ===================== COURSE OVERVIEW  ===================== */
.cov2-wrap {
    padding: 4px 0;
}

/* Block */
.cov2-block {
    margin-bottom: 32px;
}
.cov2-block-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.cov2-block-label-bar {
    width: 4px;
    height: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}
.cov2-bar-blue   {
    background: #3b82f6;
}
.cov2-bar-green  {
    background: #22c55e;
}
.cov2-bar-orange {
    background: #f59e0b;
}
.cov2-bar-purple {
    background: #a855f7;
}
.cov2-bar-slate  {
    background: #94a3b8;
}

/* Description */
.cov2-desc-block {
    background: #f8fafc;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 20px;
}
.cov2-desc-text {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.85;
    margin: 0;
}

/* Outcomes grid */
.cov2-outcomes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cov2-outcome-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: #166534;
    line-height: 1.5;
    transition: box-shadow 0.15s;
}
.cov2-outcome-card:hover {
    box-shadow: 0 2px 10px rgba(34,197,94,0.12);
}
.cov2-outcome-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #22c55e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Prereqs */
.cov2-prereq-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cov2-prereq-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    transition: border-color 0.15s, background 0.15s;
}
.cov2-prereq-item:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}
.cov2-prereq-arrow {
    font-size: 11px;
    color: #3b82f6;
    flex-shrink: 0;
}

/* Audience */
.cov2-audience-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cov2-audience-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #faf5ff;
    border: 1.5px solid #e9d5ff;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #7c3aed;
    transition: all 0.15s;
}
.cov2-audience-item:hover {
    background: #f3e8ff;
    box-shadow: 0 2px 8px rgba(139,92,246,0.15);
}
.cov2-audience-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ede9fe;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #7c3aed;
}

/* Tags */
.cov2-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cov2-tag {
    display: inline-flex;
    align-items: center;
    padding: 5px 13px;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    transition: all 0.14s;
    cursor: default;
}
.cov2-tag:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    color: #2563eb;
}

/* ---- RIGHT COLUMN ---- */

/* Difficulty banner */
.cov2-diff-banner {
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cov2-green  {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
}
.cov2-orange {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
}
.cov2-red    {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
}

.cov2-diff-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cov2-diff-icon {
    font-size: 26px;
}
.cov2-green  .cov2-diff-icon {
    color: #16a34a;
}
.cov2-orange .cov2-diff-icon {
    color: #d97706;
}
.cov2-red    .cov2-diff-icon {
    color: #dc2626;
}

.cov2-diff-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
}
.cov2-diff-val {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
}
.cov2-diff-right {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.cov2-diff-right .flag-icon {
    width: 20px;
    height: 15px;
    border-radius: 3px;
}
.cov2-diff-lang {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}

/* Stats grid */
.cov2-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}
.cov2-stat-box {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    transition: box-shadow 0.15s;
}
.cov2-stat-box:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}
.cov2-stat-icon {
    font-size: 20px;
    margin-bottom: 2px;
}
.cov2-icon-blue   {
    color: #3b82f6;
}
.cov2-icon-indigo {
    color: #6366f1;
}
.cov2-icon-purple {
    color: #a855f7;
}
.cov2-icon-orange {
    color: #f59e0b;
}

.cov2-stat-val {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}
.cov2-stat-unit {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Completion */
.cov2-completion-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.cov2-completion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.cov2-completion-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cov2-completion-pct {
    font-size: 14px;
    font-weight: 800;
    color: #3b82f6;
}
.cov2-completion-track {
    height: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}
.cov2-completion-fill {
    height: 100%;
    background: #3b82f6;
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}

/* Info card */
.cov2-info-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.cov2-info-header {
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}
.cov2-info-list {
    display: flex;
    flex-direction: column;
}
.cov2-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed #f1f5f9;
}
.cov2-info-row:last-child {
    border-bottom: none;
}
.cov2-info-key  {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}
.cov2-info-code {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    letter-spacing: 0.5px;
}
.cov2-info-bold {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

/* ===================== INSTRUCTOR LIST (sol) ===================== */
.cov2-bar-indigo {
    background: #6366f1;
}

.cov2-instructor-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cov2-instructor-card-full {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fafbff;
    border: 1.5px solid #e0e7ff;
    border-radius: 14px;
    padding: 18px;
    transition: box-shadow 0.15s;
}
.cov2-instructor-card-full:hover {
    box-shadow: 0 4px 16px rgba(99,102,241,0.1);
}

.cov2-ins-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.cov2-ins-avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    object-fit: cover;
}
.cov2-ins-avatar-text {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #4f46e5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 3px 10px rgba(79,70,229,0.22);
}

.cov2-ins-role-badge {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.cov2-role-master    {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
}
.cov2-role-assistant {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}
.cov2-role-guest     {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

.cov2-ins-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cov2-ins-name {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
}
.cov2-ins-title,
.cov2-ins-email {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
}
.cov2-ins-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.cov2-ins-exp-tag {
    padding: 3px 10px;
    background: #ede9fe;
    border: 1px solid #ddd6fe;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #6d28d9;
}
.cov2-ins-bio {
    font-size: 12px;
    color: #94a3b8;
    margin: 4px 0 0;
    line-height: 1.5;
    font-style: italic;
}

/* ===================== INSTRUCTOR COMPACT (sağ) ===================== */
.cov2-ins-compact-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.cov2-ins-compact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}
.cov2-ins-compact-row:last-child {
    border-bottom: none;
}

.cov2-ins-compact-av {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.cov2-ins-compact-av-text {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #4f46e5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}
.cov2-ins-compact-info {
    flex: 1;
    min-width: 0;
}
.cov2-ins-compact-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cov2-ins-compact-sub {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cov2-ins-compact-stats {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-size: 11px;
    color: #6366f1;
    font-weight: 600;
}
.cov2-ins-compact-stats i {
    font-size: 11px;
}
.cov2-ins-stat-sep {
    color: #cbd5e1;
    font-size: 9px;
}
.cov2-ins-stat-empty {
    color: #cbd5e1;
}

/* Difficulty box renkleri — icon rengi değişiyor */
.cov2-stat-diff.cov2-green  .cov2-stat-icon {
    color: #16a34a;
}
.cov2-stat-diff.cov2-green  {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.cov2-stat-diff.cov2-orange .cov2-stat-icon {
    color: #d97706;
}
.cov2-stat-diff.cov2-orange {
    background: #fffbeb;
    border-color: #fde68a;
}

.cov2-stat-diff.cov2-red    .cov2-stat-icon {
    color: #dc2626;
}
.cov2-stat-diff.cov2-red    {
    background: #fef2f2;
    border-color: #fecaca;
}

.cov2-stat-diff .cov2-stat-val {
    font-size: 14px;
}

/* Dil box */
.cov2-stat-lang {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.cov2-stat-flag {
    width: 28px !important;
    height: 20px !important;
    border-radius: 4px;
    margin-bottom: 4px;
}
/* Responsive */
@media (max-width: 768px) {
    .cov2-outcomes-grid {
        grid-template-columns: 1fr;
    }
    .cov2-stats-grid    {
        grid-template-columns: 1fr 1fr;
    }
}
/* ===================== COURSE ACADEMY TAB ===================== */
.coa-wrap {
    padding: 4px 0;
}

/* Header */
.coa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.coa-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.coa-header-icon {
    font-size: 30px;
    color: #6366f1;
}
.coa-header-title {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
}
.coa-header-sub {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}


/* Grid */
.coa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

/* Card */
.coa-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.18s;
    cursor: pointer;
}
.coa-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}

.coa-card-bar {
    height: 5px;
    width: 100%;
}

.coa-card-body {
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Head row */
.coa-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.coa-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Status pill */
.coa-status-pill {
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
}
.coa-status-active  {
    background: #dcfce7;
    color: #16a34a;
}
.coa-status-passive {
    background: #fee2e2;
    color: #dc2626;
}
.coa-status-draft   {
    background: #fef9c3;
    color: #ca8a04;
}

/* Info */
.coa-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.coa-card-name {
    font-size: 16px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.3;
}
.coa-card-slug {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
}
.coa-card-desc {
    font-size: 12px;
    color: #64748b;
    margin: 4px 0 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta pills */
.coa-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.coa-meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}
.coa-meta-pill .flag-icon {
    width: 14px;
    height: 11px;
    border-radius: 2px;
}
.coa-meta-comment {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #16a34a;
}

/* Divider */
.coa-card-divider {
    border: none;
    border-top: 1px solid #f1f5f9;
    margin: 0;
}

/* Stats */
.coa-card-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}
.coa-stat {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.coa-stat-val {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
}
.coa-stat-key {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
}
.coa-card-arrow {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    font-size: 14px;
    transition: background 0.15s, transform 0.15s;
}
.coa-card:hover .coa-card-arrow {
    transform: translateX(3px);
    background: #f1f5f9;
}

/* Loading */
.coa-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #94a3b8;
    font-size: 13px;
}
.coa-spin {
    animation: coa-rotate 1s linear infinite;
    font-size: 18px;
}
@keyframes coa-rotate {
    from {
        transform: rotate(0deg);
    }
    to   {
        transform: rotate(360deg);
    }
}

/* Empty */
.coa-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 50px 20px;
    text-align: center;
}
.coa-empty-icon {
    font-size: 36px;
    color: #e2e8f0;
    margin-bottom: 4px;
}
.coa-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}
.coa-empty-sub {
    font-size: 13px;
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    .coa-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== INSTRUCTOR LIST ===================== */
.cil-wrap {
    padding: 4px 0;
}

/* Filter bar */
.cil-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.cil-search-wrap {
    flex: 1;
    min-width: 220px;
    position: relative;
    display: flex;
    align-items: center;
}
.cil-search-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 14px;
}
.cil-search-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px 8px 36px;
    font-size: 13px;
    color: #334155;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #f8fafc;
}
.cil-search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}
.cil-filter-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cil-filter-select {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    outline: none;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: border-color 0.15s;
}
.cil-filter-select:focus {
    border-color: #6366f1;
}
.cil-search-btn {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s;
    box-shadow: 0 2px 8px rgba(99,102,241,0.2);
    margin-right: 8px;
}
.cil-search-btn:hover {
    background: #4f46e5;
    transform: translateY(-1px);
}
.cil-clear-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.15s;
}
.cil-clear-btn:hover {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.cil-count-badge {
    padding: 4px 14px;
    background: #f1f5f9;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

/* Grid */
.cil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(476px, 1fr));
    gap: 16px;
}

/* Card */
.cil-card {
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 8px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.18s, transform 0.18s;
    cursor: pointer;
}
.cil-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.09);
    transform: translateY(-3px);
}

/* Top */
.cil-card-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.cil-avatar-wrap {
    flex-shrink: 0;
}
.cil-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
}
.cil-avatar-text {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.cil-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.cil-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cil-name {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cil-status-pill {
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.cil-status-active  {
    background: #dcfce7;
    color: #16a34a;
}
.cil-status-passive {
    background: #fee2e2;
    color: #dc2626;
}
.cil-status-draft   {
    background: #fef9c3;
    color: #ca8a04;
}
.cil-username {
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 3px;
}
.cil-title-row {
    font-size: 13px;
    font-weight: 700;
    margin-top: 1px;
}

/* Expertise */
.cil-expertise-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cil-exp-tag {
    padding: 3px 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
}
.cil-exp-more {
    padding: 3px 10px;
    background: #ede9fe;
    border: 1px solid #ddd6fe;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #6d28d9;
}

/* Bio */
.cil-bio {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Divider */
.cil-divider {
    border: none;
    border-top: 1px solid #f1f5f9;
}

/* Stats */
.cil-stats-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cil-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
}
.cil-stat i {
    font-size: 13px;
    color: #94a3b8;
}
.cil-stat-val {
    font-weight: 800;
    color: #1e293b;
    font-size: 13px;
}
.cil-stat-key {
    color: #94a3b8;
    font-size: 11px;
}

/* Loading / Empty */
.cil-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 50px;
    color: #94a3b8;
    font-size: 13px;
}
.cil-spin {
    animation: cil-rotate 1s linear infinite;
    font-size: 18px;
}
@keyframes cil-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cil-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 60px 20px;
    text-align: center;
}
.cil-empty-icon {
    font-size: 40px;
    color: #e2e8f0;
}
.cil-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #334155;
}
.cil-empty-sub {
    font-size: 13px;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .cil-grid {
        grid-template-columns: 1fr;
    }
    .cil-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .cil-search-wrap {
        min-width: unset;
    }
}

/* =====================================================
   Kurs Modülleri  –  com-* sınıfları
   ===================================================== */

/* ── Wrapper ── */
.com-wrap {
    padding: 0;
    font-family: inherit;
}

/* ── Header ── */
.com-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.com-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.com-header-icon {
    font-size: 28px;
    color: #6C63FF;
    line-height: 1;
}
.com-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 2px;
}
.com-header-sub {
    font-size: 12px;
    color: #8a8fa8;
    margin: 0;
}
.com-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.com-count-badge {
    background: #f0eeff;
    color: #6C63FF;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}



/* ── Liste ── */
.com-list {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Loading ── */
.com-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aaa;
    padding: 32px 0;
    font-size: 14px;
}
@keyframes com-spin-anim {
    to {
        transform: rotate(360deg);
    }
}
.com-spin {
    animation: com-spin-anim .8s linear infinite;
}

/* ── Empty ── */
.com-empty {
    text-align: center;
    padding: 48px 0;
}
.com-empty-icon {
    font-size: 48px;
    color: #d5d5e8;
    display: block;
    margin-bottom: 12px;
}
.com-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.com-empty-sub {
    font-size: 13px;
    color: #aaa;
}

/* ── Kart ── */
.com-card {
    background: #fff;
    border: 1px solid #e8e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
    position: relative;
}
.com-card:hover {
    box-shadow: 0 4px 18px rgba(108,99,255,.08);
    border-color: #d0ccff;
}
.com-card.com-drag-over {
    border: 2px dashed #6C63FF;
    background: #f7f5ff;
}
.com-card.com-dragging {
    opacity: .5;
}

/* Sol renk çubuğu */
.com-card-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* ── Kart Header ── */
.com-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 12px;
    cursor: pointer;
    user-select: none;
}

.com-drag-handle {
    color: #ccc;
    font-size: 16px;
    cursor: grab;
    padding: 0 2px 0 8px;
    transition: color .2s;
    flex-shrink: 0;
}
.com-card:hover .com-drag-handle {
    color: #aaa;
}

.com-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .5px;
}

.com-card-meta {
    flex: 1;
    min-width: 0;
}
.com-card-order {
    font-size: 11px;
    font-weight: 700;
    color: #bbb;
    margin-bottom: 2px;
    letter-spacing: .5px;
}
.com-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.com-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ── Pill'ler ── */
.com-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    line-height: 1.4;
}
.mod-pill-published {
    background: #e6faf3;
    color: #10B981;
}
.mod-pill-draft     {
    background: #fff8e6;
    color: #F59E0B;
}
.mod-pill-passive   {
    background: #f5f5f5;
    color: #9ca3af;
}
.com-pill-type      {
    background: #ede9ff;
    color: #6C63FF;
}
.com-pill-dur       {
    background: #f0f7ff;
    color: #0EA5E9;
}

/* ── Aksiyon butonları ── */
.com-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.com-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #aaa;
    transition: background .15s, color .15s;
}
.com-action-btn:hover {
    background: #f5f5f8;
    color: #555;
}
.com-btn-del:hover    {
    background: #fff0f0;
    color: #EF4444;
}
.com-btn-edit:hover   {
    background: #f0eeff;
    color: #6C63FF;
}
.com-btn-toggle       {
    color: #6C63FF;
}

/* ── Accordion Body ── */
.com-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .2s;
    padding: 0 20px 0 20px;
    border-top: 0 solid #f0f0f0;
}
.com-card.com-open .com-card-body {
    max-height: 600px;
    padding: 16px 20px 18px 20px;
    border-top-width: 1px;
}

.com-body-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fafafa;
    border-left: 3px solid #e0dcff;
    border-radius: 0 8px 8px 0;
}

.com-body-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .com-body-cols {
        grid-template-columns: 1fr;
    }
}

.com-body-col-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}

.com-body-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 300px;
    overflow: auto;
    min-height: 100px;
    height: 180px;
}
.com-body-list li {
    font-size: 13px;
    color: #444;
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.com-body-list li i {
    color: #6C63FF;
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}

.com-body-concepts {
    margin-bottom: 14px;
}
.com-concepts-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.com-concept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid;
}

.com-body-footer {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.com-meta-item {
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 4px;
}
.com-meta-item i {
    color: #c5c5d5;
}

.com-footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px 18px;
    font-size: 12px;
    color: #b0b0c0;
}
.com-footer-hint i {
    font-size: 14px;
    color: #c8c8d8;
}

/* =====================================================
   Kurs Modülleri  –  com-* sınıfları
   ===================================================== */

/* ── Wrapper ── */
.com-wrap {
    padding: 0;
    font-family: inherit;
}

/* ── Header ── */
.com-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.com-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.com-header-icon {
    font-size: 28px;
    color: #6C63FF;
    line-height: 1;
}
.com-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 2px;
}
.com-header-sub {
    font-size: 12px;
    color: #8a8fa8;
    margin: 0;
}
.com-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.com-count-badge {
    background: #f0eeff;
    color: #6C63FF;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

/* ── Yeni Modül butonu ── */
.com-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.com-btn-add:hover {
    /*background: #574fd6;*/
    opacity: 0.7;
    transform: translateY(-1px);
}
.com-btn-add i {
    font-size: 15px;
}

/* ── Liste ── */
.com-list {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Loading ── */
.com-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aaa;
    padding: 32px 0;
    font-size: 14px;
}
@keyframes com-spin-anim {
    to {
        transform: rotate(360deg);
    }
}
.com-spin {
    animation: com-spin-anim .8s linear infinite;
}

/* ── Empty ── */
.com-empty {
    text-align: center;
    padding: 48px 0;
}
.com-empty-icon {
    font-size: 48px;
    color: #d5d5e8;
    display: block;
    margin-bottom: 12px;
}
.com-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.com-empty-sub {
    font-size: 13px;
    color: #aaa;
}

/* ── Kart ── */
.com-card {
    background: #fff;
    border: 1px solid #e8e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
    position: relative;
}
.com-card:hover {
    box-shadow: 0 4px 18px rgba(108,99,255,.08);
    border-color: #d0ccff;
}
.com-card.com-drag-over {
    border: 2px dashed #6C63FF;
    background: #f7f5ff;
}
.com-card.com-dragging {
    opacity: .5;
}

/* Sol renk çubuğu */
.com-card-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
}

/* ── Kart Header ── */
.com-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 14px 12px;
    cursor: pointer;
    user-select: none;
}

.com-drag-handle {
    color: #ccc;
    font-size: 16px;
    cursor: grab;
    padding: 0 2px 0 8px;
    transition: color .2s;
    flex-shrink: 0;
}
.com-card:hover .com-drag-handle {
    color: #aaa;
}

.com-card-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .5px;
}

.com-card-meta {
    flex: 1;
    min-width: 0;
}
.com-card-order {
    font-size: 11px;
    font-weight: 700;
    color: #bbb;
    margin-bottom: 2px;
    letter-spacing: .5px;
}
.com-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
}
.com-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ── Pill'ler ── */
.com-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    line-height: 1.4;
}
.mod-pill-published {
    background: #e6faf3;
    color: #10B981;
}
.mod-pill-draft     {
    background: #fff8e6;
    color: #F59E0B;
}
.mod-pill-passive   {
    background: #f5f5f5;
    color: #9ca3af;
}
.com-pill-type      {
    background: #ede9ff;
    color: #6C63FF;
}
.com-pill-dur       {
    background: #f0f7ff;
    color: #0EA5E9;
}

/* ── Aksiyon butonları ── */
.com-card-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.com-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #aaa;
    transition: background .15s, color .15s;
}
.com-action-btn:hover {
    background: #f5f5f8;
    color: #555;
}
.com-btn-del:hover    {
    background: #fff0f0;
    color: #EF4444;
}
.com-btn-edit:hover   {
    background: #f0eeff;
    color: #6C63FF;
}
.com-btn-toggle       {
    color: #6C63FF;
}

/* ── Accordion Body ── */
.com-card-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .2s;
    padding: 0 20px 0 20px;
    border-top: 0 solid #f0f0f0;
}
.com-card.com-open .com-card-body {
    max-height: 600px;
    padding: 16px 20px 18px 20px;
    border-top-width: 1px;
}

.com-body-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    margin: 0 0 14px;
    padding: 10px 14px;
    background: #fafafa;
    border-left: 3px solid #e0dcff;
    border-radius: 0 8px 8px 0;
}

.com-body-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}
@media (max-width: 600px) {
    .com-body-cols {
        grid-template-columns: 1fr;
    }
}

.com-body-col-title {
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}



/* ── Key Concepts ── */
.com-body-concepts {
    margin-bottom: 14px;
}
.com-concepts-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.com-concept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1.5px solid;
}

/* ── Body Footer ── */
.com-body-footer {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.com-meta-item {
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 4px;
}
.com-meta-item i {
    color: #c5c5d5;
}

/* ── Alt ipucu ── */
.com-footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px 18px;
    font-size: 12px;
    color: #b0b0c0;
}
.com-footer-hint i {
    font-size: 14px;
    color: #c8c8d8;
}

.m-r-xs {
    margin-right: 4px;
}
.mof-tag-wrap {
    border: 1px solid #e4e6e8;
    border-radius: 4px;
    padding: 6px 8px;
    background: #fff;
    min-height: 42px;
    cursor: text;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    transition: border-color .2s, box-shadow .2s;
    max-height: 90px;
    overflow: auto;
}
/*.mof-tag-wrap:focus-within {
    border-color: #6C63FF;
    box-shadow: 0 0 0 3px rgba(108,99,255,.12);
}*/

/* Mevcut tag'ler */
.mof-tag-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mof-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ede9ff;
    color: #6C63FF;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px 3px 10px;
    border-radius: 20px;
    line-height: 1.4;
}
.mof-tag-remove {
    font-size: 12px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
}
.mof-tag-remove:hover {
    opacity: 1;
}

/* Input alanı */
.mof-tag-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #333;
    min-width: 160px;
    flex: 1;
    padding: 2px 4px;
}
.mof-tag-input::placeholder {
    color: #bbb;
}
.form-legent-syl.sc-2-mh-64.txtra-typ-cus .mof-tag-wrap {
    min-height: 84px;
    max-height: 84px;
    align-items: baseline;
}
/* =====================================================
   Kursa Kayıtlı Öğrenciler  –  cos-* sınıfları
   ===================================================== */

/* ── Wrapper ── */
.cos-wrap {
    padding: 0;
    font-family: inherit;
}

/* ── Header ── */
.cos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f0f0f0;
}
.cos-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.cos-header-icon {
    font-size: 28px;
    color: #6C63FF;
    line-height: 1;
}
.cos-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 2px;
}
.cos-header-sub {
    font-size: 12px;
    color: #8a8fa8;
    margin: 0;
}

/* ── Öğrenci Ekle butonu ── */
.cos-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #6C63FF;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.cos-btn-add:hover {
    background: #574fd6;
    transform: translateY(-1px);
}
.cos-btn-add i {
    font-size: 15px;
}

/* ── Filtre Çubuğu ── */
.cos-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-bottom: 1px solid #f5f5f8;
    flex-wrap: wrap;
}

/* ── Custom Select ── */
.cos-filter-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #e0e0ec;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    user-select: none;
    min-width: 130px;
    transition: border-color .2s, box-shadow .2s;
}
.cos-filter-select:hover {
    border-color: #c5c0f0;
}
.cos-filter-select.cos-open {
    border-color: #6C63FF;
    box-shadow: 0 0 0 3px rgba(108,99,255,.1);
}
.cos-fsel-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cos-fsel-arrow {
    font-size: 13px;
    color: #aaa;
    transition: transform .2s;
}
.cos-filter-select.cos-open .cos-fsel-arrow {
    transform: rotate(180deg);
}
.cos-fsel-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e8e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 99;
    overflow: hidden;
    display: none;
}
.cos-filter-select.cos-open .cos-fsel-drop {
    display: block;
}
.cos-fsel-item {
    padding: 9px 14px;
    font-size: 13px;
    color: #444;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.cos-fsel-item:hover      {
    background: #f5f3ff;
    color: #6C63FF;
}
.cos-fsel-item.cos-fsel-active {
    background: #ede9ff;
    color: #6C63FF;
    font-weight: 600;
}

/* ── Arama ── */
.cos-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.cos-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 15px;
    pointer-events: none;
}
.cos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 20px 24px;
}
@media (max-width: 900px) {
    .cos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .cos-grid {
        grid-template-columns: 1fr;
    }
}

.cos-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #aaa;
    padding: 40px 0;
    font-size: 14px;
    justify-content: center;
}
@keyframes cos-spin-anim {
    to {
        transform: rotate(360deg);
    }
}
.cos-spin {
    animation: cos-spin-anim .8s linear infinite;
}

.cos-empty {
    text-align: center;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: 1 / -1;
}
.cos-empty-icon {
    font-size: 48px;
    color: #d5d5e8;
    display: block;
    margin-bottom: 12px;
}
.cos-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.cos-empty-sub {
    font-size: 13px;
    color: #aaa;
}

.cos-card {
    background: #fff;
    border: 1px solid #ebebf5;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .2s, border-color .2s, transform .2s;
}
.cos-card:hover {
    box-shadow: 0 6px 20px rgba(108,99,255,.1);
    border-color: #d4d0f5;
    transform: translateY(-2px);
}

.cos-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cos-card-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .5px;
}
.cos-card-info {
    flex: 1;
    min-width: 0;
}
.cos-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cos-card-nick {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 1px;
}

/* Status Pill */
.cos-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.cos-pill-not-started {
    background: #f3f4f6;
    color: #9ca3af;
}
.cos-pill-started     {
    background: #ede9ff;
    color: #6C63FF;
}
.cos-pill-progress    {
    background: #e0f5ff;
    color: #0EA5E9;
}
.cos-pill-completed   {
    background: #d1faf0;
    color: #10B981;
}
.cos-pill-dropped     {
    background: #fef3c7;
    color: #F59E0B;
}

/* Kart – Progress */
.cos-card-progress {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cos-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cos-progress-label {
    font-size: 12px;
    color: #aaa;
}
.cos-progress-pct {
    font-size: 13px;
    font-weight: 700;
}
.cos-progress-track {
    background: #f0f0f8;
    border-radius: 20px;
    height: 6px;
    overflow: hidden;
}
.cos-progress-bar {
    height: 100%;
    border-radius: 20px;
    transition: width .4s ease;
    min-width: 4px;
}

.cos-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4px;
    border-top: 1px solid #f5f5f8;
}
.cos-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #aaa;
}
.cos-meta i {
    color: #c8c8d8;
}

.cos-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 24px 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.cos-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    width:100%;
}
.cos-page-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid #e8e8f0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.cos-page-btn:hover {
    background: #f5f3ff;
    border-color: #c5c0f0;
    color: #6C63FF;
}
.cos-page-btn.cos-page-active {
    background: #6C63FF;
    border-color: #6C63FF;
    color: #fff;
}
/* Ön Koşul Kurslar*/

.cpq-wrap {
    padding: 0;
    font-family: inherit;
}
.cpq-list {
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cpq-empty {
    text-align: center;
    padding: 48px 0;
}
.cpq-empty-icon {
    font-size: 48px;
    color: #d5d5e8;
    display: block;
    margin-bottom: 12px;
}
.cpq-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #555;
    margin-bottom: 4px;
}
.cpq-empty-sub {
    font-size: 13px;
    color: #aaa;
}

.cpq-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #ecedf5;
    border-radius: 14px;
    padding: 14px 16px 14px 0;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s, transform .2s, opacity .3s;
}
.cpq-row:hover {
    box-shadow: 0 4px 18px rgba(108,99,255,.09);
    border-color: #d4d0f5;
    transform: translateX(3px);
}
.cpq-row-removing {
    opacity: 0;
    transform: translateX(20px);
}

.cpq-row-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 0 3px 3px 0;
    flex-shrink: 0;
    min-height: 48px;
}

.cpq-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.cpq-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cpq-row-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cpq-row-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpq-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
.cpq-meta-txt {
    font-size: 12px;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
}
.cpq-meta-txt i {
    color: #c5c5d8;
}
.cpq-meta-sep {
    font-size: 11px;
    color: #d5d5e0;
}
.cpq-slug {
    font-family: "Courier New", monospace;
    font-size: 11px;
    color: #b0b0c8;
}

.cpq-level-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cpq-level-beginner     {
    background: #10B981;
}
.cpq-level-intermediate {
    background: #F59E0B;
}
.cpq-level-advanced     {
    background: #EF4444;
}
.cpq-level-expert       {
    background: #6C63FF;
}

.cpq-row-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.cpq-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: .3px;
    white-space: nowrap;
}
.cpq-badge-required    {
    background: #fff0f0;
    color: #EF4444;
}
.cpq-badge-recommended {
    background: #fffbe6;
    color: #F59E0B;
}
.cpq-badge-optional    {
    background: #f0f7ff;
    color: #0EA5E9;
}

.cpq-btn-remove {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ccc;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.cpq-btn-remove:hover {
    background: #fff0f0;
    color: #EF4444;
}
/* =====================================================
   insertCourses Modalı  –  ic-* sınıfları
   (cos-page-btn / cos-page-active / cos-loading /
    cos-spin  paylaşımlı)
   ===================================================== */

/* ── Modal boyutu override ── */
.ic-wizard-modal .modal-dialog {
    max-width: 900px !important;
    width: 900px !important;
}
.ic-wizard-modal .modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
    box-shadow: 0 24px 64px rgba(0,0,0,.18);
}
.ic-wizard-modal .project-inner-start-build-wrap {
    padding: 0 !important;
}
.ic-wizard-modal .project-footer-wrap {
    border-top: 1px solid #f0f0f8;
    padding: 14px 20px;
}

/* ── Header ── */
.ic-modal-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 16px !important;
    border-bottom: 1px solid #f0f0f8;
    margin: 0 !important;
}
.ic-modal-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ic-modal-header-icon {
    width: 44px;
    height: 44px;
    background: #ede9ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6C63FF;
    font-size: 22px;
    flex-shrink: 0;
}
.ic-modal-sub {
    font-size: 12px !important;
    color: #9ca3af !important;
    margin-top: 2px !important;
}
.ic-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f5f5f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.ic-modal-close:hover {
    background: #ffe4e4;
    color: #EF4444;
}

/* ── Layout (sol + sağ) ── */
.ic-layout {
    display: flex;
    height: 480px;
    overflow: hidden;
}

/* ━━━ SOL: Sidebar ━━━ */
.ic-sidebar {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid #f0f0f8;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fafafa;
    padding: 14px 0 14px;
}
.ic-sidebar-title {
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .7px;
    padding: 0 16px 10px;
}
.ic-cat-tree {
    flex: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Ağaç li satırı ── */
.ic-tree-li {
    list-style: none;
}

.ic-tree-root {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ic-tree-row {
    display: flex;
    align-items: center;
    padding: 7px 14px 7px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    transition: background .15s, color .15s;
    position: relative;
    user-select: none;
    gap: 2px;
}
.ic-tree-row:hover {
    background: #f0eeff;
    color: #6C63FF;
}

.ic-tree-li.ic-cat-active > .ic-tree-row {
    background: #ede9ff;
    color: #6C63FF;
    font-weight: 700;
}
.ic-tree-li.ic-cat-active > .ic-tree-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #6C63FF;
    border-radius: 0 3px 3px 0;
}

/* Folder ikonları */
.ic-tree-folder-parent {
    color: #F59E0B !important;
    font-size: 17px !important;
}
.ic-tree-folder-child  {
    color: #ef6c00 !important;
    font-size: 18px !important;
}
.ic-tree-all-icon      {
    color: #6C63FF !important;
    font-size: 16px !important;
}

/* label */
.ic-tree-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

/* Alt seviye ul – girintili */
.ic-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ic-tree-children > .ic-tree-li > .ic-tree-row {
    padding-left: 30px;
    font-size: 12.5px;
}
.ic-tree-children .ic-tree-children > .ic-tree-li > .ic-tree-row {
    padding-left: 46px;
    font-size: 12px;
}

/* Kategori sayı badge */
.ic-cat-count {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    background: #ebebf5;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
}
.ic-tree-li.ic-cat-active > .ic-tree-row .ic-cat-count {
    background: #d8d4f8;
    color: #6C63FF;
}

/* ━━━ SAĞ: İçerik ━━━ */
.ic-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    /*overflow: hidden;*/
}

/* ── Filtre çubuğu ── */
.ic-filter-bar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    padding: 14px 18px 12px;
    border-bottom: 1px solid #f0f0f8;
    flex-wrap: wrap;
    background: #fff;
    flex-shrink: 0;
}
.ic-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}
.ic-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.ic-filter-sel {
    padding: 7px 28px 7px 10px;
    border: 1px solid #e0e0ec;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    background: #fff;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    transition: border-color .2s;
}
.ic-filter-sel:focus {
    border-color: #6C63FF;
}
.ic-filter-search {
    flex: 1;
    min-width: 160px;
}
.ic-search-wrap {
    position: relative;
}
.ic-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 14px;
    pointer-events: none;
}
.ic-search-input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1px solid #e0e0ec;
    border-radius: 8px;
    font-size: 13px;
    color: #333;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
    background: #fff;
}
.ic-search-input:focus {
    border-color: #6C63FF;
    box-shadow: 0 0 0 3px rgba(108,99,255,.1);
}
.ic-search-input::placeholder {
    color: #bbb;
}

/* ── Kurs listesi ── */
.ic-course-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Loading ── */
.ic-loading {
    justify-content: center;
    padding: 40px 0;
    font-size: 13px;
    color: #aaa;
    gap: 8px;
}

/* ── Boş ── */
.ic-empty {
    text-align: center;
    padding: 40px 0;
}
.ic-empty-icon {
    font-size: 40px;
    color: #d5d5e8;
    display: block;
    margin-bottom: 10px;
}
.ic-empty-txt {
    font-size: 13px;
    color: #aaa;
}

/* ── Kurs kartı ── */
.ic-course-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid #ecedf5;
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color .18s, box-shadow .18s, background .18s;
    position: relative;
}
.ic-course-card:hover {
    border-color: #c8c3f5;
    box-shadow: 0 3px 12px rgba(108,99,255,.09);
}
.ic-course-card.ic-course-selected {
    border-color: #6C63FF;
    background: #f9f8ff;
    box-shadow: 0 0 0 3px rgba(108,99,255,.1);
}

/* Checkbox (multi) */
.ic-check-box {
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0e0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color .15s, background .15s;
    color: transparent;
    font-size: 12px;
}
.ic-check-box.ic-checked {
    background: #6C63FF;
    border-color: #6C63FF;
    color: #fff;
}

/* Radio (single) */
.ic-radio-box {
    width: 20px;
    height: 20px;
    border: 2px solid #d0d0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color .15s;
}
.ic-radio-box.ic-checked {
    border-color: #6C63FF;
}
.ic-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    transition: background .15s;
}
.ic-radio-box.ic-checked .ic-radio-dot {
    background: #6C63FF;
}

/* Kurs thumbnail / avatar */
.ic-course-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.ic-course-avatar {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .5px;
}

/* Kurs bilgileri */
.ic-course-info {
    flex: 1;
    min-width: 0;
}
.ic-course-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}
.ic-course-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
    flex: 1;
}
.ic-course-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 700;
    color: #F59E0B;
    flex-shrink: 0;
}
.ic-star-icon {
    font-size: 12px;
}

.ic-sep {
    margin: 0 2px;
    color: #d5d5e0;
}

/* Tag'ler */
.ic-course-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.ic-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
}
.ic-tag-cat      {
    background: #ede9ff;
    color: #6C63FF;
}
.ic-tag-students {
    background: #f0f7ff;
    color: #0EA5E9;
}
.ic-diff-beginner     {
    background: #d1faf0;
    color: #10B981;
}
.ic-diff-intermediate {
    background: #fef3c7;
    color: #F59E0B;
}
.ic-diff-advanced     {
    background: #fee2e2;
    color: #EF4444;
}
.ic-diff-expert       {
    background: #ede9fe;
    color: #8B5CF6;
}

.ic-course-modules {
    font-size: 12px;
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 4px;
}
.ic-course-modules i {
    color: #c5c5d8;
}

/* ── Sayfalama ── */
.ic-pagination-wrap {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f8;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.ic-pagination {
    display: flex;
    gap: 6px;
}

/* ── Footer ── */
.ic-modal-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}
.ic-sel-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
}
.ic-sel-info.ic-hidden {
    visibility: hidden;
}
.ic-sel-badge {
    background: #6C63FF;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
}
.ic-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.ic-btn-cancel {
    color: #666 !important;
    background: #f5f5f8 !important;
}
.ic-btn-cancel:hover {
    background: #eee !important;
}
.ic-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ic-btn-add.ic-btn-disabled {
    opacity: .5;
    pointer-events: none;
}
.cl-filter-selects .al-date-wrap a.dropdown-toggle {
    border: 1px solid #dddddd;
    height: 38px;
    border-radius: 8px;
    background-color: #f8f9fc;
    display: flex;
    align-items: center;
}
.cl-filter-selects .al-date-wrap a.dropdown-toggle::after {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #474d58;
    border-right: 2px solid #474d58;
    border-left: none;
    border-top: none;
    transform: rotate(45deg);
    margin-top: -3px;
    margin-left: 7px;
}
/* ═══════════════════════════════════════════════════════════════
   INSTRUCTOR DETAIL MODAL  —  prefix: .imd-
   ═══════════════════════════════════════════════════════════════ */

/* ── Modal kapsayıcı ──────────────────────────────────────────── */
.imd-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-family: inherit;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────── */
.imd-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 28px 16px;
    border-bottom: 1px solid #f0f2f5;
    flex-shrink: 0;
    background: #fff;
}

.imd-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.imd-avatar-img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e8eaf0;
}
.imd-avatar-text {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
}
.imd-avatar-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #b0bec5;
}
.imd-avatar-status.imd-st-active  {
    background: #43a047;
}
.imd-avatar-status.imd-st-passive {
    background: #e53935;
}
.imd-avatar-status.imd-st-pending {
    background: #fb8c00;
}

.imd-header-info {
    flex: 1;
    min-width: 0;
}
.imd-header-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a1f36;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.imd-header-sub {
    font-size: 12.5px;
    color: #6b7a99;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tabs ─────────────────────────────────────────────────────── */
.imd-tabs {
    display: flex;
    padding: 0 28px;
    border-bottom: 1px solid #f0f2f5;
    flex-shrink: 0;
    background: #fff;
    gap: 0;
}
.imd-tab-btn {
    padding: 12px 0;
    margin-right: 22px;
    font-size: 13px;
    font-weight: 500;
    color: #8a94ad;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    outline: none;
}
.imd-tab-btn:hover {
    color: #3b4cca;
}
.imd-tab-btn.imd-tab-active {
    color: #3b4cca;
    border-bottom-color: #3b4cca;
    font-weight: 600;
}
.imd-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef0fb;
    color: #3b4cca;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 5px;
    line-height: 18px;
    min-width: 22px;
}

/* ── Tab paneller ─────────────────────────────────────────────── */
.imd-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 28px;
    min-height: 0;
}
.imd-panel {
    display: none;
}
.imd-panel.imd-panel-active {
    display: block;
}

/* ════════════════════════════════════════════════════════════════
   PANEL: PROFİL
   ════════════════════════════════════════════════════════════════ */
.imd-profile-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 640px) {
    .imd-profile-layout {
        grid-template-columns: 1fr;
    }
}

/* Sol kolon */
.imd-profile-avatar-col {
    background: #f8f9fc;
    border: 1px solid #eaecf5;
    border-radius: 12px;
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.imd-profile-avatar-box {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e0e3f5;
    flex-shrink: 0;
}
.imd-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.imd-profile-avatar-text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
}
.imd-profile-name-block {
    width: 100%;
}
.imd-profile-fullname {
    font-size: 14.5px;
    font-weight: 700;
    color: #1a1f36;
    line-height: 1.3;
    word-break: break-word;
}
.imd-profile-title {
    font-size: 12px;
    color: #6b7a99;
    margin-top: 3px;
    line-height: 1.4;
}

/* Sosyal ikonlar */
.imd-profile-social-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    margin-top: 2px;
}
.imd-profile-social-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    text-decoration: none;
    transition: transform .15s, opacity .15s;
}
.imd-profile-social-icon:hover {
    transform: translateY(-2px);
    opacity: .8;
}
/* Facebook */
.imd-profile-social-icon.sn-facebook {
    background: #e7f0fd;
    color: #1877f2;
}

/* Twitter (X) */
.imd-profile-social-icon.sn-twitter {
    background: #f0f0f0;
    color: #111111;
}

/* Foursquare */
.imd-profile-social-icon.sn-foursquare {
    background: #edf6ff;
    color: #2d5be3;
}

/* LinkedIn */
.imd-profile-social-icon.sn-linkedin {
    background: #e8f0fe;
    color: #0a66c2;
}
.imd-profile-social-icon.sn-linkedIn {
    background: #e8f0fe;
    color: #0a66c2;
}

/* Flickr */
.imd-profile-social-icon.sn-flickr {
    background: #fff0f6;
    color: #ff0084;
}

/* VK */
.imd-profile-social-icon.sn-vk {
    background: #edf3ff;
    color: #4c75a3;
}

/* RSS */
.imd-profile-social-icon.sn-rss {
    background: #fff4e6;
    color: #f26522;
}

/* Skype */
.imd-profile-social-icon.sn-skype {
    background: #e8f7ff;
    color: #00aff0;
}

/* YouTube */
.imd-profile-social-icon.sn-youtube {
    background: #fff0f0;
    color: #ff0000;
}

/* Tumblr */
.imd-profile-social-icon.sn-tumblr {
    background: #eef2f7;
    color: #35465c;
}

/* Wordpress */
.imd-profile-social-icon.sn-wordpress {
    background: #edf6ff;
    color: #21759b;
}

/* Instagram */
.imd-profile-social-icon.sn-instagram {
    background: #fdf0f8;
    color: #c13584;
}

/* Pinterest */
.imd-profile-social-icon.sn-pinterest {
    background: #fff0f0;
    color: #e60023;
}

/* SoundCloud */
.imd-profile-social-icon.sn-soundcloud {
    background: #fff3e6;
    color: #ff7700;
}

/* Spotify */
.imd-profile-social-icon.sn-spotify {
    background: #eafaf1;
    color: #1db954;
}
.imd-profile-social-icon.sn-website   {
    background: #f0f4ff;
    color: #3b4cca;
}
.imd-profile-social-icon.sn-other     {
    background: #f3f4f8;
    color: #6b7a99;
}



.imd-profile-no-social {
    font-size: 12px;
    color: #b0bec5;
    text-align: center;
}

/* Uzmanlıklar bloğu */
.imd-profile-exp-block {
    width: 100%;
    text-align: left;
    border-top: 1px solid #eaecf5;
    padding-top: 12px;
    margin-top: 2px;
}
.imd-profile-exp-title {
    font-size: 11px;
    font-weight: 700;
    color: #8a94ad;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.imd-expertise-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.imd-exp-tag {
    background: #eef0fb;
    color: #3b4cca;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    padding: 4px 10px;
    border: 1px solid #dde1f7;
    cursor: default;
    transition: background .15s;
    line-height: 1.4;
}
.imd-exp-tag:hover {
    background: #dde1f7;
}

/* Sağ kolon */
.imd-profile-info-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.imd-section {
    background: #f8f9fc;
    border: 1px solid #eaecf5;
    border-radius: 10px;
    padding: 16px 18px;
}
.imd-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #3b4cca;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.imd-bio-text {
    font-size: 13.5px;
    color: #3d4460;
    line-height: 1.7;
    white-space: pre-wrap;
}
.imd-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.imd-contact-item label {
    display: block;
    font-size: 11px;
    color: #8a94ad;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.imd-contact-item span {
    font-size: 13px;
    color: #1a1f36;
    font-weight: 500;
    word-break: break-all;
}
.imd-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.imd-meta-chip {
    background: #f3f4f8;
    border: 1px solid #eaecf5;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11.5px;
    color: #6b7a99;
    line-height: 1.5;
}
.imd-meta-chip strong {
    color: #3d4460;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   PANEL: KURSLAR
   ════════════════════════════════════════════════════════════════ */
.imd-courses-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.imd-course-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid #eaecf5;
    border-radius: 10px;
    background: #fff;
    transition: border-color .18s, box-shadow .18s;
}
.imd-course-card:hover {
    border-color: #c5caf5;
    box-shadow: 0 2px 10px rgba(59,76,202,.07);
}
.imd-course-cover {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.imd-course-cover-placeholder {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8eaf9 0%, #c5caf5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    color: #3b4cca;
}
.imd-course-info {
    flex: 1;
    min-width: 0;
}
.imd-course-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1f36;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.imd-course-meta {
    font-size: 12px;
    color: #8a94ad;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.imd-course-meta-sep {
    color: #d0d4e8;
}
.imd-course-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.imd-course-tag {
    font-size: 11px;
    background: #f3f4fb;
    color: #5c6bc0;
    border-radius: 4px;
    padding: 2px 7px;
}
.imd-diff-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: capitalize;
}
.imd-diff-badge.diff-beginner     {
    background: #e8f5e9;
    color: #2e7d32;
}
.imd-diff-badge.diff-intermediate {
    background: #fff3e0;
    color: #e65100;
}
.imd-diff-badge.diff-advanced     {
    background: #fce4ec;
    color: #c62828;
}
.imd-course-role {
    font-size: 11px;
    font-weight: 700;
    border-radius: 5px;
    padding: 3px 9px;
    flex-shrink: 0;
    background: #e8f5e9;
    color: #2e7d32;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.imd-course-role.role-co {
    background: #fff8e1;
    color: #f57f17;
}

/* ════════════════════════════════════════════════════════════════
   PANEL: İSTATİSTİKLER
   ════════════════════════════════════════════════════════════════ */
.imd-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 500px) {
    .imd-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.imd-stat-card {
    background: #f8f9fc;
    border-radius: 10px;
    padding: 20px 16px;
    text-align: center;
    border: 1px solid #eaecf5;
    transition: border-color .18s, box-shadow .18s;
}
.imd-stat-card:hover {
    border-color: #c5caf5;
    box-shadow: 0 2px 10px rgba(59,76,202,.07);
}
.imd-stat-label {
    font-size: 11.5px;
    color: #8a94ad;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.imd-stat-val {
    font-size: 28px;
    font-weight: 800;
    color: #1a1f36;
    line-height: 1;
    letter-spacing: -.5px;
}
.imd-stat-val.imd-stat-na {
    font-size: 22px;
    color: #b0bec5;
    font-weight: 600;
    letter-spacing: 0;
}

/* ════════════════════════════════════════════════════════════════
   PANEL: DÜZENLE
   imd-edit-grid sadece alt satır için (avatar+temel bilgiler
   zaten newInstructor yöntemiyle project-inner-start-build-wrap içinde)
   ════════════════════════════════════════════════════════════════ */
.imd-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
}
@media (max-width: 600px) {
    .imd-edit-grid {
        grid-template-columns: 1fr;
    }
}
.imd-edit-full {
    grid-column: 1 / -1;
}

.imd-input,
.imd-textarea,
.imd-select {
    width: 100%;
    border: 1px solid #dde1ec;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: #1a1f36;
    background: #fff;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
    font-family: inherit;
}
.imd-input:focus,
.imd-textarea:focus,
.imd-select:focus {
    border-color: #3b4cca;
    box-shadow: 0 0 0 3px rgba(59,76,202,.1);
}
.imd-textarea {
    resize: vertical;
    min-height: 80px;
}

/* ── Footer ───────────────────────────────────────────────────── */
.imd-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 28px;
    border-top: 1px solid #f0f2f5;
    flex-shrink: 0;
    background: #fff;
}
.imd-btn {
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: inherit;
    transition: background .15s, box-shadow .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.imd-btn-ghost  {
    background: #f3f4f8;
    color: #6b7a99;
}
.imd-btn-ghost:hover {
    background: #e8eaf0;
}
.imd-btn-primary {
    background: #3b4cca;
    color: #fff;
}
.imd-btn-primary:hover {
    background: #2f3fad;
    box-shadow: 0 2px 10px rgba(59,76,202,.28);
}
.imd-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.imd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #8a94ad;
    font-size: 13.5px;
}
.imd-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8a94ad;
}
.imd-empty i {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
    color: #c9d0e3;
}
.imd-empty p {
    font-size: 13.5px;
}

.cil-card {
    cursor: pointer;
    transition: box-shadow .18s, transform .15s;
}
.cil-card:hover {
    box-shadow: 0 4px 20px rgba(59,76,202,.12);
    transform: translateY(-2px);
}
.cil-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cil-detail-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #3b4cca;
    background: #eef0fb;
    border: 1px solid #dde1f7;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}

.cil-detail-btn:hover {
    background: #dde1f7;
    border-color: #c5caf5;
}
/* ═══════════════════════════════════════════════════════════════
   ACADEMY LIST  —  prefix: .al-
   ═══════════════════════════════════════════════════════════════ */

.al-page-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Filter bar ───────────────────────────────────────────────── */
.al-filter-bar {
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    flex-direction: column;
}

.al-filter-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.al-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #b0bec5;
    font-size: 14px;
    pointer-events: none;
}
.al-search-input {
    width: 100%;
    border: 1px solid #dde1ec;
    border-radius: 8px;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    color: #1a1f36;
    outline: none;
    background: #f8f9fc;
    transition: border-color .18s, background .18s;
    box-sizing: border-box;
    font-family: inherit;
}
.al-search-input:focus {
    border-color: #3b4cca;
    background: #fff;
}

.al-filter-select {
    border: 1px solid #dde1ec;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    color: #3d4460;
    background: #f8f9fc;
    outline: none;
    font-family: inherit;
    min-width: 130px;
}

.al-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #3b4cca;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}
.al-filter-btn:hover {
    background: #2f3fad;
}

.al-filter-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7a99;
    background: #f3f4f8;
    border: 1px solid #eaecf5;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    font-family: inherit;
}
.al-filter-clear-btn:hover {
    background: #e8eaf0;
}

/* Aktif filtre chips */
.al-active-filters {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 6px 0 0;
    font-size: 12px;
    color: #8a94ad;
}
.al-active-filters-label {
    font-weight: 600;
}
.al-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef0fb;
    color: #3b4cca;
    border: 1px solid #dde1f7;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.al-filter-chip:hover {
    background: #dde1f7;
}
.al-filter-chip i {
    font-size: 11px;
}
.al-filter-temizle {
    background: none;
    border: none;
    color: #e53935;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background .15s;
}
.al-filter-temizle:hover {
    background: #fce8e6;
}

/* ── Table section ────────────────────────────────────────────── */
.al-section {
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
}
.al-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #f0f2f5;
}
.al-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.al-section-icon {
    color: #3b4cca;
    font-size: 16px;
}
.al-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1f36;
    margin: 0;
}
.al-section-sub {
    font-size: 12px;
    color: #8a94ad;
    font-weight: 500;
}

.al-tbl-academy-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.al-tbl-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .5px;
}
.al-tbl-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1f36;
    line-height: 1.3;
}
.al-tbl-slug {
    font-size: 12px;
    color: #8a94ad;
    margin-top: 1px;
}

.al-domain-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #3d4460;
}
.al-domain-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.al-domain-dot.dot-active  {
    background: #43a047;
}
.al-domain-dot.dot-passive {
    background: #e53935;
}
.al-domain-dot.dot-draft   {
    background: #fb8c00;
}
.al-domain-dot.dot-other   {
    background: #b0bec5;
}

.al-stat-num {
    font-size: 14px;
    font-weight: 700;
    color: #1a1f36;
    text-align: center;
    display: block;
}

.al-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 20px;
    padding: 3px 10px;
}

.al-tbl-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.al-act-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s;
    background: #f3f4f8;
    color: #6b7a99;
}
.al-act-btn:hover        {
    background: #e8eaf0;
    color: #3d4460;
}
.al-act-edit:hover       {
    background: #eef0fb;
    color: #3b4cca;
}
.al-act-courses:hover    {
    background: #e8f5e9;
    color: #2e7d32;
}
.al-act-more:hover       {
    background: #f3f4f8;
    color: #1a1f36;
}

.al-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding:10px;
}
@media (max-width: 1100px) {
    .al-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px)  {
    .al-cards-row {
        grid-template-columns: 1fr;
    }
}

.al-academy-card {
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .18s, transform .15s, border-color .18s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.al-academy-card:hover {
    box-shadow: 0 6px 24px rgba(59,76,202,.11);
    transform: translateY(-3px);
    border-color: #c5caf5;
}

.al-card-top-bar {
    height: 5px;
    width: 100%;
    flex-shrink: 0;
}

.al-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 14px 16px 0;
}
.al-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
    flex-shrink: 0;
}
.al-card-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 9px;
}

.al-card-body {
    padding: 10px 16px 0;
    flex: 1;
}
.al-card-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a1f36;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.al-card-slug {
    font-size: 12px;
    color: #8a94ad;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}
.al-card-desc {
    font-size: 12.5px;
    color: #6b7a99;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    min-height: 38px;
}

.al-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #f0f2f5;
    margin-top: 12px;
}
.al-card-stats {
    display: flex;
    gap: 14px;
}
.al-card-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #6b7a99;
}
.al-card-stat strong {
    font-weight: 700;
    color: #1a1f36;
    font-size: 13px;
}
.al-card-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eef0fb;
    color: #3b4cca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
}
.al-academy-card:hover .al-card-arrow {
    background: #3b4cca;
    color: #fff;
    transform: translateX(2px);
}

/* ── Loading / empty ──────────────────────────────────────────── */
.al-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #8a94ad;
    font-size: 13.5px;
}
.al-empty {
    text-align: center;
    padding: 40px 20px;
    color: #8a94ad;
}
.al-empty i {
    font-size: 30px;
    display: block;
    margin-bottom: 10px;
    color: #c9d0e3;
}
.al-empty p {
    font-size: 13.5px;
}

/* Date range wrap */
.al-date-wrap {
    display: flex;
    align-items: center;
}
/* ═══════════════════════════════════════════════════════════════
   NEW ACADEMY WIZARD  —  prefix: .na-
   ═══════════════════════════════════════════════════════════════ */

/* ── Wizard adım başlıkları (mevcut cf-wizard üzerine) ─────────
   Mevcut wizard step CSS'inizin üzerinde çalışır,
   sadece gerekli override'lar burada.
   ─────────────────────────────────────────────────────────────── */

/* ── Genel form alanları ──────────────────────────────────────── */
.na-field {
    margin-bottom: 18px;
}
.na-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #3d4460;
    margin-bottom: 6px;
}
.na-label .na-req {
    color: #e53935;
    margin-right: 2px;
}
.na-label .na-hint {
    font-size: 11px;
    color: #8a94ad;
    font-weight: 400;
    margin-left: 5px;
}
.na-input,
.na-textarea,
.na-select {
    width: 100%;
    border: 1px solid #dde1ec;
    border-radius: 8px;
    padding: 10px 13px;
    font-size: 13.5px;
    color: #1a1f36;
    background: #fff;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
    font-family: inherit;
}
.na-input:focus,
.na-textarea:focus,
.na-select:focus {
    border-color: #3b4cca;
    box-shadow: 0 0 0 3px rgba(59,76,202,.1);
}
.na-textarea {
    resize: vertical;
    min-height: 90px;
}
.na-select   {
    cursor: pointer;
}

/* Slug alanı */
.na-slug-wrap {
    display: flex;
    align-items: center;
    border: 1px solid #dde1ec;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .18s, box-shadow .18s;
    background: #fff;
}
.na-slug-wrap:focus-within {
    border-color: #3b4cca;
    box-shadow: 0 0 0 3px rgba(59,76,202,.1);
}
.na-slug-prefix {
    padding: 10px 12px;
    background: #f3f4f8;
    border-right: 1px solid #dde1ec;
    font-size: 13px;
    color: #8a94ad;
    white-space: nowrap;
    flex-shrink: 0;
}
.na-slug-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 12px;
    font-size: 13.5px;
    color: #1a1f36;
    font-family: inherit;
    background: transparent;
}

/* ── 2 kolonlu grid ───────────────────────────────────────────── */
.na-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 580px) {
    .na-grid-2 {
        grid-template-columns: 1fr;
    }
}
.na-full {
    grid-column: 1 / -1;
}

/* ── Toggle switch ────────────────────────────────────────────── */
.na-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f0f2f5;
}
.na-toggle-row:last-child {
    border-bottom: none;
}
.na-toggle-info {
}
.na-toggle-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1f36;
    margin-bottom: 2px;
}
.na-toggle-sub {
    font-size: 12px;
    color: #8a94ad;
}
.na-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.na-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.na-toggle-track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 24px;
    cursor: pointer;
    transition: background .2s;
}
.na-toggle-track::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.na-toggle-switch input:checked + .na-toggle-track {
    background: #3b4cca;
}
.na-toggle-switch input:checked + .na-toggle-track::after {
    transform: translateX(20px);
}

/* ── Section başlığı ──────────────────────────────────────────── */
.na-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #3b4cca;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 20px 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.na-section-title:first-child {
    margin-top: 0;
}
.na-section-divider {
    border: none;
    border-top: 1px solid #f0f2f5;
    margin: 5px 0;
}

/* ── Görsel yükleme alanı ─────────────────────────────────────── */
.na-cover-upload {
    border: 2px dashed #dde1ec;
    border-radius: 10px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: #f8f9fc;
    position: relative;
    overflow: hidden;
}
.na-cover-upload:hover {
    border-color: #3b4cca;
    background: #f0f2ff;
}
.na-cover-upload-icon {
    font-size: 32px;
    color: #b0bec5;
    display: block;
    margin-bottom: 8px;
}
.na-cover-upload-text {
    font-size: 13px;
    color: #6b7a99;
    font-weight: 500;
    margin-bottom: 3px;
}
.na-cover-upload-hint {
    font-size: 11.5px;
    color: #b0bec5;
}
.na-cover-preview {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* ── Robots checkbox grubu ────────────────────────────────────── */
.na-robots-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 10px 0 4px;
}
.na-checkbox-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #3d4460;
    cursor: pointer;
    user-select: none;
}
.na-checkbox-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #3b4cca;
    cursor: pointer;
}

/* ── SEO Tab sistemi ──────────────────────────────────────────── */
.na-seo-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #eaecf5;
    margin-bottom: 18px;
}
.na-seo-tab-btn {
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 500;
    color: #8a94ad;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    font-family: inherit;
    outline: none;
}
.na-seo-tab-btn:hover {
    color: #3b4cca;
}
.na-seo-tab-btn.na-seo-active {
    color: #3b4cca;
    border-bottom-color: #3b4cca;
    font-weight: 700;
}
.na-seo-panel {
    display: none;
}
.na-seo-panel.na-seo-panel-active {
    display: block;
}

/* ── Footer butonları ─────────────────────────────────────────── */
.na-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    border-top: 1px solid #f0f2f5;
}
.na-footer-left  {
    display: flex;
    align-items: center;
    gap: 8px;
}
.na-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.na-req-note {
    font-size: 11.5px;
    color: #8a94ad;
}
.na-req-note span {
    color: #e53935;
}

.na-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background .15s, box-shadow .15s, opacity .15s;
    outline: none;
}
.na-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.na-btn-ghost {
    background: #f3f4f8;
    color: #6b7a99;
}
.na-btn-ghost:hover {
    background: #e8eaf0;
}
.na-btn-prev {
    background: #eef0fb;
    color: #3b4cca;
}
.na-btn-prev:hover {
    background: #dde1f7;
}
.na-btn-next {
    background: #3b4cca;
    color: #fff;
}
.na-btn-next:hover {
    background: #2f3fad;
    box-shadow: 0 2px 10px rgba(59,76,202,.3);
}
.na-btn-success {
    background: #2e7d32;
    color: #fff;
}
.na-btn-success:hover {
    background: #1b5e20;
    box-shadow: 0 2px 10px rgba(46,125,50,.3);
}

/* ── Form wrap ────────────────────────────────────────────────── */
.na-form-wrap {
    padding: 4px 0 8px;
}

/* ── Ld-JSON textarea ─────────────────────────────────────────── */
.na-code-textarea {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.6;
    background: #1e1e2e;
    color: #cdd6f4;
    border: 1px solid #313244;
    border-radius: 8px;
    padding: 12px 14px;
    min-height: 120px;
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color .18s;
}
.na-code-textarea:focus {
    border-color: #3b4cca;
}
.na-form-wrap .form-legent-syl.fls-select-drop .col-form-label {
    top: 9px;
}
.d-cover-box-wrap .avatar-place-holder.aph-acd-cus {
    background-color: #fafafa;
    border: 2px dashed #ddd !important;
    box-shadow: unset !important;
    height: 112px !important;
    margin-top: 3px;
}
/* ═══════════════════════════════════════════════════════════════
   ACADEMY DETAIL  —  prefix: .adh-
   ═══════════════════════════════════════════════════════════════ */

/* ── Header kart ──────────────────────────────────────────────── */
.adh-header-card {
    position: relative;
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.09);
    background: #fff;
    border: 1px solid #e2e8f0;
}

.adh-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 26px 18px;
    gap: 16px;
}

.adh-header-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex: 1;
    min-width: 0;
}

.adh-avatar {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.adh-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.adh-identity {
    min-width: 0;
}

.adh-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 3px;
    margin-top:10px;
}

.adh-name {
    font-size: 20px;
    font-weight: 800;
    color: #1a1f36;
    line-height: 1.2;
}

.adh-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 20px;
    padding: 3px 10px;
}

.adh-slug {
    font-size: 13px;
    color: #8a94ad;
    margin-bottom: 8px;
}

.adh-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.adh-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #6b7a99;
}

.adh-meta-item i {
    font-size: 13px;
}



/* Sağ: rating + aksiyon */
.adh-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 4px;
}

.adh-rating-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 6px 12px;
}
.adh-rating-star {
    color: #f59e0b;
    font-size: 16px;
}
.adh-rating-val  {
    font-size: 15px;
    font-weight: 800;
    color: #1a1f36;
}

.adh-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background .15s, box-shadow .15s;
}
.adh-btn-share  {
    background: #2563eb;
    color: #ffffff;
}
.adh-btn-share:hover {
    background: #5f84d6;
}


/* ── Widget strip ─────────────────────────────────────────────── */
.adh-widgets-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid #f0f2f5;
}

@media (max-width: 900px) {
    .adh-widgets-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 580px) {
    .adh-widgets-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

.adh-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
    border-right: 1px solid #f0f2f5;
    text-align: center;
    position: relative;
    transition: background .15s;
    background-color: #fafbfc;
}
.adh-widget:last-child {
    border-right: none;
}
.adh-widget:hover {
    background: #f8f9fc;
}

.adh-widget-val {
    font-size: 26px;
    font-weight: 800;
    color: #1a1f36;
    line-height: 1.1;
    letter-spacing: -.5px;
    margin-bottom: 4px;
}
.adh-widget-val.adh-val-na {
    color: #b0bec5;
    font-size: 20px;
}

.adh-widget-label {
    font-size: 12px;
    color: #8a94ad;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.adh-widget-label i {
    font-size: 15px;
}

/* aktif widget highlight */
.adh-widget-active {
    background: #f0f2ff;
}
.adh-widget-active .adh-widget-val {
    color: #3b4cca;
}
.adh-widget-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #3b4cca;
    border-radius: 3px 3px 0 0;
}


/* ── Tab içi boş durum ────────────────────────────────────────── */
.adh-tab-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #b0bec5;
    text-align: center;
    gap: 10px;
}
.adh-tab-empty i {
    font-size: 36px;
    color: #d0d4e8;
}
.adh-tab-empty p {
    font-size: 13.5px;
    color: #8a94ad;
}

/* ── Loading ──────────────────────────────────────────────────── */
.adh-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px;
    color: #8a94ad;
    font-size: 13.5px;
}
/* ═══════════════════════════════════════════════════════════════
   WORKSPACE  —  prefix: .ws-
   ═══════════════════════════════════════════════════════════════ */

/* ── Page wrap ────────────────────────────────────────────────── */
.ws-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Toolbar (üst bar) ────────────────────────────────────────── */
.ws-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 12px;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid #f0f2f5;
    margin-bottom: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
}
.ws-toolbar-left  {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ws-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Breadcrumb */
.ws-breadcrumb {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    color: #8a94ad;
    flex-wrap: wrap;
}
.ws-breadcrumb-item {
    cursor: pointer;
    color: #8a94ad;
    transition: color .15s;
    font-weight: 500;
}
.ws-breadcrumb-item:hover {
    color: #3b4cca;
}
.ws-breadcrumb-item.ws-bc-active {
    color: #1a1f36;
    font-weight: 700;
    cursor: default;
}
.ws-breadcrumb-sep {
    color: #d0d4e8;
    font-size: 12px;
}

/* Toolbar butonları */
.ws-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: background .15s, box-shadow .15s;
    outline: none;
    white-space: nowrap;
}
.ws-btn-ghost  {
    background: #f3f4f8;
    color: #3d4460;
    border: 1px solid #eaecf5;
}
.ws-btn-ghost:hover {
    background: #eaecf5;
}
.ws-btn-primary {
    background: #3b4cca;
    color: #fff;
}
.ws-btn-primary:hover {
    background: #2f3fad;
    box-shadow: 0 2px 10px rgba(59,76,202,.25);
}
.ws-btn-danger  {
    background: #fce8e6;
    color: #e53935;
    border: 1px solid #ffcdd2;
}
.ws-btn-danger:hover {
    background: #ffcdd2;
}
.ws-btn-icon {
    padding: 8px 10px;
}

/* View toggle */
.ws-view-toggle {
    display: flex;
    border: 1px solid #eaecf5;
    border-radius: 8px;
    overflow: hidden;
}
.ws-view-btn {
    padding: 7px 11px;
    font-size: 15px;
    background: #fff;
    border: none;
    cursor: pointer;
    color: #b0bec5;
    transition: background .15s, color .15s;
    outline: none;
}
.ws-view-btn.ws-view-active {
    background: #3b4cca;
    color: #fff;
}
.ws-view-btn:hover:not(.ws-view-active) {
    background: #f3f4f8;
    color: #3d4460;
}

/* ── Upload drop zone ─────────────────────────────────────────── */
.ws-dropzone {
    border: 2px dashed #dde1ec;
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    background: #f8f9fc;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    margin-bottom: 20px;
}
.ws-dropzone:hover,
.ws-dropzone.ws-dz-over {
    border-color: #3b4cca;
    background: #f0f2ff;
}
.ws-dz-icon {
    font-size: 36px;
    color: #b0bec5;
    display: block;
    margin-bottom: 10px;
}
.ws-dz-title {
    font-size: 14px;
    font-weight: 600;
    color: #3d4460;
    margin-bottom: 4px;
}
.ws-dz-sub   {
    font-size: 12.5px;
    color: #8a94ad;
    margin-bottom: 14px;
}
.ws-dz-hint  {
    font-size: 11.5px;
    color: #b0bec5;
    margin-top: 10px;
}

/* ── Grid / List view ─────────────────────────────────────────── */
.ws-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
@media (max-width: 1100px) {
    .ws-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 780px)  {
    .ws-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px)  {
    .ws-grid {
        grid-template-columns: 1fr;
    }
}

.ws-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Folder card ──────────────────────────────────────────────── */
.ws-folder-card {
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s, transform .15s;
    position: relative;
    user-select: none;
}
.ws-folder-card:hover {
    border-color: #c5caf5;
    box-shadow: 0 4px 16px rgba(59,76,202,.1);
    transform: translateY(-2px);
}
.ws-folder-card.ws-selected {
    border-color: #3b4cca;
    background: #f0f2ff;
}

.ws-folder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ws-folder-icon {
    font-size: 28px;
    color: #f59e0b;
}
.ws-folder-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #b0bec5;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 14px;
    transition: background .15s;
    opacity: 0;
    transition: opacity .15s;
}
.ws-folder-card:hover .ws-folder-menu-btn {
    opacity: 1;
}
.ws-folder-menu-btn:hover {
    background: #f3f4f8;
    color: #3d4460;
}

.ws-folder-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1f36;
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-folder-meta {
    font-size: 11.5px;
    color: #8a94ad;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ws-folder-avatars {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 8px;
}
.ws-folder-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    border: 1.5px solid #fff;
    font-family: inherit;
}
.ws-folder-updated {
    font-size: 11px;
    color: #b0bec5;
    margin-left: auto;
}

/* ── File card ────────────────────────────────────────────────── */
.ws-file-card {
    background: #fff;
    border: 1.5px solid #eaecf5;
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    position: relative;
}
.ws-file-card:hover {
    border-color: #c5caf5;
    box-shadow: 0 3px 14px rgba(59,76,202,.09);
}
.ws-file-card.ws-file-selected {
    border-color: #3b4cca;
    background: #f0f2ff;
    box-shadow: 0 0 0 3px rgba(59,76,202,.15);
}

/* Seçim checkbox */
.ws-file-check {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #dde1ec;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.ws-file-card.ws-file-selected .ws-file-check {
    background: #3b4cca;
    border-color: #3b4cca;
    color: #fff;
}

.ws-file-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.ws-file-type-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.ws-icon-pdf   {
    background: #fce8e6;
    color: #e53935;
}
.ws-icon-word  {
    background: #e3f2fd;
    color: #1565c0;
}
.ws-icon-ppt   {
    background: #fff3e0;
    color: #e65100;
}
.ws-icon-xls   {
    background: #e8f5e9;
    color: #2e7d32;
}
.ws-icon-img   {
    background: #f3e5f5;
    color: #7b1fa2;
}
.ws-icon-txt   {
    background: #f5f5f5;
    color: #616161;
}
.ws-icon-other {
    background: #e8eaf0;
    color: #3b4cca;
}

.ws-file-name-wrap {
    flex: 1;
    min-width: 0;
}
.ws-file-name {
    font-size: 13px;
    font-weight: 700;
    color: #1a1f36;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.ws-file-size {
    font-size: 11.5px;
    color: #8a94ad;
}

/* Durum badge */
.ws-file-status {
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    padding: 2px 9px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}
.ws-status-processed {
    background: #e8f5e9;
    color: #2e7d32;
}
.ws-status-processing {
    background: #e3f2fd;
    color: #1565c0;
}
.ws-status-pending    {
    background: #fff3e0;
    color: #e65100;
}
.ws-status-error      {
    background: #fce8e6;
    color: #c62828;
}

/* Progress bar (işleniyor) */
.ws-file-progress {
    margin: 6px 0;
}
.ws-file-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #6b7a99;
    margin-bottom: 4px;
}
.ws-file-progress-track {
    height: 4px;
    background: #eaecf5;
    border-radius: 4px;
    overflow: hidden;
}
.ws-file-progress-fill {
    height: 100%;
    background: #3b4cca;
    border-radius: 4px;
    transition: width .4s;
}

/* Tags */
.ws-file-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}
.ws-file-tag {
    font-size: 11px;
    background: #f3f4fb;
    color: #5c6bc0;
    border-radius: 5px;
    padding: 2px 8px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
.ws-file-tag:hover {
    background: #dde1f7;
}
.ws-file-tag-add {
    font-size: 11px;
    background: #f3f4f8;
    color: #8a94ad;
    border: 1px dashed #dde1ec;
    border-radius: 5px;
    padding: 2px 8px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.ws-file-tag-add:hover {
    border-color: #3b4cca;
    color: #3b4cca;
}

/* List görünümü satırı */
.ws-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ws-list-row:hover {
    border-color: #c5caf5;
    background: #f8f9fc;
}
.ws-list-row.ws-file-selected {
    border-color: #3b4cca;
    background: #f0f2ff;
}
.ws-list-row-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: #1a1f36;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ws-list-row-meta {
    font-size: 12px;
    color: #8a94ad;
    white-space: nowrap;
}

/* ── Empty / loading ──────────────────────────────────────────── */
.ws-empty {
    text-align: center;
    padding: 50px 20px;
    color: #8a94ad;
}
.ws-empty i {
    font-size: 36px;
    color: #d0d4e8;
    display: block;
    margin-bottom: 10px;
}
.ws-empty p {
    font-size: 13.5px;
}

.ws-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #8a94ad;
    font-size: 13.5px;
}

/* ── Section başlık ───────────────────────────────────────────── */
.ws-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.ws-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #8a94ad;
    letter-spacing: .05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Seçim bar (alt) ──────────────────────────────────────────── */
.ws-selection-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 40px;
    box-shadow: 0 8px 32px rgba(59,76,202,.18);
    padding: 10px 18px 10px 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 999;
    min-width: 360px;
    animation: ws-bar-in .2s ease;
}
@keyframes ws-bar-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }
    to   {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}
.ws-sel-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef0fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #3b4cca;
    flex-shrink: 0;
}
.ws-sel-info {
    flex: 1;
}
.ws-sel-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1f36;
}
.ws-sel-sub   {
    font-size: 11.5px;
    color: #8a94ad;
}
.ws-sel-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ── Yeni klasör modal ────────────────────────────────────────── */
.ws-modal-field {
    margin-bottom: 14px;
}
.ws-modal-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #6b7a99;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.ws-modal-input,
.ws-modal-textarea {
    width: 100%;
    border: 1px solid #dde1ec;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13.5px;
    color: #1a1f36;
    background: #fff;
    outline: none;
    transition: border-color .18s, box-shadow .18s;
    box-sizing: border-box;
    font-family: inherit;
}
.ws-modal-input:focus,
.ws-modal-textarea:focus {
    border-color: #3b4cca;
    box-shadow: 0 0 0 3px rgba(59,76,202,.1);
}
.ws-modal-textarea {
    resize: vertical;
    min-height: 70px;
}

/* ── Tag edit modal ───────────────────────────────────────────── */
.ws-tag-edit-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fc;
    border-radius: 8px;
    margin-bottom: 14px;
}
.ws-tag-edit-filename {
    font-size: 13px;
    font-weight: 600;
    color: #1a1f36;
}
.ws-tag-edit-filesize {
    font-size: 11.5px;
    color: #8a94ad;
}

/* ── Prompt modal ─────────────────────────────────────────────── */
.ws-prompt-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ws-prompt-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eef0fb;
    border: 1px solid #dde1f7;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #3b4cca;
    font-weight: 600;
}
.ws-prompt-textarea {
    width: 100%;
    border: 1.5px solid #dde1ec;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #1a1f36;
    background: #fff;
    outline: none;
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.ws-prompt-textarea:focus {
    border-color: #3b4cca;
    box-shadow: 0 0 0 3px rgba(59,76,202,.1);
}
.ws-prompt-hint {
    font-size: 12px;
    color: #482807;
    background-color: #ffe6c1;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 13px;
}
/* ═══════════════════════════════════════════════════════════════
   WORKSPACE SEARCH  —  prefix: .wss-
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar search wrap ──────────────────────────────────────── */
.wss-search-outer {
    position: relative;
    flex: 0 0 400px;
}
@media (max-width: 900px) {
    .wss-search-outer {
        flex: 1;
    }
}

.wss-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid #dde1ec;
    border-radius: 30px;
    padding: 8px 16px;
    transition: border-color .18s, box-shadow .18s;
}
.wss-search-box:focus-within {
    border-color: #3b4cca;
    box-shadow: 0 0 0 3px rgba(59,76,202,.12);
}
.wss-search-icon {
    font-size: 14px;
    color: #b0bec5;
    flex-shrink: 0;
}
.wss-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    color: #1a1f36;
    background: transparent;
    font-family: inherit;
    min-width: 0;
}
.wss-search-input::placeholder {
    color: #b0bec5;
}
.wss-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    color: #b0bec5;
    font-size: 13px;
    padding: 0;
    display: none;
    line-height: 1;
    transition: color .15s;
}
.wss-search-clear:hover {
    color: #3d4460;
}
.wss-search-clear.wss-clear-visible {
    display: inline-flex;
}

.wss-search-kbd {
    font-size: 10px;
    color: #b0bec5;
    background: #f3f4f8;
    border: 1px solid #eaecf5;
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Spinner (arama sırasında) ────────────────────────────────── */
.wss-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #eaecf5;
    border-top-color: #3b4cca;
    border-radius: 50%;
    animation: wss-spin .6s linear infinite;
    flex-shrink: 0;
    display: none;
}
.wss-spinner.wss-spinning {
    display: block;
}
@keyframes wss-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Sonuç paneli ─────────────────────────────────────────────── */
.wss-results-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(59,76,202,.14);
    z-index: 1200;
    overflow: hidden;
    display: none;
    min-width: 520px;
}
.wss-results-panel.wss-panel-open {
    display: block;
}

/* Panel başlık */
.wss-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 8px;
    border-bottom: 1px solid #f0f2f5;
}
.wss-panel-title {
    font-size: 11px;
    font-weight: 700;
    color: #8a94ad;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wss-panel-count {
    font-size: 11.5px;
    color: #8a94ad;
    font-weight: 500;
}

/* Sonuç listesi */
.wss-results-list {
    max-height: 440px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #eaecf5 transparent;
}
.wss-results-list::-webkit-scrollbar {
    width: 4px;
}
.wss-results-list::-webkit-scrollbar-thumb {
    background: #eaecf5;
    border-radius: 4px;
}

/* Sonuç kartı */
.wss-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 1px solid #f8f9fc;
    transition: background .14s;
    position: relative;
}
.wss-result-item:last-child {
    border-bottom: none;
}
.wss-result-item:hover {
    background: #f8f9fc;
}
.wss-result-item.wss-result-active {
    background: #f0f2ff;
    border-left: 3px solid #3b4cca;
}

/* Skor badge */
.wss-score-ring {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    border: 2px solid;
    margin-top: 2px;
}
.wss-score-high   {
    border-color: #43a047;
    color: #2e7d32;
    background: #e8f5e9;
}
.wss-score-medium {
    border-color: #fb8c00;
    color: #e65100;
    background: #fff3e0;
}
.wss-score-low    {
    border-color: #b0bec5;
    color: #607d8b;
    background: #f5f5f5;
}

/* Kaynak dosya bilgisi */
.wss-result-body {
    flex: 1;
    min-width: 0;
}

.wss-result-source {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.wss-result-source-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}
.wss-result-filename {
    font-size: 12.5px;
    font-weight: 700;
    color: #1a1f36;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.wss-result-chunk-info {
    font-size: 11px;
    color: #8a94ad;
    white-space: nowrap;
}

/* Document metin */
.wss-result-doc {
    font-size: 12.5px;
    color: #3d4460;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

/* Keyword chips */
.wss-result-keywords {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}
.wss-kw-chip {
    font-size: 10.5px;
    background: #f3f4fb;
    color: #5c6bc0;
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 500;
}

/* Quality badge */
.wss-quality {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 2px 7px;
    text-transform: capitalize;
}
.wss-q-excellent  {
    background: #e8f5e9;
    color: #2e7d32;
}
.wss-q-poor       {
    background: #fff3e0;
    color: #e65100;
}
.wss-q-very_poor  {
    background: #fce8e6;
    color: #c62828;
}
.wss-q-good       {
    background: #e3f2fd;
    color: #1565c0;
}

/* Panel loading */
.wss-panel-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    color: #8a94ad;
    font-size: 13px;
}

/* Panel empty */
.wss-panel-empty {
    text-align: center;
    padding: 32px 20px;
    color: #8a94ad;
}
.wss-panel-empty i {
    font-size: 28px;
    color: #d0d4e8;
    display: block;
    margin-bottom: 8px;
}
.wss-panel-empty p {
    font-size: 13px;
}

/* Panel footer */
.wss-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 18px;
    border-top: 1px solid #f0f2f5;
    background: #f8f9fc;
    font-size: 11.5px;
    color: #8a94ad;
}
.wss-panel-footer span {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Sayfa içindeki aktif highlight (seçili klasör/dosya) */
.ws-folder-card.ws-item-highlight {
    border-color: #3b4cca !important;
    background: #f0f2ff !important;
    box-shadow: 0 0 0 3px rgba(59,76,202,.18) !important;
}
.ws-file-card.ws-item-highlight {
    border-color: #3b4cca !important;
    background: #f0f2ff !important;
    box-shadow: 0 0 0 3px rgba(59,76,202,.18) !important;
}
/* ═══════════════════════════════════════════════════════════════
   WORKSPACE DETAIL PANEL  —  prefix: .wdp-
   ═══════════════════════════════════════════════════════════════ */

/* ── Ana layout: içerik + panel yan yana ─────────────────────── */
.ws-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
    position: relative;
}
.ws-main-area {
    flex: 1;
    min-width: 0;
    transition: margin-right .25s ease;
}
.ws-main-area.wdp-panel-open {
    margin-right: 320px;
}

/* ── Panel ────────────────────────────────────────────────────── */
.wdp-panel {
    position: fixed;
    top: 0;
    right: -340px;
    width: 320px;
    height: 100vh;
    background: #fff;
    border-left: 1px solid #eaecf5;
    box-shadow: -6px 0 32px rgba(59,76,202,.09);
    display: flex;
    flex-direction: column;
    z-index: 800;
    transition: right .25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    /* Sadece bir tane olmalı — JS tarafında .wdp-panel.remove() ile garanti altına alındı */
}
.wdp-panel.wdp-open {
    right: 0;
}
/* Sayfadan ayrılınca panel kaldırılır - detail() her çağrıldığında temizlenir */

/* ── Panel header ─────────────────────────────────────────────── */
.wdp-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid #f0f2f5;
    flex-shrink: 0;
    position: relative;
}
.wdp-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 2px;
}
.wdp-header-info {
    flex: 1;
    min-width: 0;
}
.wdp-header-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1a1f36;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
    padding-right: 20px;
}
.wdp-header-sub {
    font-size: 11.5px;
    color: #8a94ad;
}
.wdp-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: #b0bec5;
    font-size: 15px;
    padding: 3px 5px;
    border-radius: 5px;
    transition: background .14s, color .14s;
    line-height: 1;
}
.wdp-close-btn:hover {
    background: #f3f4f8;
    color: #3d4460;
}

/* ── Scroll body ──────────────────────────────────────────────── */
.wdp-body {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #eaecf5 transparent;
    padding-bottom: 20px;
}
.wdp-body::-webkit-scrollbar {
    width: 4px;
}
.wdp-body::-webkit-scrollbar-thumb {
    background: #eaecf5;
    border-radius: 4px;
}

/* ── İstatistik kutuları (Chunk / Embedding / Token) ──────────── */
.wdp-stats-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid #f0f2f5;
}
.wdp-stats-strip.wss-file{
    grid-template-columns: repeat(2, 1fr);
}
.wdp-stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 8px;
    border-right: 1px solid #f0f2f5;
    text-align: center;
}
.wdp-stat-box:last-child {
    border-right: none;
}
.wdp-stat-val {
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 3px;
}
.wdp-stat-val.c-blue   {
    color: #1565c0;
}
.wdp-stat-val.c-indigo {
    color: #3b4cca;
}
.wdp-stat-val.c-purple {
    color: #7b1fa2;
}
.wdp-stat-val.c-green  {
    color: #2e7d32;
}
.wdp-stat-val.c-orange {
    color: #e65100;
}
.wdp-stat-label {
    font-size: 10.5px;
    color: #8a94ad;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Section başlık ───────────────────────────────────────────── */
.wdp-section {
    padding: 14px 18px 6px;
}
.wdp-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #8a94ad;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.wdp-section-title i {
    font-size: 13px;
}

/* ── Klasör stat satırları ────────────────────────────────────── */
.wdp-folder-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fc;
    font-size: 13px;
}
.wdp-folder-stat-row:last-child {
    border-bottom: none;
}
.wdp-folder-stat-key {
    color: #6b7a99;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wdp-folder-stat-key i {
    font-size: 13px;
    color: #b0bec5;
}
.wdp-folder-stat-val {
    font-weight: 700;
    color: #1a1f36;
}

/* Kaynak dağılım çubuğu */
.wdp-dist-bar-wrap {
    margin-top: 4px;
}
.wdp-dist-item {
    margin-bottom: 8px;
}
.wdp-dist-label {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #6b7a99;
    margin-bottom: 3px;
}
.wdp-dist-label strong {
    color: #1a1f36;
    font-weight: 700;
}
.wdp-dist-track {
    height: 5px;
    background: #eaecf5;
    border-radius: 5px;
    overflow: hidden;
}
.wdp-dist-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #3b4cca, #667eea);
    transition: width .4s;
}

/* ── Chunk listesi ────────────────────────────────────────────── */
.wdp-chunk-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 18px;
}
.wdp-chunk-item {
    background: #f8f9fc;
    border: 1px solid #eaecf5;
    border-radius: 9px;
    padding: 10px 12px;
    transition: border-color .15s, background .15s;
    cursor: default;
}
.wdp-chunk-item:hover {
    border-color: #c5caf5;
    background: #f0f2ff;
}

.wdp-chunk-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.wdp-chunk-idx {
    font-size: 11px;
    font-weight: 700;
    color: #6b7a99;
}
.wdp-chunk-score {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
}
.wdp-score-hi  {
    background: #e8f5e9;
    color: #2e7d32;
}
.wdp-score-mid {
    background: #fff3e0;
    color: #e65100;
}
.wdp-score-lo  {
    background: #fce8e6;
    color: #c62828;
}

.wdp-chunk-text {
    font-size: 12px;
    color: #3d4460;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.wdp-chunk-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #8a94ad;
}
.wdp-chunk-sorgu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #3b4cca;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background .14s;
    font-family: inherit;
}
.wdp-chunk-sorgu-btn:hover {
    background: #eef0fb;
}

/* ── AI İşlemleri ─────────────────────────────────────────────── */
.wdp-ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 18px;
}
.wdp-ai-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 8px;
    background: #f8f9fc;
    border: 1px solid #eaecf5;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: #3d4460;
    font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
    text-align: center;
}
.wdp-ai-btn:hover {
    border-color: #c5caf5;
    background: #f0f2ff;
    box-shadow: 0 2px 8px rgba(59,76,202,.08);
}
.wdp-ai-btn i {
    font-size: 22px;
}
.wdp-ai-btn.ai-blue   i {
    color: #1565c0;
}
.wdp-ai-btn.ai-green  i {
    color: #2e7d32;
}
.wdp-ai-btn.ai-indigo i {
    color: #3b4cca;
}
.wdp-ai-btn.ai-orange i {
    color: #e65100;
}

/* ── Loading / empty ──────────────────────────────────────────── */
.wdp-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    color: #8a94ad;
    font-size: 13px;
}
.wdp-empty {
    text-align: center;
    padding: 30px 20px;
    color: #8a94ad;
}
.wdp-empty i {
    font-size: 28px;
    color: #d0d4e8;
    display: block;
    margin-bottom: 8px;
}
.wdp-empty p {
    font-size: 13px;
}

/* ── Divider ──────────────────────────────────────────────────── */
.wdp-divider {
    height: 1px;
    background: #f0f2f5;
    margin: 10px 0 4px;
}

/* ── Tags satırı ──────────────────────────────────────────────── */
.wdp-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 18px 10px;
}
.wdp-tag {
    font-size: 11px;
    background: #f3f4fb;
    color: #5c6bc0;
    border-radius: 5px;
    padding: 3px 9px;
    font-weight: 500;
}

/* ── Sağ tarafa kayma için içerik alanı ───────────────────────── */
.ws-content-with-panel {
    transition: padding-right .25s ease;
}
.ws-content-with-panel.wdp-shifted {
    padding-right: 330px;
}
/* ═══════════════════════════════════════════════════════════════
   WORKSPACE SIDEBAR TREE  —  prefix: .wst-
   ═══════════════════════════════════════════════════════════════ */

/* ── Hızlı eylemler bölümü override ──────────────────────────── */
/*.sec-quick-actions {
    padding: 0;
    margin-top: 8px;
}*/

/* ── Klasör ağacı kapsayıcı ───────────────────────────────────── */
.wst-wrap {
    padding: 0 0 12px;
    width: 100%;
}

/* ── Başlık satırı ────────────────────────────────────────────── */
.wst-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 6px;
}
.wst-head-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
}
.wst-new-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,.55);
    font-size: 11.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    border-radius: 6px;
    transition: background .15s, color .15s;
    font-family: inherit;
}
.wst-new-btn:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

/* ── Ağaç listesi ─────────────────────────────────────────────── */
.wst-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── Ağaç öğesi ───────────────────────────────────────────────── */
.wst-item {
    position: relative;
}

.wst-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px 7px 14px;
    cursor: pointer;
    border-radius: 8px;
    margin: 1px 0;
    transition: background .14s;
    position: relative;
    user-select: none;
}
.wst-row:hover {
    background: rgba(255,255,255,.1);
}
.wst-row.wst-active {
    background: rgba(255,255,255,.18);
}
.wst-row.wst-active .wst-name {
    color: #fff;
    font-weight: 700;
}

/* İndentle — her seviye için sol padding */
.wst-row[data-depth="1"] {
    padding-left: 26px;
}
.wst-row[data-depth="2"] {
    padding-left: 38px;
}
.wst-row[data-depth="3"] {
    padding-left: 50px;
}

/* Dikey rehber çizgisi */
.wst-item[data-depth="1"] > .wst-row::before,
.wst-item[data-depth="2"] > .wst-row::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,.12);
}

/* Toggle oku */
.wst-toggle {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    color: rgba(255,255,255,.4);
    transition: transform .2s;
    margin-right: -2px;
}
.wst-toggle.wst-open {
    transform: rotate(90deg);
}
.wst-toggle.wst-hidden {
    visibility: hidden;
}

/* Klasör ikonu */
.wst-icon {
    font-size: 15px;
    flex-shrink: 0;
    color: #f59e0b;
    line-height: 1;
}
.wst-icon.wst-icon-open {
    color: #fbbf24;
}

/* İsim */
.wst-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Chunk/dosya sayısı badge */
.wst-count {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,.45);
    flex-shrink: 0;
    min-width: 18px;
    text-align: right;
}

/* RAG badge */
.wst-rag-badge {
    font-size: 10px;
    font-weight: 800;
    background: #22c55e;
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
    letter-spacing: .04em;
}

/* Alt ağaç */
.wst-children {
    overflow: hidden;
    max-height: 0;
    transition: max-height .22s ease;
}
.wst-children.wst-expanded {
    max-height: 1000px;
}

/* ── Loading / empty ──────────────────────────────────────────── */
.wst-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    color: rgba(255,255,255,.4);
    font-size: 12px;
}
.wst-empty {
    padding: 10px 18px;
    font-size: 12px;
    color: rgba(255,255,255,.35);
    font-style: italic;
}
/* ── Prompt Kalite Göstergesi ─── */
.ws-pq-wrap {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f8f9fc;
    border-radius: 8px;
    border: 1px solid #eaecf5;
}
.ws-pq-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.ws-pq-bar {
    flex: 1;
    height: 6px;
    background: #eaecf5;
    border-radius: 6px;
    overflow: hidden;
}
.ws-pq-fill {
    height: 100%;
    border-radius: 6px;
    transition: width .3s ease, background .3s;
}
.ws-pq-fill.ws-pq-poor  {
    background: #ef4444;
}
.ws-pq-fill.ws-pq-fair  {
    background: #f97316;
}
.ws-pq-fill.ws-pq-good  {
    background: #22c55e;
}
.ws-pq-fill.ws-pq-great {
    background: #3b4cca;
}

.ws-pq-label {
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.ws-pq-label.ws-pq-poor  {
    color: #ef4444;
}
.ws-pq-label.ws-pq-fair  {
    color: #f97316;
}
.ws-pq-label.ws-pq-good  {
    color: #22c55e;
}
.ws-pq-label.ws-pq-great {
    color: #3b4cca;
}

.ws-pq-tip {
    font-size: 11.5px;
    color: #6b7a99;
    margin-bottom: 6px;
    min-height: 16px;
}
.ws-pq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ws-pq-tag {
    font-size: 10.5px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    padding: 2px 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}
.ws-pq-btn-weak {
    opacity: .5;
    cursor: not-allowed !important;
}
/* ============================================================
   newCoursesAI — Wizard & Prompt Modal Styles
   ============================================================ */

/* ---------- Prompt Modal ---------- */
.ws-prompt-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ws-prompt-file-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #f0f4ff;
    border: 1px solid #c7d4f5;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #3d5af1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ws-prompt-file-badge i {
    font-size: 15px;
    flex-shrink: 0;
}

.ws-modal-label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ws-prompt-textarea {
    width: 100%;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #1f2937;
    resize: vertical;
    transition: border-color .2s;
    outline: none;
    font-family: inherit;
    line-height: 1.6;
}

.ws-prompt-textarea:focus {
    border-color: #3d5af1;
    box-shadow: 0 0 0 3px rgba(61,90,241,.1);
}

/* Quality bar */
.ws-pq-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ws-pq-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ws-pq-bar {
    flex: 1;
    height: 7px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}

.ws-pq-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .4s cubic-bezier(.4,0,.2,1), background .3s;
    width: 0%;
}

.ws-pq-fill.ws-pq-poor   {
    background: #ef4444;
}
.ws-pq-fill.ws-pq-fair   {
    background: #f59e0b;
}
.ws-pq-fill.ws-pq-good   {
    background: #3b82f6;
}
.ws-pq-fill.ws-pq-great  {
    background: #10b981;
}

.ws-pq-label {
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    min-width: 140px;
    text-align: right;
}

.ws-pq-label.ws-pq-poor  {
    color: #ef4444;
}
.ws-pq-label.ws-pq-fair  {
    color: #f59e0b;
}
.ws-pq-label.ws-pq-good  {
    color: #3b82f6;
}
.ws-pq-label.ws-pq-great {
    color: #10b981;
}

.ws-pq-tip {
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
}

.ws-pq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 22px;
}

.ws-pq-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #ecfdf5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
}

.ws-prompt-hint {
    font-size: 11px;
    color: #78716c;
    line-height: 1.5;
    padding: 8px 10px;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    border-radius: 0 6px 6px 0;
}

.ws-pq-btn-weak {
    opacity: .6;
    cursor: not-allowed;
}

/* ---------- AI Loading Screen (inside modal while API call runs) ---------- */
.ws-ai-loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 20px;
    min-height: 280px;
}

.ws-ai-loading-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ws-pulse-ring 2s ease-in-out infinite;
    position: relative;
}

.ws-ai-loading-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(99,102,241,.3);
    animation: ws-spin-ring 3s linear infinite;
}

@keyframes ws-pulse-ring {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99,102,241,.4);
    }
    50%       {
        box-shadow: 0 0 0 14px rgba(99,102,241,.0);
    }
}

@keyframes ws-spin-ring {
    from {
        transform: rotate(0deg);
    }
    to   {
        transform: rotate(360deg);
    }
}

.ws-ai-loading-icon i {
    font-size: 28px;
    color: #fff;
}

.ws-ai-loading-title {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    text-align: center;
}

.ws-ai-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
}

.ws-ai-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #9ca3af;
    padding: 6px 10px;
    border-radius: 8px;
    transition: all .3s;
}

.ws-ai-step.active {
    color: #6366f1;
    background: #eef2ff;
    font-weight: 600;
}

.ws-ai-step.done {
    color: #10b981;
    background: #ecfdf5;
}

.ws-ai-step.done .ws-ai-step-dot  {
    background: #10b981;
}
.ws-ai-step.active .ws-ai-step-dot {
    background: #6366f1;
    animation: ws-dot-blink .8s infinite;
}

.ws-ai-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
    transition: background .3s;
}

@keyframes ws-dot-blink {
    0%, 100% {
        opacity: 1;
    }
    50%       {
        opacity: .3;
    }
}

.ws-ai-loading-sub {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
}

/* ---------- AI Wizard (newCoursesAI) ---------- */

/* Step 1 — Content Analysis */
.ai-step1-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-meta-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
}

.ai-meta-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-field-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.ai-field-row:last-child {
    margin-bottom: 0;
}

.ai-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
}

.ai-field-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}

.ai-field-input,
.ai-field-select,
.ai-field-textarea {
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    padding: 6px 10px;
    font-size: 12px;
    color: #1f2937;
    background: #fff;
    outline: none;
    font-family: inherit;
    width: 100%;
    transition: border-color .2s;
}

.ai-field-input:focus,
.ai-field-select:focus,
.ai-field-textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.ai-field-textarea {
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}

/* Dynamic tag-list inputs (learning objectives, focus areas, etc.) */
.ai-dynlist-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow: auto;
    min-height: 100px;
}

.ai-dynlist-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-dynlist-row input {
    flex: 1;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 12px;
    color: #1f2937;
    outline: none;
    font-family: inherit;
    transition: border-color .2s;
}

.ai-dynlist-row input:focus {
    border-color: #6366f1;
}

.ai-dynlist-remove {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1.5px solid #fca5a5;
    background: #fff;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 11px;
    transition: background .15s;
}

.ai-dynlist-remove:hover {
    background: #fee2e2;
}

.ai-dynlist-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px dashed #a5b4fc;
    background: #f5f3ff;
    margin-top: 6px;
    transition: background .15s;
}

.ai-dynlist-add:hover {
    background: #ede9fe;
}

/* Step 2 — Module Selection */
/* ============================================================
   AI Module Loading UI
   Tüm mevcut ai-module-loading sınıflarının yerine geçer.
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
.lw {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 32px;
    gap: 28px;
    min-height: 360px;
}

/* ── Robot icon + spinning rings ────────────────────────────── */
.lw-icon-wrap {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lw-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #534AB7;
    border-right-color: #7F77DD;
    animation: lw-spin 1.2s linear infinite;
}

.lw-ring-2 {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-bottom-color: #7F77DD;
    animation: lw-spin 1.9s linear infinite reverse;
}

@keyframes lw-spin {
    to {
        transform: rotate(360deg);
    }
}

.lw-icon-inner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EEEDFE;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.lw-icon-inner i {
    font-size: 22px;
    color: #534AB7;
}

/* ── Title ──────────────────────────────────────────────────── */
.lw-title {
    font-size: 14px;
    font-weight: 600;
    color: #534AB7;
    text-align: center;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ── Progress bar ───────────────────────────────────────────── */
.lw-progress-wrap {
    width: 100%;
    max-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lw-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lw-progress-label {
    font-size: 11px;
    color: #888780;
}

.lw-progress-pct {
    font-size: 11px;
    font-weight: 600;
    color: #534AB7;
    min-width: 32px;
    text-align: right;
}

.lw-bar-track {
    width: 100%;
    height: 5px;
    background: #E2E8F0;
    border-radius: 99px;
    overflow: hidden;
}

.lw-bar-fill {
    height: 100%;
    background: #534AB7;
    border-radius: 99px;
    width: 0%;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Step list ──────────────────────────────────────────────── */
.lw-steps {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 340px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
}

.lw-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #E2E8F0;
    transition: background 0.25s;
    position: relative;
}

.lw-step:last-child {
    border-bottom: none;
}

/* Dot */
.lw-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D1D5DB;
    flex-shrink: 0;
    transition: background 0.25s;
}

.lw-step.active {
    background: #EEEDFE;
}

.lw-step.active .lw-step-dot {
    background: #534AB7;
    animation: lw-dot-pulse 1s ease-in-out infinite;
}

@keyframes lw-dot-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50%       {
        transform: scale(1.5);
        opacity: .7;
    }
}

.lw-step.done {
    background: #F0FDF4;
}

.lw-step.done .lw-step-dot {
    background: #1D9E75;
}

/* Text */
.lw-step-text {
    font-size: 11px;
    color: #9CA3AF;
    flex: 1;
    transition: color 0.25s;
    line-height: 1.3;
}

.lw-step.active .lw-step-text {
    color: #534AB7;
    font-weight: 600;
}

.lw-step.done .lw-step-text {
    color: #1D9E75;
}

/* Check mark */
.lw-step-check {
    font-size: 11px;
    font-weight: 700;
    color: #1D9E75;
    opacity: 0;
    transition: opacity 0.3s;
    flex-shrink: 0;
    margin-left: auto;
}

.lw-step.done .lw-step-check {
    opacity: 1;
}
/* Module list */
.ai-module-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-module-item {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    transition: border-color .2s, box-shadow .2s;
}

.ai-module-item:hover {
    border-color: #a5b4fc;
    box-shadow: 0 2px 8px rgba(99,102,241,.08);
}

.ai-module-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-module-index-badge {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-module-title-input {
    flex: 1;
    border: 1.5px solid transparent;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    background: transparent;
    outline: none;
    font-family: inherit;
    transition: border-color .2s, background .2s;
}

.ai-module-title-input:focus {
    border-color: #6366f1;
    background: #f5f3ff;
}

.ai-module-desc-input {
    width: 100%;
    border: 1.5px solid transparent;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 11px;
    color: #6b7280;
    background: transparent;
    outline: none;
    font-family: inherit;
    resize: none;
    margin-top: 4px;
    transition: border-color .2s, background .2s;
    min-height: 36px;
    line-height: 1.5;
}

.ai-module-desc-input:focus {
    border-color: #c4b5fd;
    background: #faf5ff;
    color: #374151;
}

/* Quiz / Flashcard / FAQ toggles */
.ai-module-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.ai-toggle-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    cursor: pointer;
    transition: all .2s;
    user-select: none;
}

.ai-toggle-chip.on {
    border-color: #a5b4fc;
    background: #eef2ff;
    color: #4f46e5;
}

.ai-toggle-chip .ai-tc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background .2s;
}

.ai-toggle-chip.on .ai-tc-dot {
    background: #6366f1;
}

/* Global config bar (above module list) */
.ai-global-toggles {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f0f4ff;
    border: 1px solid #c7d4f5;
    border-radius: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.ai-global-toggle-label {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    margin-right: 4px;
}

/* Step 3 — Preview */
.ai-preview-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ai-preview-hero {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 12px;
    padding: 20px 22px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ai-preview-hero::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
}

.ai-preview-hero-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    line-height: 1.3;
    position: relative;
}

.ai-preview-hero-desc {
    font-size: 12px;
    opacity: .85;
    margin: 0 0 12px;
    line-height: 1.5;
    position: relative;
}

.ai-preview-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
}

.ai-preview-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    background: rgba(255,255,255,.18);
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

.ai-preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ai-preview-block {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.ai-preview-block-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-preview-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-preview-block li {
    font-size: 12px;
    color: #374151;
    display: flex;
    align-items: flex-start;
    gap: 5px;
    line-height: 1.4;
}

.ai-preview-block li i {
    flex-shrink: 0;
    margin-top: 2px;
}

.ai-preview-module-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid #f1f5f9;
}

.ai-preview-module-row:last-child {
    border-bottom: none;
}

.ai-preview-module-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #4f46e5;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-preview-module-info {
    flex: 1;
}

.ai-preview-module-name {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

.ai-preview-module-chips {
    display: flex;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
}

.ai-preview-module-chip {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 99px;
    background: #e0e7ff;
    color: #4f46e5;
}

.ai-preview-module-chip.quiz    {
    background: #fef3c7;
    color: #92400e;
}
.ai-preview-module-chip.flash   {
    background: #dcfce7;
    color: #166534;
}
.ai-preview-module-chip.faq     {
    background: #f3e8ff;
    color: #6b21a8;
}

/* Category row in step 3 */
.ai-preview-category-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1.5px solid #fcd34d;
    border-radius: 10px;
    font-size: 12px;
    color: #92400e;
}

.ai-preview-category-row select {
    flex: 1;
    border: 1.5px solid #fcd34d;
    border-radius: 7px;
    padding: 5px 8px;
    font-size: 12px;
    color: #1f2937;
    outline: none;
    background: #fff;
}

/* Collapsible module desc in step 2 */
.ai-module-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
}

.ai-module-body.open {
    max-height: 200px;
}

.ai-module-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    color: #9ca3af;
    font-size: 12px;
    transition: color .2s, transform .2s;
    outline: none;
}

.ai-module-expand-btn.open {
    color: #6366f1;
    transform: rotate(180deg);
}
.project-wizard-modal .sw-form-box.ai-sfb {
    background-color: #ffffff;
    padding: 1rem;
    height: calc(100vh - 265px);
    overflow: auto;
}
.project-wizard-modal .sw-form-box.ai-sfb-mdl {
    background-color: #ffffff;
    padding: 1rem;
    height: calc(100vh - 380px);
    overflow: auto;
}
/* ============================================================
   Step 2 — Modül Seçimi  (newCoursesAI ek CSS)
   ============================================================ */

/* ── Global switch bar ─────────────────────────────────────── */
.ai-global-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: #f0f4ff;
    border: 1.5px solid #c7d4f5;
    border-radius: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ai-global-bar-label {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.ai-global-bar-items {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ai-global-bar-item {
    display: flex;
    align-items: center;
    gap: 7px;
}

/* ── Switch Toggle ─────────────────────────────────────────── */
.ai-sw {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.ai-sw-track {
    display: inline-flex;
    align-items: center;
    width: 36px;
    height: 20px;
    border-radius: 99px;
    background: #d1d5db;
    padding: 2px;
    transition: background .25s;
    position: relative;
}

.ai-sw-track.on {
    background: #6366f1;
}

.ai-sw-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    position: absolute;
    left: 2px;
    transition: left .22s cubic-bezier(.4,0,.2,1);
}

.ai-sw-track.on .ai-sw-thumb {
    left: 18px;
}

.ai-sw-label {
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    white-space: nowrap;
}

/* ── Module list container ─────────────────────────────────── */
.ai-module-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Module Card ───────────────────────────────────────────── */
.ai-mod-card {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}

.ai-mod-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 2px 10px rgba(99,102,241,.07);
}

/* ── Card Header ───────────────────────────────────────────── */
.ai-mod-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border-bottom: 1.5px solid transparent;
    transition: border-color .2s;
}

.ai-mod-card.open > .ai-mod-header,
.ai-mod-body.open ~ .ai-mod-header {
    border-bottom-color: #e2e8f0;
}

.ai-mod-index {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-mod-header-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-mod-title-input {
    border: 1.5px solid transparent;
    border-radius: 7px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    background: transparent;
    outline: none;
    font-family: inherit;
    width: 100%;
    transition: border-color .2s, background .2s;
}

.ai-mod-title-input:hover {
    border-color: #e2e8f0;
    background: #fff;
}

.ai-mod-title-input:focus {
    border-color: #6366f1;
    background: #fff;
}

.ai-mod-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding-left: 9px;
}

.ai-mod-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 99px;
    text-transform: capitalize;
}

.ai-mod-badge--type  {
    background: #e0e7ff;
    color: #4338ca;
}
.ai-mod-badge--pedag {
    background: #fef3c7;
    color: #92400e;
}
.ai-mod-badge--dur   {
    background: #dcfce7;
    color: #166534;
    display: inline-flex;
    align-items: center;
}

.ai-mod-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.ai-mod-expand-btn,
.ai-mod-delete-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    font-size: 12px;
    transition: all .18s;
}

.ai-mod-expand-btn {
    color: #9ca3af;
    border-color: #e5e7eb;
}

.ai-mod-expand-btn:hover {
    color: #6366f1;
    border-color: #a5b4fc;
    background: #eef2ff;
}

.ai-mod-expand-btn i {
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.ai-mod-expand-btn.open i {
    transform: rotate(180deg);
}

.ai-mod-delete-btn {
    color: #f87171;
    border-color: #fecaca;
}

.ai-mod-delete-btn:hover {
    background: #fee2e2;
    border-color: #f87171;
}

/* ── Card Body ─────────────────────────────────────────────── */
.ai-mod-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
}

.ai-mod-body.open {
    max-height: 600px;
}

.ai-mod-body-inner {
    padding: 12px 14px 14px;
}

/* desc + duration inputs */
.ai-mod-desc-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 12px;
    color: #374151;
    background: #fff;
    outline: none;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
    transition: border-color .2s;
}

.ai-mod-desc-input:focus {
    border-color: #6366f1;
}

.ai-mod-duration-input {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 12px;
    color: #374151;
    background: #fff;
    outline: none;
    font-family: inherit;
    transition: border-color .2s;
}

.ai-mod-duration-input:focus {
    border-color: #6366f1;
}

.ai-mod-field-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.ai-mod-field-label i {
    color: #9ca3af;
    font-size: 12px;
}

/* ── Mini list (topics / objectives / concepts) ─────────────── */
.ai-mini-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 4px;
}

.ai-mini-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-mini-row input {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 11px;
    color: #374151;
    outline: none;
    font-family: inherit;
    background: #fff;
    transition: border-color .18s;
}

.ai-mini-row input:focus {
    border-color: #6366f1;
}

.ai-mini-remove {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1.5px solid #fca5a5;
    background: #fff;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 9px;
    transition: background .15s;
}

.ai-mini-remove:hover {
    background: #fee2e2;
}

.ai-mini-add {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #6366f1;
    cursor: pointer;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px dashed #a5b4fc;
    background: #f5f3ff;
    transition: background .15s;
}

.ai-mini-add:hover {
    background: #ede9fe;
}

/* ── Per-module switch row ─────────────────────────────────── */
.ai-mod-sw-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-mod-sw-item {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    transition: border-color .2s, background .2s;
}

.ai-mod-sw-item:hover {
    border-color: #c7d4f5;
    background: #f0f4ff;
}

.ai-mod-sw-info {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-mod-sw-info i {
    font-size: 15px;
}

.ai-sw-icon-quiz  {
    color: #f59e0b;
}
.ai-sw-icon-flash {
    color: #10b981;
}
.ai-sw-icon-faq   {
    color: #8b5cf6;
}

.ai-mod-sw-name {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

.ai-mod-sw-desc {
    font-size: 10px;
    color: #9ca3af;
}

/* ── Loading ───────────────────────────────────────────────── */
.ai-module-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 16px;
    color: #6b7280;
}

.ai-module-loading-bar {
    width: 220px;
    height: 5px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}

.ai-module-loading-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #6366f1);
    background-size: 200% 100%;
    border-radius: 99px;
    animation: ai-shimmer 1.4s linear infinite;
    width: 100%;
}

@keyframes ai-shimmer {
    0%   {
        background-position: -200% 0;
    }
    100% {
        background-position:  200% 0;
    }
}

.ai-module-loading-tips {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}

.ai-module-loading-tip {
    font-size: 11px;
    color: #9ca3af;
    transition: opacity .5s, color .5s;
}

.ai-module-loading-tip.active {
    color: #6366f1;
    font-weight: 600;
}
/* ============================================================
   Step 3 — Önizleme  (newCoursesAI ek CSS)
   ============================================================ */

/* ── Info blocks 2-col grid ────────────────────────────────── */
.ai-prev-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

@media (max-width: 640px) {
    .ai-prev-grid {
        grid-template-columns: 1fr;
    }
}

.ai-prev-block {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.ai-prev-block-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-prev-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-prev-list li {
    font-size: 11px;
    color: #374151;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1.4;
}

.ai-prev-list li i {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Tags ───────────────────────────────────────────────────── */
.ai-prev-tags-wrap {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
}

.ai-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-bottom: 8px;
}

.ai-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #e0e7ff;
    border: 1px solid #a5b4fc;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    color: #4338ca;
}

.ai-tag-remove {
    cursor: pointer;
    font-size: 9px;
    color: #818cf8;
    transition: color .15s;
}

.ai-tag-remove:hover {
    color: #ef4444;
}

.ai-prev-tag-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Module list ────────────────────────────────────────────── */
.ai-prev-mod-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-prev-mod-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    transition: border-color .18s;
}

.ai-prev-mod-row:hover {
    border-color: #a5b4fc;
}

.ai-prev-mod-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ai-prev-mod-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai-prev-mod-title {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.ai-prev-mod-desc {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
}

.ai-prev-mod-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 3px;
}

.ai-prev-mod-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ai-prev-chip {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 99px;
}

.ai-prev-chip--quiz  {
    background: #fef3c7;
    color: #92400e;
}
.ai-prev-chip--flash {
    background: #dcfce7;
    color: #166534;
}
.ai-prev-chip--faq   {
    background: #f3e8ff;
    color: #6b21a8;
}

.ai-prev-mod-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
/* ============================================================
   Module Card — Contents Status
   com-ct-* sınıfları
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
.com-ct-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 4px;
}

/* ── Banner (yalnızca wait varsa) ───────────────────────────── */
.com-ct-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F5F3FF;
    border: 1.5px solid #C4B5FD;
    border-radius: 9px;
    flex-wrap: wrap;
}

/* Robot icon + spinning ring */
.com-ct-banner-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EDE9FE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.com-ct-banner-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #7C3AED;
    border-right-color: #A78BFA;
    animation: com-ct-spin 1.1s linear infinite;
}

@keyframes com-ct-spin {
    to {
        transform: rotate(360deg);
    }
}

.com-ct-banner-icon i {
    font-size: 15px;
    color: #7C3AED;
    position: relative;
    z-index: 1;
}

.com-ct-banner-body {
    flex: 1;
    min-width: 0;
}

.com-ct-banner-title {
    font-size: 12px;
    font-weight: 600;
    color: #5B21B6;
    line-height: 1.3;
}

.com-ct-banner-sub {
    font-size: 10px;
    color: #7C3AED;
    opacity: .8;
    margin-top: 1px;
    line-height: 1.3;
}

/* Sweep bar */
.com-ct-banner-track {
    width: 64px;
    height: 3px;
    background: #C4B5FD;
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}

.com-ct-banner-fill {
    height: 100%;
    background: #7C3AED;
    border-radius: 99px;
    width: 100%;
    transform-origin: left center;
    animation: com-ct-sweep 1.4s ease-in-out infinite alternate;
}

@keyframes com-ct-sweep {
    0%   {
        transform: scaleX(0.12) translateX(0%);
    }
    100% {
        transform: scaleX(0.12) translateX(730%);
    }
}

/* ── Content item card ──────────────────────────────────────── */
.com-ct-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
}

.com-ct-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
}

.com-ct-item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.com-ct-item-name {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.com-ct-item-status {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* ── wait / draft ─── */
.com-ct-item--wait {
    background: #F5F3FF;
    border-color: #C4B5FD;
}

.com-ct-item--wait .com-ct-item-icon {
    background: #EDE9FE;
}
.com-ct-item--wait .com-ct-item-icon i {
    color: #7C3AED;
}
.com-ct-item--wait .com-ct-item-name {
    color: #5B21B6;
}
.com-ct-item--wait .com-ct-item-status {
    color: #7C3AED;
}

.com-ct-item--wait .com-ct-item-status i {
    display: inline-block;
    animation: com-ct-spin 1s linear infinite;
}

/* ── ready ─── */
.com-ct-item--ready {
    background: #F0FDF4;
    border-color: #86EFAC;
}

.com-ct-item--ready .com-ct-item-icon {
    background: #DCFCE7;
}
.com-ct-item--ready .com-ct-item-icon i {
    color: #16A34A;
}
.com-ct-item--ready .com-ct-item-name {
    color: #166534;
}
.com-ct-item--ready .com-ct-item-status {
    color: #16A34A;
}

/* ── error ─── */
.com-ct-item--error {
    background: #FFF1F2;
    border-color: #FECDD3;
}

.com-ct-item--error .com-ct-item-icon {
    background: #FFE4E6;
}
.com-ct-item--error .com-ct-item-icon i {
    color: #E11D48;
}
.com-ct-item--error .com-ct-item-name {
    color: #9F1239;
}
.com-ct-item--error .com-ct-item-status {
    color: #E11D48;
}

/* ── Header pill'ler ────────────────────────────────────────── */
.com-pill-ai-pending {
    background: #EDE9FE;
    color: #5B21B6;
    border-color: #C4B5FD;
}

.com-pill-ai-pending i {
    display: inline-block;
    animation: com-ct-spin 2s linear infinite;
}

.com-pill-ai-ready {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
}
/* ============================================================
   Module Card — Contents Status
   com-ct-* sınıfları
   ============================================================ */

/* ── Wrapper ────────────────────────────────────────────────── */
.com-ct-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 4px;
}

/* ── Banner (yalnızca wait varsa) ───────────────────────────── */
.com-ct-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #F5F3FF;
    border: 1.5px solid #C4B5FD;
    border-radius: 9px;
    flex-wrap: wrap;
}

/* Robot icon + spinning ring */
.com-ct-banner-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #EDE9FE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.com-ct-banner-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #7C3AED;
    border-right-color: #A78BFA;
    animation: com-ct-spin 1.1s linear infinite;
}

@keyframes com-ct-spin {
    to {
        transform: rotate(360deg);
    }
}

.com-ct-banner-icon i {
    font-size: 15px;
    color: #7C3AED;
    position: relative;
    z-index: 1;
}

.com-ct-banner-body {
    flex: 1;
    min-width: 0;
}

.com-ct-banner-title {
    font-size: 12px;
    font-weight: 600;
    color: #5B21B6;
    line-height: 1.3;
}

.com-ct-banner-sub {
    font-size: 10px;
    color: #7C3AED;
    opacity: .8;
    margin-top: 1px;
    line-height: 1.3;
}

/* Sweep bar */
.com-ct-banner-track {
    width: 64px;
    height: 3px;
    background: #C4B5FD;
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}

.com-ct-banner-fill {
    height: 100%;
    background: #7C3AED;
    border-radius: 99px;
    width: 100%;
    transform-origin: left center;
    animation: com-ct-sweep 1.4s ease-in-out infinite alternate;
}

@keyframes com-ct-sweep {
    0%   {
        transform: scaleX(0.12) translateX(0%);
    }
    100% {
        transform: scaleX(0.12) translateX(730%);
    }
}

.com-ct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
}

.com-ct-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
}

.com-ct-item-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
}

.com-ct-item-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.com-ct-item-name {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.com-ct-item-status {
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* ── wait / draft ─── */
.com-ct-item--wait {
    background: #F5F3FF;
    border-color: #C4B5FD;
}

.com-ct-item--wait .com-ct-item-icon {
    background: #EDE9FE;
}
.com-ct-item--wait .com-ct-item-icon i {
    color: #7C3AED;
}
.com-ct-item--wait .com-ct-item-name {
    color: #5B21B6;
}
.com-ct-item--wait .com-ct-item-status {
    color: #7C3AED;
}

.com-ct-item--wait .com-ct-item-status i {
    display: inline-block;
    animation: com-ct-spin 1s linear infinite;
}

/* ── ready ─── */
.com-ct-item--ready {
    background: #F0FDF4;
    border-color: #86EFAC;
}

.com-ct-item--ready .com-ct-item-icon {
    background: #DCFCE7;
}
.com-ct-item--ready .com-ct-item-icon i {
    color: #16A34A;
}
.com-ct-item--ready .com-ct-item-name {
    color: #166534;
}
.com-ct-item--ready .com-ct-item-status {
    color: #16A34A;
}

/* ── error ─── */
.com-ct-item--error {
    background: #FFF1F2;
    border-color: #FECDD3;
}

.com-ct-item--error .com-ct-item-icon {
    background: #FFE4E6;
}
.com-ct-item--error .com-ct-item-icon i {
    color: #E11D48;
}
.com-ct-item--error .com-ct-item-name {
    color: #9F1239;
}
.com-ct-item--error .com-ct-item-status {
    color: #E11D48;
}

.com-pill-ai-pending {
    background: #EDE9FE;
    color: #5B21B6;
    border-color: #C4B5FD;
}

.com-pill-ai-pending i {
    display: inline-block;
    animation: com-ct-spin 2s linear infinite;
}

.com-pill-ai-ready {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
}

.com-ct-refresh-btn {
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid #C4B5FD;
    background: #EDE9FE;
    color: #7C3AED;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
    outline: none;
    gap: 5px;
    font-weight: 600;
    transition: background .15s, border-color .15s, transform .15s;
}

.com-ct-refresh-btn:hover {
    background: #DDD6FE;
    border-color: #A78BFA;
}

.com-ct-refresh-btn:active {
    transform: rotate(180deg);
}


/* ── Kurs satırı ────────────────────────────────────────────── */
.cac-row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #ecedf5;
    border-radius: 14px;
    padding: 14px 16px 14px 0;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s, transform .2s, opacity .3s;
}

.cac-row:hover {
    background: #FAFBFF;
}

/* Silme animasyonu */
.cac-row-removing {
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .25s, transform .25s;
}

/* Sol renk çubuğu */
.cac-row-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 0 3px 3px 0;
    flex-shrink: 0;
}

/* ── Cover ──────────────────────────────────────────────────── */
.cac-cover {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.cac-cover--img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid rgba(0,0,0,.07);
}

.cac-cover--init {
    border: 1px solid rgba(0,0,0,.06);
}

/* ── Body ───────────────────────────────────────────────────── */
.cac-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cac-row-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.cac-row-title {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

/* Badges satırı */
.cac-row-badges {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.cac-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid transparent;
}

/* Status */
.cac-status--active  {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
}
.cac-status--passive {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FCA5A5;
}
.cac-status--draft   {
    background: #F1F5F9;
    color: #475569;
    border-color: #CBD5E1;
}

/* Difficulty */
.cac-diff--beginner     {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}
.cac-diff--intermediate {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FCD34D;
}
.cac-diff--advanced     {
    background: #FDF2F8;
    color: #9D174D;
    border-color: #F9A8D4;
}

/* AI badge */
.cac-badge--ai {
    background: #EEEDFE;
    color: #534AB7;
    border-color: #AFA9EC;
}

/* ── Açıklama ───────────────────────────────────────────────── */
.cac-row-desc {
    font-size: 11px;
    color: #64748B;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 80%;
}

/* ── Meta satırı ────────────────────────────────────────────── */
.cac-row-meta,
.cac-row-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cac-meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: #94A3B8;
    white-space: nowrap;
}

.cac-meta-item i {
    font-size: 11px;
}

.cac-meta-slug {
    font-family: monospace;
    font-size: 10px;
    color: #A78BFA;
}

/* ── Tags ───────────────────────────────────────────────────── */
.cac-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cac-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 99px;
    border: 1px solid;
}

/* ── Sağ panel ──────────────────────────────────────────────── */
.cac-row-right {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    padding-top: 2px;
}
/* ============================================================
   ai_Drp — İçerik Editörü AI Asistanı CSS
   ============================================================ */

/* ── Trigger butonu ─────────────────────────────────────────── */
.ced-tb-btn.ced-ai-drp-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 4px 11px;
    height: 28px;
    width: auto;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: background .15s, border-color .15s, transform .1s;

    background: linear-gradient(135deg, #7F77DD 0%, #534AB7 100%);
    border: 1.5px solid #534AB7;
    color: #fff !important;
}

/* Amber pulsing dot */
.ced-tb-btn.ced-ai-drp-trigger::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #EF9F27;
    box-shadow: 0 0 0 2px #fff;
    animation: ced-ai-dot 2s ease-in-out infinite;
}

@keyframes ced-ai-dot {
    0%, 100% {
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(239,159,39,.35);
    }
    50%       {
        box-shadow: 0 0 0 2px #fff, 0 0 0 7px rgba(239,159,39,.0);
    }
}

.ced-tb-btn.ced-ai-drp-trigger i {
    font-size: 13px;
    color: #D4D0F8;
}

.ced-tb-btn.ced-ai-drp-trigger:hover {
    background: linear-gradient(135deg, #534AB7 0%, #3C3489 100%) !important;
    border-color: #3C3489;
    color: #fff !important;
}

.ced-tb-btn.ced-ai-drp-trigger:active {
    transform: scale(.96);
}

.ced-tb-btn.ced-ai-drp-trigger.ced-ai-drp-open {
    background: linear-gradient(135deg, #534AB7 0%, #3C3489 100%)  !important;
    border-color: #3C3489;
}

.ced-tb-btn.ced-ai-drp-trigger.ced-ai-drp-open::after {
    animation: none;
    background: #BA7517;
}

/*.ced-ai-drp-trigger:hover,
.ced-ai-drp-trigger.ced-ai-drp-open {
    background: #EDE9FE;
    border-color: #A78BFA;
}*/

.ced-ai-drp-trigger i {
    font-size: 13px;
}

/* ── Dropdown panel ─────────────────────────────────────────── */
.ced-ai-drp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 190px;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    z-index: 9999;
    padding: 6px 0;
    display: none;
}

.ced-ai-drp-panel.open {
    display: block;
}

.ced-ai-drp-group-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 6px 12px 3px;
}

.ced-ai-drp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
    outline: none;
}

.ced-ai-drp-item:hover {
    background: #F5F3FF;
    color: #6D28D9;
}

.ced-ai-drp-item-icon {
    font-size: 13px;
    color: #A78BFA;
    flex-shrink: 0;
}

/* ── Result modal overlay ───────────────────────────────────── */
.ced-ai-result-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ced-ai-result-modal {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

/* Header */
.ced-ai-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.ced-ai-result-header-left {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    gap: 4px;
}

.ced-ai-result-action-label {
    color: #6D28D9;
}

.ced-ai-result-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    font-size: 12px;
    transition: background .12s;
}

.ced-ai-result-close:hover {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* Kaynak metin */
.ced-ai-result-source {
    padding: 10px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.ced-ai-result-source-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.ced-ai-result-source-text {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    padding: 7px 10px;
}

/* Sonuç alanı */
.ced-ai-result-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    min-height: 100px;
}

/* Spinner */
.ced-ai-result-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: #7C3AED;
    font-size: 12px;
}

.ced-ai-spinner-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #EDE9FE;
    border-top-color: #7C3AED;
    animation: ced-ai-spin 0.9s linear infinite;
}

@keyframes ced-ai-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Sonuç içerik kutusu */
.ced-ai-result-content {
    font-size: 13px;
    color: #1E293B;
    line-height: 1.7;
    border: 1.5px solid #C4B5FD;
    border-radius: 8px;
    padding: 10px 12px;
    background: #FAFAFA;
    outline: none;
    min-height: 60px;
}

.ced-ai-result-content:focus {
    border-color: #7C3AED;
    background: #fff;
}

.ced-ai-result-err {
    color: #DC2626;
    font-size: 12px;
}

/* Footer */
.ced-ai-result-footer {
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

/* Action pills */
.ced-ai-result-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ced-ai-action-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}

.ced-ai-action-pill {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    outline: none;
    transition: all .15s;
}

.ced-ai-action-pill:hover {
    background: #EDE9FE;
    border-color: #C4B5FD;
    color: #7C3AED;
}
.ced-ai-action-pill.active {
    background: #EDE9FE;
    border-color: #7C3AED;
    color: #7C3AED;
}

/* Yenile butonu */
.ced-ai-result-retry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: background .12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ced-ai-result-retry:hover:not(:disabled) {
    background: #EDE9FE;
    border-color: #C4B5FD;
    color: #7C3AED;
}
.ced-ai-result-retry:disabled {
    opacity: .45;
    cursor: default;
}

/* Uygulama modu radios */
.ced-ai-apply-mode {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ced-ai-apply-radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    font-weight: 500;
}

/* Apply / Cancel butonları */
.ced-ai-result-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ced-ai-result-cancel {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: background .12s;
}

.ced-ai-result-cancel:hover {
    background: #F1F5F9;
}

.ced-ai-result-apply {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    border: none;
    background: #7C3AED;
    color: #fff;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .12s;
}

.ced-ai-result-apply:hover:not(:disabled) {
    background: #6D28D9;
}
.ced-ai-result-apply:disabled {
    opacity: .45;
    cursor: default;
}


/* ============================================================
   ai_Drp — Dropdown CSS  (düzeltilmiş)
   ============================================================ */

/* ── Temel dropdown wrapper ────────────────────────────────── */
.ai-drpdown {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 28px;
    z-index: 1000;
}

/* ── Label (görünen buton) ─────────────────────────────────── */
.ai-drp-lbl {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 28px;
    background-color: #fff;
    border: 1px solid #3F51B5;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8px;
    color: #3F51B5;
    pointer-events: none; /* tıklama toggle'a gidiyor */
    z-index: 1;
}

.ai-drp-lbl:after {
    position: absolute;
    right: 7px;
    top: calc(50% - 4px);
    content: '';
    width: 6px;
    height: 6px;
    border-style: solid;
    border-width: 0 0 1px 1px;
    border-color: #3F51B5;
    transform: rotate(-45deg);
    transition: transform .2s;
}

/* ── Invisible toggle (checkbox trick yerine input) ────────── */
.ai-drp-toggle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 28px;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0;
}

.ai-drp-toggle:focus {
    outline: none;
}

/* Ok yukarı dönsün focus'ta */
.ai-drp-toggle:focus ~ .ai-drp-lbl:after,
.ai-drp-toggle:hover ~ .ai-drp-lbl:after {
    transform: rotate(135deg);
    top: calc(50% - 2px);
}

/* ── Dropdown list ─────────────────────────────────────────── */
.ai-drp-list {
    list-style: none;
    position: absolute;
    top: 30px;
    left: 0;
    padding: 4px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    border-radius: 6px;
    background-color: rgba(250,250,250,.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #ddd;
    width: 195px;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    transition: opacity .2s ease, visibility .2s ease, top .2s ease;
}

/* Hover VEYA focus ile aç */
.ai-drpdown:hover > .ai-drp-list,
.ai-drp-toggle:focus ~ .ai-drp-list {
    opacity: 1;
    visibility: visible;
    top: 30px;
}

/* ── Submenu item ──────────────────────────────────────────── */
.ai-drp-submenu {
    position: relative;
    border-radius: 4px;
    transition: background .2s;
    padding: 0 4px;
    cursor: pointer;
}

.ai-drp-submenu:hover {
    background-color: #e8eaf6;
}

/* Submenu başlık ok */
.ai-drp-submenu > div {
    position: relative;
    padding-right: 20px;
    font-size: 12px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #333;
}

.ai-drp-submenu > div:after {
    position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    border-top: 1px solid #515151;
    border-right: 1px solid #515151;
    transform: rotate(45deg);
    top: calc(50% - 4px);
    right: 6px;
}

/* Submenu açılır panel */
.ai-drp-submenu .ai-drp-menu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 2px;
    background-color: rgba(250,250,250,.97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 4px;
    width: 180px;
    max-height: 220px;
    overflow-y: auto;
    list-style: none;
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: perspective(400px) rotateY(-12deg);
    transform-origin: left center;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    z-index: 10000;
}

/* Ekranın sağında taşıyorsa sola aç */
.ai-drp-submenu:hover > .ai-drp-menu {
    opacity: 1;
    visibility: visible;
    transform: perspective(400px) rotateY(0deg);
}

.ai-drp-submenu .ai-drp-menu > li {
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s;
    font-size: 12px;
    line-height: 28px;
    padding: 0 6px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-drp-submenu .ai-drp-menu > li > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.ai-drp-submenu .ai-drp-menu > li:hover {
    background-color: #e8eaf6;
}

/* ── Ton +/- item ─────────────────────────────────────────── */
.ai-drp-submenu .ai-drp-menu > li.item-w-degre {
    position: relative;
    overflow: visible;
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre > div:first-child {
    transition: transform .25s;
    transform: perspective(300px) rotateX(0deg);
    transform-origin: center;
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre:hover > div:first-child {
    transform: perspective(300px) rotateX(-90deg);
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre > div:last-child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    height: 28px;
    width: 100%;
    transition: transform .25s;
    transform: perspective(200px) rotateX(90deg);
    transform-origin: center;
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre:hover > div:last-child {
    transform: perspective(200px) rotateX(0deg);
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre > div:last-child > span {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre > div:last-child > span:hover {
    background-color: #e1e1e1;
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre > div:last-child > span:first-child {
    position: relative;
}

.ai-drp-submenu .ai-drp-menu > li.item-w-degre > div:last-child > span:first-child:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 18px;
    background-color: #ddd;
    right: 0;
    top: calc(50% - 9px);
}

/* ── Context: .ai-survey-drp-wrap (toolbar içi) ────────────── */
.ai-survey-drp-wrap {
    position: relative;
    display: inline-block;
}

.ai-survey-drp-wrap .ai-drpdown {
    width: 46px;
    height: 28px;
}

.ai-survey-drp-wrap .ai-drp-lbl {
    background-color: #fff;
    border: 1px solid #3F51B5;
    color: #3F51B5;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(0,0,0,.1);
}

/* Toolbar içinde list sola mı sağa mı açılacak — RTL durumunu çöz */
.ai-survey-drp-wrap .ai-drp-list {
    left: auto;
    right: 0;
    min-width: 185px;
    width: 185px;
}

.ai-survey-drp-wrap .ai-drp-submenu .ai-drp-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 2px;
    transform-origin: right center;
    transform: perspective(400px) rotateY(12deg);
}

.ai-survey-drp-wrap .ai-drp-submenu:hover > .ai-drp-menu {
    transform: perspective(400px) rotateY(0deg);
}

/* ── ul action butonlar ────────────────────────────────────── */
ul.ai-action-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    list-style: none;
    padding: 4px 0 0;
    margin: 0;
    transition: opacity .3s, visibility .3s, transform .3s;
    transform: perspective(500px) rotateX(-90deg);
    transform-origin: top center;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: visible;
}

ul.ai-action-btn.active {
    transform: perspective(500px) rotateX(0deg);
    visibility: visible;
    opacity: 1;
    height: auto;
}

ul.ai-action-btn > li {
    width: 36px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    border-radius: 5px;
}

ul.ai-action-btn > li .btn {
    background-color: transparent;
    width: 100%;
    height: 100%;
    transition: background .15s;
}

ul.ai-action-btn > li.ai-survey-drp-wrap {
    z-index: 999;
    position: relative;
    width: 46px;
}

ul.ai-action-btn > li.ai-survey-drp-wrap .ai-drpdown {
    height: 32px;
}

ul.ai-action-btn > li.ai-survey-drp-wrap .ai-drp-lbl {
    background-color: #c9cfef;
    border: none;
    box-shadow: none;
    height: 32px;
}

ul.ai-action-btn > li.ai-survey-drp-wrap .ai-drp-lbl:after {
    border-color: #3F51B5;
}

/* ── Plus item holder ──────────────────────────────────────── */
.plus-item-holder-wrap {
    width: 100%;
    max-width: 580px;
    overflow-x: auto;
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 0 2px;
    gap: 4px;
    flex-wrap: nowrap;
}

.plus-item-holder-wrap > li {
    position: relative;
    background-color: #fff;
    border: 1px solid #606af0;
    border-radius: 8px;
    height: 30px;
    padding: 0 8px;
    color: #6175b9;
    white-space: nowrap;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.plus-item-holder-wrap > li > span {
    transition: all .3s;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,.85);
    backdrop-filter: blur(2px);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
    display: flex;
    transform: scale(0);
    visibility: hidden;
    opacity: 0;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
}

.plus-item-holder-wrap > li:hover > span {
    transform: scale(1);
    visibility: visible;
    opacity: 1;
}

.plus-item-holder-wrap > li > div {
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

/* ── Asistan paneli ────────────────────────────────────────── */
.assis-main-wrap {
    position: absolute;
    width: fit-content;
    left: calc(50% - 300px);
    border-radius: 6px;
    pointer-events: all;
    box-shadow: 0 4px 20px rgba(0,0,0,.18);
    background-color: #fff;
    max-width: 100vw;
    max-height: 90vh;
    color: #333;
    z-index: 99999;
    overflow: hidden;
}

.assis-main-wrap.p-bottom {
    top: 100%;
}
.assis-main-wrap.p-top    {
    bottom: 100%;
}
.assis-main-wrap.p-left   {
    right: 0;
    left: auto;
}
.assis-main-wrap.p-right  {
    left: 0;
    right: auto;
}

.assis-head-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 44px;
    padding: 4px 12px;
    background-color: #5662f6;
    color: #fff;
    border-radius: 4px 4px 0 0;
}

.assis-head-wrap h6 {
    margin-bottom: 0;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.assis-head-wrap h6 i {
    color: #fff;
}

.assis-content-wrap {
    width: 600px;
    max-width: 100%;
    position: relative;
    padding: 8px;
    z-index: 2;
}

.assis-content-wrap ul.ai-drp-list {
    right: 0;
    left: auto;
}

.assis-req-holder-wrap {
    border: 1px solid #ddd;
    max-height: 175px;
    min-height: 62px;
    width: 100%;
    background-color: #f9f9f9;
    border-radius: 4px;
    display: flex;
    padding: 8px;
    color: #333;
    gap: 8px;
}

.assis-req-holder-wrap > p {
    flex: 1;
    margin: 0;
    overflow-y: auto;
    max-height: 80px;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.5;
}

.assis-req-holder-wrap.res-has-err {
    border-color: #ff6d6d;
    background-color: #fff3f3;
    color: #f55454;
}

.ai-res-copy-btn-wrap {
    width: 28px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.assis-req-holder-wrap .ai-res-act-btn {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: .55;
    transition: opacity .2s;
}

.assis-req-holder-wrap .ai-res-act-btn:hover,
.assis-req-holder-wrap .ai-res-act-btn.active {
    opacity: 1;
}

/* ── Assist input ──────────────────────────────────────────── */
.assist-input-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0 8px 8px;
    background-color: #efefef;
    border-radius: 10px;
    z-index: 1;
}

.assist-input-wrap > div.input-ai-box {
    padding: 10px 10px 8px;
    position: relative;
}

.assist-input-wrap > div.input-ai-box input {
    width: 100%;
    border-radius: 35px;
    padding-right: 44px;
}

.assist-input-wrap > div.input-ai-box .btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #5662f6;
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.assist-input-wrap > div.input-ai-box .btn:hover {
    background-color: #3d4ad4;
}

/* ── Loader ────────────────────────────────────────────────── */
.loader-ai-req {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: block;
    margin: 15px auto;
    position: relative;
    animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
    0%   {
        box-shadow: 0px 0 #5662f6, 0px 0 #5662f6, 0px 0 #5662f6, 0px 0 #5662f6;
    }
    12%  {
        box-shadow: 100px 0 #c7caf8, 0px 0 #5662f6, 0px 0 #5662f6, 0px 0 #5662f6;
    }
    25%  {
        box-shadow: 110px 0 #c7caf8, 100px 0 #c7caf8, 0px 0 #5662f6, 0px 0 #5662f6;
    }
    36%  {
        box-shadow: 120px 0 #c7caf8, 110px 0 #c7caf8, 100px 0 #c7caf8, 0px 0 #5662f6;
    }
    50%  {
        box-shadow: 130px 0 #c7caf8, 120px 0 #c7caf8, 110px 0 #c7caf8, 100px 0 #c7caf8;
    }
    62%  {
        box-shadow: 200px 0 #5662f6, 130px 0 #c7caf8, 120px 0 #c7caf8, 110px 0 #c7caf8;
    }
    75%  {
        box-shadow: 200px 0 #5662f6, 200px 0 #5662f6, 130px 0 #c7caf8, 120px 0 #c7caf8;
    }
    87%  {
        box-shadow: 200px 0 #5662f6, 200px 0 #5662f6, 200px 0 #5662f6, 130px 0 #c7caf8;
    }
    100% {
        box-shadow: 200px 0 #5662f6, 200px 0 #5662f6, 200px 0 #5662f6, 200px 0 #5662f6;
    }
}

/* ── Backdrop overlay ──────────────────────────────────────── */
.tour-backdrop.tb-ai-v {
    position: fixed;
    z-index: 1100;
    background-color: rgba(195,195,195,.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Pulsating aktif dot ───────────────────────────────────── */
.pulsating-circle.active {
    position: relative;
}

.pulsating-circle.active:before {
    content: "";
    position: absolute;
    right: -5px;
    top: -1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #66bb6a;
    z-index: -1;
    animation: pulse-ring 1.25s cubic-bezier(.215,.61,.355,1) infinite;
}

@keyframes pulse-ring {
    0%       {
        transform: scale(.03);
    }
    80%, 100% {
        opacity: 0;
    }
}

/* ── Scroll lock ───────────────────────────────────────────── */
.scrol-off {
    overflow: hidden !important;
}
/* ============================================================
   ai_Drp — İçerik Editörü AI Asistanı CSS
   ============================================================ */

/* ── Trigger butonu ─────────────────────────────────────────── */
.ced-ai-drp-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    border: 1.5px solid #C4B5FD;
    background: #F5F3FF;
    color: #6D28D9;
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}

.ced-ai-drp-trigger:hover,
.ced-ai-drp-trigger.ced-ai-drp-open {
    background: #EDE9FE;
    border-color: #A78BFA;
}

.ced-ai-drp-trigger i {
    font-size: 13px;
}

/* ── Dropdown panel ─────────────────────────────────────────── */
.ced-ai-drp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 190px;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    z-index: 9999;
    padding: 6px 0;
    display: none;
}

.ced-ai-drp-panel.open {
    display: block;
}

.ced-ai-drp-group-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 6px 12px 3px;
}

.ced-ai-drp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
    outline: none;
}

.ced-ai-drp-item:hover {
    background: #F5F3FF;
    color: #6D28D9;
}

.ced-ai-drp-item-icon {
    font-size: 13px;
    color: #A78BFA;
    flex-shrink: 0;
}

/* ── Result modal overlay ───────────────────────────────────── */
.ced-ai-result-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ced-ai-result-modal {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

/* Header */
.ced-ai-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.ced-ai-result-header-left {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    gap: 4px;
}

.ced-ai-result-action-label {
    color: #6D28D9;
}

.ced-ai-result-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    font-size: 12px;
    transition: background .12s;
}

.ced-ai-result-close:hover {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* Kaynak metin */
.ced-ai-result-source {
    padding: 10px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.ced-ai-result-source-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.ced-ai-result-source-text {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
    max-height: 64px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 7px;
    padding: 7px 10px;
}

/* Sonuç alanı */
.ced-ai-result-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    min-height: 100px;
}

/* Spinner */
.ced-ai-result-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: #7C3AED;
    font-size: 12px;
}

.ced-ai-spinner-ring {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #EDE9FE;
    border-top-color: #7C3AED;
    animation: ced-ai-spin 0.9s linear infinite;
}

@keyframes ced-ai-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Sonuç içerik kutusu */
.ced-ai-result-content {
    font-size: 13px;
    color: #1E293B;
    line-height: 1.7;
    border: 1.5px solid #C4B5FD;
    border-radius: 8px;
    padding: 10px 12px;
    background: #FAFAFA;
    outline: none;
    min-height: 60px;
}

.ced-ai-result-content:focus {
    border-color: #7C3AED;
    background: #fff;
}

.ced-ai-result-err {
    color: #DC2626;
    font-size: 12px;
}

/* Footer */
.ced-ai-result-footer {
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

/* Action pills */
.ced-ai-result-actions-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ced-ai-action-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}

.ced-ai-action-pill {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    outline: none;
    transition: all .15s;
}

.ced-ai-action-pill:hover {
    background: #EDE9FE;
    border-color: #C4B5FD;
    color: #7C3AED;
}
.ced-ai-action-pill.active {
    background: #EDE9FE;
    border-color: #7C3AED;
    color: #7C3AED;
}

/* Yenile butonu */
.ced-ai-result-retry {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: background .12s;
    white-space: nowrap;
    flex-shrink: 0;
}

.ced-ai-result-retry:hover:not(:disabled) {
    background: #EDE9FE;
    border-color: #C4B5FD;
    color: #7C3AED;
}
.ced-ai-result-retry:disabled {
    opacity: .45;
    cursor: default;
}

/* Uygulama modu radios */
.ced-ai-apply-mode {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ced-ai-apply-radio {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #475569;
    cursor: pointer;
    font-weight: 500;
}

/* Apply / Cancel butonları */
.ced-ai-result-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ced-ai-result-cancel {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: background .12s;
}

.ced-ai-result-cancel:hover {
    background: #F1F5F9;
}

.ced-ai-result-apply {
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    border: none;
    background: #7C3AED;
    color: #fff;
    cursor: pointer;
    outline: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background .12s;
}

.ced-ai-result-apply:hover:not(:disabled) {
    background: #6D28D9;
}
.ced-ai-result-apply:disabled {
    opacity: .45;
    cursor: default;
}

/* ── Uygulama modu buton grubu ─────────────────────────────── */
.ced-ai-apply-mode {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ced-ai-apply-mode-label {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
    white-space: nowrap;
}

.ced-ai-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: all .15s;
}

.ced-ai-mode-btn:hover {
    border-color: #C4B5FD;
    background: #F5F3FF;
    color: #5B21B6;
}

.ced-ai-mode-btn.active {
    border-color: #7C3AED;
    background: #EDE9FE;
    color: #5B21B6;
    font-weight: 600;
}
/* ============================================================
   AI Önizleme Modalı + Settings Panel AI dropdown
   ============================================================ */

/* ── Overlay ─────────────────────────────────────────────────── */
.ced-ai-prev-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .38);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

/* ── Modal ───────────────────────────────────────────────────── */
.ced-ai-prev-modal {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────── */
.ced-ai-prev-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7F77DD 0%, #534AB7 100%);
    border-radius: 12px 12px 0 0;
}

.ced-ai-prev-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ced-ai-prev-icon {
    font-size: 20px;
    color: #fff;
    opacity: .9;
}

.ced-ai-prev-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.ced-ai-prev-subtitle {
    font-size: 10px;
    color: rgba(255,255,255,.75);
    margin-top: 1px;
}

.ced-ai-prev-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    transition: background .15s;
}

.ced-ai-prev-close:hover {
    background: rgba(255,255,255,.3);
}

/* ── Body ────────────────────────────────────────────────────── */
.ced-ai-prev-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ced-ai-prev-section-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
}

/* Sonuç kutusu — düzenlenebilir */
.ced-ai-prev-result {
    font-size: 13px;
    color: #1E293B;
    line-height: 1.65;
    border: 1.5px solid #C4B5FD;
    border-radius: 8px;
    padding: 10px 12px;
    background: #FAFAFA;
    outline: none;
    min-height: 56px;
    white-space: pre-wrap;
    overflow: auto;
}

.ced-ai-prev-result:focus {
    border-color: #7C3AED;
    background: #fff;
}

/* Diff görünümü */
.ced-ai-prev-diff {
    font-size: 11px;
    line-height: 1.6;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    overflow: auto;
}

.ced-ai-diff-del,
.ced-ai-diff-add {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.5;
}

.ced-ai-diff-del {
    background: #FFF1F2;
    color: #9F1239;
    text-decoration: line-through;
    opacity: .75;
}

.ced-ai-diff-del i {
    color: #FB7185;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}

.ced-ai-diff-add {
    background: #F0FDF4;
    color: #166534;
}

.ced-ai-diff-add i {
    color: #4ADE80;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Footer ──────────────────────────────────────────────────── */
.ced-ai-prev-footer {
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.ced-ai-prev-cancel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: background .12s;
}

.ced-ai-prev-cancel:hover {
    background: #F1F5F9;
}

.ced-ai-prev-apply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    border: none;
    background: linear-gradient(135deg, #7F77DD 0%, #534AB7 100%);
    color: #fff;
    cursor: pointer;
    outline: none;
    transition: opacity .12s;
}

.ced-ai-prev-apply:hover {
    opacity: .88;
}
.ced-ai-prev-apply:active {
    transform: scale(.97);
}
/* ============================================================
   Özetle Modal v2  — wdp-sum-*
   ============================================================ */

.wdp-sum-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.wdp-sum-modal {
    width: 100%;
    max-width: 800px;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    overflow: hidden;
}

/* ── Header ── */
.wdp-sum-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
    gap: 10px;
}

.wdp-sum-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.wdp-sum-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #EFF6FF;
    border: 1.5px solid #BFDBFE;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    color: #1D4ED8;
}

.wdp-sum-header-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
}

.wdp-sum-header-sub {
    font-size: 10px;
    color: #94A3B8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.wdp-sum-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    transition: all .14s;
    flex-shrink: 0;
}

.wdp-sum-close:hover {
    background: #FEE2E2;
    border-color: #FCA5A5;
    color: #EF4444;
}

/* ── Content wrap ── */
.wdp-sum-content-wrap {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Loading ── */
.wdp-sum-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 48px 0;
    color: #64748B;
    font-size: 12px;
}

.wdp-sum-ring {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #DBEAFE;
    border-top-color: #1D4ED8;
    animation: wdp-sum-spin 0.9s linear infinite;
}

@keyframes wdp-sum-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Metadata şeridi ── */
.wdp-sum-meta-strip {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.wdp-sum-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    padding: 3px 9px;
    border-radius: 99px;
    background: #fff;
    border: 1px solid #E2E8F0;
}

.wdp-sum-meta-item i {
    font-size: 11px;
    color: #94A3B8;
}

/* ── Anahtar konular ── */
.wdp-sum-topics-wrap {
    padding: 10px 14px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.wdp-sum-topics-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.wdp-sum-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.wdp-sum-topic {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 9px;
    border-radius: 99px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
}

/* ── Tab bar ── */
.wdp-sum-tabs {
    display: flex;
    gap: 2px;
    padding: 10px 14px 0;
    border-bottom: 2px solid #F1F5F9;
    flex-shrink: 0;
    overflow-x: auto;
}

.wdp-sum-tab {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px 7px 0 0;
    border: 1.5px solid transparent;
    border-bottom: none;
    background: none;
    color: #64748B;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: all .15s;
    position: relative;
    bottom: -2px;
}

.wdp-sum-tab:hover {
    color: #1D4ED8;
    background: #F0F9FF;
}

.wdp-sum-tab.active {
    color: #1D4ED8;
    background: #fff;
    border-color: #BFDBFE;
    border-bottom-color: #fff;
    font-weight: 700;
}

/* ── Tab panels ── */
.wdp-sum-tab-panels {
    flex: 1;
    overflow-y: auto;
}

.wdp-sum-tab-panel {
    display: none;
    padding: 14px 16px;
    flex-direction: column;
    gap: 10px;
}

.wdp-sum-tab-panel.active {
    display: flex;
}

/* Panel head */
.wdp-sum-panel-head {
    padding-bottom: 10px;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wdp-sum-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
}

.wdp-sum-panel-desc {
    font-size: 11px;
    color: #64748B;
    line-height: 1.4;
}

.wdp-sum-panel-length {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: #94A3B8;
    font-weight: 500;
}

/* Düz metin */
.wdp-sum-text {
    font-size: 13px;
    color: #1E293B;
    line-height: 1.75;
}

.wdp-sum-text p {
    margin: 0 0 10px;
}
.wdp-sum-text p:last-child {
    margin-bottom: 0;
}

/* ── Yapısal analiz ── */
.wdp-sum-struct {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wdp-sum-struct-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}

.wdp-sum-struct-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #64748B;
}

.wdp-sum-struct-val {
    font-size: 12px;
    color: #1E293B;
    line-height: 1.55;
}

.wdp-sum-arg-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wdp-sum-arg-list li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 12px;
    color: #374151;
    line-height: 1.45;
}

.wdp-sum-arg-list li i {
    color: #60A5FA;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Hata ── */
.wdp-sum-error {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #DC2626;
    padding: 12px;
    background: #FFF1F2;
    border: 1.5px solid #FECDD3;
    border-radius: 8px;
    margin: 16px;
}

/* ── Footer ── */
.wdp-sum-footer {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.wdp-sum-footer.visible {
    display: flex;
}

.wdp-sum-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #BFDBFE;
    background: #EFF6FF;
    color: #1D4ED8;
    cursor: pointer;
    outline: none;
    transition: background .12s;
}

.wdp-sum-copy-btn:hover {
    background: #DBEAFE;
}

.wdp-sum-close-btn {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
    transition: background .12s;
}

.wdp-sum-close-btn:hover {
    background: #F1F5F9;
}

.wdp-todo-btn{
    opacity: 0.5;
    cursor: wait;
}


/* ── Members Table ───────────────────────────────────────────────────── */
.tau-table-wrap {
    overflow-x: auto;
}
.tau-table      {
    width: 100%;
}
.tau-table-wrap .nested-tb > tbody > tr:hover {
    background-color: #eeeeee;
    cursor:pointer;
}

.tau-th     {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #64748B;
}
.tau-th-c   {
    text-align: center;
}
.tau-check  {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #6366F1;
    display: flex;
    justify-self: center;
}

/* User cell */
.tau-user-cell  {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tau-avatar     {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}
.tau-user-info  {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tau-user-name  {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}
.tau-user-nick  {
    font-size: 11px;
    color: #94A3B8;
}
.tau-cell-c     {
    text-align: center;
}
.tau-muted      {
    font-size: 12px;
    color: #64748B;
}

/* Action btn */
.tau-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: all .12s;
    font-size: 11px;
}
.tau-action-btn:hover {
    background: #F1F5F9;
    color: #374151;
}

/* Status badges */
.tau-status-badge,
.tau-type-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 99px;
    border: 1px solid transparent;
}
.tau-status--active    {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
}
.tau-status--pending   {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FCD34D;
}
.tau-status--expired   {
    background: #F1F5F9;
    color: #475569;
    border-color: #CBD5E1;
}
.tau-status--suspended {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FCA5A5;
}

.tau-type--annual    {
    background: #F5F3FF;
    color: #5B21B6;
    border-color: #C4B5FD;
}
.tau-type--corporate {
    background: #FDF2F8;
    color: #9D174D;
    border-color: #F9A8D4;
}
.tau-type--monthly   {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}
.tau-type--trial     {
    background: #F0FDF4;
    color: #166534;
    border-color: #86EFAC;
}

/* Progress */
.tau-progress-row   {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.tau-progress-track {
    width: 64px;
    height: 5px;
    background: #E2E8F0;
    border-radius: 99px;
    overflow: hidden;
}
.tau-progress-fill  {
    height: 100%;
    background: #6366F1;
    border-radius: 99px;
}
.tau-progress-txt   {
    font-size: 10px;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
}

/* ── Pagination ──────────────────────────────────────────────── */
.tau-pagination-row {
    padding: 8px 14px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #F1F5F9;
}

/* ── Bulk bar ────────────────────────────────────────────────── */
.tau-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 5px;
    margin-top: 4px;
}
.tau-bulk-label   {
    font-size: 12px;
    font-weight: 600;
    color: #4338CA;
    flex: 1;
}
.tau-bulk-actions {
    display: flex;
    gap: 5px;
}
.tau-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 5px;
    border: 1.5px solid;
    cursor: pointer;
    outline: none;
}
.tau-bulk-suspend {
    border-color: #FCA5A5;
    background: #FFF1F2;
    color: #9F1239;
}
.tau-bulk-suspend:hover {
    background: #FEE2E2;
}
.tau-bulk-extend  {
    border-color: #86EFAC;
    background: #F0FDF4;
    color: #166534;
}
.tau-bulk-extend:hover  {
    background: #DCFCE7;
}
.tau-bulk-cancel  {
    border-color: #E2E8F0;
    background: #fff;
    color: #475569;
}
.tau-bulk-cancel:hover  {
    background: #F1F5F9;
}

/* ── Context menu ────────────────────────────────────────────── */
.tau-ctx-menu {
    position: fixed;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    z-index: 10500;
    min-width: 155px;
    padding: 4px;
}
.tau-ctx-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    font-size: 12px;
    color: #374151;
    border-radius: 5px;
    cursor: pointer;
    transition: background .11s;
}
.tau-ctx-item:hover   {
    background: #F8FAFC;
}
.tau-ctx-danger       {
    color: #DC2626;
}
.tau-ctx-danger:hover {
    background: #FFF1F2;
}
.tau-ctx-sep          {
    height: 1px;
    background: #F1F5F9;
    margin: 3px 0;
}

/* ── Extend modal ────────────────────────────────────────────── */
.tau-extend-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 10400;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tau-extend-modal {
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    width: 400px;
    overflow: hidden;
}
.tau-extend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
}
.tau-extend-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
}
.tau-extend-close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    outline: none;
}
.tau-extend-close:hover {
    background: #FEE2E2;
    color: #EF4444;
}
.tau-extend-body  {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tau-extend-info  {
    font-size: 12px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
}
.tau-extend-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}
.tau-drw-wrap     {
}
.tau-extend-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
}
.tau-ext-cancel {
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
}
.tau-ext-cancel:hover {
    background: #F1F5F9;
}
.tau-ext-apply {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    background: #6366F1;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.tau-ext-apply:hover:not(:disabled) {
    background: #4F46E5;
}
.tau-ext-apply:disabled {
    opacity: .45;
    cursor: default;
}

/* ── Detail modal ────────────────────────────────────────────── */
.tau-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 10300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tau-detail-modal {
    width: 100%;
    max-width: 580px;
    max-height: 88vh;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Hero — sade açık */
.tau-detail-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    flex-shrink: 0;
    position: relative;
}
.tau-detail-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.tau-detail-hero-info {
    flex: 1;
    min-width: 0;
}
.tau-detail-name      {
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
}
.tau-detail-nick      {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 1px;
}
.tau-detail-hero-badges {
    display: flex;
    gap: 5px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.tau-detail-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    outline: none;
}
.tau-detail-close-btn:hover {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* Tab bar — sadece alt çizgi, mor aktif */
.tau-detail-tabs {
    display: flex;
    border-bottom: 2px solid #F1F5F9;
    flex-shrink: 0;
    overflow-x: auto;
    background: #fff;
}
.tau-dtab {
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    color: #64748B;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .13s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    outline: none;
}
.tau-dtab:hover {
    color: #6366F1;
}
.tau-dtab.active {
    color: #6366F1;
    border-bottom-color: #6366F1;
}

/* Tab content */
.tau-detail-content {
    flex: 1;
    overflow-y: auto;
}
.tau-tab-panel {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tau-tab-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #64748B;
    font-size: 12px;
}
.tau-detail-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #E0E7FF;
    border-top-color: #6366F1;
    animation: tau-spin .9s linear infinite;
}
@keyframes tau-spin {
    to {
        transform: rotate(360deg);
    }
}
.tau-tab-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: #94A3B8;
    text-align: center;
}
.tau-tab-empty-icon {
    font-size: 28px;
    color: #CBD5E1;
}
.tau-tab-empty-txt  {
    font-size: 13px;
}

/* ── Info tab ────────────────────────────────────────────────── */
.tau-info-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}
.tau-stat-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
}
.tau-stat-icon {
    font-size: 16px;
    color: #6366F1;
}
.tau-stat-val  {
    font-size: 15px;
    font-weight: 700;
    color: #1E293B;
}
.tau-stat-lbl  {
    font-size: 10px;
    color: #94A3B8;
}

.tau-info-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tau-info-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}
.tau-info-row-key {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    min-width: 108px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.tau-info-row-val {
    font-size: 12px;
    color: #1E293B;
}

.tau-info-sub-title {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.tau-social-list  {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}
.tau-social-chip  {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    color: #1D4ED8;
    font-size: 11px;
    text-decoration: none;
}
.tau-social-chip:hover {
    background: #DBEAFE;
}

/* ── Certs tab ───────────────────────────────────────────────── */
.tau-cert-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
}
.tau-cert-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tau-cert-icon  {
    font-size: 16px;
    color: #92400E;
}
.tau-cert-info  {
    flex: 1;
    min-width: 0;
}
.tau-cert-name  {
    font-size: 12px;
    font-weight: 600;
    color: #1E293B;
}
.tau-cert-desc  {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
}
.tau-cert-meta  {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    flex-wrap: wrap;
    align-items: center;
}
.tau-cert-sign  {
    font-size: 10px;
    color: #94A3B8;
    display: flex;
    align-items: center;
}
.tau-cert-feats {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-self: flex-start;
    margin-top: 2px;
}

/* ── Badges tab ──────────────────────────────────────────────── */
.tau-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.tau-badge-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
}
.tau-badge-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
}
.tau-badge-icon  {
    font-size: 20px;
    color: #fff;
}
.tau-badge-name  {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
}
.tau-badge-pills {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2px;
}
.tau-drw-wrap .dropdown.drp-wild-syl {
    width: 100%;
}
.tau-drw-wrap a.dropdown-toggle {
    width: 100%;
    text-align: left;
}
/* ============================================================
   tabCertificates  (cert-* prefix)
   cpq-*, cos-*, com-*, cac-badge mevcut sınıflardan kullanılır
   ============================================================ */

/* ── Stats strip ─────────────────────────────────────────────── */
.cert-stats-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 14px 14px 0;
}

.cert-stat-card {
    background: #fff;
    border: 1px solid #E8EBF0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color .15s;
}

.cert-stat-card:hover {
    border-color: #C7D2FE;
}

/* Sol renk çubuğu */
.cert-stat-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.cert-stat--purple::before {
    background: #534AB7;
}
.cert-stat--teal::before   {
    background: #0F6E56;
}
.cert-stat--amber::before  {
    background: #854F0B;
}

/* İkon */
.cert-stat-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cert-stat--purple {
    background: #eeedff;
}
.cert-stat--purple .cert-stat-icon-wrap {
    background: #ceccfa;
}
.cert-stat--teal {
    background: #e1f5ee;
}
.cert-stat--teal   .cert-stat-icon-wrap {
    background: #afddcd;
}
.cert-stat--amber {
    background: #FAEEDA;
}
.cert-stat--amber  .cert-stat-icon-wrap {
    background: #e2d2b6;
}

.cert-stat-icon {
    font-size: 18px;
}

.cert-stat--purple .cert-stat-icon {
    color: #534AB7;
}
.cert-stat--teal   .cert-stat-icon {
    color: #0F6E56;
}
.cert-stat--amber  .cert-stat-icon {
    color: #854f0b;
}

/* Metin */
.cert-stat-info  {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.cert-stat-label {
    font-size: 11px;
    color: #64748B;
    font-weight: 500;
}
.cert-stat-val   {
    font-size: 22px;
    font-weight: 800;
    color: #1E293B;
    line-height: 1.1;
}
.cert-stat-sub   {
    font-size: 10px;
    color: #94A3B8;
    margin-top: 1px;
}

/* ── Certificate grid ────────────────────────────────────────── */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 680px) {
    .cert-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Certificate card (satır benzeri) ───────────────────────── */
.cert-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 14px 14px 0;
    border-bottom: 1px solid #F1F5F9;
    cursor: pointer;
    transition: background .14s;
    position: relative;
}

.cert-card:hover {
    background: #FAFBFF;
}

/* Tek kolonluk gird'de son satır yok */
.cert-grid:not(.cert-grid--single) .cert-card:nth-last-child(-n+2):not(:nth-last-child(n+3)) {
    border-bottom: none;
}

/* ── Sol renk çubuğu ─────────────────────────────────────────── */
.cert-card-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 0 3px 3px 0;
    flex-shrink: 0;
}

/* ── İkon kutusu ─────────────────────────────────────────────── */
.cert-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,.05);
}

/* ── Card body ───────────────────────────────────────────────── */
.cert-card-body {
    flex: 1;
    min-width: 0;
}

.cert-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cert-card-desc {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cert-card-meta {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.cert-card-features {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 5px;
}

/* Feature badges */
.cert-feat-badge {
    display: inline-flex;
    align-items: center;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #E2E8F0;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.cert-feat-linkedin {
    background: #EFF6FF;
    color: #1D4ED8;
    border-color: #BFDBFE;
}

/* ── Card right ──────────────────────────────────────────────── */
.cert-card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    flex-shrink: 0;
}

/* Status badge */
.cert-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 99px;
    border: 1px solid transparent;
}
.cert-status--active  {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
}
.cert-status--passive {
    background: #F1F5F9;
    color: #475569;
    border-color: #CBD5E1;
}

/* Edit button */
.cert-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    border: 1.5px solid #C7D2FE;
    background: none;
    color: #4F46E5;
    cursor: pointer;
    outline: none;
    transition: all .13s;
    white-space: nowrap;
}
.cert-edit-btn:hover {
    background: #EEF2FF;
}

/* ── Header yardımcı buton ───────────────────────────────────── */
.cert-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #fff;
    color: #374151;
    cursor: pointer;
    outline: none;
    transition: all .13s;
}
.cert-btn-secondary:hover {
    background: #F8FAFC;
    border-color: #C7D2FE;
    color: #4F46E5;
}

/* ── Modal shared ────────────────────────────────────────────── */
.cert-modal-overlay,
.cert-cat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 10300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.cert-modal,
.cert-cat-modal {
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.cert-cat-modal {
    max-width: 480px;
}

.cert-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.cert-modal-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap:5px;
}

.cert-modal-close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    outline: none;
}
.cert-modal-close:hover {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* ── Modal body / form ───────────────────────────────────────── */
.cert-modal-body,
.cert-cat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cert-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cert-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}

.cert-input,
.cert-select,
.cert-textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #E2E8F0;
    border-radius: 7px;
    font-size: 12px;
    color: #1E293B;
    outline: none;
    transition: border-color .14s;
    background: #fff;
    font-family: inherit;
}

.cert-input:focus,
.cert-select:focus,
.cert-textarea:focus {
    border-color: #6366F1;
}

.cert-textarea {
    resize: vertical;
    min-height: 64px;
}

.cert-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ── Toggles ─────────────────────────────────────────────────── */
.cert-toggles {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cert-toggle-item {
    cursor: pointer;
}

.cert-toggle-input {
    display: none;
}

.cert-toggle-box {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #64748B;
    font-size: 11px;
    font-weight: 600;
    transition: all .13s;
    user-select: none;
}

.cert-toggle-input:checked + .cert-toggle-box {
    border-color: #6366F1;
    background: #EEF2FF;
    color: #4F46E5;
}

/* ── Modal footer ────────────────────────────────────────────── */
.cert-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.cert-btn-cancel {
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
}
.cert-btn-cancel:hover {
    background: #F1F5F9;
}

.cert-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    border: none;
    background: #6366F1;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.cert-btn-save:hover:not(:disabled) {
    background: #4F46E5;
}
.cert-btn-save:disabled {
    opacity: .45;
    cursor: default;
}

/* ── Category modal ──────────────────────────────────────────── */
/* ============================================================
   Category Manager Modal  — cert-cat-*
   Mevcut tabCertificates.css'deki cert-cat-* bloğunu değiştirin
   ============================================================ */

/* ── Modal boyutu (cat-specific override) ────────────────────── */
.cert-cat-modal {
    max-width: 500px;
    max-height: 580px;   /* sabit yükseklik — içerik scroll olur */
}

/* ── Modal title icon ────────────────────────────────────────── */
.cert-modal-title-icon {
    font-size: 15px;
    color: #6366F1;
}

/* ── Body layout: list scroll + add form fixed ───────────────── */
.cert-cat-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;    /* scroll catList'te, body'de değil */
    min-height: 0;
    padding: 0;
}

/* Scrollable category list */
.cert-cat-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
    max-height: 300px;
}

/* Scrollbar ince stil */
.cert-cat-list::-webkit-scrollbar        {
    width: 4px;
}
.cert-cat-list::-webkit-scrollbar-track  {
    background: transparent;
}
.cert-cat-list::-webkit-scrollbar-thumb  {
    background: #E2E8F0;
    border-radius: 99px;
}
.cert-cat-list::-webkit-scrollbar-thumb:hover {
    background: #CBD5E1;
}

/* Empty state */
.cert-cat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 0;
    color: #94A3B8;
    font-size: 12px;
    text-align: center;
}
.cert-cat-empty-icon {
    font-size: 24px;
    color: #CBD5E1;
}

/* ── Category list item ──────────────────────────────────────── */
.cert-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    transition: border-color .13s;
}

.cert-cat-item:hover {
    border-color: #C7D2FE;
}

/* Sıra numarası */
.cert-cat-item-num {
    font-size: 10px;
    font-weight: 700;
    color: #CBD5E1;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    user-select: none;
}

/* Input pair */
.cert-cat-item-fields {
    flex: 1;
    display: flex;
    gap: 6px;
    min-width: 0;
}

/* Shared input style */
.cert-cat-inp-text {
    flex: 1;
    min-width: 0;
    padding: 5px 9px;
    border: 1.5px solid #E2E8F0;
    border-radius: 6px;
    font-size: 12px;
    color: #1E293B;
    background: #fff;
    outline: none;
    transition: border-color .13s;
    font-family: inherit;
}

.cert-cat-inp-text:focus {
    border-color: #6366F1;
}

/* Description input — daha soluk */
.cert-cat-inp-desc {
    color: #64748B;
}
.cert-cat-inp-desc::placeholder {
    color: #CBD5E1;
}

/* Save button */
.cert-cat-save-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid #86EFAC;
    background: #F0FDF4;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    flex-shrink: 0;
    transition: background .12s;
}
.cert-cat-save-btn:hover    {
    background: #DCFCE7;
}
.cert-cat-save-btn:disabled {
    opacity: .45;
    cursor: default;
}

/* ── Add form — fixed at bottom ──────────────────────────────── */
.cert-cat-add-form {
    flex-shrink: 0;
    padding: 12px 16px 16px;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFF;
}

.cert-cat-add-label {
    font-size: 10px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.cert-cat-add-row {
    display: flex;
    gap: 6px;
    align-items: flex-end;
}

.cert-cat-add-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cert-cat-inp-label {
    font-size: 10px;
    font-weight: 600;
    color: #64748B;
}

/* Add button */
.cert-cat-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 14px;
    height: 31px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    border: none;
    background: #6366F1;
    color: #fff;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .12s;
}
.cert-cat-add-btn:hover:not(:disabled)  {
    background: #4F46E5;
}
.cert-cat-add-btn:disabled {
    opacity: .45;
    cursor: default;
}
/* ============================================================
   tabDomains v2  (dom-* / dns-* prefix)
   cpq-*, cos-*, com-* mevcut sınıflardan kullanılır
   ============================================================ */

/* ── 2-kolon layout ──────────────────────────────────────────── */
.dom-layout {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px 14px;
}

/* Sol: esnek, scroll */
.dom-left {
    flex: 1;
    min-width: 0;
    /* Liste uzarsa kendi içinde scroll */
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.dom-left::-webkit-scrollbar        {
    width: 4px;
}
.dom-left::-webkit-scrollbar-track  {
    background: transparent;
}
.dom-left::-webkit-scrollbar-thumb  {
    background: #E2E8F0;
    border-radius: 99px;
}

/* Sağ: sabit genişlik, sticky */
.dom-right {
    width: 280px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}

/* ── Domain list ─────────────────────────────────────────────── */
.dom-list-wrap {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}

/* ── Domain item ─────────────────────────────────────────────── */
.dom-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid #F1F5F9;
    transition: background .13s;
}

.dom-item:last-child {
    border-bottom: none;
}
.dom-item:hover      {
    background: #FAFBFF;
}
.dom-item--primary   {
    background: #FFFBF5;
}
.dom-item--primary:hover {
    background: #FFF7ED;
}

.dom-item-removing {
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .3s, transform .3s;
}

/* İkon */
.dom-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #64748B;
    flex-shrink: 0;
}

.dom-icon--ssl {
    background: #F0FDF4;
    border-color: #86EFAC;
    color: #166534;
}

/* Body */
.dom-item-body {
    flex: 1;
    min-width: 0;
}

.dom-item-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dom-item-name {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dom-item-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Meta chips */
.dom-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    flex-wrap: wrap;
}

.dom-meta-chip {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: #64748B;
    gap: 3px;
}

.dom-meta-chip--warn {
    color: #D97706;
    font-weight: 600;
}

/* Badges */
.dom-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.dom-status--active   {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
}
.dom-status--pending  {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FCD34D;
}
.dom-status--failed   {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FCA5A5;
}
.dom-status--inactive {
    background: #F1F5F9;
    color: #475569;
    border-color: #CBD5E1;
}

.dom-badge--primary {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FCD34D;
}
.dom-badge--ssl     {
    background: #DCFCE7;
    color: #166534;
    border-color: #86EFAC;
}
.dom-badge--no-ssl  {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FCA5A5;
}

/* Aksiyonlar */
.dom-item-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.dom-act-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    outline: none;
    transition: all .13s;
}

.dom-act--info:hover   {
    background: #EFF6FF;
    border-color: #BFDBFE;
    color: #2563EB;
}
.dom-act--delete:hover {
    background: #FFF1F2;
    border-color: #FCA5A5;
    color: #DC2626;
}

/* ── DNS Helper Card ─────────────────────────────────────────── */
.dns-helper-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
}

.dns-helper-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #F5F7FF;
    border-bottom: 1px solid #E2E8F0;
}

.dns-helper-header-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #6366F1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.dns-helper-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
}
.dns-helper-sub   {
    font-size: 10px;
    color: #64748B;
    margin-top: 1px;
}

.dns-helper-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dns-helper-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dns-section-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94A3B8;
}

/* Koyu DNS record bloğu */
.dns-record-dark {
    background: #1E293B;
    border-radius: 8px;
    padding: 9px 12px;
}

.dns-record-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, monospace;
    font-size: 11px;
}

.dns-col-type  {
    color: #34D399;
    font-weight: 700;
    width: 18px;
    flex-shrink: 0;
}
.dns-col-host  {
    color: #93C5FD;
}
.dns-col-arrow {
    color: #475569;
}
.dns-col-val   {
    color: #FDE68A;
    font-weight: 600;
}

/* Kopyalanabilir IP satırı */
.dns-copy-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dns-copy-val {
    flex: 1;
    padding: 6px 10px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}

.dns-copy-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #6366F1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    outline: none;
    flex-shrink: 0;
    transition: background .12s;
}
.dns-copy-btn:hover {
    background: #EEF2FF;
}

/* Adımlar */
.dns-steps {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.dns-step {
    display: flex;
    gap: 9px;
    align-items: flex-start;
}

.dns-step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EEF2FF;
    color: #6366F1;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.dns-step-txt {
    font-size: 11px;
    color: #374151;
    line-height: 1.5;
}
.dns-step-txt b {
    color: #1E293B;
}

/* Uyarı kutusu */
.dns-warn-box {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 11px;
    background: #FFFBEB;
    border: 1px solid #FDE68A;
    border-radius: 8px;
}

.dns-warn-icon {
    font-size: 13px;
    color: #D97706;
    flex-shrink: 0;
    margin-top: 1px;
}
.dns-warn-txt  {
    font-size: 11px;
    color: #92400E;
    line-height: 1.5;
}

/* ── Modal shared ────────────────────────────────────────────── */
.dom-modal-overlay,
.dom-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 10300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.dom-modal,
.dom-detail-modal {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow: hidden;
}

.dom-detail-modal {
    max-width: 500px;
}

.dom-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.dom-modal-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
    font-family: ui-monospace, monospace;
}

.dom-modal-close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    outline: none;
}
.dom-modal-close:hover {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* Add modal body */
.dom-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dom-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dom-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
}

.dom-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dom-input-icon {
    position: absolute;
    left: 10px;
    color: #94A3B8;
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}

.dom-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-size: 13px;
    color: #1E293B;
    font-family: ui-monospace, monospace;
    outline: none;
    transition: border-color .13s;
    background: #fff;
}
.dom-input:focus {
    border-color: #6366F1;
}

/* Primary toggle */
.dom-primary-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .13s;
}
.dom-primary-label:hover  {
    border-color: #C7D2FE;
}
.dom-primary-check        {
    margin-top: 2px;
    accent-color: #6366F1;
    width: 14px;
    height: 14px;
}
.dom-primary-title        {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
}
.dom-primary-title i      {
    color: #F59E0B;
}
.dom-primary-desc         {
    font-size: 11px;
    color: #64748B;
    margin-top: 2px;
}

/* DNS reminder */
.dom-dns-reminder {
    padding: 12px;
    background: #FAFAFA;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.dom-dns-reminder-title {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
}
.dom-dns-reminder-desc  {
    font-size: 11px;
    color: #64748B;
    margin: 0;
    line-height: 1.5;
}

/* Modal footer */
.dom-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.dom-btn-cancel {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
}
.dom-btn-cancel:hover {
    background: #F1F5F9;
}

.dom-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    border: none;
    background: #6366F1;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.dom-btn-save:hover:not(:disabled) {
    background: #4F46E5;
}
.dom-btn-save:disabled {
    opacity: .45;
    cursor: default;
}

/* ── Detail modal body ───────────────────────────────────────── */
.dom-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dom-detail-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.dom-detail-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dom-detail-section-ttl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #94A3B8;
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 2px;
}

.dom-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
}

.dom-detail-row--warn {
    border-color: #FCD34D;
    background: #FFFBEB;
}

.dom-detail-key {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    min-width: 115px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dom-detail-val {
    font-size: 11px;
    color: #1E293B;
    font-family: ui-monospace, monospace;
    word-break: break-all;
}
/* ============================================================
   tabSeo  (seo-* prefix)
   cpq-*, cos-*, com-* mevcut sınıflardan kullanılır
   ============================================================ */

/* ── Wrap ────────────────────────────────────────────────────── */
.seo-wrap {
    padding: 14px;
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.seo-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid #F1F5F9;
    margin-bottom: 0;
    overflow-x: auto;
}

.seo-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    color: #64748B;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .13s, border-color .13s;
    white-space: nowrap;
    outline: none;
}

.seo-tab-btn i {
    font-size: 12px;
}

.seo-tab-btn:hover  {
    color: #6366F1;
}

.seo-tab-active {
    color: #6366F1;
    border-bottom-color: #6366F1;
    background: #F5F3FF;
    border-radius: 6px 6px 0 0;
}

/* ── Panels ──────────────────────────────────────────────────── */
.seo-panels {
    padding-top: 16px;
}

.seo-panel         {
    display: none;
    flex-direction: column;
    gap: 14px;
}
.seo-panel-active  {
    display: flex;
}

/* ── Field ───────────────────────────────────────────────────── */
.seo-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seo-label {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
}

.seo-label-hint {
    font-size: 10px;
    font-weight: 400;
    color: #94A3B8;
}

/* ── Inputs ──────────────────────────────────────────────────── */
.seo-input,
.seo-textarea,
.seo-select {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #E2E8F0;
    border-radius: 7px;
    font-size: 12px;
    color: #1E293B;
    background: #fff;
    outline: none;
    transition: border-color .13s;
    font-family: inherit;
}

.seo-input:focus,
.seo-textarea:focus,
.seo-select:focus {
    border-color: #6366F1;
}

.seo-textarea {
    resize: vertical;
    min-height: 64px;
}

/* Code textarea — monospace */
.seo-code-textarea {
    font-family: ui-monospace, "Cascadia Code", monospace;
    font-size: 11px;
    line-height: 1.6;
    color: #1E293B;
    background: #F8FAFC;
}

.seo-code-textarea:focus {
    border-color: #6366F1;
    background: #fff;
}

/* ── 2-kolon satır ───────────────────────────────────────────── */
.seo-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 600px) {
    .seo-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Tags wrap ───────────────────────────────────────────────── */
.seo-tags-wrap {
    min-height: 40px;
}

/* ── Robots ──────────────────────────────────────────────────── */
.seo-robots-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 7px;
}

.seo-robot-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #fff;
    transition: all .12s;
    user-select: none;
}

.seo-robot-item:hover {
    border-color: #C7D2FE;
    background: #EEF2FF;
}

.seo-check {
    accent-color: #6366F1;
    width: 14px;
    height: 14px;
    cursor: pointer;
}
/* ============================================================
   tabGroups  (grp-* prefix)
   cpq-*, cos-*, com-*, tau-* mevcut sınıflardan kullanılır
   ============================================================ */

/* ── Group card grid ─────────────────────────────────────────── */
.grp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    padding: 14px;
}

.grp-empty {
    grid-column: 1 / -1;
}

/* ── Group card ──────────────────────────────────────────────── */
.grp-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s;
}

.grp-card:hover {
    border-color: #C7D2FE;
    box-shadow: 0 2px 12px rgba(99,102,241,.08);
}

/* Top accent bar */
.grp-card-bar {
    height: 4px;
    flex-shrink: 0;
}

/* Body */
.grp-card-body {
    flex: 1;
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Head row: icon + name + badge */
.grp-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.grp-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.grp-card-name {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grp-member-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Description */
.grp-card-desc {
    font-size: 12px;
    color: #64748B;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta */
.grp-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.grp-meta-item {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    color: #94A3B8;
}

.grp-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid transparent;
}
.grp-status--passive {
    background: #F1F5F9;
    color: #475569;
    border-color: #CBD5E1;
}
.grp-status--draft {
    background: #d2e8ff;
    color: #1b488a;
    border-color: #b4d1f3;
}
/* Footer */
.grp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
    gap: 6px;
}

.grp-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    border: 1.5px solid #C7D2FE;
    background: none;
    color: #4F46E5;
    cursor: pointer;
    outline: none;
    transition: all .13s;
}
.grp-foot-btn:hover {
    background: #EEF2FF;
}

.grp-foot-right {
    display: flex;
    gap: 4px;
}

.grp-foot-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    transition: all .13s;
}
.grp-foot-icon-btn:hover {
    background: #F8FAFC;
    border-color: #C7D2FE;
    color: #4F46E5;
}

/* ── Group Modal ─────────────────────────────────────────────── */
.grp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.38);
    z-index: 10300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.grp-modal {
    width: 100%;
    max-width: 440px;
    background: #fff;
    border-radius: 12px;
    border: 1.5px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.grp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.grp-modal-title {
    font-size: 13px;
    font-weight: 700;
    color: #1E293B;
    display: flex;
    align-items: center;
}

.grp-modal-close {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    outline: none;
}
.grp-modal-close:hover {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}

.grp-modal-body {
    flex: 1;
    padding: 16px;
}

.grp-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 14px;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.grp-btn-cancel {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #475569;
    cursor: pointer;
    outline: none;
}
.grp-btn-cancel:hover {
    background: #F1F5F9;
}

.grp-btn-save {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 7px;
    border: none;
    background: #6366F1;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.grp-btn-save:hover:not(:disabled) {
    background: #4F46E5;
}
.grp-btn-save:disabled {
    opacity: .45;
    cursor: default;
}

/* ── Members Panel (slide-over) ──────────────────────────────── */
.grp-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.32);
    z-index: 10200;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.grp-panel {
    width: 100%;
    max-width: 520px;
    background: #fff;
    border-left: 1px solid #E2E8F0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    animation: grp-slide-in .22s ease;
}

@keyframes grp-slide-in {
    from {
        transform: translateX(100%);
    }
    to   {
        transform: translateX(0);
    }
}

/* Panel header */
.grp-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
}

.grp-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}
.grp-panel-sub   {
    font-size: 11px;
    color: #7d7c7c;
    margin-top: 2px;
}



/* Panel tabs */
.grp-panel-tabs {
    display: flex;
    border-bottom: 2px solid #F1F5F9;
    flex-shrink: 0;
}

.grp-ptab {
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: none;
    color: #64748B;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all .13s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    outline: none;
}
.grp-ptab:hover       {
    color: #6366F1;
}
.grp-ptab-active      {
    color: #6366F1;
    border-bottom-color: #6366F1;
}

/* Panel tab body */
.grp-panel-tab-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Member list (shared) ────────────────────────────────────── */
.grp-member-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
}

.grp-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid #eaeaea;
    transition: background .12s;
    border-radius: 6px;
    margin-top: 4px;
    background-color: #fafafa;
}
.grp-member-row:hover              {
    background: #FAFBFF;
}
.grp-member-row--ingroup           {
    background: #F0FDF4;
}
.grp-member-row--ingroup:hover     {
    background: #DCFCE7;
}

.grp-member-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.grp-member-info  {
    flex: 1;
    min-width: 0;
}
.grp-member-name  {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
}
.grp-member-nick  {
    font-size: 11px;
    color: #94A3B8;
}

.grp-member-badges {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.grp-in-group-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #86EFAC;
}

.grp-member-remove {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1.5px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    transition: all .12s;
    flex-shrink: 0;
}
.grp-member-remove:hover {
    background: #FFF1F2;
    border-color: #FCA5A5;
    color: #DC2626;
}

/* ── Add tab search bar ──────────────────────────────────────── */
.grp-add-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-bottom: 1px solid #F1F5F9;
    flex-shrink: 0;
    position: relative;
}

.grp-add-search-icon {
    position: absolute;
    left: 28px;
    color: #94A3B8;
    font-size: 13px;
    pointer-events: none;
}

.grp-add-search-input {
    flex: 1;
    padding: 7px 10px 7px 28px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-size: 12px;
    color: #1E293B;
    outline: none;
    transition: border-color .13s;
}
.grp-add-search-input:focus {
    border-color: #6366F1;
}

.grp-add-search-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    border: 1.5px solid #E2E8F0;
    background: #F8FAFC;
    color: #6366F1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    outline: none;
    flex-shrink: 0;
    transition: background .12s;
}
.grp-add-search-btn:hover {
    background: #EEF2FF;
}

/* Ekle bulk bar */
.grp-add-bulk-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    flex-shrink: 0;
    border-radius: 6px;
    margin: 3px 10px;
    position: sticky;
    top: 5px;
}
.grp-add-bulk-label {
    font-size: 12px;
    font-weight: 600;
    color: #4338CA;
    flex: 1;
}

.grp-add-bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    border: none;
    background: #6366F1;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.grp-add-bulk-btn:hover {
    background: #4F46E5;
}

/* Add checkbox */
.grp-add-check {
    width: 14px;
    height: 14px;
    accent-color: #6366F1;
    cursor: pointer;
    flex-shrink: 0;
}
.grp-add-check:disabled {
    opacity: .35;
    cursor: not-allowed;
}

/* ── Empty state ─────────────────────────────────────────────── */
.grp-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 36px 24px;
    color: #94A3B8;
    text-align: center;
    font-size: 12px;
}
.grp-empty-icon  {
    font-size: 28px;
    color: #CBD5E1;
}
.grp-empty-title {
    font-size: 13px;
    color: #64748B;
    font-weight: 600;
}
.grp-empty-sub   {
    font-size: 11px;
}

/* ── Pagination ──────────────────────────────────────────────── */
.grp-pagination {
    padding: 10px 18px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
}



/* ===== AI MODE ===== */
.quick-btn.qb-ai {
    padding-right: 0;
    overflow: hidden;
    justify-content: space-between;
    white-space: nowrap;
    font-size: 11px;
}

.quick-btn.qb-ai .qb-ai-action {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    margin-left: 4px;
    margin-right: 10px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.4s ease;
    border-radius: 6px;
}

.quick-btn.qb-ai .qb-ai-action:hover {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.quick-btn.qb-ai:hover {
    box-shadow: 0 6px 18px rgba(99,102,241,0.15);
}

.quick-btn.qb-ai i {
    font-size: 14px;
    opacity: 0.85;
}

.quick-btn.qb-ai .qb-ai-action i {
    opacity: 1;
}

.quick-btn.qb-ai:active {
    transform: scale(0.98);
}

/* ============================================================
   newCoursesAIPrompt  (aip-* prefix)
   project-wizard-modal + project-header/footer-wrap mevcut
   ============================================================ */

/* ── Modal ───────────────────────────────────────────────────── */

.aip-modal .modal-content {
    border-radius: 14px;
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────── */
.aip-header {
    display: flex !important;
    align-items: center;
    gap: 14px;
}

.aip-header-icon-wrap {
    flex-shrink: 0;
}

.aip-header-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
}

.aip-header-text {
    flex: 1;
}
.aip-header-text h6 {
    color: #1E293B;
}
.aip-header-text p  {
    font-size: 12px !important;
}

.aip-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #E2E8F0;
    background: none;
    color: #94A3B8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    outline: none;
    flex-shrink: 0;
    transition: all .13s;
}
.aip-close-btn:hover {
    background: #FEE2E2;
    color: #EF4444;
    border-color: #FCA5A5;
}

/* ── Body ────────────────────────────────────────────────────── */
.aip-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Section ─────────────────────────────────────────────────── */
.aip-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aip-section-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    justify-content: space-between;
}
.aip-section-label i {
    color: #6366F1;
    font-size: 13px;
}

.aip-optional-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 99px;
    background: #F1F5F9;
    color: #64748B;
    letter-spacing: .3px;
    text-transform: none;
    margin-left: 4px;
}

/* ── Textarea ────────────────────────────────────────────────── */
.aip-textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 13px;
    color: #1E293B;
    background: #fff;
    resize: vertical;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
    line-height: 1.65;
    min-height: 90px;
}
.aip-textarea:focus {
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.10);
}
.aip-textarea::placeholder {
    color: #94A3B8;
}

/* ── Quality ─────────────────────────────────────────────────── */
.aip-quality {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aip-q-track {
    height: 4px;
    background: #E2E8F0;
    border-radius: 99px;
    overflow: hidden;
}

.aip-q-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .35s cubic-bezier(.4,0,.2,1), background .25s;
    width: 0;
}
.aip-q-fill.aip-q-poor  {
    background: #EF4444;
}
.aip-q-fill.aip-q-fair  {
    background: #F59E0B;
}
.aip-q-fill.aip-q-good  {
    background: #3B82F6;
}
.aip-q-fill.aip-q-great {
    background: #10B981;
}

.aip-q-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aip-q-label {
    font-size: 11px;
    font-weight: 700;
}
.aip-q-label.aip-q-poor  {
    color: #EF4444;
}
.aip-q-label.aip-q-fair  {
    color: #D97706;
}
.aip-q-label.aip-q-good  {
    color: #2563EB;
}
.aip-q-label.aip-q-great {
    color: #059669;
}

.aip-q-score {
    font-size: 10px;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}
.aip-q-tt-wrap{
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fafafa;
    box-shadow: 0px 0px 4px -1px #a4a4a49e inset;
    border-radius: 6px;
    padding: 8px 4px;
}
.aip-q-tip {
    font-size: 11px;
    color: #64748B;
    min-height: 14px;
    line-height: 1.4;
}

.aip-q-tags {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    min-height: 20px;
}

.aip-q-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 5px 2px 2px;
    border-radius: 4px;
    background: #10b981;
    color: #ffffff;
    animation: aip-tag-in .2s ease;
}
@keyframes aip-tag-in {
    from {
        opacity: 0;
        transform: scale(.85);
    }
    to   {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── OR divider ──────────────────────────────────────────────── */
.aip-or-row {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    top:5px;
}
.aip-or-line {
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}
.aip-or-text {
    font-size: 10px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .6px;
    white-space: nowrap;
    background-color: #fcfcfc;
    height: 9px;
    line-height: 1;
}

/* ── Selected file chip ──────────────────────────────────────── */
.aip-selected-chip {
    border-radius: 9px;
    border: 1.5px solid #86EFAC;
    background: #F0FDF4;
    overflow: hidden;
}
.aip-chip-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}
.aip-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.aip-chip-info {
    flex: 1;
    min-width: 0;
}
.aip-chip-name {
    font-size: 12px;
    font-weight: 700;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aip-chip-size {
    font-size: 10px;
    color: #64748B;
    margin-top: 1px;
}
.aip-chip-remove {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #86EFAC;
    background: #DCFCE7;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    outline: none;
    flex-shrink: 0;
    transition: background .12s;
}
.aip-chip-remove:hover {
    background: #BBF7D0;
}

/* ── File browser ────────────────────────────────────────────── */
.aip-browser {
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* Breadcrumb row */
.aip-bc-row {
    padding: 7px 10px;
    background: #F8FAFC;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
}
.aip-bc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.aip-bc-item {
    font-size: 11px;
    font-weight: 600;
    color: #6366F1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background .12s;
}
.aip-bc-item:hover  {
    background: #EEF2FF;
}
.aip-bc-active      {
    color: #1E293B;
    cursor: default;
}
.aip-bc-active:hover{
    background: none;
}
.aip-bc-sep         {
    font-size: 10px;
    color: #CBD5E1;
    margin: 0 1px;
}

/* Browser body */
.aip-browser-body {
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
}
.aip-browser-body::-webkit-scrollbar       {
    width: 4px;
}
.aip-browser-body::-webkit-scrollbar-track {
    background: transparent;
}
.aip-browser-body::-webkit-scrollbar-thumb {
    background: #E2E8F0;
    border-radius: 99px;
}

/* Loading / empty */
.aip-browser-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    font-size: 12px;
    color: #64748B;
    justify-content: center;
}
.aip-browser-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px;
    color: #94A3B8;
    font-size: 12px;
    text-align: center;
}
.aip-browser-empty i  {
    font-size: 22px;
}
.aip-browser-empty p  {
    margin: 0;
}

/* Grid */
.aip-browser-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Folder row */
.aip-br-folder {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.aip-br-folder:hover {
    background: #F5F7FF;
}

.aip-br-folder-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #D97706;
    flex-shrink: 0;
}
.aip-br-folder-info  {
    flex: 1;
    min-width: 0;
}
.aip-br-folder-name  {
    font-size: 12px;
    font-weight: 600;
    color: #1E293B;
}
.aip-br-folder-meta  {
    font-size: 10px;
    color: #94A3B8;
}
.aip-br-folder-arrow {
    font-size: 11px;
    color: #CBD5E1;
    flex-shrink: 0;
}

/* File row */
.aip-br-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
    border: 1.5px solid transparent;
}
.aip-br-file:hover          {
    background: #F8FAFC;
}
.aip-br-file-selected       {
    background: #EEF2FF !important;
    border-color: #C7D2FE;
}

.aip-br-file-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
/* File icon colors */
.aip-fi-pdf   {
    background: #FEE2E2;
    color: #DC2626;
}
.aip-fi-word  {
    background: #DBEAFE;
    color: #1D4ED8;
}
.aip-fi-ppt   {
    background: #FFEDD5;
    color: #EA580C;
}
.aip-fi-xls   {
    background: #DCFCE7;
    color: #16A34A;
}
.aip-fi-img   {
    background: #EDE9FE;
    color: #7C3AED;
}
.aip-fi-txt   {
    background: #F0F9FF;
    color: #0EA5E9;
}
.aip-fi-other {
    background: #F1F5F9;
    color: #64748B;
}

.aip-br-file-info {
    flex: 1;
    min-width: 0;
}
.aip-br-file-name {
    font-size: 12px;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aip-br-file-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #94A3B8;
    margin-top: 1px;
}
.aip-br-dot       {
    color: #D1D5DB;
}

.aip-br-add-icon {
    font-size: 13px;
    color: #C7D2FE;
    flex-shrink: 0;
    transition: color .12s;
}
.aip-br-file:hover .aip-br-add-icon {
    color: #6366F1;
}

.aip-br-sel-icon {
    font-size: 16px;
    color: #6366F1;
    flex-shrink: 0;
    animation: aip-sel-pop .2s ease;
}
@keyframes aip-sel-pop {
    from {
        transform: scale(.5);
        opacity: 0;
    }
    to   {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Footer ──────────────────────────────────────────────────── */
.aip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aip-footer-hint {
    font-size: 11px;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.aip-footer-hint i {
    color: #6366F1;
}

.aip-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aip-cancel-btn {
    padding: 6px 16px !important;
    font-size: 12px !important;
}

/* Build button */
.aip-build-btn {
    background: #E2E8F0 !important;
    color: #94A3B8 !important;
    border: none !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    transition: all .2s !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.aip-build-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}
.aip-build-ready {
    background: linear-gradient(135deg, #6366F1, #8B5CF6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(99,102,241,.35) !important;
}
.aip-build-ready:hover {
    box-shadow: 0 6px 18px rgba(99,102,241,.45) !important;
    transform: translateY(-1px);
}
.aip-build-ready:active {
    transform: translateY(0);
}

/* ── Loading screen ──────────────────────────────────────────── */
.aip-loading-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 44px 32px;
    text-align: center;
}

/* Orb */
.aip-loading-orb {
    position: relative;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aip-orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #6366F1;
    animation: aip-orb-spin 1.1s linear infinite;
}
.aip-orb-ring-2 {
    inset: 8px;
    border-top-color: #8B5CF6;
    animation-duration: 1.6s;
    animation-direction: reverse;
}

@keyframes aip-orb-spin {
    to {
        transform: rotate(360deg);
    }
}

.aip-orb-icon {
    font-size: 26px;
    color: #6366F1;
    position: relative;
    z-index: 1;
    animation: aip-orb-float 2.5s ease-in-out infinite;
}
@keyframes aip-orb-float {
    0%, 100% {
        transform: translateY(0);
    }
    50%       {
        transform: translateY(-4px);
    }
}

.aip-loading-title {
    font-size: 15px;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}
.aip-loading-sub {
    font-size: 11px;
    color: #94A3B8;
    margin: -14px 0 0;
}

/* Steps */
.aip-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 320px;
}

.aip-ls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    color: #94A3B8;
    transition: all .3s;
}

.aip-ls-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E2E8F0;
    flex-shrink: 0;
    transition: background .25s;
}

.aip-ls-active {
    background: #EEF2FF;
    color: #1E293B;
    font-weight: 600;
}
.aip-ls-active .aip-ls-dot {
    background: #6366F1;
    animation: aip-dot-beat .9s ease-in-out infinite;
}
@keyframes aip-dot-beat {
    0%, 100% {
        transform: scale(1);
    }
    50%       {
        transform: scale(1.6);
    }
}

.aip-ls-done             {
    color: #64748B;
}
.aip-ls-done .aip-ls-dot {
    background: #10B981;
}
/* ============================================================
   newCoursesAIPrompt — EK CSS (mevcut aip-*.css dosyasına ekleyin)
   Yeni: trigger row, collapsible panel, tree, file pane
   ============================================================ */

/* ── Trigger row (dosya picker toggle) ──────────────────────── */
.aip-trigger-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: #fff;
    user-select: none;
}
.aip-trigger-row:hover   {
    border-color: #C7D2FE;
    background: #FAFBFF;
}
.aip-trigger-active      {
    border-color: #6366F1 !important;
    background: #F5F3FF !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.aip-trigger-left {
    display: flex;
    align-items: center;
    gap: 7px;
}
.aip-trigger-icon  {
    font-size: 14px;
    color: #6366F1;
}
.aip-trigger-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
}

.aip-trigger-arrow {
    font-size: 12px;
    color: #94A3B8;
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.aip-browser-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s cubic-bezier(.4, 0, .2, 1);
    border: 1px solid transparent;
    border-radius: 8px;
    margin:0;
    padding: 0;
}

.aip-panel-open {
    max-height: 320px;
    border-color: #cecfff;
    margin-top: 2px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 5px -1px rgba(84, 100, 154, 0.27);
}

.aip-browser-inner {
    display: flex;
    height: 270px;
    background: #fff;
    padding:6px;
}

.aip-tree-pane {
    width: 190px;
    flex-shrink: 0;
    border: 1px solid #F1F5F9;
    overflow-y: auto;
    padding: 6px 4px;
    background: #f9f9f9;
    border-radius: 5px;
}
.aip-tree-pane::-webkit-scrollbar       {
    width: 3px;
}
.aip-tree-pane::-webkit-scrollbar-thumb {
    background: #E2E8F0;
    border-radius: 99px;
}

.aip-pane-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 20px 10px;
    font-size: 11px;
    color: #94A3B8;
    text-align: center;
    flex-direction: column;
}
.aip-pane-spinner i {
    font-size: 18px;
}

/* Tree nodes */
.aip-tn-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 12px;
    color: #374151;
    transition: background .12s, color .12s;
    white-space: nowrap;
    overflow: hidden;
}
.aip-tn-row:hover {
    background: #EEF2FF;
    color: #4F46E5;
}
.aip-tn-active    {
    background: #EEF2FF;
    color: #4F46E5;
    font-weight: 700;
}

/* Arrow */
.aip-tn-arrow {
    font-size: 10px;
    color: #CBD5E1;
    flex-shrink: 0;
    transition: transform .18s, color .12s;
    width: 12px;
    text-align: center;
}
.aip-tn-arrow.aip-tn-open {
    transform: rotate(90deg);
    color: #6366F1;
}
.aip-tn-row:hover .aip-tn-arrow {
    color: #6366F1;
}

/* Spacer for leaf nodes (no arrow) */
.aip-tn-arrow-spacer {
    display: inline-block;
    width: 12px;
    flex-shrink: 0;
}

/* Folder icon */
.aip-tn-ficon {
    font-size: 13px;
    color: #D97706;
    flex-shrink: 0;
    transition: color .12s;
}
.aip-tn-active .aip-tn-ficon  {
    color: #6366F1;
}
.aip-tn-active .aip-tn-ficon:before{
    content: "\13b33";
}
.aip-tn-active .aip-tn-ficon:after{
    content: "\13b32";
}
.aip-tn-row:hover .aip-tn-ficon {
    color: #6366F1;
}

.aip-tn-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

/* Children */
.aip-tn-children {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s cubic-bezier(.4,0,.2,1);
}
.aip-tn-children.aip-tn-open {
    max-height: 500px;
}


.aip-files-pane {
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 6px;
    width: 100%;
}
.aip-files-pane::-webkit-scrollbar       {
    width: 3px;
}
.aip-files-pane::-webkit-scrollbar-thumb {
    background: #E2E8F0;
    border-radius: 99px;
}

.aip-files-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 6px;
    color: #94A3B8;
    font-size: 11px;
    text-align: center;
    padding: 16px;
    width:100%;
}
.aip-files-empty i {
    font-size: 22px;
}
.aip-files-empty p {
    margin: 0;
}

/* File row */
.aip-fi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    border: 1.5px solid #efefef;
    transition: background .12s, border-color .12s;
    margin-bottom: 2px;
    width: calc(100% / 3.06);
    height: 60px;
}
.aip-fi-row:hover      {
    background: #F5F7FF;
}
.aip-fi-selected       {
    background: #EEF2FF !important;
    border-color: #C7D2FE;
}

/* File icon */
.aip-fi-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}
.aip-fi-pdf   {
    background: #FEE2E2;
    color: #DC2626;
}
.aip-fi-word  {
    background: #DBEAFE;
    color: #1D4ED8;
}
.aip-fi-ppt   {
    background: #FFEDD5;
    color: #EA580C;
}
.aip-fi-xls   {
    background: #DCFCE7;
    color: #16A34A;
}
.aip-fi-img   {
    background: #EDE9FE;
    color: #7C3AED;
}
.aip-fi-txt   {
    background: #F0F9FF;
    color: #0EA5E9;
}
.aip-fi-other {
    background: #F1F5F9;
    color: #64748B;
}

.aip-fi-info  {
    flex: 1;
    min-width: 0;
}
.aip-fi-name  {
    font-size: 11px;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aip-fi-meta  {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #94A3B8;
    margin-top: 1px;
}
.aip-fi-dot   {
    color: #D1D5DB;
}

.aip-fi-add {
    font-size: 12px;
    color: #D1D5DB;
    flex-shrink: 0;
    transition: color .12s;
    margin-right: 8px;
}
.aip-fi-row:hover .aip-fi-add {
    color: #6366F1;
}

.aip-fi-sel {
    font-size: 16px;
    color: #6366F1;
    flex-shrink: 0;
    animation: aip-sel-pop .18s ease;
}
@keyframes aip-sel-pop {
    from {
        transform: scale(.5);
        opacity: 0;
    }
    to   {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Selected chip (trigger altı) ───────────────────────────── */
.aip-selected-chip {
    margin-top: 6px;
    border-radius: 9px;
    border: 1.5px solid #86EFAC;
    background: #F0FDF4;
    overflow: hidden;
}
.aip-chip-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
}
.aip-chip-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}
.aip-chip-info  {
    flex: 1;
    min-width: 0;
}
.aip-chip-name  {
    font-size: 12px;
    font-weight: 700;
    color: #166534;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aip-chip-size  {
    font-size: 10px;
    color: #4ADE80;
    margin-top: 1px;
}
.aip-chip-remove {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid #86EFAC;
    background: #DCFCE7;
    color: #166534;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 10px;
    outline: none;
    flex-shrink: 0;
    transition: background .12s;
}
.aip-chip-remove:hover {
    background: #BBF7D0;
}


/* ============================================================
   newCoursesAIPrompt — Layout revizyonu için EK / DEĞİŞEN CSS
   Mevcut aip-*.css dosyalarınıza EKLEYİN
   ============================================================ */

/* ── Prompt row: textarea + build btn yan yana ─────────────── */
.aip-prompt-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.aip-prompt-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* ── Build butonu (textarea sağında, dikey) ─────────────────── */
.aip-build-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.aip-build-col-label {
    /* Textarea label'inin yüksekliğini dengelemek için spacer */
    height: 18px;
    flex-shrink: 0;
}

.aip-build-btn-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 96px;
    /* textarea rows=4 ≈ 98px; quality + tags ~ 62px; toplamı karşılıyoruz */
    min-height: 110px;
    border-radius: 11px;
    border: none;
    background: #E2E8F0;
    color: #94A3B8;
    font-size: 11px;
    font-weight: 700;
    cursor: not-allowed;
    letter-spacing: .2px;
    transition: all .22s cubic-bezier(.4,0,.2,1);
    line-height: 1.4;
    text-align: center;
    outline: none;
    position: relative;
    overflow: hidden;
}

.aip-build-btn-side::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    opacity: 0;
    transition: opacity .22s;
}

.aip-build-btn-side.aip-build-ready {
    cursor: pointer;
    color: #fff;
    box-shadow: 0 4px 16px rgba(99,102,241,.32);
}
.aip-build-btn-side.aip-build-ready::before {
    opacity: 1;
}
.aip-build-btn-side.aip-build-ready:hover   {
    box-shadow: 0 6px 22px rgba(99,102,241,.44);
    transform: translateY(-1px);
}
.aip-build-btn-side.aip-build-ready:active  {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
}

.aip-build-icon {
    font-size: 22px;
    position: relative;
    z-index: 1;
    transition: transform .18s;
}
.aip-build-btn-side.aip-build-ready:hover .aip-build-icon {
    transform: translateY(-2px) rotate(-8deg);
}

.aip-build-txt {
    font-size: 11px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.aip-inline-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #EEF2FF;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 500;
    color: #4338CA;
    border: 1px solid #C7D2FE;
    animation: aip-hint-in .18s ease;
    position: relative;
}
.aip-inline-hint:after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    bottom: -4px;
    right: 2.5rem;
    border-bottom: 1px solid #c5d0fd;
    border-right: 1px solid #c5d0fd;
    background: #EEF2FF;
}
.aip-section-label > div:first-child {
    position: relative;
    top: 6px;
    left: 10px;
}
@keyframes aip-hint-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}
.aip-inline-hint i {
    font-size: 13px;
    color: #6366F1;
}


.aip-file-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    width:100%;
}

.aip-footer {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 11px 20px 13px !important;
    flex-direction: column;
}

/* Sol: bilgi metni */
.aip-footer-left {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #94A3B8;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.aip-footer-folder-ico {
    font-size: 20px;
    color: #CBD5E1;
    flex-shrink: 0;
}

.aip-footer-hint-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aip-footer-right {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    width: 100%;
}

.aip-footer-chip {
    display: flex;
}

.aip-fc-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 6px;
    background: #ffffff;
    border: 1.5px solid #897dac;
    border-radius: 8px;
    max-width: 180px;
    position: relative;
}

.aip-fc-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.aip-fc-name {
    font-size: 11px;
    font-weight: 600;
    color: #162a65;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}

.aip-fc-remove {
    width: 16px;
    height: 16px;
    border-radius: 51%;
    border: 1px solid #ef8686;
    background: #fcdcdc;
    color: #651616;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 8px;
    outline: none;
    flex-shrink: 0;
    transition: background .12s;
    padding: 0;
    position: absolute;
    right: -8px;
    top: -6px;
}
.aip-fc-remove:hover {
    background: #651616;
    color:#fff;
}

.aip-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    transition: all .14s;
}
.aip-trigger-btn i:first-child {
    color: #6366F1;
    font-size: 14px;
}
.aip-trigger-btn:hover         {
    border-color: #C7D2FE;
    background: #F5F7FF;
    color: #4F46E5;
}
.aip-trigger-active            {
    border-color: #6366F1 !important;
    background: #EEF2FF !important;
    color: #4F46E5 !important;
}

.aip-trigger-arr {
    font-size: 11px;
    color: #94A3B8;
    transition: transform .2s;
}
.aip-trigger-active .aip-trigger-arr {
    color: #6366F1;
}

.aip-footer-right.frw-w-act {
    width: 100%;
    justify-content: space-between;
}
/* ═══════════════════════════════════════════════════════
   EVENT LIST — event-list.css
   Tüm sınıflar ev- prefix ile kapsüllenmiştir.
   ═══════════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --ev-bg:        #f4f6fb;
    --ev-surface:   #ffffff;
    --ev-surface2:  #f9fafc;
    --ev-border:    #e8ecf4;
    --ev-border2:   #f0f3f9;

    --ev-txt:       #1a1f36;
    --ev-txt2:      #6b7a99;
    --ev-txt3:      #9aa5bd;

    --ev-primary:   #4361ee;
    --ev-psoft:     #eef1fd;
    --ev-pglow:     rgba(67,97,238,.15);

    --ev-active:    #10b981;
    --ev-asoft:     #d1fae5;
    --ev-passive:   #f59e0b;
    --ev-pasoft:    #fef3c7;
    --ev-draft:     #6b7a99;
    --ev-dsoft:     #e8ecf4;

    --ev-webinar:   #8b5cf6;
    --ev-wsoft:     #ede9fe;
    --ev-workshop:  #059669;
    --ev-wssoft:    #d1fae5;
    --ev-konferans: #3b82f6;
    --ev-ksoft:     #dbeafe;

    --ev-r:    12px;
    --ev-rsm:   8px;
    --ev-rxs:   6px;
    --ev-sh:    0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
    --ev-shmd:  0 4px 20px rgba(0,0,0,.10);
    --ev-tr:    .18s ease;
}

/* ── Page Shell ── */
.ev-page-wrap {
    padding: 0 0 10px;
    color: var(--ev-txt);
}

/* ════════════════════════════════════════
   STAT WIDGETS
════════════════════════════════════════ */
.ev-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.ev-stat-card {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-r);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--ev-sh);
    position: relative;
    overflow: hidden;
    transition: transform var(--ev-tr), box-shadow var(--ev-tr);
}
.ev-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--_acc);
    border-radius: var(--ev-r) var(--ev-r) 0 0;
}
.ev-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ev-shmd);
}

.ev-stat-card[data-c="0"] {
    --_acc: var(--ev-primary);
}
.ev-stat-card[data-c="1"] {
    --_acc: var(--ev-active);
}
.ev-stat-card[data-c="2"] {
    --_acc: var(--ev-passive);
}
.ev-stat-card[data-c="3"] {
    --_acc: var(--ev-webinar);
}

.ev-stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ev-stat-card[data-c="0"] .ev-stat-icon-wrap {
    background: rgba(67,97,238,.1);
}
.ev-stat-card[data-c="1"] .ev-stat-icon-wrap {
    background: rgba(16,185,129,.1);
}
.ev-stat-card[data-c="2"] .ev-stat-icon-wrap {
    background: rgba(245,158,11,.1);
}
.ev-stat-card[data-c="3"] .ev-stat-icon-wrap {
    background: rgba(139,92,246,.1);
}

.ev-stat-icon {
    font-size: 20px;
}
.ev-stat-card[data-c="0"] .ev-stat-icon {
    color: var(--ev-primary);
}
.ev-stat-card[data-c="1"] .ev-stat-icon {
    color: var(--ev-active);
}
.ev-stat-card[data-c="2"] .ev-stat-icon {
    color: var(--ev-passive);
}
.ev-stat-card[data-c="3"] .ev-stat-icon {
    color: var(--ev-webinar);
}

.ev-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ev-txt3);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}
.ev-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--ev-txt);
    line-height: 1;
    letter-spacing: -.5px;
    margin-bottom: 3px;
}
.ev-stat-sub   {
    font-size: 11.5px;
    color: var(--ev-txt3);
}

/* ════════════════════════════════════════
   LAYOUT: Calendar | Content
════════════════════════════════════════ */
.ev-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 18px;
    align-items: start;
}

/* ── Panel shell ── */
.ev-panel {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-r);
    box-shadow: var(--ev-sh);
    /*overflow: hidden;*/
}
.ev-panel-head {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ev-border2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    gap:8px;
}
.ev-panel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ev-txt);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ev-panel-title i {
    color: var(--ev-primary);
}

/* ════════════════════════════════════════
   CALENDAR
════════════════════════════════════════ */
.ev-cal-col {
    position: sticky;
    top: 16px;
}

.ev-cal-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    width:100%;
}
.ev-cal-nav-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--ev-border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--ev-txt2);
    transition: all var(--ev-tr);
}
.ev-cal-nav-btn:hover {
    background: var(--ev-psoft);
    color: var(--ev-primary);
    border-color: var(--ev-primary);
}
.ev-cal-month-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--ev-txt);
    min-width: 105px;
    text-align: center;
    width: 100%;
}

.ev-cal-body {
    padding: 10px 12px;
}

.ev-cal-head {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    margin-bottom: 4px;
}
.ev-cal-hcell {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--ev-txt3);
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 4px 0;
}

.ev-cal-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 2px;
}
.ev-cal-cell {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ev-txt2);
    cursor: pointer;
    position: relative;
    transition: background var(--ev-tr), color var(--ev-tr);
    min-height: 30px;
}
.ev-cal-cell:hover {
    background: var(--ev-psoft);
    color: var(--ev-primary);
}
.ev-cal-cell.ev-cal-other {
    color: var(--ev-border);
    pointer-events: none;
}
.ev-cal-cell.ev-cal-today {
    background: var(--ev-primary);
    color: #fff;
    font-weight: 700;
    border-radius: 6px;
}
.ev-cal-cell.ev-cal-today:hover {
    background: #3451d1;
}
.ev-cal-cell.ev-cal-has .ev-cal-dot {
    position: absolute;
    bottom: -1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ev-primary);
}
.ev-cal-cell.ev-cal-today .ev-cal-dot {
    background: rgba(255,255,255,.7);
}
.ev-cal-num {
    line-height: 1;
}

.ev-cal-legend {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid var(--ev-border2);
    flex-wrap: wrap;
}
.ev-leg {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--ev-txt3);
}
.ev-leg-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.ev-dot-webinar   {
    background: var(--ev-webinar);
}
.ev-dot-workshop  {
    background: var(--ev-workshop);
}
.ev-dot-konferans {
    background: var(--ev-konferans);
}

/* ════════════════════════════════════════
   SECTION
════════════════════════════════════════ */
.ev-section {
    background: #fff;
    border: 1px solid #eaecf5;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 24px;
}
.ev-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px;
    border-bottom: 1px solid #f0f2f5;
}
.ev-section.ev-s-upcoming .ev-section-head {
    border: none;
    padding: 4px 2px 20px;
}
.ev-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ev-section-ico {
    color: var(--ev-primary);
    font-size: 15px;
}
.ev-section-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ev-txt);
    margin: 0;
}
.ev-section-sub   {
    font-size: 11.5px;
    color: var(--ev-txt3);
}

/* ════════════════════════════════════════
   UPCOMING CARDS
════════════════════════════════════════ */
.ev-upcoming-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ev-upc-item {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-rsm);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
    cursor: pointer;
    box-shadow: var(--ev-sh);
    transition: border-color var(--ev-tr), transform var(--ev-tr), box-shadow var(--ev-tr);
}
.ev-upc-item:hover {
    border-color: var(--ev-primary);
    transform: translateX(3px);
    box-shadow: 0 4px 18px var(--ev-pglow);
}

.ev-upc-date {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: var(--ev-psoft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-align: center;
}
.ev-upc-day  {
    font-size: 18px;
    font-weight: 700;
    color: var(--ev-primary);
    line-height: 1;
}
.ev-upc-mon  {
    font-size: 9px;
    font-weight: 700;
    color: var(--ev-primary);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.ev-upc-info {
    flex: 1;
    min-width: 0;
}
.ev-upc-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ev-txt);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ev-upc-meta  {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--ev-txt3);
    flex-wrap: wrap;
}
.ev-upc-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}
.ev-upc-meta i {
    font-size: 11px;
}

.ev-upc-right {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: flex-end;
    flex-shrink: 0;
    position: absolute;
    right: 10px;
    top: -10px;
}

/* ════════════════════════════════════════
   TYPE + STATUS PILLS
════════════════════════════════════════ */
.ev-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #e8ecf4;
    transition: all 0.3s;
}
.ev-type-webinar   {
    background: var(--ev-wsoft);
    color: var(--ev-webinar);
}
.ev-type-workshop  {
    background: var(--ev-wssoft);
    color: var(--ev-workshop);
}
.ev-type-konferans {
    background: var(--ev-ksoft);
    color: var(--ev-konferans);
}
.ev-type-default   {
    background: var(--ev-dsoft);
    color: var(--ev-draft);
}

.ev-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.3s;
    border: 1px solid #e8ecf4;
}
.ev-st-active  {
    background: var(--ev-asoft);
    color: var(--ev-active);
}
.ev-st-passive {
    background: var(--ev-pasoft);
    color: var(--ev-passive);
}
.ev-st-draft   {
    background: var(--ev-dsoft);
    color: var(--ev-draft);
}

/* ════════════════════════════════════════
   FILTER BAR
════════════════════════════════════════ */
.ev-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-rsm);
    padding: 10px 14px;
    box-shadow: var(--ev-sh);
}
.ev-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}
.ev-search-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ev-txt3);
    font-size: 13px;
    pointer-events: none;
}
.ev-search-input {
    width: 100%;
    padding: 7px 10px 7px 32px;
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-rxs);
    font-size: 12.5px;
    color: var(--ev-txt);
    background: var(--ev-surface2);
    outline: none;
    transition: border-color var(--ev-tr), box-shadow var(--ev-tr);
    box-sizing: border-box;
}
.ev-search-input:focus {
    border-color: var(--ev-primary);
    box-shadow: 0 0 0 2px var(--ev-pglow);
}
.ev-search-input::placeholder {
    color: var(--ev-txt3);
}

.ev-filter-selects {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ev-filter-sel {
    padding: 7px 12px;
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-rxs);
    font-size: 12.5px;
    color: var(--ev-txt);
    background: var(--ev-surface2);
    outline: none;
    cursor: pointer;
    min-width: 120px;
    transition: border-color var(--ev-tr);
}
.ev-filter-sel:focus {
    border-color: var(--ev-primary);
}

.ev-btn {
    padding: 7px 14px;
    border-radius: var(--ev-rxs);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    transition: all var(--ev-tr);
    white-space: nowrap;
}
.ev-btn-primary {
    background: var(--ev-primary);
    color: #fff;
}
.ev-btn-primary:hover {
    background: #3451d1;
}
.ev-btn-ghost   {
    background: var(--ev-surface2);
    border: 1px solid var(--ev-border);
    color: var(--ev-txt2);
}
.ev-btn-ghost:hover {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
}
.ev-btn-new     {
    background: linear-gradient(135deg,#4361ee,#7c3aed);
    color: #fff;
}
.ev-btn-new:hover {
    opacity: .88;
    transform: translateY(-1px);
}

/* ════════════════════════════════════════
   TABLE WRAP + EV-TABLE ROWS
════════════════════════════════════════ */
.ev-table-wrap {
    /*overflow: hidden;*/
}

/* ev-table extends the project's base table styles */
.ev-table thead th {
    background: var(--ev-surface2) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--ev-txt3) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--ev-border) !important;
    padding: 10px 14px !important;
}
.ev-table tbody tr {
    border-bottom: 1px solid var(--ev-border2) !important;
    transition: background var(--ev-tr);
    cursor: pointer;
}
.ev-table tbody tr:last-child {
    border-bottom: none !important;
}
.ev-table tbody tr:hover {
    background: #f9faff !important;
}
.ev-table td {
    padding: 12px 14px !important;
    vertical-align: middle !important;
}

/* ── Table cells ── */
.ev-tbl-name {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ev-tbl-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}
.ev-tbl-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ev-txt);
    margin-bottom: 1px;
}
.ev-tbl-id    {
    font-size: 10.5px;
    color: var(--ev-txt3);
    font-family: monospace;
}
.ev-tbl-date  {
    font-size: 12px;
    font-weight: 500;
    color: var(--ev-txt);
    white-space: nowrap;
}
.ev-tbl-time  {
    font-size: 10.5px;
    color: var(--ev-txt3);
    margin-top: 2px;
}
.ev-tbl-loc   {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--ev-txt2);
}

.ev-cap        {
}
.ev-cap-text   {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ev-txt);
    margin-bottom: 3px;
}
.ev-cap-bar    {
    width: 72px;
    height: 3px;
    border-radius: 2px;
    background: var(--ev-border);
    overflow: hidden;
}
.ev-cap-fill   {
    height: 100%;
    border-radius: 2px;
    background: var(--ev-primary);
}

/* ── Action buttons ── */
.ev-tbl-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ev-act-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--ev-border);
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ev-txt2);
    transition: all var(--ev-tr);
}
.ev-act-btn:hover {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
    background: var(--ev-psoft);
}

/* ── Empty ── */
.ev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--ev-txt3);
    gap: 8px;
    text-align: center;
}
.ev-empty i {
    font-size: 36px;
    opacity: .25;
}
.ev-empty p {
    font-size: 12.5px;
    margin: 0;
}

/* ── Loading ── */
.ev-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 10px;
    color: var(--ev-txt3);
}
.ev-spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--ev-border);
    border-top-color: var(--ev-primary);
    animation: evSpin .65s linear infinite;
}
@keyframes evSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ════════════════════════════════════════
   ATTENDEES MODAL
════════════════════════════════════════ */
.ev-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,15,40,.4);
    backdrop-filter: blur(3px);
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: evFadeIn .18s ease;
}
@keyframes evFadeIn  {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes evSlideUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ev-modal {
    background: var(--ev-surface);
    border-radius: 14px;
    width: 820px;
    max-width: 95vw;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
    animation: evSlideUp .22s ease;
    overflow: hidden;
}

.ev-modal-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--ev-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.ev-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ev-txt);
    display: flex;
    align-items: center;
    gap: 6px;
}
.ev-modal-close {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--ev-border);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ev-txt3);
    font-size: 13px;
    transition: all var(--ev-tr);
}
.ev-modal-close:hover {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

.ev-modal-filter {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ev-border2);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.ev-modal-body {
    overflow-y: auto;
    flex: 1;
}
.ev-modal-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--ev-border2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

/* Attendee table */
.ev-att-info-label {
    font-size: 12px;
    color: var(--ev-txt3);
}
.ev-att-pag-wrap   {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ev-pag-btn {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--ev-border);
    background: var(--ev-surface);
    font-size: 12px;
    color: var(--ev-txt2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ev-tr);
}
.ev-pag-btn:hover:not(:disabled) {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
}
.ev-pag-btn:disabled {
    opacity: .38;
    cursor: default;
}
.ev-pag-of {
    font-size: 12px;
    color: var(--ev-txt3);
    padding: 0 4px;
}

/* Attendee table rows */
.ev-att-name-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ev-att-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg,#4361ee,#7c3aed);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ev-att-name   {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ev-txt);
}
.ev-att-email  {
    font-size: 11.5px;
    color: var(--ev-txt3);
}
.ev-att-ticket {
    font-size: 11px;
    font-family: monospace;
    color: var(--ev-txt3);
}

.ev-att-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 700;
}
.ev-att-requested {
    background: var(--ev-pasoft);
    color: var(--ev-passive);
}
.ev-att-yes       {
    background: var(--ev-asoft);
    color: var(--ev-active);
}
.ev-att-no        {
    background: #fee2e2;
    color: #dc2626;
}

.ev-att-actions {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.ev-att-btn {
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all var(--ev-tr);
}
.ev-att-approve {
    background: var(--ev-asoft);
    color: var(--ev-active);
}
.ev-att-approve:hover {
    background: var(--ev-active);
    color: #fff;
}
.ev-att-reject  {
    background: #fee2e2;
    color: #dc2626;
}
.ev-att-reject:hover {
    background: #dc2626;
    color: #fff;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 1100px) {
    .ev-layout {
        grid-template-columns: 1fr;
    }
    .ev-cal-col {
        position: static;
    }
    .ev-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .ev-stats-row {
        grid-template-columns: 1fr 1fr;
    }
    .ev-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
}
/* ═══════════════════════════════════════════════════════
   EVENT CALENDAR TOOLTIP — event-cal-tooltip.css
   event-list.css ile birlikte kullanılır.
   ═══════════════════════════════════════════════════════ */

/* ── Dot: event count badge ── */
.ev-cal-dot {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 6px;
    height: 6px;
    border-radius: 10px;
    background: var(--ev-primary);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    line-height: 6px;
    padding: 0 3px;
    /* show count number if >1 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.ev-cal-cell.ev-cal-today .ev-cal-dot {
    background: rgba(255,255,255,.85);
    color: var(--ev-primary);
}

/* ── Tooltip container ── */
.ev-has-tooltip {
    position: relative;
    overflow: visible; /* override any parent clip */
    z-index: 1;
}
.ev-has-tooltip:hover {
    z-index: 200;
}

.ev-cal-tooltip {
    display: none; /* shown on hover via CSS */
    position: absolute;
    /*bottom: 100%;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    width: 220px;
    background: #1a1f36;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.28);
    z-index: 9999;
    pointer-events: auto;
    /*animation: evTipIn .14s ease;*/
    max-height: 200px;
    /*overflow: auto;*/
}
/*.ev-cal-tooltip.global {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
    min-width: 180px;

    background: #111827;
    color: #fff;
    border-radius: 8px;
    padding: 10px;

    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    font-size: 12px;
}*/

/* Arrow */
.ev-cal-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1f36;
}

@keyframes evTipIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to   {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.ev-has-tooltip:hover .ev-cal-tooltip {
    display: block;
}

/* Keep tooltip visible while hovering inside it */
.ev-cal-tooltip:hover {
    display: block;
}

/* ── Tooltip header (date) ── */
.ev-tip-header {
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ── Single event row inside tooltip ── */
.ev-tip-item {
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    transition: opacity .15s;
}
.ev-tip-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.ev-tip-item:hover {
    opacity: .8;
}

.ev-tip-type {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    margin-bottom: 4px;
    /* reuse existing pill colors */
}

/* Override pill colors for dark tooltip background */
.ev-cal-tooltip .ev-type-webinar   {
    background: rgba(139,92,246,.25);
    color: #c4b5fd;
}
.ev-cal-tooltip .ev-type-workshop  {
    background: rgba(5,150,105,.25);
    color: #6ee7b7;
}
.ev-cal-tooltip .ev-type-konferans {
    background: rgba(59,130,246,.25);
    color: #93c5fd;
}
.ev-cal-tooltip .ev-type-default   {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
}

.ev-tip-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ev-tip-meta {
    display: flex;
    gap: 8px;
    font-size: 10px;
    color: rgba(255,255,255,.45);
}
.ev-tip-meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}
.ev-tip-meta i    {
    font-size: 10px;
}

/* ── Edge-case: tooltip near right/left wall ──
   If cell is in the last 2 cols, flip tooltip left.
   Applied via JS if needed — classes below handle it. ── */
.ev-cal-tooltip.ev-tip-left {
    left: auto;
    right: 0;
    transform: none;
}
.ev-cal-tooltip.ev-tip-left::after {
    left: auto;
    right: 12px;
    transform: none;
}
.ev-cal-tooltip.ev-tip-right {
    left: 0;
    transform: none;
}
.ev-cal-tooltip.ev-tip-right::after {
    left: 12px;
    transform: none;
}
.ev-section.ev-s-upcoming {
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 10px;
}
.ev-upc-item:hover span.ev-type-pill ,.ev-upc-item:hover .ev-status-pill {
    border-color: var(--ev-primary);
}
/* ═══════════════════════════════════════════════════════
   EVENT FORM MODAL — event-form.css
   Prefix: ev-form-*, ev-loc-*, ev-toggle-*, ev-map-*
   ═══════════════════════════════════════════════════════ */

/* ── Modal sizing ── */
.ev-form-modal .modal-dialog,
.form-modal.ev-form-modal .modal-dialog {
    max-width: 860px;
    width: 96%;
}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.ev-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 1px solid #e8ecf4;
    background: #fafbfd;
}
.ev-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.ev-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg,#4361ee,#7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.ev-modal-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #e8ecf4;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9aa5bd;
    font-size: 14px;
    transition: all .15s;
}
.ev-modal-close-btn:hover {
    background: #fee2e2;
    border-color: #dc2626;
    color: #dc2626;
}

/* ════════════════════════════════════════
   FORM BODY
════════════════════════════════════════ */
.project-inner-start-build-wrap.p-a {
    padding: 20px 24px;
}

.ev-form-body {
}

/* Two columns — add a subtle right divider on left col */
.ev-form-col {
}
.ev-form-col + .ev-form-col {
    border-left: 1px solid #f0f3f9;
    padding-left: 13px;
}

/* ════════════════════════════════════════
   SECTIONS
════════════════════════════════════════ */
.ev-form-section {
    background: #fff;
    border: 1px solid #e8ecf4;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.ev-form-section:last-child {
    margin-bottom: 0;
}
.ev-content-col {
    width: 100%;
    min-width: calc(100% - 42px);
}

.ev-form-section-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #4361ee;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f3f9;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ev-form-section-title i {
    font-size: 14px;
}

/* Tighten form-legent-syl labels inside sections */
.ev-form-section .form-legent-syl legend,
.ev-form-section .form-legent-syl label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7a99;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 5px;
}
.ev-form-section .form-legent-syl {
    margin-bottom: 12px;
}
.ev-form-section .form-legent-syl.m-b-0 {
    margin-bottom: 0;
}
.ev-form-section .form-legent-syl.m-b-xs {
    margin-bottom: 6px;
}
.ev-form-section .form-legent-syl.m-b-sm {
    margin-bottom: 10px;
}

/* ════════════════════════════════════════
   INPUT WITH ICON
════════════════════════════════════════ */
.ev-input-icon-wrap {
    position: relative;
}
.ev-input-icon-wrap > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa5bd;
    font-size: 13px;
    pointer-events: none;
    z-index: 1;
}
.ev-input-icon-wrap > input,
.ev-input-icon-wrap > .form-control {
    padding-left: 32px !important;
}

/* ════════════════════════════════════════
   TOGGLE ROW
════════════════════════════════════════ */
.ev-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9fafc;
    border: 1px solid #e8ecf4;
    border-radius: 8px;
    margin-bottom: 10px;
}
.ev-toggle-row:last-child {
    margin-bottom: 0;
}
.ev-toggle-info {
    flex: 1;
}
.ev-toggle-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #1a1f36;
}
.ev-toggle-sub {
    font-size: 11px;
    color: #9aa5bd;
    margin-top: 2px;
}

/* ════════════════════════════════════════
   LOCATION TYPE TABS
════════════════════════════════════════ */
.ev-loc-tabs {
    display: flex;
    gap: 6px;
    background: #f4f6fb;
    border-radius: 8px;
    padding: 4px;
}
.ev-loc-tab {
    flex: 1;
    text-align: center;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7a99;
    cursor: pointer;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.ev-loc-tab i {
    font-size: 14px;
}
.ev-loc-tab:hover {
    background: #fff;
    color: #4361ee;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.ev-loc-tab-active {
    background: #fff;
    color: #4361ee;
    box-shadow: 0 2px 8px rgba(67,97,238,.15);
}

/* ════════════════════════════════════════
   LOCATION PANEL
════════════════════════════════════════ */
.ev-location-panel {
    margin-top: 10px;
}

.ev-loc-block {
    animation: evLocFadeIn .2s ease;
}
@keyframes evLocFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Type badge */
.ev-loc-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
}
.ev-loc-badge-online  {
    background: #dbeafe;
    color: #3b82f6;
}
.ev-loc-badge-f2f     {
    background: #d1fae5;
    color: #059669;
}
.ev-loc-badge-hybrid  {
    background: #ede9fe;
    color: #7c3aed;
}

/* Hint text below inputs */
.ev-loc-hint {
    font-size: 11px;
    color: #9aa5bd;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: 5px;
    line-height: 1.4;
}
.ev-loc-hint i {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Map search row ── */
.ev-map-search-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.ev-map-search-row .ev-input-icon-wrap {
    flex: 1;
}

.ev-map-find-btn {
    padding: 13px 14px;
    border-radius: 8px;
    border: 1px solid #e8ecf4;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #4361ee;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all .15s;
    flex-shrink: 0;
}
.ev-map-find-btn:hover {
    background: #4361ee;
    color: #fff;
    border-color: #4361ee;
}

/* ── Map container ── */
.ev-map-container {
    width: 100%;
    height: 220px;
    border-radius: 8px;
    border: 1px solid #e8ecf4;
    overflow: hidden;
    background: #f4f6fb;
    position: relative;
}

.ev-map-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #9aa5bd;
    gap: 8px;
}
.ev-map-placeholder i {
    font-size: 32px;
    opacity: .3;
}
.ev-map-placeholder p {
    font-size: 12px;
    margin: 0;
    text-align: center;
    max-width: 200px;
}

.ev-map-no-lib {
    background: #fffbeb;
}
.ev-map-no-lib i {
    color: #f59e0b;
    opacity: .7;
}


.ev-form-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid #f0f3f9;
    background: #fafbfd;
    margin-top: 12px;
}

@keyframes evFormSpin {
    to {
        transform: rotate(360deg);
    }
}
.ev-form-modal .icofont-spinner-alt-2 {
    display: inline-block;
    animation: evFormSpin .7s linear infinite;
}
.ev-form-modal input[type="datetime-local"],
.ev-form-modal input[type="number"] {
    width: 100%;
}
.ev-form-body .form-legent-syl.fls-select-drop .col-form-label {
    top: 9px;
}
/* RRULE Builder */
.ev-rrule-builder {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}
.ev-rrule-days-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 100%;
    margin-bottom: 10px;
}
.ev-rrule-day-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid #ced4da;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    user-select: none;
    background: #fff;
    margin: 0;
    width: calc(100% / 7.6);
    justify-content: center;
}
.ev-rrule-day-btn input[type="checkbox"] {
    display: none;
}
.ev-rrule-day-btn:has(input:checked) {
    background: #3d6cb9;
    color: #fff;
    border-color: #3d6cb9;
}
.ev-rrule-preview-wrap {
    padding: 6px 10px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    font-size: 12px;
}
.ev-rrule-preview-code {
    color: #3d6cb9;
    font-family: monospace;
    word-break: break-all;
}
.ev-rrule-end-detail {
    display: none;
}
/* ═══════════════════════════════════════════════════════
   Event Category Manager — evc-*
   Design: Refined Split Panel / Editorial Minimal
═══════════════════════════════════════════════════════ */

/* ── Modal override ── */
.evc-modal .modal-dialog {
    max-width: 1000px;
    width: 96vw;
}
.evc-modal .project-themes-wrapper {
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}

/* ── Root ── */
.evc-root {
    display: flex;
    flex-direction: column;
    min-height: 560px;
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    background: #f8f7f4;
    border-radius: 14px;
    overflow: hidden;
}

/* ── Header ── */
.evc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 28px;
    background: #fff;
    border-bottom: 1px solid #ede9e1;
}
.evc-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.evc-header-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.3px;
}
.evc-header-sub {
    font-size: 12px;
    color: #888;
    margin: 2px 0 0;
}
.evc-close-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: #f0ede7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    transition: all .18s;
    flex-shrink: 0;
}
.evc-close-btn:hover {
    background: #e8e0d5;
    color: #1a1a1a;
    transform: scale(1.05);
}

/* ── Body: split panel ── */
.evc-body {
    display: grid;
    grid-template-columns: 340px 1fr;
    flex: 1;
    min-height: 0;
}

/* ── Form Panel ── */
.evc-form-panel {
    background: #fff;
    border-right: 1px solid #ede9e1;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    transition: background .25s;
}
.evc-form-panel.evc-edit-active {
    background: #fffdf8;
    border-right-color: #d4a843;
}

.evc-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}
.evc-form-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.2px;
}
.evc-form-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    background: #e8f0f8;
    color: #2c5f8a;
    transition: all .2s;
}
.evc-edit-active .evc-form-badge {
    background: #fef3d8;
    color: #a07010;
}

.evc-error {
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 13px;
}

/* ── Thumbnail ── */
.evc-thumb-section {
    margin-bottom: 22px;
}
.evc-thumb-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}
.evc-thumb-frame {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #ede9e1;
    transition: border-color .2s;
}
.evc-thumb-wrap:hover .evc-thumb-frame {
    border-color: #2c5f8a;
}
.evc-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.evc-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,63,96,0.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    font-size: 11px;
    opacity: 0;
    transition: opacity .2s;
}
.evc-thumb-frame:hover .evc-thumb-overlay {
    opacity: 1;
}
.evc-thumb-overlay i {
    font-size: 16px;
}
.evc-thumb-hint {
    font-size: 11px;
    color: #aaa;
    margin: 0;
    line-height: 1.4;
}

/* ── Fields ── */
.evc-field-group {
    margin-bottom: 16px;
}
.evc-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #555;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.evc-label-req {
    display: flex;
    align-items: center;
    gap: 2px;
}
.evc-req-dot {
    color: #e05353;
    font-size: 14px;
    line-height: 1;
    margin-top: -2px;
}
.evc-input,
.evc-textarea,
.evc-select {
    width: 100%;
    border: 1.5px solid #e2ddd5;
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 13.5px;
    color: #1a1a1a;
    background: #faf9f7;
    transition: border-color .18s, box-shadow .18s;
    outline: none;
    font-family: inherit;
}
.evc-input:focus,
.evc-textarea:focus {
    border-color: #2c5f8a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(44,95,138,.1);
}
.evc-textarea {
    resize: vertical;
    min-height: 80px;
}
.evc-drop-btn {
    border: 1.5px solid #e2ddd5 !important;
    border-radius: 9px !important;
    background: #faf9f7 !important;
    padding: 9px 13px !important;
    font-size: 13.5px !important;
    color: #1a1a1a !important;
}

/* ── Form Actions ── */
.evc-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid #ede9e1;
}
.evc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .18s;
    font-family: inherit;
    white-space: nowrap;
}
.evc-btn-primary {
    background: #2f3fad;
    color: #fff;
    box-shadow: 0 3px 10px rgba(44,95,138,.25);
    flex: 1;
    justify-content: center;
}
.evc-btn-primary:hover:not(:disabled) {
    background: #1a3f60;
    box-shadow: 0 4px 16px rgba(44,95,138,.35);
    transform: translateY(-1px);
}
.evc-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.evc-btn-ghost {
    background: #f0ede7;
    color: #666;
}
.evc-btn-ghost:hover {
    background: #e8e0d5;
    color: #333;
}

/* ── List Panel ── */
.evc-list-panel {
    display: flex;
    flex-direction: column;
    background: #f8f7f4;
    min-height: 0;
}

.evc-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 14px;
    gap: 12px;
    background: #f8f7f4;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #ede9e1;
}
.evc-list-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.evc-list-label {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
}
.evc-list-count {
    font-size: 11px;
    font-weight: 700;
    background: #2f3fad;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: .2px;
}

/* Search */
.evc-search-wrap {
    position: relative;
    flex: 1;
    max-width: 220px;
}
.evc-search-ico {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: 13px;
}
.evc-search-input {
    width: 100%;
    padding: 7px 11px 7px 32px;
    border: 1.5px solid #e2ddd5;
    border-radius: 8px;
    font-size: 12.5px;
    background: #fff;
    color: #1a1a1a;
    outline: none;
    font-family: inherit;
    transition: border-color .18s;
}
.evc-search-input:focus {
    border-color: #2c5f8a;
}

/* ── List content ── */
.evc-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
}

/* Loading */
.evc-list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 0;
    color: #aaa;
    font-size: 13px;
}
.evc-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e2ddd5;
    border-top-color: #2c5f8a;
    border-radius: 50%;
    animation: evcSpin .7s linear infinite;
}
@keyframes evcSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty */
.evc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #bbb;
    text-align: center;
}
.evc-empty-ico {
    width: 56px;
    height: 56px;
    background: #ede9e1;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #c5bfb5;
    margin-bottom: 14px;
}
.evc-empty p {
    font-size: 13px;
    color: #bbb;
    margin: 0;
}

/* ── Category Card ── */
@keyframes evcCardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}

.evc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1.5px solid #ede9e1;
    border-radius: 11px;
    padding: 10px 12px;
    cursor: default;
    transition: border-color .18s, box-shadow .18s, transform .18s;
    animation: evcCardIn .25s ease both;
}
.evc-card:hover {
    border-color: #d4cfc6;
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
    transform: translateY(-1px);
}
.evc-card-editing {
    border-color: #d4a843;
    background: #fffdf5;
    box-shadow: 0 0 0 3px rgba(212,168,67,.15);
}

/* Card left — avatar/thumb */
.evc-card-left {
    flex-shrink: 0;
}
.evc-card-thumb,
.evc-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.evc-card-thumb {
    border: 1.5px solid #ede9e1;
}
.evc-card-avatar {
    background: linear-gradient(135deg,#4361ee,#7c3aed);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.5px;
    border: none;
}

/* Card body */
.evc-card-body {
    flex: 1;
    min-width: 0;
}
.evc-card-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.evc-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.evc-card-parent {
    font-size: 11px;
    color: #2c5f8a;
    background: #e8f0f8;
    padding: 2px 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.evc-card-root {
    font-size: 11px;
    color: #888;
    background: #f0ede7;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}
.evc-card-desc {
    font-size: 12px;
    color: #888;
    margin-bottom: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.evc-card-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.evc-meta-item {
    font-size: 11px;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 4px;
}
.evc-meta-item i {
    font-size: 11px;
}

/* Card actions */
.evc-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .18s;
}
.evc-card:hover .evc-card-actions,
.evc-card-editing .evc-card-actions {
    opacity: 1;
}
.evc-act {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    cursor: pointer;
    transition: all .15s;
}
.evc-act-edit {
    background: #e9e8f8;
    color: #2c338a;
}
.evc-act-edit:hover {
    background: #342c8a;
    color: #fff;
    transform: scale(1.05);
}
.evc-act-del {
    background: #fce8e8;
    color: #c94040;
}
.evc-act-del:hover {
    background: #c94040;
    color: #fff;
    transform: scale(1.05);
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .evc-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .evc-form-panel {
        border-right: none;
        border-bottom: 1px solid #ede9e1;
    }
    .evc-modal .modal-dialog {
        max-width: 100%;
        margin: 8px;
    }
}
/* ═══════════════════════════════════════════════════════
   Speakers Management — spk-* / spkd-* / spka-*
   Design: Editorial Grid — Slate + Amber
═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   PAGE WRAP
──────────────────────────────────────────────────── */
.spk-page-wrap {
    padding: 0 0 40px;
}

.spk-count-badge {
    background: #e4e6ff;
    color: #4361ee;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: .2px;
    white-space: nowrap;
    display: flex;
    height: 35px;
    align-items: center;
    margin-left: 7px;
}

/* ────────────────────────────────────────────────────
   SHARED BUTTONS
──────────────────────────────────────────────────── */
.spk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .18s;
    white-space: nowrap;
}
.spk-btn-primary {
    background: #3451d1;
    color: #fff;
    box-shadow: 0 3px 10px rgba(30,58,95,.2);
}
.spk-btn-primary:hover:not(:disabled) {
    background: #152b47;
    box-shadow: 0 4px 14px rgba(30,58,95,.3);
    transform: translateY(-1px);
}
.spk-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.spk-btn-ghost {
    background: #f0ede7;
    color: #555;
}
.spk-btn-ghost:hover {
    background: #e5e0d8;
    color: #222;
}

/* ────────────────────────────────────────────────────
   LOADING / EMPTY
──────────────────────────────────────────────────── */
.spk-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 80px 0;
    color: #aaa;
    font-size: 13px;
    grid-column: 1 / -1;
}
.spk-spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid #e2ddd5;
    border-top-color: #3451d1;
    border-radius: 50%;
    animation: spkSpin .7s linear infinite;
}
@keyframes spkSpin {
    to {
        transform: rotate(360deg);
    }
}

.spk-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #bbb;
    text-align: center;
}
.spk-empty-icon {
    width: 64px;
    height: 64px;
    background: #ede9e1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #c5bfb5;
    margin-bottom: 16px;
}
.spk-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #888;
    margin-bottom: 4px;
}
.spk-empty-sub   {
    font-size: 13px;
    color: #bbb;
}

/* ────────────────────────────────────────────────────
   STATUS PILLS  (shared with instructor page)
──────────────────────────────────────────────────── */
.spk-status-pill {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: .3px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ────────────────────────────────────────────────────
   GRID
──────────────────────────────────────────────────── */
.spk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* ────────────────────────────────────────────────────
   CARD
──────────────────────────────────────────────────── */
@keyframes spkCardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to   {
        opacity: 1;
        transform: translateY(0);
    }
}

.spk-card {
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    animation: spkCardIn .3s ease both;
    display: flex;
    flex-direction: column;
}
.spk-card:hover {
    border-color: #8984ed;
    box-shadow: 0 8px 28px rgba(45, 30, 95, 0.12);
    transform: translateY(-3px);
}

/* Cover / Avatar area */
.spk-card-cover {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f6f6;
    position: relative;
    overflow: hidden;
}
.spk-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.09) 100%);
}
.spk-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.3);
    position: relative;
    z-index: 1;
}
.spk-avatar-text {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    border: 3px solid rgba(255,255,255,.25);
    position: relative;
    z-index: 1;
    letter-spacing: -1px;
}

/* Card body */
.spk-card-body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: calc(100% - 120px);
    justify-content: space-between;
}
.spk-card-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -.3px;
}
.spk-card-title {
    font-size: 12px;
    color: #e8910a;
    font-weight: 600;
    letter-spacing: .1px;
}
.spk-card-bio {
    font-size: 12.5px;
    color: #888;
    line-height: 1.5;
    margin: 2px 0 0;
    flex: 1;
}
.spk-card-socials {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.spk-social-ico {
    width: 28px;
    height: 28px;
    background: #f0ede7;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.spk-social-ico:hover {
    background: #4361ee;
    color: #fff;
}

.spk-card-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #f0ede7;
}
.spk-detail-btn {
    font-size: 12px;
    font-weight: 600;
    color: #3b4cca;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap .15s;
    font-family: inherit;
}
.spk-card:hover .spk-detail-btn {
    gap: 7px;
}

/* ────────────────────────────────────────────────────
   DETAIL MODAL  spkd-*
──────────────────────────────────────────────────── */
.spkd-wizard-modal .modal-dialog {
    max-width: 860px;
    width: 96vw;
}
.spkd-wizard-modal .project-themes-wrapper {
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}

.spkd-modal {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    background: #f8f7f4;
    border-radius: 14px;
    overflow: hidden;
}

/* Header */
.spkd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #fafafa;
    color: #322e86;
    border-bottom: 1px solid #ddd;
}
.spkd-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.7);
    font-size: 13px;
}
.spkd-avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.3);
    flex-shrink: 0;
}
.spkd-avatar-text {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, .25);
    flex-shrink: 0;
    letter-spacing: -1px;
}
.spkd-header-info {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.spkd-header-name  {
    font-size: 18px;
    font-weight: 700;
    color: #342f92;
    letter-spacing: -.3px;
}
.spkd-header-title {
    font-size: 12.5px;
    color: #7a7a7a;
}

/* Tabs */
.spkd-tabs {
    display: flex;
    background: #fff;
    border-bottom: 1.5px solid #e8e3db;
    padding: 0 24px;
    gap: 2px;
}
.spkd-tab {
    padding: 13px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    margin-bottom: -1.5px;
    font-family: inherit;
    transition: color .15s, border-color .15s;
}
.spkd-tab:hover {
    color: #3451d1;
}
.spkd-tab-active {
    color: #3451d1;
    border-bottom-color: #3451d1;
}

/* Body */
.spkd-body {
    flex: 1;
    overflow-y: auto;
    background: #f6f6f6;
}
.spkd-panel {
    display: none;
    padding: 28px;
}
.spkd-panel-active {
    display: block;
}

/* Footer */
.spkd-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px;
    background: #fff;
    border-top: 1px solid #e8e3db;
}

/* Profile layout */
.spkd-profile-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
}
.spkd-profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.spkd-profile-avatar-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e8e3db;
    flex-shrink: 0;
}
.spkd-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.spkd-profile-avatar-ini {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
}
.spkd-profile-name  {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.spkd-profile-title {
    font-size: 12px;
    color: #e8910a;
    font-weight: 600;
}
.spkd-profile-social-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
}
.spkd-social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f0ede7;
    border-radius: 8px;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    transition: background .15s, color .15s;
    text-transform: capitalize;
}
.spkd-social-link:hover {
    background: #3451d1;
    color: #fff;
}
.spkd-profile-no-social {
    font-size: 12px;
    color: #bbb;
}

/* Sections */

.spkd-section-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #555;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.spkd-bio-text {
    font-size: 13.5px;
    color: #444;
    line-height: 1.65;
}
.spkd-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.spkd-contact-item label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 3px;
}
.spkd-contact-item span  {
    font-size: 13px;
    color: #333;
}
.spkd-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.spkd-meta-chip {
    font-size: 11.5px;
    color: #888;
    background: #f0ede7;
    padding: 4px 10px;
    border-radius: 6px;
}
.spkd-meta-chip strong {
    color: #333;
}
/* ═══════════════════════════════════════════════════════
   SPKD Body — Profile / Network / Edit Panels
═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   BODY CONTAINER
──────────────────────────────────────────────────── */


.spkd-panel {
    display: none;
    padding: 16px;
}
.spkd-panel-active {
    display: block;
}

/* ════════════════════════════════════════════════════
   PROFILE PANEL
════════════════════════════════════════════════════ */
.spkd-profile-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 28px;
    align-items: start;
}

/* ── Left col ── */
.spkd-profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    position: sticky;
    top: 0;
}

.spkd-profile-avatar-box {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e8e3db;
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    flex-shrink: 0;
    margin-bottom: 2px;
}
.spkd-profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.spkd-profile-avatar-ini {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1.5px;
}

.spkd-profile-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -.3px;
    line-height: 1.3;
}
.spkd-profile-title {
    font-size: 12px;
    font-weight: 600;
    color: #d97c0a;
    letter-spacing: .1px;
    background: #fef6e7;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #f5d98a;
    display: inline-block;
}

/* Social list in profile left */

.spkd-social-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    background: #fff;
    border: 1.5px solid #e8e3db;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
    text-transform: capitalize;
}
.spkd-social-link i {
    font-size: 15px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.spkd-social-link:hover {
    background: #1e3a5f;
    border-color: #1e3a5f;
    color: #fff;
}
.spkd-social-link:hover i {
    color: #fff !important;
}

.spkd-profile-no-social {
    font-size: 12px;
    color: #bbb;
    background: #faf9f6;
    border: 1.5px dashed #e0dcd4;
    border-radius: 9px;
    padding: 12px;
    text-align: center;
    width: 100%;
    margin-top: 6px;
}

/* ── Right col ── */
.spkd-profile-right {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.spkd-section {
    background: #fff;
    border: 1.5px solid #e8e3db;
    border-radius: 12px;
    padding: 18px 20px;
}
.spkd-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.spkd-section-title i {
    font-size: 14px;
    color: #1e3a5f;
}

.spkd-bio-text {
    font-size: 13.5px;
    color: #444;
    line-height: 1.7;
}

.spkd-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.spkd-contact-item label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #b0a898;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.spkd-contact-item span {
    font-size: 13.5px;
    color: #222;
    font-weight: 500;
}

.spkd-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.spkd-meta-chip {
    font-size: 12px;
    color: #777;
    background: #fff;
    border: 1.5px solid #e8e3db;
    padding: 5px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.spkd-meta-chip strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* ════════════════════════════════════════════════════
   NETWORK PANEL
════════════════════════════════════════════════════ */
/* Add row */
.spkd-net-add-row {
    background: #fff;
    border: 1.5px solid #e8e3db;
    border-radius: 12px;
    padding: 16px 20px;
}
.spkd-net-add-row .input-group {
    margin-bottom: 0;
}
.spkd-net-add-row .btn.white.dropdown-toggle {
    border: 1.5px solid #e2ddd5 !important;
    border-radius: 8px 0 0 8px !important;
    font-size: 13px;
    height: 38px;
    min-width: 140px;
    background: #faf9f7 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.spkd-net-add-row .form-control.no-radius {
    border: 1.5px solid #e2ddd5;
    border-left: none;
    border-radius: 0 8px 8px 0 !important;
    font-size: 13px;
    height: 38px;
    background: #faf9f7;
}
.spkd-net-add-row .form-control.no-radius:focus {
    border-color: #1e3a5f;
    background: #fff;
    outline: none;
    box-shadow: none;
}
.spkd-net-add-btn {
    padding: 9px 22px !important;
}

/* Section label */
.spkd-net-wrap > .no-border {
    font-size: 11px !important;
    letter-spacing: .5px;
    color: #888 !important;
    border-left-color: #1e3a5f !important;
    margin-left: 0;
}

/* Network list */
.spkd-net-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spkd-net-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 28px 0;
    background: #fff;
    border: 1.5px dashed #e8e3db;
    border-radius: 10px;
}

.spkd-net-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1.5px solid #e8e3db;
    border-radius: 10px;
    padding: 10px 14px 10px 12px;
    gap: 12px;
    transition: border-color .15s, box-shadow .15s;
}
.spkd-net-row:hover {
    border-color: #c5bfb5;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.spkd-net-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
/* Social colored btn inside row */
.spkd-net-row-left .btn-social {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.spkd-net-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.spkd-net-key {
    font-size: 12.5px;
    font-weight: 700;
    color: #333;
    line-height: 1;
}
.spkd-net-url {
    font-size: 12px;
    color: #1e3a5f;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 380px;
    display: block;
    opacity: .8;
}
.spkd-net-url:hover {
    text-decoration: underline;
    opacity: 1;
}

.spkd-net-del {
    width: 30px;
    height: 30px;
    border: none;
    background: #fce8e8;
    color: #c94040;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s, color .15s, transform .12s;
    flex-shrink: 0;
}
.spkd-net-del:hover {
    background: #c94040;
    color: #fff;
    transform: scale(1.05);
}

.spkd-net-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* ════════════════════════════════════════════════════
   EDIT PANEL
════════════════════════════════════════════════════ */
.spkd-edit-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 28px;
    align-items: start;
}

.spkd-edit-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
    gap: 10px;
}
.spkd-edit-avatar-col .avatar-place-holder-wrap {
    margin: 0 !important;
}
.spkd-edit-avatar-col .avatar-place-holder {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    border: 2px solid #e8e3db;
}
.spkd-edit-avatar-col .avarar-upload-btn {
    margin-top: 8px;
    background: #f0ede7;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.spkd-edit-avatar-col .avarar-upload-btn:hover {
    background: #1e3a5f;
    color: #fff;
}

.spkd-edit-fields-col .form-legent-syl .col-form-label {
    font-size: 11px;
    font-weight: 700;
    color: #777;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding-bottom: 5px;
}
.spkd-edit-fields-col .form-control,
.spkd-edit-fields-col textarea.form-control {
    border: 1.5px solid #e2ddd5;
    border-radius: 9px;
    padding: 9px 13px;
    font-size: 13.5px;
    background: #faf9f7;
    color: #1a1a1a;
    transition: border-color .18s, box-shadow .18s;
}
.spkd-edit-fields-col .form-control:focus,
.spkd-edit-fields-col textarea.form-control:focus {
    border-color: #1e3a5f;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30,58,95,.08);
    outline: none;
}
.spkd-edit-fields-col textarea.form-control {
    resize: vertical;
    min-height: 90px;
}

/* Dropdown override inside edit panel */
.spkd-edit-fields-col .range-box-head-cus .btn {
    border: 1.5px solid #e2ddd5 !important;
    border-radius: 9px !important;
    background: #faf9f7 !important;
    font-size: 13.5px;
    height: auto;
    padding: 9px 13px !important;
}

/* ────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .spkd-profile-layout {
        grid-template-columns: 1fr;
    }
    .spkd-edit-layout {
        grid-template-columns: 1fr;
    }
    .spkd-contact-grid {
        grid-template-columns: 1fr;
    }
    .spkd-panel {
        padding: 16px;
    }
}
/* Edit layout */
.spkd-edit-layout {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 28px;
}
.spkd-edit-fields-col {
}

/* ────────────────────────────────────────────────────
   NETWORK PANEL  spkd-net-*
──────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────
   NETWORK PANEL  spkd-net-*
──────────────────────────────────────────────────── */
.spkd-net-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.spkd-net-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.spkd-net-empty {
    text-align: center;
    color: #bbb;
    font-size: 13px;
    padding: 30px 0;
    background: #fff;
    border: 1.5px dashed #e8e3db;
    border-radius: 10px;
}
.spkd-net-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1.5px solid #e8e3db;
    border-radius: 10px;
    padding: 10px 14px;
    gap: 12px;
    transition: border-color .15s;
}
.spkd-net-row:hover {
    border-color: #c8c0b5;
}
.spkd-net-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.spkd-net-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}
.spkd-net-key  {
    font-size: 12px;
    font-weight: 700;
    color: #444;
}
.spkd-net-url  {
    font-size: 12px;
    color: #1e3a5f;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 340px;
    display: block;
}
.spkd-net-url:hover {
    text-decoration: underline;
}
.spkd-net-del {
    width: 30px;
    height: 30px;
    border: none;
    background: #fce8e8;
    color: #c94040;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.spkd-net-del:hover {
    background: #c94040;
    color: #fff;
}
.spkd-net-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

/* Add row — dropdown pattern */
.spkd-net-add-row {
    background: #fff;
    border: 1.5px solid #e8e3db;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap:10px;
}
.spkd-net-add-row .input-group {
    margin-bottom: 0;
}

.spkd-net-add-row input.form-control {
    border-radius: 0 6px 6px 0 !important;
}
/* ────────────────────────────────────────────────────
   ADD/EDIT MODAL  spka-*
──────────────────────────────────────────────────── */
.spka-modal .modal-dialog {
    max-width: 640px;
    width: 96vw;
}
.spka-modal .project-themes-wrapper {
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}
.spka-root {
    display: flex;
    flex-direction: column;
    background: #f8f7f4;
    border-radius: 14px;
    overflow: hidden;
}
.spka-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 28px;
    background: #fff;
    border-bottom: 1px solid #e8e3db;
}
.spka-header-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #3451d1 0%, #2d5a8e 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
    flex-shrink: 0;
}
.spka-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.spka-header-sub   {
    font-size: 12px;
    color: #999;
    margin: 2px 0 0;
}
.spka-close-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: none;
    background: #f0ede7;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    font-size: 13px;
    transition: all .15s;
}
.spka-close-btn:hover {
    background: #e0d8ce;
    color: #1a1a1a;
}
.spka-body   {
    padding: 24px 28px;
}
.spka-error  {
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 13px;
}
.spka-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 28px;
    background: #fff;
    border-top: 1px solid #e8e3db;
}

/* ────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .spk-grid {
        grid-template-columns: 1fr;
    }
    .spkd-profile-layout {
        grid-template-columns: 1fr;
    }
    .spkd-edit-layout {
        grid-template-columns: 1fr;
    }
    .spkd-contact-grid {
        grid-template-columns: 1fr;
    }
    .spkd-wizard-modal .modal-dialog,
    .spka-modal .modal-dialog {
        max-width: 100%;
        margin: 8px;
    }
}
/* ═══════════════════════════════════════════════════════
   Add Speaker Modal — asp-*
   Aynı ev-form-* dil ailesi, yeni prefix
═══════════════════════════════════════════════════════ */

/* ── Modal boyutu ── */
.asp-modal .modal-dialog {
    max-width: 820px;
    width: 96vw;
}
.asp-modal .project-themes-wrapper {
    border-radius: 14px;
    overflow: hidden;
}



/* ── Form wrap ── */
.asp-form-wrap {
    position: relative;
}



/* ── Section kartları ── */
.asp-form-section {
    background: #fff;
    border: 1.5px solid #eaeaea;
    border-radius: 8px;
    padding: 18px 20px 20px;
    margin-bottom: 12px;
}
.asp-form-section:last-child {
    margin-bottom: 0;
}

.asp-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #4361ee;
    letter-spacing: .7px;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0ede7;
}
.asp-section-title i {
    font-size: 14px;
    color: #4361ee;
}

/* ── Avatar section ── */
.asp-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.asp-avatar-frame {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #e8e3db;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
    transition: border-color .2s;
    flex-shrink: 0;
}
.asp-avatar-frame:hover {
    border-color: #1e3a5f;
}
.asp-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.asp-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(30,58,95,.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .2s;
}
.asp-avatar-frame:hover .asp-avatar-overlay {
    opacity: 1;
}
.asp-avatar-overlay i {
    font-size: 18px;
}

.asp-avatar-hint {
    font-size: 11px;
    color: #bbb;
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

/* ── Input icon wrap override (mevcut ev- class'ı, ek stil) ── */
.asp-form-section .ev-input-icon-wrap {
    border-radius: 4px;
    overflow: hidden;
    border: 1.5px solid #e2ddd5;
    transition: border-color .18s;
}
.asp-form-section .ev-input-icon-wrap:focus-within {
    border-color: #4361ee;
    box-shadow: 0 0 0 3px rgba(30,58,95,.08);
}
.asp-form-section .ev-input-icon-wrap .form-control,
.asp-form-section .ev-input-icon-wrap input {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
    font-size: 13.5px;
    padding: 9px 12px;
}
.asp-form-section .ev-input-icon-wrap .form-control:focus,
.asp-form-section .ev-input-icon-wrap input:focus {
    background: #fff;
    outline: none;
}
.asp-form-section .ev-input-icon-wrap i {
    color: #c7c7c7;
    font-size: 14px;
    padding: 0 4px 0 0;
    display: flex;
    align-items: center;
    background: #ffffff;
    border-right: 1px solid #e9e9e9;
    transition: color .15s;
}
.asp-form-section .ev-input-icon-wrap:focus-within i {
    color: #4361ee;
    background: #fff;
}

/* textarea override */
.asp-form-section textarea.form-control {
    border: 1.5px solid #e2ddd5 !important;
    border-radius: 4px !important;
    padding: 9px 13px !important;
    font-size: 13.5px;
    background: #fff;
    color: #1a1a1a;
    resize: vertical;
    min-height: 100px;
    transition: border-color .18s, box-shadow .18s;
    box-shadow: none !important;
}
.asp-form-section textarea.form-control:focus {
    border-color: #4361ee !important;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30,58,95,.08) !important;
    outline: none;
}

/* status dropdown override */
.asp-form-section .range-box-head-cus .btn {
    border: 1.5px solid #e2ddd5 !important;
    border-radius: 4px !important;
    background: #fff !important;
    font-size: 13.5px;
    padding: 9px 13px !important;
    height: auto !important;
    transition: border-color .18s;
    margin-top: 0;
}
.asp-form-section .form-legent-syl.fls-select-drop .col-form-label {
    top: 4px;
}
/* form label override inside asp */
.asp-form-section .form-legent-syl .col-form-label {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding-bottom: 5px;
}

/* ── Responsive ── */
@media (max-width: 680px) {
    .asp-modal .modal-dialog {
        max-width: 100%;
        margin: 8px;
    }
    .asp-avatar-frame {
        width: 80px;
        height: 80px;
    }
}
/* ═══════════════════════════════════════════════════════
   Event Detail — evd-*
   Indigo/Blue palette — no CSS variables
═══════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────
   PAGE SHELL
──────────────────────────────────────────────────── */
.evd-page {
    background: #f9fafb;
    min-height: 100vh;
    padding-bottom: 48px;
}
.evd-page .center-block {
    padding-top: 0;
}

/* ────────────────────────────────────────────────────
   HERO HEADER
──────────────────────────────────────────────────── */
.evd-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px 10px 0 0;
    padding: 24px 28px;
    margin-bottom: 0;
    margin-top: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.evd-hero-left {
    flex: 1;
    min-width: 0;
}
.evd-hero-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #4f46e5;
    background: #eef2ff;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}
.evd-hero-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.3px;
    line-height: 1.35;
    margin: 0 0 12px;
}
.evd-hero-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 12px;
}
.evd-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #6b7280;
}
.evd-hero-meta-item i {
    font-size: 13px;
    color: #4f46e5;
}
.evd-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.evd-tag {
    font-size: 11.5px;
    font-weight: 600;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 2px 9px;
    border-radius: 5px;
    letter-spacing: .1px;
}
.evd-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
.evd-hero-id {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: .3px;
    font-family: monospace;
    background: #f9fafb;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
}

/* ── Status pills ── */
.evd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: .2px;
    white-space: nowrap;
}
.evd-st-active  {
    background: #dcfce7;
    color: #16a34a;
}
.evd-st-passive {
    background: #fee2e2;
    color: #dc2626;
}
.evd-st-draft   {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}
.evd-st-pending {
    background: #fef9c3;
    color: #ca8a04;
}

.evd-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(79,70,229,.3);
}
.evd-edit-btn:hover {
    background: #4338ca;
    box-shadow: 0 3px 10px rgba(79,70,229,.4);
}

/* ────────────────────────────────────────────────────
   TAB BAR
──────────────────────────────────────────────────── */
.evd-tab-bar {
    display: flex;
    align-items: center;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 0;
    gap: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.evd-tab-bar::-webkit-scrollbar {
    display: none;
}

.evd-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b7280;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s, background .15s;
    border-radius: 0;
}
.evd-tab i {
    font-size: 18px;
    color: #9ca3af;
    transition: color .15s;
}
.evd-tab:hover {
    color: #4f46e5;
    background: #eef2ff;
}
.evd-tab:hover i {
    color: #4f46e5;
}
.evd-tab-active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
    background: #eef2ff;
}
.evd-tab-active i {
    color: #4f46e5;
}

/* ────────────────────────────────────────────────────
   PANEL WRAP
──────────────────────────────────────────────────── */
.evd-panel-wrap {
    margin-top: 20px;
}

/* ────────────────────────────────────────────────────
   OVERVIEW LAYOUT
──────────────────────────────────────────────────── */
.evd-ov-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
}
.evd-ov-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Cards ── */
.evd-ov-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.evd-ov-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}
.evd-ov-card-title i {
    font-size: 14px;
    color: #4f46e5;
}

.evd-ov-desc {
    font-size: 13.5px;
    color: #374151;
    line-height: 1.7;
    margin: 0;
}

/* Info grid */
.evd-ov-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}
.evd-ov-info-full {
    grid-column: 1 / -1;
}
.evd-ov-info-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 4px;
}
.evd-ov-info-val {
    font-size: 13.5px;
    color: #111827;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 7px;
}
.evd-info-ico {
    font-size: 14px;
    color: #4f46e5;
    flex-shrink: 0;
}

.evd-link {
    color: #4f46e5;
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
}
.evd-link:hover {
    text-decoration: underline;
}

.evd-badge-free {
    font-size: 11px;
    font-weight: 700;
    background: #dcfce7;
    color: #16a34a;
    padding: 2px 9px;
    border-radius: 20px;
    letter-spacing: .2px;
}

/* Meta row */
.evd-ov-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.evd-meta-chip {
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.evd-meta-chip strong {
    color: #111827;
    font-weight: 600;
}

/* ── Sidebar ── */
.evd-ov-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 16px;
}
.evd-ov-sidebar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.evd-sidebar-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    letter-spacing: .2px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

/* Progress card */
.evd-progress-card {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border-color: transparent;
}
.evd-progress-card .evd-sidebar-title {
    color: rgba(255,255,255,.75);
    border-bottom-color: rgba(255,255,255,.2);
}
.evd-progress-pct {
    font-size: 38px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1.5px;
    line-height: 1;
    margin-bottom: 3px;
}
.evd-progress-sub {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    margin-bottom: 14px;
}
.evd-progress-bar-wrap {
    background: rgba(255,255,255,.25);
    border-radius: 6px;
    height: 6px;
    overflow: hidden;
}
.evd-progress-bar {
    width: 100%;
    height: 100%;
}
.evd-progress-fill {
    height: 100%;
    background: #fff;
    border-radius: 6px;
    transition: width .6s cubic-bezier(.4,0,.2,1);
    min-width: 4px;
}

/* Metric list */
.evd-metric-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.evd-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}
.evd-metric-label {
    color: #6b7280;
}
.evd-metric-val   {
    font-weight: 700;
    color: #111827;
}
.evd-metric-accent {
    color: #16a34a;
    font-weight: 700;
}

/* ────────────────────────────────────────────────────
   PLACEHOLDER — coming soon
──────────────────────────────────────────────────── */
.evd-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.evd-soon-ico   {
    font-size: 36px;
    margin-bottom: 14px;
    color: #d1d5db;
}
.evd-soon-title {
    font-size: 15px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 5px;
}
.evd-soon-sub   {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
}

/* ────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .evd-ov-layout {
        grid-template-columns: 1fr;
    }
    .evd-ov-right  {
        position: static;
    }
}
@media (max-width: 640px) {
    .evd-hero {
        flex-direction: column;
        padding: 18px 16px;
    }
    .evd-hero-right {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .evd-hero-title {
        font-size: 17px;
    }
    .evd-ov-info-grid {
        grid-template-columns: 1fr;
    }
    .evd-panel-wrap {
        margin-top: 14px;
    }
}
/* ═══════════════════════════════════════════════════════
   Event Sessions — ses-*
   Streamlined / Indigo palette
═══════════════════════════════════════════════════════ */

/* ── Layout ── */
.ses-page    {
    padding: 0;
}
.ses-layout  {
    display: grid;
    grid-template-columns: 1fr 264px;
    gap: 20px;
    align-items: start;
}

/* ────────────────────────────────────────────────────
   MAIN PANEL
──────────────────────────────────────────────────── */
.ses-main {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.ses-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}
.ses-head-left    {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ses-main-title   {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}
.ses-count-badge  {
    font-size: 11px;
    font-weight: 700;
    background: #4f46e5;
    color: #fff;
    padding: 2px 9px;
    border-radius: 20px;
}

/* ── Shared buttons ── */
.ses-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    white-space: nowrap;
}
.ses-btn-primary {
    background: #4f46e5;
    color: #fff;
    box-shadow: 0 2px 6px rgba(79,70,229,.25);
}
.ses-btn-primary:hover {
    background: #4338ca;
}
.ses-btn-ghost   {
    background: #f3f4f6;
    color: #6b7280;
}
.ses-btn-ghost:hover {
    background: #e5e7eb;
}

/* ── Loading / Empty ── */
.ses-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: #9ca3af;
    font-size: 13px;
}
.ses-spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: sesSpin .7s linear infinite;
}
@keyframes sesSpin {
    to {
        transform: rotate(360deg);
    }
}

.ses-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 56px 20px;
    text-align: center;
}
.ses-empty-ico   {
    width: 52px;
    height: 52px;
    background: #f3f4f6;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #d1d5db;
    margin-bottom: 12px;
}
.ses-empty-title {
    font-size: 14px;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 4px;
}
.ses-empty-sub   {
    font-size: 12.5px;
    color: #9ca3af;
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

/* ────────────────────────────────────────────────────
   SESSION ITEMS — Timeline
──────────────────────────────────────────────────── */
.ses-list-wrap {
    padding: 8px 0 12px;
}

.ses-item {
    display: flex;
    padding: 0 20px;
    cursor: pointer;
    transition: background .1s;
}
.ses-item:hover {
    background: #fafafa;
}
.ses-item:hover .ses-item-acts {
    opacity: 1;
}

/* Timeline */
.ses-tl {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 24px;
    padding-top: 20px;
}
.ses-tl-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px currentColor;
    flex-shrink: 0;
}
.ses-tl-line {
    flex: 1;
    width: 2px;
    background: #e5e7eb;
    margin: 5px 0;
    min-height: 16px;
}
.ses-dot-green  {
    color: #16a34a;
    background: #16a34a;
}
.ses-dot-amber  {
    color: #d97706;
    background: #d97706;
}
.ses-dot-indigo {
    color: #4f46e5;
    background: #4f46e5;
}
.ses-dot-red    {
    color: #dc2626;
    background: #dc2626;
}

/* Item body */
.ses-item-body {
    flex: 1;
    padding: 14px 0 14px 14px;
    border-bottom: 1px solid #f3f4f6;
    min-width: 0;
}
.ses-item:last-child .ses-item-body {
    border-bottom: none;
}

.ses-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}
.ses-item-left  {
    flex: 1;
    min-width: 0;
}
.ses-item-num   {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.ses-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.2px;
    line-height: 1.3;
}
.ses-item-desc  {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
    margin: 4px 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Status pill */
.ses-pill {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}
.ses-st-completed {
    background: #dcfce7;
    color: #16a34a;
}
.ses-st-ongoing   {
    background: #fef3c7;
    color: #d97706;
}
.ses-st-pending   {
    background: #eef2ff;
    color: #4f46e5;
}
.ses-st-cancelled {
    background: #fee2e2;
    color: #dc2626;
}

/* Meta */
.ses-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
.ses-meta      {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #6b7280;
}
.ses-meta i    {
    font-size: 12px;
    color: #9ca3af;
}

/* Footer */
.ses-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Avatar stack */
.ses-avatar-stack {
    display: flex;
}
.ses-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}
.ses-av-ini  {
}
.ses-av-more {
    background: #e5e7eb;
    color: #6b7280;
    font-size: 9px;
}

/* Actions */
.ses-item-acts {
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity .15s;
}
.ses-act {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: all .13s;
}
.ses-act-view  {
    background: #eef2ff;
    color: #4f46e5;
}
.ses-act-view:hover  {
    background: #4f46e5;
    color: #fff;
}
.ses-act-edit  {
    background: #f0fdf4;
    color: #16a34a;
}
.ses-act-edit:hover  {
    background: #16a34a;
    color: #fff;
}
.ses-act-del   {
    background: #fee2e2;
    color: #dc2626;
}
.ses-act-del:hover   {
    background: #dc2626;
    color: #fff;
}

/* ────────────────────────────────────────────────────
   SIDEBAR
──────────────────────────────────────────────────── */
.ses-sidebar {
    position: sticky;
    top: 16px;
}
.ses-sb-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ses-sb-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ses-sb-head {
    font-size: 11.5px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
}
.ses-sb-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    margin-bottom: 5px;
}
.ses-sb-lbl {
    color: #6b7280;
}
.ses-sb-val {
    font-weight: 700;
    color: #111827;
    font-size: 12px;
}
.ses-val-green {
    color: #16a34a;
}
.ses-val-amber {
    color: #d97706;
}

/* Time bars */
.ses-bar-track {
    background: #f3f4f6;
    border-radius: 4px;
    height: 5px;
    overflow: hidden;
    margin-bottom: 8px;
}
.ses-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    min-width: 3px;
}
.ses-fill-indigo {
    background: #4f46e5;
}
.ses-fill-green  {
    background: #16a34a;
}
.ses-fill-amber  {
    background: #d97706;
}

/* Stats grid */
.ses-sb-stat-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ses-sb-stat {
    background: #f9fafb;
    border: 1px solid #f3f4f6;
    border-radius: 7px;
    padding: 8px 10px;
    text-align: center;
}
.ses-sb-stat-val {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    margin-bottom: 3px;
}
.ses-sb-stat-lbl {
    font-size: 10.5px;
    color: #9ca3af;
    font-weight: 600;
}

.ses-dmod-wizard .modal-dialog  {
    max-width: 620px;
    width: 96vw;
}
.ses-dmod-wizard .project-themes-wrapper {
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
}

.ses-dmod {
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border-radius: 14px;
    overflow: hidden;
    min-height: 380px;
}

.ses-dmod-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-wrap: wrap;
}
.ses-dmod-head-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}
.ses-dmod-order {
    width: 34px;
    height: 34px;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.ses-dmod-title  {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -.2px;
}
.ses-dmod-times  {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ses-dmod-times i {
    color: #9ca3af;
}

.ses-dmod-body    {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ses-dmod-section {
}
.ses-dmod-sec-label {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: .6px;
    margin-bottom: 8px;
}
.ses-dmod-desc {
    font-size: 13.5px;
    color: #374151;
    line-height: 1.7;
    margin: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px 14px;
}

/* Speaker grid in detail */
.ses-dmod-spk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 8px;
}
.ses-dmod-spk {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 9px 11px;
}
.ses-dmod-av {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}
.ses-dmod-av-ini {
}
.ses-dmod-spk-info {
    flex: 1;
    min-width: 0;
}
.ses-dmod-spk-name  {
    font-size: 12.5px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ses-dmod-spk-title {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ses-role-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    display: inline-block;
    letter-spacing: .2px;
    text-transform: uppercase;
}
.ses-role-mod  {
    background: #eef2ff;
    color: #4f46e5;
}
.ses-role-pre  {
    background: #f0fdf4;
    color: #16a34a;
}
.ses-role-pan  {
    background: #fef3c7;
    color: #d97706;
}

/* Materials */
.ses-dmod-mat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.ses-mat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
    transition: background .13s, border-color .13s;
    text-transform: capitalize;
}
.ses-mat-chip:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
}
.ses-mat-chip-rec   {
    color: #dc2626;
}
.ses-mat-chip-rec:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.ses-dmod-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

/* ────────────────────────────────────────────────────
   ADD/EDIT MODAL  ses-ae-*
──────────────────────────────────────────────────── */
.ses-ae-modal .modal-dialog {
    max-width: 940px;
    width: 96vw;
}

.ses-ae-hdr-icon {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
}

/* Two column body */
.ses-ae-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0;
    background: #f9fafb;
}
.ses-ae-col {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ses-ae-col-spk {
    border-left: 1px solid #e5e7eb;
    background: #fff;
    padding: 20px 18px;
}

/* Cards */

.ses-ae-card-spk {
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
}

/* Input style inside ae cards */
.ses-ae-card .ev-input-icon-wrap {
    border: 1.5px solid #e2ddd5;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s;
}
.ses-ae-card .ev-input-icon-wrap:focus-within {
    border-color: #4f46e5;
}
.ses-ae-card .ev-input-icon-wrap input,
.ses-ae-card .ev-input-icon-wrap .form-control {
    border: none !important;
    box-shadow: none !important;
    background: #faf9f7;
    font-size: 13.5px;
    padding: 9px 12px;
}
.ses-ae-card .ev-input-icon-wrap i {
    color: #9ca3af;
    padding: 0 10px;
    background: #faf9f7;
    border-right: 1px solid #e8e3db;
    font-size: 13px;
    display: flex;
    align-items: center;
}
.ses-ae-card .ev-input-icon-wrap:focus-within i {
    color: #4f46e5;
}
.ses-ae-card textarea.form-control {
    border: 1.5px solid #e2ddd5 !important;
    border-radius: 8px !important;
    font-size: 13.5px;
    background: #faf9f7;
    resize: vertical;
    min-height: 80px;
    transition: border-color .15s;
    box-shadow: none !important;
}
.ses-ae-card textarea.form-control:focus {
    border-color: #4f46e5 !important;
    background: #fff;
    outline: none;
}
.ses-ae-card .range-box-head-cus .btn {
    border: 1.5px solid #e2ddd5 !important;
    border-radius: 8px !important;
    background: #faf9f7 !important;
    font-size: 13.5px;
    padding: 9px 12px !important;
    height: auto !important;
}
.ses-ae-card .form-legent-syl .col-form-label {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding-bottom: 5px;
}

/* Materials rows */
.ses-mat-rows {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 10px;
}
.ses-mat-row  {
    display: flex;
    gap: 7px;
    align-items: center;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 7px 9px;
}
.ses-mat-key {
    width: 120px;
    flex-shrink: 0;
    border: 1px solid #e2ddd5 !important;
    border-radius: 6px !important;
    font-size: 12.5px;
    padding: 6px 9px !important;
    background: #fff !important;
    box-shadow: none !important;
    text-transform: lowercase;
}
.ses-mat-url {
    flex: 1;
    border: 1px solid #e2ddd5 !important;
    border-radius: 6px !important;
    font-size: 12.5px;
    padding: 6px 9px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.ses-mat-del {
    width: 28px;
    height: 28px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    flex-shrink: 0;
    transition: background .13s;
}
.ses-mat-del:hover {
    background: #dc2626;
    color: #fff;
}

.ses-add-row-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #eef2ff;
    color: #4f46e5;
    border: 1.5px dashed #c7d2fe;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .13s;
}
.ses-add-row-btn:hover {
    background: #e0e7ff;
}

/* ── Speaker picker (right column) ── */
.ses-spk-search-wrap {
    position: relative;
}
.ses-spk-search-ico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 13px;
}
.ses-spk-search-inp {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1.5px solid #e2ddd5;
    border-radius: 8px;
    font-size: 13px;
    background: #f9fafb;
    color: #111827;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}
.ses-spk-search-inp:focus {
    border-color: #4f46e5;
    background: #fff;
}

/* Drop list */
.ses-spk-drop-list {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.ses-spk-drop-loading {
    display: flex;
    justify-content: center;
    padding: 16px;
    color: #9ca3af;
    font-size: 13px;
}
.ses-spk-drop-empty {
    padding: 14px;
    text-align: center;
    font-size: 12.5px;
    color: #9ca3af;
}
.ses-spk-drop-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid #f9fafb;
    transition: background .1s;
}
.ses-spk-drop-row:last-child {
    border-bottom: none;
}
.ses-spk-drop-row:hover {
    background: #f9fafb;
}
.ses-spk-drop-selected {
    background: #fafffe;
}
.ses-spk-drop-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}
.ses-spk-drop-ini {
}
.ses-spk-drop-info {
    flex: 1;
    min-width: 0;
}
.ses-spk-drop-name  {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.ses-spk-drop-title {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ses-spk-drop-add {
    padding: 4px 10px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
    transition: background .13s;
}
.ses-spk-drop-add:hover {
    background: #4338ca;
}
.ses-spk-drop-check {
    width: 26px;
    height: 26px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* Divider */
.ses-spk-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.ses-spk-divider::before,
.ses-spk-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Selected list */
.ses-spk-sel-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    overflow-y: auto;
    max-height: 220px;
}
.ses-spk-empty {
    font-size: 12.5px;
    color: #9ca3af;
    text-align: center;
    padding: 14px 0;
}
.ses-spk-sel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 10px;
}
.ses-spk-sel-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}
.ses-spk-sel-ini {
}
.ses-spk-sel-info {
    flex: 1;
    min-width: 80px;
}
.ses-spk-sel-row .range-box-head-cus .dropdown-toggle.lang-cus {
    margin: 0;
    padding: 7px 8px !important;
    font-size: 0.8em !important;
}
.ses-spk-sel-name  {
    font-size: 12.5px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ses-spk-sel-title {
    font-size: 11px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ses-spk-role-sel {
    width: 100px;
    flex-shrink: 0;
    border: 1px solid #e2ddd5 !important;
    border-radius: 6px !important;
    font-size: 11.5px;
    padding: 4px 6px !important;
    background: #fff !important;
    box-shadow: none !important;
    height: auto !important;
}
.ses-spk-sel-del {
    width: 26px;
    height: 26px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
    transition: background .13s;
}
.ses-spk-sel-del:hover {
    background: #dc2626;
    color: #fff;
}

/* ────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .ses-layout  {
        grid-template-columns: 1fr;
    }
    .ses-sidebar {
        position: static;
    }
    .ses-ae-wrap {
        grid-template-columns: 1fr;
    }
    .ses-ae-col-spk {
        border-left: none;
        border-top: 1px solid #e5e7eb;
    }
}
@media (max-width: 560px) {
    .ses-ae-modal .modal-dialog {
        max-width: 100%;
        margin: 8px;
    }
    .ses-dmod-spk-grid {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   EV-SPEAKERS TAB  –  ev-speakers.css
   ===================================================== */

/* ---------- Layout ---------- */
.spk-page          {
    padding: 16px;
}
.spk-layout        {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.spk-main          {
    flex: 1;
    min-width: 0;
}
.spk-sidebar       {
    width: 280px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .spk-layout    {
        flex-direction: column;
    }
    .spk-sidebar   {
        width: 100%;
    }
}

/* ---------- Header ---------- */
.spk-main-head     {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 10px;
    flex-wrap: wrap;
}
.spk-head-left     {
    display: flex;
    align-items: center;
    gap: 10px;
}
.spk-main-title    {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}
.spk-count-badge   {
    background: #e0e7ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

/* ---------- Search bar ---------- */
.spk-search-bar    {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 12px;
    margin-bottom: 16px;
}
.spk-search-bar i  {
    color: #94a3b8;
    font-size: 14px;
}
.spk-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 0;
    font-size: 13px;
    color: #334155;
    outline: none;
}
.spk-search-bar input::placeholder {
    color: #94a3b8;
}

/* ---------- Speaker Card ---------- */

.spk-card:hover    {
    box-shadow: 0 4px 16px rgba(0,0,0,.08);
    border-color: #c7d2fe;
}

/* avatar */
.spk-av            {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.spk-av-ini        {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

/* info */
.spk-card-info     {
    flex: 1;
    min-width: 0;
}
.spk-card-name     {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spk-card-title    {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* sessions tags on card */
.spk-card-sessions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.spk-ses-tag       {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 4px;
}
.spk-ses-tag i     {
    font-size: 10px;
    color: #94a3b8;
}
.spk-ses-tag-more  {
    background: #e0e7ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

/* role pill on card */
.spk-card-foot     {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.spk-act-assign:hover          {
    border-color: #818cf8;
    color: #4338ca;
    background: #eef2ff;
}
.spk-act-del:hover             {
    border-color: #fca5a5;
    color: #ef4444;
    background: #fef2f2;
}

/* ---------- Role Pill ---------- */
.ses-role-pill             {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.ses-role-pan              {
    background: #f1f5f9;
    color: #475569;
}
.ses-role-presenter        {
    background: #dbeafe;
    color: #1d4ed8;
}
.ses-role-moderator        {
    background: #fef3c7;
    color: #92400e;
}
.ses-role-panelist         {
    background: #f3e8ff;
    color: #6d28d9;
}
.ses-role-keynote          {
    background: #fce7f3;
    color: #9d174d;
}

/* ---------- Empty / Loading ---------- */
.spk-empty          {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.spk-empty-ico      {
    font-size: 40px;
    margin-bottom: 12px;
}
.spk-empty-title    {
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}
.spk-empty-sub      {
    font-size: 13px;
    margin: 0;
}
.spk-loading        {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #64748b;
    font-size: 13px;
}
.spk-spinner        {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spk-spin .7s linear infinite;
}
@keyframes spk-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Sidebar ---------- */
.spk-sb-wrap        {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.spk-sb-card        {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}
.spk-sb-head        {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}
.spk-sb-head i      {
    color: #94a3b8;
    font-size: 13px;
}

.spk-sb-stat-wrap   {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.spk-sb-stat        {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.spk-sb-stat-val    {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}
.spk-sb-stat-lbl    {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}
.spk-sb-stat-val.spk-val-indigo {
    color: #4338ca;
}
.spk-sb-stat-val.spk-val-amber  {
    color: #d97706;
}
.spk-sb-stat-val.spk-val-rose   {
    color: #e11d48;
}

/* role breakdown rows */
.spk-sb-role-row    {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f8fafc;
}
.spk-sb-role-row:last-child {
    border-bottom: none;
}
.spk-sb-role-left   {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #475569;
}
.spk-sb-role-left .ses-role-pill {
    font-size: 10px;
}
.spk-sb-role-cnt    {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
}

/* ---------- Left main box ---------- */
.spk-main-box      {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
}
.spk-main-box .spk-main-head {
    margin-bottom: 16px;
}
.spk-main-box .spk-search-bar {
    background: #f8fafc;
}

/* ---------- Sidebar session filter (redesigned) ---------- */
.spk-sb-ses-list    {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 340px;
    overflow-y: auto;
}

.spk-sb-ses-item    {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .18s;
}
.spk-sb-ses-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.spk-sb-ses-item.active {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%);
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(99,102,241,.10);
}

/* icon box */
.spk-sb-ses-icon    {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .18s;
}
.spk-sb-ses-icon i  {
    font-size: 13px;
    color: #94a3b8;
}
.spk-sb-ses-order   {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}
.spk-sb-ses-item.active .spk-sb-ses-icon {
    background: #6366f1;
    border-color: #6366f1;
}
.spk-sb-ses-item.active .spk-sb-ses-icon i,
.spk-sb-ses-item.active .spk-sb-ses-order {
    color: #fff;
}

/* text meta */
.spk-sb-ses-meta    {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.spk-sb-ses-name    {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spk-sb-ses-sub     {
    font-size: 11px;
    color: #94a3b8;
}
.spk-sb-ses-item.active .spk-sb-ses-name {
    color: #4338ca;
}

/* badge */
.spk-sb-ses-badge   {
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
    transition: all .18s;
}
.spk-sb-ses-item.active .spk-sb-ses-badge {
    background: #6366f1;
    color: #fff;
}

/* scrollbar styling */
.spk-sb-ses-list::-webkit-scrollbar {
    width: 4px;
}
.spk-sb-ses-list::-webkit-scrollbar-track {
    background: transparent;
}
.spk-sb-ses-list::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

/* ---------- Button ---------- */
.ses-btn            {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all .15s;
}
.ses-btn-primary    {
    background: #4338ca;
    color: #fff;
}
.ses-btn-primary:hover {
    background: #3730a3;
}
.ses-btn-ghost      {
    background: #f1f5f9;
    color: #475569;
}
.ses-btn-ghost:hover {
    background: #e2e8f0;
}

/* ---------- Assign Modal ---------- */
.spk-asgn-modal         {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}
.spk-asgn-header        {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.spk-asgn-header-icon   {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eef2ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4338ca;
    font-size: 20px;
    flex-shrink: 0;
}
.spk-asgn-header h6     {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px;
}
.spk-asgn-header p      {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}
.spk-asgn-header .close-btn {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 16px;
    color: #94a3b8;
    cursor: pointer;
}
.spk-asgn-body          {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.spk-asgn-footer        {
    padding: 16px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* speaker summary in assign modal */
.spk-asgn-who           {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
}
.spk-asgn-who-av        {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.spk-asgn-who-ini       {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.spk-asgn-who-name      {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.spk-asgn-who-title     {
    font-size: 12px;
    color: #64748b;
}

/* session select list in modal */
.spk-asgn-sec-label     {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 8px;
}
.spk-asgn-ses-list      {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.spk-asgn-ses-row       {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
}
.spk-asgn-ses-row:hover         {
    border-color: #c7d2fe;
    background: #f5f3ff;
}
.spk-asgn-ses-row.selected      {
    border-color: #6366f1;
    background: #eef2ff;
}
.spk-asgn-ses-row.already-in    {
    background: #f8fafc;
    cursor: default;
}
.spk-asgn-ses-row.already-in:hover {
    border-color: #e2e8f0;
    background: #f8fafc;
}
.spk-asgn-ses-num       {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    width: 22px;
}
.spk-asgn-ses-info      {
    flex: 1;
    min-width: 0;
}
.spk-asgn-ses-title     {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spk-asgn-ses-time      {
    font-size: 11px;
    color: #94a3b8;
}
.spk-asgn-ses-check     {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    transition: all .15s;
    flex-shrink: 0;
}
.spk-asgn-ses-row.selected .spk-asgn-ses-check {
    border-color: #6366f1;
    background: #6366f1;
    color: #fff;
}
.spk-asgn-ses-already   {
    font-size: 10px;
    font-weight: 600;
    color: #16a34a;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 20px;
    flex-shrink: 0;
}

/* role select inside assign modal */
.spk-asgn-role-wrap     {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.spk-asgn-role-wrap label {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.spk-asgn-role-sel      {
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    outline: none;
    cursor: pointer;
}

/* ---------- Add Speaker Modal ---------- */
.spk-add-form           {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.spk-add-form label     {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    display: block;
    margin-bottom: 4px;
}
.spk-add-form input, .spk-add-form select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    outline: none;
    box-sizing: border-box;
}
.spk-add-form input:focus, .spk-add-form select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}

/* ---------- cos-spin ---------- */
.cos-spin {
    animation: spk-spin .7s linear infinite;
    display: inline-block;
}

/* =============================================================
   ADD SPEAKER MODAL  –  iki kolonlu seçim ekranı
   ============================================================= */

/* Modal wrapper — project-wizard-modal ile birlikte kullanılır */
.add-spk-modal-wrap .modal-dialog {
    max-width: 820px;
}

.add-spk-modal          {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    border-radius: 14px;
    overflow: hidden;
}

/* --- Header --- */
.add-spk-modal-header   {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.add-spk-modal-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg, #6366f1, #818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.add-spk-modal-header-text h6 {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px;
}
.add-spk-modal-header-text p  {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}
.add-spk-close  {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.add-spk-close:hover {
    background: #f1f5f9;
    color: #475569;
}

/* --- Body: iki kolon --- */
.add-spk-modal-body     {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Panel ortak */
.add-spk-panel,
.add-ses-panel          {
    display: flex;
    flex-direction: column;
    padding: 18px;
    overflow: hidden;
}
.add-spk-panel          {
    flex: 1;
    border-right: 1px solid #f1f5f9;
}
.add-ses-panel          {
    width: 340px;
    flex-shrink: 0;
}

/* Panel başlık */
.add-panel-head         {
    margin-bottom: 12px;
}
.add-panel-title        {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.add-panel-title i      {
    color: #6366f1;
}
.add-panel-sub          {
    font-size: 11px;
    color: #94a3b8;
}

/* Arama kutusu */
.add-spk-search-wrap    {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.add-spk-search-wrap i  {
    color: #94a3b8;
    font-size: 13px;
}
.add-spk-search         {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px 0;
    font-size: 13px;
    color: #334155;
    outline: none;
}
.add-spk-search::placeholder {
    color: #94a3b8;
}

/* Konuşmacı listesi */
.add-spk-list           {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.add-spk-list::-webkit-scrollbar {
    width: 4px;
}
.add-spk-list::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.add-spk-loading        {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #94a3b8;
    font-size: 20px;
}
.add-spk-empty          {
    text-align: center;
    padding: 30px 16px;
    font-size: 13px;
    color: #94a3b8;
}

.add-spk-row            {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all .15s;
}
.add-spk-row:hover      {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.add-spk-row.selected   {
    background: #eef2ff;
    border-color: #6366f1;
}

.add-spk-av             {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.add-spk-ini            {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.add-spk-info           {
    flex: 1;
    min-width: 0;
}
.add-spk-name           {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.add-spk-title          {
    font-size: 11px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.add-spk-check          {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: transparent;
    font-size: 10px;
    transition: all .15s;
}
.add-spk-row.selected .add-spk-check {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

/* Session listesi */
.add-ses-list           {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.add-ses-list::-webkit-scrollbar {
    width: 4px;
}
.add-ses-list::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.add-ses-row            {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    cursor: pointer;
    transition: all .15s;
}
.add-ses-row:hover      {
    border-color: #c7d2fe;
    background: #f5f3ff;
}
.add-ses-row.selected   {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 2px 8px rgba(99,102,241,.12);
}

.add-ses-order          {
    font-size: 11px;
    font-weight: 800;
    color: #6366f1;
    width: 22px;
    flex-shrink: 0;
}
.add-ses-info           {
    flex: 1;
    min-width: 0;
}
.add-ses-title          {
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.add-ses-time           {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.add-ses-time i         {
    font-size: 10px;
}

.add-ses-check          {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: transparent;
    transition: all .15s;
    flex-shrink: 0;
}
.add-ses-row.selected .add-ses-check {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

/* Rol seçimi */
.add-role-wrap          {
    flex-shrink: 0;
    border-top: 1px solid #f1f5f9;
    padding-top: 12px;
}
.add-role-label         {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: block;
    margin-bottom: 6px;
}
.add-role-sel           {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    outline: none;
    cursor: pointer;
    transition: border-color .15s;
}
.add-role-sel:focus     {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

/* --- Footer --- */
.add-spk-modal-footer   {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
    gap: 10px;
    flex-wrap: wrap;
}
.add-spk-modal-footer .alert {
    margin: 0;
    font-size: 12px;
    padding: 6px 12px;
    flex: 1;
}
.add-spk-modal-footer-acts {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* =====================================================
   EV-ATTENDEES TAB  –  ev-attendees.css
   ===================================================== */

/* ---------- Layout ---------- */
.att-page          {
    padding: 16px;
}
.att-layout        {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.att-main          {
    flex: 1;
    min-width: 0;
}
.att-sidebar       {
    width: 260px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .att-layout    {
        flex-direction: column;
    }
    .att-sidebar   {
        width: 100%;
    }
}

/* ---------- Main box ---------- */
.att-main-box      {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

/* ---------- Toolbar ---------- */
.att-toolbar       {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.att-toolbar-left  {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.att-title         {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
}
.att-count-badge   {
    background: #e0e7ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* search */
.att-search-wrap   {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 10px;
    height: 34px;
    min-width: 180px;
    flex: 1;
    max-width: 280px;
}
.att-search-wrap i {
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}
.att-search-inp    {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #334155;
    outline: none;
}
.att-search-inp::placeholder {
    color: #94a3b8;
}

/* status filter */
.att-status-sel    {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    outline: none;
    cursor: pointer;
}
.att-status-sel:focus {
    border-color: #818cf8;
}

/* search button */
.att-search-btn    {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    background: #4338ca;
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
.att-search-btn:hover {
    background: #3730a3;
}

/* ---------- Table ---------- */
.att-table-wrap    {
    overflow-x: auto;
}

.att-table         {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.att-table thead tr {
    border-bottom: 1px solid #f1f5f9;
}
.att-table thead th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    white-space: nowrap;
    background: #fafbfc;
}
.att-table thead th.center {
    text-align: center;
}

.att-table tbody tr {
    border-bottom: 1px solid #f8fafc;
    transition: background .12s;
}
.att-table tbody tr:last-child {
    border-bottom: none;
}
.att-table tbody tr:hover {
    background: #fafbff;
}

.att-table td      {
    padding: 11px 14px;
    vertical-align: middle;
}
.att-table td.center {
    text-align: center;
}

/* attendee name cell */
.att-name-cell     {
    display: flex;
    align-items: center;
    gap: 10px;
}
.att-avatar        {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.att-fullname      {
    font-weight: 600;
    color: #1e293b;
    font-size: 13px;
}
.att-email-sub     {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
}

/* email cell */
.att-email         {
    color: #475569;
    font-size: 12px;
}

/* ticket code */
.att-ticket        {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    font-family: monospace;
    letter-spacing: .04em;
}
.att-ticket i      {
    font-size: 10px;
    color: #94a3b8;
}

/* date */
.att-date          {
    color: #64748b;
    font-size: 12px;
}

/* ---------- Status Pills ---------- */
.att-pill          {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.att-pill::before  {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.att-pill-requested {
    background: #fef9c3;
    color: #854d0e;
}
.att-pill-requested::before {
    background: #ca8a04;
}

.att-pill-rsvp_yes  {
    background: #dcfce7;
    color: #166534;
}
.att-pill-rsvp_yes::before  {
    background: #16a34a;
}

.att-pill-rsvp_no   {
    background: #fee2e2;
    color: #991b1b;
}
.att-pill-rsvp_no::before   {
    background: #dc2626;
}

/* ---------- Action Buttons ---------- */
.att-acts          {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.att-act           {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.att-act-approve:hover {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}
.att-act-reject:hover  {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ---------- Empty / Loading ---------- */
.att-empty         {
    text-align: center;
    padding: 60px 20px;
}
.att-empty-ico     {
    font-size: 36px;
    color: #cbd5e1;
    margin-bottom: 10px;
}
.att-empty-title   {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}
.att-empty-sub     {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.att-loading       {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 48px 20px;
    color: #64748b;
    font-size: 13px;
}
.att-spinner       {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: att-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes att-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- Footer (pagination) ---------- */
.att-footer        {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-top: 1px solid #f1f5f9;
    flex-wrap: wrap;
    gap: 8px;
}
.att-footer-info   {
    font-size: 12px;
    color: #94a3b8;
}
.att-footer-info strong {
    color: #475569;
    font-weight: 600;
}
.att-pag-wrap      {
    display: flex;
    align-items: center;
}

/* ---------- Sidebar ---------- */
.att-sb-wrap       {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.att-sb-card       {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}
.att-sb-head       {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}
.att-sb-head i     {
    color: #94a3b8;
    font-size: 13px;
}

/* stat grid */
.att-sb-stat-wrap  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.att-sb-stat       {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
.att-sb-stat-val   {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}
.att-sb-stat-lbl   {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
}
.att-sb-stat-val.att-v-green  {
    color: #16a34a;
}
.att-sb-stat-val.att-v-amber  {
    color: #d97706;
}
.att-sb-stat-val.att-v-red    {
    color: #dc2626;
}

/* progress bar */
.att-sb-bar-row    {
    margin-bottom: 12px;
}
.att-sb-bar-label  {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.att-sb-bar-name   {
    font-size: 12px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 5px;
}
.att-sb-bar-name::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.att-sb-bar-name.bar-green::before {
    background: #16a34a;
}
.att-sb-bar-name.bar-amber::before {
    background: #d97706;
}
.att-sb-bar-name.bar-red::before   {
    background: #dc2626;
}
.att-sb-bar-pct    {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
}
.att-sb-bar-track  {
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}
.att-sb-bar-fill   {
    height: 100%;
    border-radius: 10px;
    transition: width .4s ease;
}
.att-sb-bar-fill.fill-green {
    background: #16a34a;
}
.att-sb-bar-fill.fill-amber {
    background: #d97706;
}
.att-sb-bar-fill.fill-red   {
    background: #dc2626;
}

/* quick filter buttons in sidebar */
.att-sb-qf-list    {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.att-sb-qf-item    {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
}
.att-sb-qf-item:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.att-sb-qf-item.active {
    background: linear-gradient(135deg, #eef2ff, #f5f3ff);
    border-color: #c7d2fe;
}

.att-sb-qf-icon    {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: all .15s;
}
.att-sb-qf-item.active .att-sb-qf-icon {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}

.att-sb-qf-meta    {
    flex: 1;
    min-width: 0;
}
.att-sb-qf-name    {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}
.att-sb-qf-item.active .att-sb-qf-name {
    color: #4338ca;
}
.att-sb-qf-sub     {
    font-size: 11px;
    color: #94a3b8;
}

.att-sb-qf-badge   {
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
    transition: all .15s;
}
.att-sb-qf-item.active .att-sb-qf-badge {
    background: #6366f1;
    color: #fff;
}

/* cos-spin reuse */
.att-cos-spin {
    animation: att-spin .7s linear infinite;
    display: inline-block;
}
/* =====================================================
   EV-TASKS TAB  –  ev-tasks.css
   ===================================================== */

.tsk-page         {
    padding: 16px;
}
.tsk-layout       {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.tsk-main         {
    flex: 1;
    min-width: 0;
}
.tsk-sidebar      {
    width: 256px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .tsk-layout   {
        flex-direction: column;
    }
    .tsk-sidebar  {
        width: 100%;
    }
}

.tsk-card         {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

/* ---------- Toolbar ---------- */
.tsk-toolbar      {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    flex-wrap: wrap;
}
.tsk-tb-left      {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    flex-wrap: wrap;
}
.tsk-title        {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}
.tsk-count-badge  {
    background: #e0e7ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 20px;
}

.tsk-search-wrap  {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 10px;
    height: 34px;
    min-width: 180px;
    flex: 1;
    max-width: 260px;
    transition: border-color .15s;
}
.tsk-search-wrap:focus-within {
    border-color: #818cf8;
}
.tsk-search-wrap i {
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}
.tsk-search-inp   {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #334155;
    outline: none;
    min-width: 0;
}
.tsk-search-inp::placeholder {
    color: #94a3b8;
}

.tsk-filter-sel   {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #475569;
    background: #f8fafc;
    outline: none;
    cursor: pointer;
}

.tsk-btn          {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.tsk-btn-primary  {
    background: #4338ca;
    color: #fff;
}
.tsk-btn-primary:hover {
    background: #3730a3;
}
.tsk-btn-ghost    {
    background: #f1f5f9;
    color: #475569;
}
.tsk-btn-ghost:hover   {
    background: #e2e8f0;
}

/* ---------- Priority Pills ---------- */
.tsk-pri          {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.tsk-pri i        {
    font-size: 10px;
}
.tsk-pri-low      {
    background: #f0fdf4;
    color: #166534;
}
.tsk-pri-medium   {
    background: #fefce8;
    color: #854d0e;
}
.tsk-pri-high     {
    background: #fff7ed;
    color: #9a3412;
}
.tsk-pri-critical {
    background: #fef2f2;
    color: #991b1b;
}

/* ---------- Status Pills ---------- */
.tsk-st           {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.tsk-st::before   {
    content:"";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.tsk-st-pending    {
    background: #f1f5f9;
    color: #475569;
}
.tsk-st-pending::before    {
    background: #94a3b8;
}
.tsk-st-in_progress{
    background: #fff7ed;
    color: #9a3412;
}
.tsk-st-in_progress::before{
    background: #f59e0b;
}
.tsk-st-completed  {
    background: #f0fdf4;
    color: #166534;
}
.tsk-st-completed::before  {
    background: #16a34a;
}
.tsk-st-cancelled  {
    background: #fef2f2;
    color: #991b1b;
}
.tsk-st-cancelled::before  {
    background: #dc2626;
}

/* ---------- Task List ---------- */
.tsk-list         {
    display: flex;
    flex-direction: column;
}

/* ---------- Task Row ---------- */
.tsk-row          {
    display: flex;
    align-items: flex-start;
    gap: 0;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .12s;
    overflow: hidden;
}
.tsk-row:last-child {
    border-bottom: none;
}
.tsk-row:hover    {
    background: #fafbff;
}
.tsk-row.tsk-row-done {
    opacity: .6;
}

/* left priority stripe */
.tsk-row-stripe   {
    width: 4px;
    flex-shrink: 0;
    align-self: stretch;
}
.stripe-low       {
    background: #86efac;
}
.stripe-medium    {
    background: #fcd34d;
}
.stripe-high      {
    background: #fb923c;
}
.stripe-critical  {
    background: #f87171;
}

.tsk-row-inner    {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    flex: 1;
    min-width: 0;
}

/* Checkbox */
.tsk-checkbox     {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: transparent;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
    margin-top: 1px;
}
.tsk-checkbox:hover              {
    border-color: #6366f1;
    background: #eef2ff;
}
.tsk-checkbox.st-completed       {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}
.tsk-checkbox.st-in_progress     {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #fff;
}
.tsk-checkbox.st-cancelled       {
    background: #e2e8f0;
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* Body */
.tsk-row-body     {
    flex: 1;
    min-width: 0;
}
.tsk-row-top      {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.tsk-row-title    {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
    min-width: 120px;
    line-height: 1.45;
}
.tsk-row-title.done {
    text-decoration: line-through;
    color: #94a3b8;
}

.tsk-row-desc     {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 7px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.tsk-row-meta     {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tsk-meta-chip    {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #64748b;
}
.tsk-meta-chip i  {
    font-size: 11px;
    color: #94a3b8;
}
.tsk-meta-chip.overdue {
    color: #ef4444;
    font-weight: 600;
}
.tsk-meta-chip.overdue i {
    color: #ef4444;
}

.tsk-av-xs        {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Actions */
.tsk-row-acts     {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity .15s;
    padding-top: 1px;
}
.tsk-row:hover .tsk-row-acts {
    opacity: 1;
}
.tsk-act          {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.tsk-act-edit:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}
.tsk-act-del:hover  {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ---------- Empty / Loading ---------- */
.tsk-empty        {
    text-align: center;
    padding: 64px 20px;
}
.tsk-empty-ico    {
    font-size: 38px;
    color: #cbd5e1;
    margin-bottom: 12px;
}
.tsk-empty-title  {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}
.tsk-empty-sub    {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}
.tsk-loading      {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 52px 20px;
    color: #64748b;
    font-size: 13px;
}
.tsk-spinner      {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: tsk-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes tsk-spin {
    to {
        transform: rotate(360deg);
    }
}
.tsk-cos-spin     {
    animation: tsk-spin .7s linear infinite;
    display: inline-block;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.tsk-sb-wrap      {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tsk-sb-card      {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}
.tsk-sb-head      {
    font-size: 12px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Stats grid — 4 cells */
.tsk-sb-stats     {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
}
.tsk-sb-stat      {
    background: #f8fafc;
    border-radius: 9px;
    padding: 10px 8px;
    text-align: center;
}
.tsk-sb-stat-val  {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}
.tsk-sb-stat-lbl  {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 3px;
}
.tsk-v-green      {
    color: #16a34a;
}
.tsk-v-amber      {
    color: #d97706;
}
.tsk-v-blue       {
    color: #2563eb;
}
.tsk-v-red        {
    color: #dc2626;
}

/* Priority section — inside same card */
.tsk-sb-sub-head  {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
    padding-top: 14px;
    border-top: 1px solid #f1f5f9;
}

.tsk-sb-pri-list  {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.tsk-sb-pri-row   {
    display: flex;
    align-items: center;
    gap: 8px;
}
.tsk-sb-pri-label {
    flex-shrink: 0;
    min-width: 62px;
}
.tsk-sb-pri-bar   {
    flex: 1;
    height: 5px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}
.tsk-sb-pri-fill  {
    height: 100%;
    border-radius: 10px;
    transition: width .5s ease;
}
.fill-critical    {
    background: #f87171;
}
.fill-high        {
    background: #fb923c;
}
.fill-medium      {
    background: #fcd34d;
}
.fill-low         {
    background: #86efac;
}
.tsk-sb-pri-cnt   {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    width: 18px;
    text-align: right;
    flex-shrink: 0;
}

/* Filter card */
.tsk-sb-fi-list   {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tsk-sb-fi        {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
}
.tsk-sb-fi:hover  {
    background: #f8fafc;
    border-color: #e2e8f0;
}
.tsk-sb-fi.active {
    background: linear-gradient(135deg,#eef2ff,#f5f3ff);
    border-color: #c7d2fe;
}
.tsk-sb-fi-icon   {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: all .15s;
}
.tsk-sb-fi.active .tsk-sb-fi-icon {
    background: #6366f1;
    border-color: #6366f1;
    color: #fff;
}
.tsk-sb-fi-meta   {
    flex: 1;
    min-width: 0;
}
.tsk-sb-fi-name   {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}
.tsk-sb-fi.active .tsk-sb-fi-name {
    color: #4338ca;
}
.tsk-sb-fi-sub    {
    font-size: 10px;
    color: #94a3b8;
}
.tsk-sb-fi-badge  {
    background: #e2e8f0;
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    flex-shrink: 0;
    transition: all .15s;
}
.tsk-sb-fi.active .tsk-sb-fi-badge {
    background: #6366f1;
    color: #fff;
}

/* =====================================================
   DETAIL MODAL
   ===================================================== */
.tsk-dmod         {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.tsk-dmod-hero    {
    padding: 22px 24px 18px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.tsk-dmod-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.tsk-dmod-hero-title {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
    flex: 1;
    margin: 0;
}
.tsk-dmod-close   {
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s;
    flex-shrink: 0;
    line-height: 1;
}
.tsk-dmod-close:hover {
    background: #f1f5f9;
    color: #475569;
}
.tsk-dmod-hero-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.tsk-dmod-body    {
    flex: 1;
    overflow-y: auto;
}
.tsk-dmod-body::-webkit-scrollbar {
    width: 4px;
}
.tsk-dmod-body::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.tsk-dmod-section {
    padding: 18px 24px;
    border-bottom: 1px solid #f8fafc;
}
.tsk-dmod-section:last-child {
    border-bottom: none;
}
.tsk-dmod-sec-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
}

.tsk-dmod-desc    {
    font-size: 13px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
    background: #f8fafc;
    border-radius: 9px;
    padding: 12px 14px;
}

.tsk-dmod-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tsk-dmod-info-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
}
.tsk-dmod-info-key  {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 5px;
}
.tsk-dmod-info-val  {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tsk-dmod-info-val.overdue {
    color: #ef4444;
}

.tsk-dmod-assignee  {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
}
.tsk-dmod-av        {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,#6366f1,#818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.tsk-dmod-av-name   {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}
.tsk-dmod-av-user   {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.tsk-dmod-footer  {
    padding: 14px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* =====================================================
   ADD / EDIT MODAL
   ===================================================== */
.tsk-ae-modal     {
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.tsk-ae-header    {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.tsk-ae-hicon     {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: linear-gradient(135deg,#6366f1,#818cf8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.tsk-ae-htxt h6   {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px;
}
.tsk-ae-htxt p    {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}
.tsk-ae-close     {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s;
    line-height: 1;
}
.tsk-ae-close:hover {
    background: #f1f5f9;
    color: #475569;
}

.tsk-ae-body      {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.tsk-ae-body::-webkit-scrollbar {
    width: 4px;
}
.tsk-ae-body::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.tsk-ae-section   {
    padding: 16px 24px;
    border-bottom: 1px solid #f8fafc;
}
.tsk-ae-section:last-child {
    border-bottom: none;
}
.tsk-ae-sec-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tsk-ae-sec-title i {
    font-size: 12px;
}

.tsk-ae-fg        {
    margin-bottom: 12px;
}
.tsk-ae-fg:last-child {
    margin-bottom: 0;
}
.tsk-ae-fg-row    {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.tsk-ae-label     {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    display: block;
    margin-bottom: 5px;
}
.tsk-ae-req       {
    color: #ef4444;
    margin-right: 2px;
}
.tsk-ae-hint      {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 400;
    margin-left: 4px;
}

.tsk-ae-input, .tsk-ae-textarea, .tsk-ae-select {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    height: 36px;
}
.tsk-ae-textarea   {
    height: auto;
    min-height: 80px;
    resize: vertical;
}
.tsk-ae-input:focus, .tsk-ae-textarea:focus, .tsk-ae-select:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}
.tsk-ae-input-wrap {
    position: relative;
}
.tsk-ae-input-ico  {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}
.tsk-ae-input-wrap .tsk-ae-input {
    padding-left: 30px;
}

.tsk-ae-error     {
    margin: 12px 24px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    color: #991b1b;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
}

.tsk-ae-footer    {
    padding: 14px 24px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-shrink: 0;
}
/* =====================================================
   CATEGORY MANAGEMENT  —  cat-mgr.css
   ===================================================== */

/* ---------- Root / Layout ---------- */
.cat-root          {
    display: flex;
    height: 100%;
    gap: 0;
    min-height: 560px;
    font-size: 13px;
}

.cat-panel-form    {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e8edf3;
    background: #fff;
}
.cat-panel-tree    {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}

@media (max-width: 860px) {
    .cat-root      {
        flex-direction: column;
        height: auto;
    }
    .cat-panel-form {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e8edf3;
    }
}

/* ---------- Panel Header ---------- */
.cat-panel-head    {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f0f4f8;
    flex-shrink: 0;
    background-color: #fff;
}
.cat-panel-head-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.cat-panel-head-icon.form-ico {
    background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    color: #fff;
}
.cat-panel-head-icon.tree-ico {
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    color: #fff;
}
.cat-panel-head-text h6 {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px;
}
.cat-panel-head-text p  {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}
.cat-panel-head-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}

/* ---------- Form Body ---------- */
.cat-form-body     {
    flex: 1;
    /*overflow-y: auto;*/
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.cat-form-body::-webkit-scrollbar {
    width: 4px;
}
.cat-form-body::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

/* Thumbnail uploader */
.cat-thumb-wrap    {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    padding: 14px;
    cursor: pointer;
    transition: all .18s;
}
.cat-thumb-wrap:hover {
    border-color: #818cf8;
    background: #eef2ff;
}
.cat-thumb-img     {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
}
.cat-thumb-info    {
    flex: 1;
    min-width: 0;
}
.cat-thumb-info strong {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    display: block;
    margin-bottom: 2px;
}
.cat-thumb-info span   {
    font-size: 11px;
    color: #94a3b8;
}
.cat-thumb-ico     {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #6366f1;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

/* Form group */
.cat-fg            {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.cat-fg-row        {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.cat-label         {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    padding-left: 4px;
}
.cat-req           {
    color: #ef4444;
    font-size: 12px;
}

.cat-input, .cat-textarea, .cat-select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.cat-textarea      {
    min-height: 72px;
    resize: vertical;
}
.cat-input:focus, .cat-textarea:focus, .cat-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.cat-input.error, .cat-textarea.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

.cat-input-ico-wrap {
    position: relative;
}
.cat-input-ico-wrap i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}
.cat-input-ico-wrap .cat-input {
    padding-left: 30px;
}

/* Select styled */
.cat-select-wrap   {
    position: relative;
}
.cat-select        {
    appearance: none;
    padding-right: 28px;
    cursor: pointer;
}

/* Error / Validation */
.cat-error-bar     {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: #991b1b;
}
.cat-error-bar i   {
    font-size: 14px;
    flex-shrink: 0;
}

/* ---------- Form Footer ---------- */
.cat-form-foot     {
    flex-shrink: 0;
    padding: 14px 20px;
    border-top: 1px solid #f0f4f8;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}
.cat-editing-badge {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #854d0e;
}

/* ---------- Buttons ---------- */
.cat-btn           {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.cat-btn-primary   {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,.25);
}
.cat-btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.cat-btn-ghost     {
    background: #eceef0;
    color: #475569;
}
.cat-btn-ghost:hover   {
    background: #e2e8f0;
}
.cat-btn-reset     {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}
.cat-btn-reset:hover   {
    background: #ffedd5;
}
.cat-btn-sm        {
    padding: 10px;
    font-size: 12px;
    border-radius: 6px;
}
.cat-btn-icon      {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    transition: all .15s;
}
.cat-btn-icon:hover          {
    background: #f8fafc;
}
.cat-btn-icon.edit:hover     {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}
.cat-btn-icon.del:hover      {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #dc2626;
}

/* ---------- Tree Panel Controls ---------- */
.cat-tree-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #e8edf3;
    flex-shrink: 0;
    background-color: #fff;
}
.cat-tree-search   {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 10px;
    height: 32px;
    flex: 1;
    transition: border-color .15s;
}
.cat-tree-search:focus-within {
    border-color: #6366f1;
}
.cat-tree-search i {
    color: #94a3b8;
    font-size: 12px;
}
.cat-tree-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 12px;
    color: #334155;
    outline: none;
}
.cat-tree-search input::placeholder {
    color: #94a3b8;
}

.cat-tree-stat     {
    font-size: 11px;
    color: #666af2;
    white-space: nowrap;
}
.cat-tree-stat strong {
    font-weight: 700;
}

/* ---------- Tree Body ---------- */
.cat-tree-body     {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    max-height: 434px;
    height: 100%;
}
.cat-tree-body::-webkit-scrollbar {
    width: 4px;
}
.cat-tree-body::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

/* ---------- Tree Node ---------- */
.cat-node-list     {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cat-node-list.child-list {
    padding-left: 12px;
    border-left: 1.5px solid #e2e8f0;
    margin-top: 2px;
    margin-left: 12px;
}

.cat-node          {
    position: relative;
}
.cat-node-row      {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
    transition: background .12s;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.cat-node-row:hover {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.cat-node-row.selected {
    background: #eef2ff;
    box-shadow: 0 1px 6px rgba(99,102,241,.12);
}
.cat-node-row.drag-over {
    background: #dbeafe;
    border: 1.5px dashed #3b82f6;
}
.cat-node-row[draggable="true"]:active {
    opacity: .6;
}

/* Toggle arrow */
.cat-node-toggle   {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 10px;
    flex-shrink: 0;
    border-radius: 4px;
    transition: transform .2s;
    cursor: pointer;
}
.cat-node-toggle:hover {
    background: #e2e8f0;
    color: #475569;
}
.cat-node-toggle.open {
    transform: rotate(90deg);
}
.cat-node-toggle.leaf {
    visibility: hidden;
    pointer-events: none;
}

/* Folder icon */
.cat-node-ico      {
    font-size: 15px;
    flex-shrink: 0;
    transition: color .15s;
}
.cat-node-ico.root-ico  {
    color: #f59e0b;
}
.cat-node-ico.child-ico {
    color: #fb923c;
}

/* Node label */
.cat-node-label    {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cat-node-row.selected .cat-node-label {
    color: #4338ca;
    font-weight: 600;
}

/* Child count badge */
.cat-node-count    {
    font-size: 10px;
    font-weight: 700;
    background: #f1f5f9;
    color: #64748b;
    padding: 1px 6px;
    border-radius: 20px;
    flex-shrink: 0;
    margin-left: 4px;
}
.cat-node-row.selected .cat-node-count {
    background: #c7d2fe;
    color: #4338ca;
}

/* Actions — revealed on hover */
.cat-node-acts     {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
    flex-shrink: 0;
}
.cat-node-row:hover .cat-node-acts {
    opacity: 1;
}

/* Drag handle */
.cat-node-drag     {
    cursor: grab;
    color: #cbd5e1;
    font-size: 12px;
    flex-shrink: 0;
}
.cat-node-drag:hover {
    color: #94a3b8;
}

/* Children container */
.cat-node-children {
    overflow: hidden;
    transition: max-height .22s ease, opacity .18s ease;
}
.cat-node-children.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* ---------- Tree Empty / Loading ---------- */
.cat-tree-empty    {
    text-align: center;
    padding: 48px 20px;
}
.cat-tree-empty i  {
    font-size: 34px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 10px;
}
.cat-tree-empty p  {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}
.cat-tree-loading  {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: #64748b;
    font-size: 13px;
}
.cat-spinner       {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: cat-spin .7s linear infinite;
}
@keyframes cat-spin {
    to {
        transform: rotate(360deg);
    }
}
.cat-cos-spin      {
    animation: cat-spin .7s linear infinite;
    display: inline-block;
}

/* ---------- Collapse All / Expand All ---------- */
.cat-tree-actions  {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ---------- Highlight on search ---------- */
.cat-highlight     {
    background: #fde047;
    border-radius: 2px;
    padding: 0 1px;
    color: #92400e;
}

/* ---------- Depth indent lines ---------- */
.cat-node-list.child-list > .cat-node > .cat-node-row::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: #e2e8f0;
}
/* =====================================================
   TO-DROP-TREE  —  to-drop-tree.css
   ===================================================== */

/* ---------- Wrapper ---------- */
.ddt-wrap              {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* ---------- Trigger Button ---------- */
.ddt-btn               {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    user-select: none;
}
.ddt-btn:hover         {
    border-color: #94a3b8;
}
.ddt-btn.open          {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
    border-radius: 7px 7px 0 0;
}
.ddt-btn-text          {
    flex: 1;
    min-width: 0;
    text-align: left;
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ddt-btn-text.placeholder {
    color: #94a3b8;
}
.ddt-btn-arrow         {
    flex-shrink: 0;
    font-size: 11px;
    color: #94a3b8;
    transition: transform .2s;
}
.ddt-btn.open .ddt-btn-arrow {
    transform: rotate(180deg);
    color: #6366f1;
}

/* ---------- Dropdown Panel ---------- */
.ddt-panel             {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #6366f1;
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    overflow: hidden;
    display: none;
}
.ddt-panel.open        {
    display: block;
    animation: ddt-slide .15s ease;
}
@keyframes ddt-slide   {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Search ---------- */
.ddt-search-wrap       {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
}
.ddt-search-wrap i     {
    color: #94a3b8;
    font-size: 12px;
    flex-shrink: 0;
}
.ddt-search-inp        {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    color: #334155;
    background: transparent;
}
.ddt-search-inp::placeholder {
    color: #94a3b8;
}

/* ---------- None Option ---------- */
.ddt-none              {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    transition: background .12s;
}
.ddt-none:hover        {
    background: #f8fafc;
}
.ddt-none.selected     {
    background: #eef2ff;
}
.ddt-none-label        {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    flex: 1;
}
.ddt-none.selected .ddt-none-label {
    color: #4338ca;
    font-style: normal;
    font-weight: 600;
}
.ddt-none-check        {
    font-size: 12px;
    color: #6366f1;
    opacity: 0;
}
.ddt-none.selected .ddt-none-check {
    opacity: 1;
}

/* ---------- Tree Scroll Area ---------- */
.ddt-tree-scroll       {
    max-height: 260px;
    overflow-y: auto;
    padding: 6px 0;
}
.ddt-tree-scroll::-webkit-scrollbar {
    width: 4px;
}
.ddt-tree-scroll::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

/* ---------- Tree Node ---------- */
.ddt-node-list         {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ddt-node-list.child   {
    border-left: 1.5px solid #e8edf3;
}

.ddt-node-row          {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    cursor: pointer;
    transition: background .1s;
    position: relative;
    border-radius: 6px;
    margin: 1px 6px;
}
.ddt-node-row:hover    {
    background: #f8fafc;
}
.ddt-node-row.selected {
    background: #eef2ff;
}

/* indent per depth */
.ddt-node-row[data-depth="0"] {
    padding-left: 10px;
}
.ddt-node-row[data-depth="1"] {
    padding-left: 22px;
}
.ddt-node-row[data-depth="2"] {
    padding-left: 38px;
}
.ddt-node-row[data-depth="3"] {
    padding-left: 54px;
}

.ddt-node-toggle       {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .18s;
    cursor: pointer;
}
.ddt-node-toggle:hover {
    background: #e2e8f0;
}
.ddt-node-toggle.open  {
    transform: rotate(90deg);
}
.ddt-node-toggle.leaf  {
    visibility: hidden;
    pointer-events: none;
}

.ddt-node-ico          {
    font-size: 13px;
    flex-shrink: 0;
}
.ddt-node-ico.root     {
    color: #f59e0b;
}
.ddt-node-ico.child    {
    color: #fb923c;
}

.ddt-node-label        {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ddt-node-row.selected .ddt-node-label {
    color: #4338ca;
    font-weight: 600;
}

.ddt-node-cnt          {
    font-size: 10px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 1px 5px;
    border-radius: 20px;
    flex-shrink: 0;
}
.ddt-node-row.selected .ddt-node-cnt {
    background: #c7d2fe;
    color: #4338ca;
}

.ddt-node-check        {
    font-size: 11px;
    color: #6366f1;
    opacity: 0;
    flex-shrink: 0;
}
.ddt-node-row.selected .ddt-node-check {
    opacity: 1;
}

/* Children container */
.ddt-node-children     {
    overflow: hidden;
    transition: max-height .2s ease, opacity .18s;
}
.ddt-node-children.collapsed {
    max-height: 0 !important;
    opacity: 0;
}

/* ---------- Empty ---------- */
.ddt-empty             {
    text-align: center;
    padding: 20px;
    font-size: 12px;
    color: #94a3b8;
}

/* ---------- Highlight ---------- */
.ddt-highlight         {
    background: #fde047;
    border-radius: 2px;
    padding: 0 1px;
    color: #92400e;
}

/* ---------- Footer ---------- */
.ddt-footer            {
    border-top: 1px solid #f1f5f9;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ddt-footer-label      {
    font-size: 11px;
    color: #94a3b8;
}
.ddt-footer-label strong {
    color: #475569;
}
.ddt-footer-clear      {
    font-size: 11px;
    color: #6366f1;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
}
.ddt-footer-clear:hover {
    color: #4338ca;
}
/* ── Academy Assign Panel (sidebar) ─────────────────────────── */
.ic-academy-assign-panel {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color, #e8edf2);
}
.ic-academy-assign-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted, #8996a4);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}
.ic-academy-assign-select {
    margin-bottom: 8px;
}
.ic-academy-cat-sel {
    width: 100%;
    font-size: 13px;
}
.ic-academy-assign-btn {
    width: 100%;
    padding: 7px 0;
    background: #4f6ef7;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background .18s;
}
.ic-academy-assign-btn:hover {
    background: #3a57e8;
}
.ic-footer-target-cat .ddt-panel {
    bottom: 100%;
    top:auto;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #6366f1;
    border-top: 1px solid #6366f1;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.ic-footer-target-cat .ddt-btn.open{
    border-radius: 0 0 7px 7px;
}
.ic-footer-left{
    display: flex;
    align-items: center;
}
.ic-footer-target-cat {
    position: relative;
    min-width: 180px;
}
span.ic-footer-target-label {
    position: absolute;
    top: -9px;
    left: 14px;
    white-space: nowrap;
    z-index: 2;
    font-size: 0.9em;
    color: #6c63ff;
    font-weight: 600;
}
span.ic-footer-target-label:after {
    width: 110%;
    height: 1px;
    background-color: #fff;
    content: '';
    position: absolute;
    top: 9px;
    left: -5px;
    z-index: -1;
}

.inv-page-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 40px;
}

.inv-widgets-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.inv-widget {
    background: #fff;
    border: 0.5px solid #e4e8ef;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow .15s;
}

.inv-widget:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.inv-widget-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
}

.inv-widget-icon--total   {
    background: #EEF2FF;
    color: #4F46E5;
}
.inv-widget-icon--pending {
    background: #FFFBEB;
    color: #D97706;
}
.inv-widget-icon--success {
    background: #ECFDF5;
    color: #059669;
}
.inv-widget-icon--expired {
    background: #FFF1F2;
    color: #E11D48;
}

.inv-widget-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.inv-widget-value {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

.inv-filter-bar {
    background: #fff;
    border: 0.5px solid #e4e8ef;
    border-radius: 10px;
    padding: 13px 16px;
}

.inv-filter-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inv-filter-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.inv-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.inv-search-input {
    width: 100%;
    border: 0.5px solid #dde3ec;
    border-radius: 7px;
    padding: 7px 12px 7px 32px;
    font-size: 13px;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    transition: border-color .15s, background .15s;
}

.inv-search-input:focus {
    border-color: #6366F1;
    background: #fff;
}

.inv-filter-select {
    font-size: 13px;
}

.inv-filter-btn {
    padding: 7px 16px;
    background: #4F46E5;
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background .15s;
    white-space: nowrap;
}

.inv-filter-btn:hover {
    background: #4338CA;
}

.inv-filter-clear-btn {
    padding: 7px 14px;
    background: transparent;
    border: 0.5px solid #dde3ec;
    border-radius: 7px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background .15s;
    white-space: nowrap;
}

.inv-filter-clear-btn:hover {
    background: #f1f5f9;
}

.inv-section {
    background: #fff;
    border: 0.5px solid #e4e8ef;
    border-radius: 12px;
    overflow: hidden;
}

.inv-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
    border-bottom: 0.5px solid #f1f5f9;
}

.inv-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-section-icon {
    font-size: 17px;
    color: #6366F1;
}

.inv-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.inv-section-sub {
    font-size: 12px;
    color: #94a3b8;
}

.inv-table-wrap {
    min-height: 120px;
}

/*.inv-pagination-wrap {
    padding: 10px 18px;
    border-top: 0.5px solid #f1f5f9;
}*/

.inv-loading,
.inv-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 52px 20px;
    color: #94a3b8;
    font-size: 13px;
}

.inv-empty {
    flex-direction: column;
    gap: 8px;
}
.inv-empty i {
    font-size: 30px;
}

.inv-tbl-recipient {
    line-height: 1.45;
}

.inv-tbl-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-tbl-fullname {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
}

.inv-tbl-email {
    font-size: 11px;
    color: #94a3b8;
}

.inv-tbl-academy {
    font-size: 13px;
    color: #374151;
}

.inv-tbl-expiry {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.inv-tbl-updated {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
}

.inv-upd-icon {
    font-size: 11px;
    opacity: .7;
}

.inv-used-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #059669;
    display: inline-block;
    flex-shrink: 0;
}

.inv-uses-badge {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 20px;
}

.inv-uses-used {
    background: #ECFDF5;
    color: #059669;
}

.inv-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    gap: 4px;
}

.inv-s-success      {
    background: #ECFDF5;
    color: #059669;
}
.inv-s-failed       {
    background: #FFF1F2;
    color: #E11D48;
}
.inv-s-expired      {
    background: #FFF7ED;
    color: #C2410C;
}
.inv-s-pending      {
    background: #FFFBEB;
    color: #D97706;
}
.inv-s-pending-sent {
    background: #EFF6FF;
    color: #2563EB;
}
.inv-s-cancel       {
    background: #F1F5F9;
    color: #64748B;
}

.inv-mem-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    white-space: nowrap;
}

.inv-mem-annual    {
    background: #EEF2FF;
    color: #4338CA;
}
.inv-mem-corporate {
    background: #F0FDF4;
    color: #15803D;
}
.inv-mem-monthly   {
    background: #FFF7ED;
    color: #C2410C;
}
.inv-mem-trial     {
    background: #F8FAFC;
    color: #64748B;
    border: 0.5px solid #e2e8f0;
}
.inv-mem-default   {
    background: #F1F5F9;
    color: #475569;
}

.inv-tbl-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

.inv-act-btn {
    width: 28px;
    height: 28px;
    border: 0.5px solid #e4e8ef;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .13s;
    flex-shrink: 0;
}

.inv-act-btn:hover:not(.inv-act-disabled) {
    background: #f8fafc;
    border-color: #c7d0dd;
}
.inv-act-detail:hover:not(.inv-act-disabled)  {
    color: #4F46E5;
    border-color: #818CF8;
    background: #EEF2FF;
}
.inv-act-resend:hover:not(.inv-act-disabled)  {
    color: #2563EB;
    border-color: #93C5FD;
    background: #EFF6FF;
}
.inv-act-extend:hover:not(.inv-act-disabled)  {
    color: #059669;
    border-color: #6EE7B7;
    background: #ECFDF5;
}
.inv-act-cancel:hover:not(.inv-act-disabled)  {
    color: #E11D48;
    border-color: #FDA4AF;
    background: #FFF1F2;
}

.inv-act-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

.inv-detail-modal {
    padding: 0;
}

.inv-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 0.5px solid #f1f5f9;
    gap: 12px;
}

.inv-detail-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.inv-detail-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #818CF8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

.inv-detail-fullname {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 2px;
}

.inv-detail-header-email {
    font-size: 12px;
    color: #94a3b8;
}

.inv-detail-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.inv-detail-used-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
    background: #ECFDF5;
    color: #059669;
    gap: 3px;
}

.inv-detail-body {
    padding: 20px 24px;
}

.inv-detail-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 12px;
}

.inv-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 0.5px solid #e4e8ef;
    border-radius: 10px;
    overflow: hidden;
}

.inv-detail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 0.5px solid #f1f5f9;
    border-right: 0.5px solid #f1f5f9;
}

.inv-detail-row:nth-child(even)       {
    border-right: none;
}
.inv-detail-row:nth-last-child(-n+2)  {
    border-bottom: none;
}

.inv-detail-label {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .35px;
}

.inv-detail-value {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
}

.inv-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 0.5px solid #f1f5f9;
    gap: 10px;
}

.inv-detail-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inv-detail-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: all .13s;
}

.inv-detail-action-resend {
    background: #EFF6FF;
    color: #2563EB;
    border-color: #BFDBFE;
}
.inv-detail-action-resend:hover:not(.inv-detail-action-disabled) {
    background: #DBEAFE;
}

.inv-detail-action-extend {
    background: #ECFDF5;
    color: #059669;
    border-color: #A7F3D0;
}
.inv-detail-action-extend:hover:not(.inv-detail-action-disabled) {
    background: #D1FAE5;
}

.inv-detail-action-cancel {
    background: #FFF1F2;
    color: #E11D48;
    border-color: #FECDD3;
}
.inv-detail-action-cancel:hover:not(.inv-detail-action-disabled) {
    background: #FFE4E6;
}

.inv-detail-action-disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
}

.inv-detail-close-btn {
    padding: 7px 18px;
    border: 0.5px solid #dde3ec;
    border-radius: 7px;
    background: #fff;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: background .13s;
}

.inv-detail-close-btn:hover {
    background: #f8fafc;
}

.inv-detail-wrap .modal-dialog {
    max-width: 580px;
}
.iv-form-modal .modal-dialog {
    max-width: 880px;
}

.iv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 0.5px solid #eef1f6;
}

.iv-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.iv-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #EEF2FF;
    color: #4F46E5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.iv-header-sub {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.iv-modal-close-btn {
    width: 32px;
    height: 32px;
    border: 0.5px solid #e4e8ef;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background .13s;
    padding: 0;
}

.iv-modal-close-btn:hover {
    background: #f1f5f9;
    color: #1a2233;
}

.iv-form-body {
    padding: 20px 24px 0;
}

.iv-form-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.iv-form-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.iv-section {
    background: #fafbfc;
    border: 0.5px solid #eef1f6;
    border-radius: 10px;
    padding: 16px 18px;
}

.iv-section-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #6366F1;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.iv-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.iv-input-wrap > i {
    position: absolute;
    left: 11px;
    font-size: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.iv-input-wrap .form-control {
    padding-left: 32px;
}

.iv-group-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.iv-group-loading {
    font-size: 14px;
    color: #6366F1;
}

.iv-hide {
    display: none !important;
}

.iv-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.iv-duration-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.iv-duration-btns {
    display: flex;
    gap: 6px;
}

.iv-dur-btn {
    padding: 5px 14px;
    border: 0.5px solid #dde3ec;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all .13s;
}

.iv-dur-btn:hover {
    border-color: #818CF8;
    color: #4F46E5;
    background: #EEF2FF;
}

.iv-dur-btn-active {
    border-color: #6366F1;
    background: #4F46E5;
    color: #fff;
}

.iv-dur-btn-active:hover {
    background: #4338CA;
    color: #fff;
}

.iv-duration-input-wrap {
    flex: 1;
}
.iv-duration-input-wrap .form-control {
    padding-left: 32px;
}

.iv-expiry-preview {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #64748b;
    background: #EEF2FF;
    border: 0.5px solid #C7D2FE;
    border-radius: 7px;
    padding: 8px 12px;
    margin-bottom: 0;
}

.iv-expiry-date {
    color: #4338CA;
    margin-left: 4px;
}

.iv-field-hint {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.iv-sendvia-cards {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.iv-sendvia-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 8px;
    border: 0.5px solid #e4e8ef;
    border-radius: 8px;
    background: #fff;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    cursor: default;
    transition: all .15s;
}

.iv-sendvia-card i {
    font-size: 18px;
}

.iv-svc-active.iv-svc-email {
    border-color: #BFDBFE;
    background: #EFF6FF;
    color: #2563EB;
}

.iv-svc-active.iv-svc-sms {
    border-color: #A7F3D0;
    background: #ECFDF5;
    color: #059669;
}

.iv-svc-active.iv-svc-none {
    border-color: #FECDD3;
    background: #FFF1F2;
    color: #E11D48;
}

.iv-form-footer {
    padding: 14px 24px;
    border-top: 0.5px solid #eef1f6;
    margin-top: 20px;
}

.iv-footer-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.iv-cancel-btn {
    padding: 8px 18px;
    border: 0.5px solid #dde3ec;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: background .13s;
}

.iv-cancel-btn:hover {
    background: #f8fafc;
}

.iv-save-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    background: #4F46E5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

.iv-save-btn:hover {
    background: #4338CA;
}
.iv-save-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.iv-duration-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.iv-custom-label {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    font-weight: 500;
}

.iv-maxuses-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.iv-uses-btn {
    padding: 5px 12px;
    border: 0.5px solid #dde3ec;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all .13s;
    min-width: 36px;
    text-align: center;
}

.iv-uses-btn:hover {
    border-color: #818CF8;
    color: #4F46E5;
    background: #EEF2FF;
}

.iv-uses-btn-active {
    border-color: #6366F1;
    background: #4F46E5;
    color: #fff;
}

.iv-uses-btn-active:hover {
    background: #4338CA;
    color: #fff;
}
.bv-form-modal .modal-dialog {
    max-width: 760px;
}

.bv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 0.5px solid #eef1f6;
}

.bv-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bv-header-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #F0FDF4;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.bv-header-sub {
    font-size: 12px;
    color: #94a3b8;
    margin: 0;
}

.bv-modal-close-btn {
    width: 32px;
    height: 32px;
    border: 0.5px solid #e4e8ef;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: background .12s;
    padding: 0;
}

.bv-modal-close-btn:hover {
    background: #f1f5f9;
}

.bv-stepper {
    display: flex;
    align-items: center;
    padding: 16px 28px;
    background: #f8fafc;
    border-bottom: 0.5px solid #eef1f6;
    gap: 0;
}

.bv-step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    opacity: .4;
    transition: opacity .2s;
}

.bv-step-active {
    opacity: 1;
}
.bv-step-done   {
    opacity: .8;
}

.bv-step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all .2s;
}

.bv-step-active .bv-step-circle {
    background: #16A34A;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(22,163,74,.15);
}

.bv-step-done .bv-step-circle {
    background: #DCFCE7;
    color: #16A34A;
}

.bv-step-num  {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.bv-step-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-top: 1px;
}
.bv-step-active .bv-step-label {
    color: #16A34A;
}

.bv-step-line {
    flex: 1;
    height: 1.5px;
    background: #e2e8f0;
    margin: 0 12px;
    margin-bottom: 14px;
}

.bv-hide {
    display: none !important;
}

.bv-panel-inner {
    padding: 24px 28px;
}

.bv-panel-settings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 24px 28px;
}

.bv-settings-section {
    background: #fafbfc;
    border: 0.5px solid #eef1f6;
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.bv-settings-section:last-child {
    margin-bottom: 0;
}

.bv-settings-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #16A34A;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.bv-inp-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bv-inp-wrap > i {
    position: absolute;
    left: 11px;
    font-size: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.bv-inp-wrap .form-control {
    padding-left: 32px;
}
.bv-textarea {
    resize: vertical;
    min-height: 64px;
    font-size: 13px;
}

.bv-drop-zone {
    border: 2px dashed #CBD5E1;
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    background: #fafbfc;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.bv-drop-zone:hover,
.bv-drag-over {
    border-color: #16A34A;
    background: #F0FDF4;
}

.bv-drop-done {
    border-color: #16A34A;
    border-style: solid;
    background: #F0FDF4;
}

.bv-drop-icon {
    font-size: 44px;
    color: #94a3b8;
    line-height: 1;
    margin-bottom: 4px;
    transition: color .2s;
}

.bv-drop-done .bv-drop-icon,
.bv-drop-zone:hover .bv-drop-icon {
    color: #16A34A;
}

.bv-drop-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.bv-drop-or {
    font-size: 12px;
    color: #94a3b8;
}

.bv-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: #16A34A;
    color: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .13s;
    margin: 4px 0;
}

.bv-file-btn:hover {
    background: #15803D;
    color: #fff;
}
.bv-file-hidden {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.bv-drop-formats {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
    justify-content: center;
}

.bv-fmt-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    background: #e2e8f0;
    color: #475569;
    border-radius: 4px;
}

.bv-fmt-limit {
    font-size: 11px;
    color: #94a3b8;
}

.bv-file-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #F0FDF4;
    border: 0.5px solid #BBF7D0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.bv-file-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.bv-file-bar-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #DCFCE7;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.bv-file-bar-name {
    font-size: 13px;
    font-weight: 500;
    color: #166534;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.bv-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bv-progress-track {
    flex: 1;
    height: 5px;
    background: #BBF7D0;
    border-radius: 10px;
    overflow: hidden;
}

.bv-progress-bar {
    height: 100%;
    background: #16A34A;
    border-radius: 10px;
    transition: width .2s;
    width: 0;
}

.bv-progress-pct {
    font-size: 11px;
    color: #166534;
    font-weight: 600;
    white-space: nowrap;
}

.bv-upload-success {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: #16A34A;
}

.bv-file-remove-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .12s;
    padding: 0;
    flex-shrink: 0;
}

.bv-file-remove-btn:hover {
    background: #FFF1F2;
    color: #E11D48;
}

.bv-sheet-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 0.5px solid #eef1f6;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 4px;
}

.bv-sheet-icon {
    font-size: 16px;
    color: #16A34A;
}
.bv-sheet-label {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
}
.bv-sheet-select-wrap {
    flex: 1;
}
.bv-sheet-sel {
    font-size: 13px;
}

.bv-format-guide {
    background: #f8fafc;
    border: 0.5px solid #eef1f6;
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 4px;
}

.bv-guide-title {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.bv-guide-cols {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.bv-guide-group-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.bv-guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.bv-col-tag {
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
    padding: 2px 8px;
    border-radius: 4px;
}

.bv-col-required {
    background: #FEE2E2;
    color: #B91C1C;
}
.bv-col-optional  {
    background: #EFF6FF;
    color: #1D4ED8;
}

.bv-sample-dl {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #16A34A;
    font-weight: 500;
    text-decoration: none;
}

.bv-sample-dl:hover {
    text-decoration: underline;
}

.bv-mapping-header {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    gap: 12px;
    padding: 0 4px 8px;
    border-bottom: 0.5px solid #f1f5f9;
    margin-bottom: 8px;
}

.bv-mapping-header-col {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #94a3b8;
}

.bv-mapping-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bv-map-row {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fafbfc;
    border: 0.5px solid #eef1f6;
    border-radius: 8px;
    transition: border-color .13s;
}

.bv-map-row:hover {
    border-color: #BBF7D0;
}

.bv-map-field {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    display: flex;
    align-items: center;
}

.bv-map-required {
    color: #E11D48;
    margin-right: 2px;
}

.bv-map-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
    font-size: 18px;
}

.bv-map-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    background: #FFFBEB;
    border: 0.5px solid #FDE68A;
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 14px;
}

.bv-dur-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bv-dur-btns {
    display: flex;
    gap: 5px;
}

.bv-dur-btn {
    padding: 5px 11px;
    border: 0.5px solid #dde3ec;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all .12s;
}

.bv-dur-btn:hover {
    border-color: #BBF7D0;
    color: #16A34A;
    background: #F0FDF4;
}
.bv-dur-active {
    border-color: #16A34A;
    background: #16A34A;
    color: #fff;
}
.bv-dur-active:hover {
    background: #15803D;
    color: #fff;
}

.bv-dur-unit {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.bv-dur-custom-inp {
    width: 90px;
}
.bv-dur-custom-inp .form-control {
    text-align: center;
}

.bv-summary-box {
    background: #F0FDF4;
    border: 0.5px solid #BBF7D0;
    border-radius: 10px;
    padding: 14px 16px;
}

.bv-summary-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #16A34A;
    margin-bottom: 8px;
}

.bv-summary-file {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #166534;
    font-weight: 500;
}

.bv-summary-check {
    font-size: 16px;
    color: #16A34A;
}
.bv-summary-fname {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bv-modal-footer {
    padding: 14px 24px;
    border-top: 0.5px solid #eef1f6;
}

.bv-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bv-footer-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bv-ghost-btn {
    padding: 8px 16px;
    border: 0.5px solid #dde3ec;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: background .12s;
}

.bv-ghost-btn:hover {
    background: #f8fafc;
}

.bv-prev-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 0.5px solid #dde3ec;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: all .12s;
}

.bv-prev-btn:hover {
    background: #f1f5f9;
}

.bv-next-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    background: #16A34A;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .13s;
}

.bv-next-btn:hover {
    background: #15803D;
}
.bv-next-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.bv-submit-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 22px;
    background: #16A34A;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .13s;
}

.bv-submit-btn:hover {
    background: #15803D;
}
.bv-submit-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.bvl-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
}

.bvl-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 0.5px solid #e4e8ef;
    border-radius: 12px;
    padding: 16px 20px;
}

.bvl-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bvl-topbar-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #F0FDF4;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.bvl-topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}
.bvl-topbar-sub   {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.bvl-new-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: #16A34A;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .13s;
}

.bvl-new-btn:hover {
    background: #15803D;
}

.bvl-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: 16px;
}

.bvl-loading,
.bvl-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: #94a3b8;
    font-size: 13px;
}

.bvl-empty i {
    font-size: 36px;
}

.bvl-empty-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #16A34A;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
    transition: background .13s;
}

.bvl-empty-new-btn:hover {
    background: #15803D;
}

.bvl-card {
    background: #fff;
    border: 0.5px solid #e4e8ef;
    border-radius: 14px;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}

.bvl-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.07);
    border-color: #cbd5e1;
}

.bvl-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 18px 14px;
    border-bottom: 0.5px solid #f1f5f9;
    gap: 10px;
}

.bvl-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bvl-card-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #F0FDF4;
    color: #16A34A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.bvl-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bvl-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.bvl-card-academy {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
}
.bvl-card-sep     {
    font-size: 11px;
    color: #cbd5e1;
}
.bvl-card-id      {
    font-size: 11px;
    font-family: monospace;
    color: #94a3b8;
}

.bvl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bvl-s-completed  {
    background: #DCFCE7;
    color: #166534;
}
.bvl-s-processing {
    background: #EFF6FF;
    color: #1D4ED8;
}
.bvl-s-pending    {
    background: #FEF9C3;
    color: #854D0E;
}
.bvl-s-failed     {
    background: #FEE2E2;
    color: #991B1B;
}
.bvl-s-cancelled  {
    background: #F1F5F9;
    color: #475569;
}

.bvl-card-body {
    padding: 16px 18px;
}

.bvl-total-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 14px;
}

.bvl-total-num  {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}
.bvl-total-label {
    font-size: 12px;
    color: #94a3b8;
}

.bvl-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bvl-stat-block {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bvl-stat-top {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.bvl-stat-count {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.bvl-stat-pct {
    font-size: 10px;
    color: #94a3b8;
}

.bvl-stat-bar-wrap {
    height: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.bvl-stat-bar {
    height: 100%;
    border-radius: 10px;
    min-width: 2px;
    transition: width .4s;
}

.bvl-stat-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
}

.bvl-c-sent    {
    color: #2563EB;
}
.bvl-c-opened  {
    color: #16A34A;
}
.bvl-c-clicked {
    color: #D97706;
}
.bvl-c-conv    {
    color: #7C3AED;
}

.bvl-c-sent-bar    {
    background: #2563EB;
}
.bvl-c-opened-bar  {
    background: #16A34A;
}
.bvl-c-clicked-bar {
    background: #D97706;
}
.bvl-c-conv-bar    {
    background: #7C3AED;
}

.bvl-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    border-top: 0.5px solid #f1f5f9;
    background: #fafbfc;
}

.bvl-card-dates {
    display: flex;
    gap: 14px;
}

.bvl-card-date {
    font-size: 11px;
    color: #64748b;
    display: flex;
    align-items: center;
}

.bvl-card-created {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
}
.bvl-file-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: #F8FAFC;
    border-top: 0.5px solid #f1f5f9;
    border-bottom: 0.5px solid #f1f5f9;
}

.bvl-file-bar-icon {
    font-size: 14px;
    color: #16A34A;
    flex-shrink: 0;
}

.bvl-file-bar-name {
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ============================================================
   BADGES — CSS (Revize Son Hal)
   FIX: 3D hover animasyonu, detail hero düzeltmesi
   ============================================================ */

.bdg-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---- Stats Strip ---- */
.bdg-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bdg-stat-card {
    background: #fff;
    border: 0.5px solid #e4e8ef;
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: box-shadow .15s;
}
.bdg-stat-card:hover {
    box-shadow: 0 3px 14px rgba(0,0,0,.07);
}

.bdg-stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.bdg-stat--indigo .bdg-stat-icon-wrap {
    background: #EEF2FF;
    color: #6366F1;
}
.bdg-stat--teal   .bdg-stat-icon-wrap {
    background: #ECFDF5;
    color: #10B981;
}
.bdg-stat--amber  .bdg-stat-icon-wrap {
    background: #FFFBEB;
    color: #F59E0B;
}
.bdg-stat--purple .bdg-stat-icon-wrap {
    background: #F5F3FF;
    color: #8B5CF6;
}

.bdg-stat-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    letter-spacing: .3px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.bdg-stat-val   {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}
.bdg-stat-sub   {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* ---- Grid ---- */
.bdg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ---- Card ---- */
.bdg-card {
    background: #fff;
    border: 0.5px solid #e4e8ef;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow .18s, transform .18s, border-color .18s;
}
.bdg-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    transform: translateY(-2px);
    border-color: #c7d0dd;
}

.bdg-card-preview {
    padding: 24px 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 0.5px solid #f1f5f9;
}

/* ---- FIX #3: 3D Hover animasyonu ---- */
.bdg-visual-wrap {
    perspective: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bdg-visual {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    /* FIX #2: background-color inline style'dan gelir, gradient yok */
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    flex-shrink: 0;
    transform-style: preserve-3d;
}

/* Hover: card üzerinden visual'e 3D tilt */
.bdg-card:hover .bdg-visual {
    transform: perspective(500px) rotateY(20deg) rotateX(0) scale(1.12);
    box-shadow: -6px 12px 32px rgba(0,0,0,.22), 4px 4px 0 rgba(255,255,255,.15);
}

/* Detail overlay'deki rozet 3D hover */
.bdg-detail-visual-wrap {
    perspective: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 1rem;
    top: 2rem;
}

.bdg-detail-visual {
    /* FIX #5: width/height/border-radius inline style'dan gelir */
    /* Burada sadece flex ve transition */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    transform-style: preserve-3d;
    cursor: default;
}

.bdg-detail-visual:hover {
    transform: perspective(500px) rotateY(20deg) rotateX(0) scale(1.12);
    box-shadow: -5px 14px 36px rgba(0,0,0,.28), 3px 3px 0 rgba(255,255,255,.12);
}

/* Preview paneldeki rozet 3D hover */
.bdg-preview-visual-wrap {
    perspective: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bdg-preview-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    transform-style: preserve-3d;
}

.bdg-preview-visual:hover {
    transform: perspective(500px) rotateY(20deg) rotateX(0) scale(1.12);
    box-shadow: -5px 12px 28px rgba(0,0,0,.2);
}

.bdg-visual-icon       {
/*    font-size: 36px;
    color: #fff;*/
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}
.bdg-preview-visual-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
    transition: all .18s;
}
.bdg-detail-visual-icon  {
/*    font-size: 46px;
    color: #fff;*/
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

/* ---- Pills ---- */
.bdg-card-badges-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.bdg-status-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 20px;
}
.bdg-status-active  {
    background: #DCFCE7;
    color: #166534;
}
.bdg-status-passive {
    background: #F1F5F9;
    color: #475569;
}

.bdg-rarity-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
}
.bdg-rare-common    {
    background: #F1F5F9;
    color: #64748B;
}
.bdg-rare-uncommon  {
    background: #ECFDF5;
    color: #059669;
}
.bdg-rare-rare      {
    background: #EFF6FF;
    color: #2563EB;
}
.bdg-rare-epic      {
    background: #F5F3FF;
    color: #7C3AED;
}
.bdg-rare-legendary {
    background: #FEF9C3;
    color: #B45309;
}

.bdg-level-pill {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: #FFF7ED;
    color: #C2410C;
}

/* ---- Card Body ---- */
.bdg-card-body    {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bdg-card-name    {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.bdg-card-desc    {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.bdg-card-tags    {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.bdg-tag          {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 5px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
}
.bdg-tag-cat      {
    background: #EEF2FF;
    color: #4338CA;
}

.bdg-card-progress-wrap   {
    margin-top: 2px;
}
.bdg-card-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 5px;
}
.bdg-progress-track       {
    height: 5px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}
.bdg-progress-fill        {
    height: 100%;
    border-radius: 10px;
    transition: width .4s;
    min-width: 3px;
}

.bdg-card-footer  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 0.5px solid #f1f5f9;
}
.bdg-card-holders {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
}
.bdg-card-actions {
    display: flex;
    gap: 4px;
}

.bdg-act-btn {
    width: 28px;
    height: 28px;
    border: 0.5px solid #e4e8ef;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .13s;
    padding: 0;
}
.bdg-act-edit:hover   {
    color: #6366F1;
    border-color: #818CF8;
    background: #EEF2FF;
}
.bdg-act-detail:hover {
    color: #0EA5E9;
    border-color: #7DD3FC;
    background: #E0F2FE;
}

/* ---- Empty ---- */
.bdg-empty {
    grid-column: 1/-1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 20px;
    color: #94a3b8;
}
.bdg-empty-icon  {
    font-size: 44px;
}
.bdg-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}
.bdg-empty-sub   {
    font-size: 13px;
    color: #94a3b8;
}

/* ---- Buttons ---- */
.bdg-btn-primary  {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #6366F1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .13s;
}
.bdg-btn-primary:hover    {
    background: #4F46E5;
}
.bdg-btn-primary:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.bdg-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0.5px solid #dde3ec;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: background .12s;
}
.bdg-btn-secondary:hover {
    background: #f8fafc;
}

/* ---- Overlays ---- */
.bdg-detail-overlay,
.bdg-editor-overlay,
.bdg-cat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

/* ---- Detail Panel ---- */
.bdg-detail-panel {
    background: #fff;
    border-radius: 20px;
    width: 440px;
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0,0,0,.18);
}

/* FIX #5: Hero sadece renk alır, rozet görseli kendi boyutlarıyla içeride */
.bdg-detail-hero {
    position: relative;
    padding: 20px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-radius: 20px 20px 0 0;
    /* width/height/border-radius BURAYA GELMİYOR - sadece background */
    /*overflow: hidden;*/
}

.bdg-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    background: rgba(255,255,255,.25);
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background .12s;
    padding: 0;
    z-index: 1;
}
.bdg-detail-close:hover {
    background: rgba(255,255,255,.4);
}

/* FIX #5: Rozet görselinin kendi boyutları inline style'dan geliyor */
/* .bdg-detail-visual boyut/renk inline'dan - burada sadece flex */
.bdg-detail-visual-wrap {
    perspective: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bdg-detail-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
    transform-style: preserve-3d;
    /* Fallback boyutlar (inline style override eder) */
    min-width: 80px;
    min-height: 80px;
}

.bdg-detail-hero-name   {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.bdg-detail-hero-pills  {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.bdg-detail-body        {
    padding: 20px 24px;
}
.bdg-detail-desc        {
     font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 16px;
    padding-left: 5.5rem;
}

.bdg-detail-stats-row {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: #f1f5f9;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}
.bdg-detail-stat        {
    background: #fff;
    padding: 14px 10px;
    text-align: center;
}
.bdg-detail-stat-val    {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}
.bdg-detail-stat-label  {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-top: 3px;
}

.bdg-detail-progress-wrap   {
    margin-bottom: 16px;
}
.bdg-detail-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 6px;
}

.bdg-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 0.5px solid #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}
.bdg-detail-row  {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    border-bottom: 0.5px solid #f8fafc;
    border-right: 0.5px solid #f8fafc;
}
.bdg-detail-row:nth-child(even)      {
    border-right: none;
}
.bdg-detail-row:nth-last-child(-n+2) {
    border-bottom: none;
}
.bdg-detail-row-label {
    font-size: 10px;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.bdg-detail-row-val   {
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
}

.bdg-detail-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 24px;
    border-top: 0.5px solid #f1f5f9;
}

/* ---- Editor ---- */
.bdg-editor {
    background: #fff;
    border-radius: 20px;
    width: 1020px;
    max-width: 96vw;
    max-height: 92vh;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
}

.bdg-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 0.5px solid #f1f5f9;
    flex-shrink: 0;
}
.bdg-editor-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bdg-editor-header-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EEF2FF;
    color: #6366F1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.bdg-editor-title {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}
.bdg-editor-sub   {
    font-size: 12px;
    color: #94a3b8;
}

.bdg-editor-close {
    width: 32px;
    height: 32px;
    border: 0.5px solid #e4e8ef;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 0;
    transition: background .12s;
}
.bdg-editor-close:hover {
    background: #f1f5f9;
}

.bdg-editor-body {
    display: grid;
    grid-template-columns: 70% 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.bdg-editor-left {
    padding: 18px 20px;
    overflow-y: auto;
    border-right: 0.5px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bdg-editor-right {
    display: flex;
    flex-direction: column;
    overflow: auto;
    background: #fafbfc;
}

.bdg-editor-section {
    background: #fff;
    border: 0.5px solid #eef1f6;
    border-radius: 12px;
    padding: 14px 16px;
}
.bdg-editor-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #6366F1;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bdg-field     {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.bdg-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.bdg-field-sm  {
    max-width: 100px;
}
.bdg-label     {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
}
.bdg-req       {
    color: #E11D48;
}

.bdg-toggles-row  {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.bdg-toggle-inp   {
    display: none;
}
.bdg-toggle-item  {
    cursor: pointer;
}
.bdg-toggle-box   {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border: 0.5px solid #dde3ec;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    background: #fff;
    transition: all .13s;
    user-select: none;
}
.bdg-toggle-inp:checked + .bdg-toggle-box {
    border-color: #6366F1;
    background: #EEF2FF;
    color: #4F46E5;
}

.bdg-number-inp-wrap {
    display: flex;
    align-items: center;
    border: 0.5px solid #dde3ec;
    border-radius: 8px;
    overflow: hidden;
}
.bdg-num-btn {
    width: 34px;
    height: 36px;
    border: none;
    background: #f8fafc;
    color: #374151;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.bdg-num-btn:hover {
    background: #EEF2FF;
    color: #6366F1;
}
.bdg-number-inp  {
    flex: 1;
    border: none;
    outline: none;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    padding: 0;
    background: #fff;
    min-width: 0;
}

/* ---- Icon Picker ---- */
.bdg-icon-picker-panel {
    display: flex;
    flex-direction: column;
    border-bottom: 0.5px solid #eef1f6;
    background: #fff;
    flex-shrink: 0;
    max-height: 220px;
}

.bdg-icon-picker-header {
    padding: 10px 14px 8px;
    border-bottom: 0.5px solid #f1f5f9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.bdg-icon-picker-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6366F1;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.bdg-icon-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 180px;
}

.bdg-icon-search-ico {
    position: absolute;
    left: 8px;
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}

.bdg-icon-search-inp {
    width: 100%;
    border: 0.5px solid #dde3ec;
    border-radius: 6px;
    padding: 5px 8px 5px 26px;
    font-size: 12px;
    color: #0f172a;
    background: #f8fafc;
    outline: none;
    transition: border-color .13s;
}
.bdg-icon-search-inp:focus {
    border-color: #6366F1;
    background: #fff;
}

.bdg-icon-grid-wrap {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    padding: 8px 10px;
    overflow-y: auto;
    flex: 1;
}
.bdg-icon-grid-wrap::-webkit-scrollbar {
    width: 3px;
}
.bdg-icon-grid-wrap::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

.bdg-icon-btn {
    aspect-ratio: 1;
    border: 0.5px solid #eef1f6;
    border-radius: 6px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all .1s;
    padding: 0;
    min-height: 32px;
}
.bdg-icon-btn:hover        {
    border-color: #818CF8;
    color: #6366F1;
    background: #EEF2FF;
}
.bdg-icon-btn-active       {
    border-color: #6366F1;
    background: #6366F1;
    color: #fff;
    box-shadow: 0 2px 6px rgba(99,102,241,.3);
}
.bdg-icon-btn-active:hover {
    background: #4F46E5;
    color: #fff;
}

/* ---- Preview Panel ---- */
.bdg-preview-panel {
    padding: 12px 14px;
    background: #fafbfc;
    border-bottom: 0.5px solid #eef1f6;
    overflow-y: auto;
    flex-shrink: 0;
}

.bdg-preview-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #94a3b8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.bdg-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 10px;
    margin-bottom: 8px;
}

.bdg-preview-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bdg-preview-name {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    max-width: 200px;
    word-break: break-word;
}

.bdg-preview-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.bdg-preview-meta-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 0.5px solid #eef1f6;
    border-radius: 5px;
    padding: 3px 8px;
}
.bdg-preview-meta-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.bdg-preview-meta-val   {
    font-size: 11px;
    font-weight: 600;
    color: #6366F1;
    font-family: monospace;
}
.bdg-editor-section .col-form-label.col-sm-0 {
    padding-bottom: 0;
    font-weight: 500;
    color: #64748b;
    font-size: 0.8em;
}
/* ---- Sliders ---- */
.bdg-preview-sliders {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bdg-slider-row      {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #e4e6e8;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 7px;
}
.bdg-slider-label    {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 500;
    color: #64748b;
}
.bdg-slider-val      {
    font-size: 11px;
    font-weight: 600;
    color: #6366F1;
    font-family: monospace;
    background: #EEF2FF;
    padding: 1px 6px;
    border-radius: 4px;
}

.bdg-range-inp {
    width: 100%;
    height: 4px;
    border-radius: 4px;
    appearance: none;
    background: #e2e8f0;
    outline: none;
    cursor: pointer;
}
.bdg-range-inp::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6366F1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(99,102,241,.4);
    transition: transform .1s;
}
.bdg-range-inp::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
.bdg-range-inp::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #6366F1;
    cursor: pointer;
    border: none;
}

/* ---- CSS Panel ---- */
.bdg-css-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: #fff;
}

.bdg-css-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #1e293b;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
}

.bdg-css-panel-title {
    font-size: 11px;
    font-weight: 600;
    color: #7dd3fc;
    display: flex;
    align-items: center;
    letter-spacing: .3px;
}

.bdg-css-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
}

.bdg-css-tool-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    cursor: pointer;
    transition: all .12s;
    user-select: none;
}
.bdg-css-tool-btn:hover       {
    background: rgba(148,163,184,.15);
    color: #e2e8f0;
}
.bdg-css-tool-sync             {
    color: #6EE7B7;
}
.bdg-css-tool-sync:hover       {
    background: rgba(110,231,183,.12);
    color: #6EE7B7;
}
.bdg-icon-dropdown-wrap .dropdown-toggle::after {
    display: none !important;
}
.bdg-css-editor-pre {
    flex: 1;
    min-height: 0;
}
.bdg-css-editor-pre .CodeMirror {
    height: 100%;
    min-height: 140px;
    font-size: 12px;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    line-height: 1.6;
    border:none;
    border-top: 1px solid #797979;
}

/* ---- Editor Footer ---- */
.bdg-editor-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 0.5px solid #f1f5f9;
    flex-shrink: 0;
}

/* ---- Category Modal ---- */
.bdg-cat-modal {
    background: #fff;
    border-radius: 18px;
    width: 640px;
    max-height: 88vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.16);
    display: flex;
    flex-direction: column;
}
.bdg-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 0.5px solid #f1f5f9;
    flex-shrink: 0;
}
.bdg-cat-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bdg-cat-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #EEF2FF;
    color: #6366F1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.bdg-cat-header-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}
.bdg-cat-body  {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bdg-cat-list  {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.bdg-cat-item {
    display: grid;
    grid-template-columns: 28px 1fr 36px;
    align-items: center;
    gap: 10px;
    background: #fafbfc;
    border: 0.5px solid #eef1f6;
    border-radius: 10px;
    padding: 10px 12px;
}
.bdg-cat-item-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #EEF2FF;
    color: #6366F1;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bdg-cat-item-fields {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.bdg-cat-item-fields input {
    flex: 1;
    min-width: 0;
}

.bdg-cat-save-btn {
    width: 32px;
    height: 32px;
    border: 0.5px solid #BBF7D0;
    border-radius: 7px;
    background: #ECFDF5;
    color: #059669;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    padding: 0;
    flex-shrink: 0;
    transition: all .12s;
}
.bdg-cat-save-btn:hover    {
    background: #D1FAE5;
}
.bdg-cat-save-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.bdg-cat-add-section {
    background: #f8fafc;
    border: 0.5px solid #eef1f6;
    border-radius: 12px;
    padding: 14px 16px;
}
.bdg-cat-add-title   {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #94a3b8;
    margin-bottom: 10px;
}
.bdg-cat-add-grid    {
    display: grid;
    grid-template-columns: 1fr 1fr 80px auto;
    gap: 8px;
    align-items: flex-end;
}

.bdg-cat-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 20px;
    color: #94a3b8;
    font-size: 13px;
    text-align: center;
}
.bdg-cat-empty-icon {
    font-size: 28px;
}
/* ---- İkon Picker Dropdown ---- */
.bdg-icon-dropdown-wrap {
    width: 100%;
}

.bdg-icon-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    border: 0.5px solid #dde3ec;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: border-color .13s, background .13s;
    user-select: none;
}
.bdg-icon-drop-btn:hover,
.bdg-icon-drop-btn.show,
.bdg-icon-drop-btn[aria-expanded="true"] {
    border-color: #6366F1;
    background: #fafbff;
    color: #4F46E5;
}

.bdg-icon-drop-preview {
    font-size: 18px;
    color: #6366F1;
    flex-shrink: 0;
}

.bdg-icon-drop-label {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.bdg-icon-drop-caret {
    font-size: 11px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .15s;
}
.bdg-icon-drop-btn[aria-expanded="true"] .bdg-icon-drop-caret {
    transform: rotate(180deg);
}

/* Menü */
.bdg-icon-drop-menu {
    width: 320px;
    padding: 0;
    border: 0.5px solid #e4e8ef;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,.12);
    overflow: hidden;
    display: none; /* Bootstrap toggle yönetir */
}
.bdg-icon-drop-menu.show {
    display: block;
}

/* Arama */
.bdg-icon-drop-search-wrap {
    position: relative;
    padding: 8px 10px;
    border-bottom: 0.5px solid #f1f5f9;
    background: #fafbfc;
}
.bdg-icon-drop-search-ico {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
}
.bdg-icon-drop-search-inp {
    width: 100%;
    border: 0.5px solid #dde3ec;
    border-radius: 6px;
    padding: 6px 10px 6px 28px;
    font-size: 12px;
    color: #0f172a;
    background: #fff;
    outline: none;
    transition: border-color .13s;
}
.bdg-icon-drop-search-inp:focus {
    border-color: #6366F1;
}

/* Grid (menü içinde) */
.bdg-icon-drop-menu .bdg-icon-grid-wrap {
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
    padding: 8px 10px;
    max-height: 200px;
    overflow-y: auto;
}
.bdg-icon-drop-menu .bdg-icon-grid-wrap::-webkit-scrollbar {
    width: 3px;
}
.bdg-icon-drop-menu .bdg-icon-grid-wrap::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}