.card.kpcn-card {
    border: 1px solid rgba(41,35,92, .25);
}
.card.kpcn-card .card-header {
    border-bottom: 1px solid rgba(41,35,92, .25);
    /*background-color: rgba(41,35,92,.077);*/
    background-color: #c0bbc7;
}
.card.kpcn-card .card-body {padding: 15px;}
.btn.kcpn-btn {
    background-color: rgb(41,35,92);
    border: 1px solid rgb(41,35,92);
    color: #fff;
}

.news-status-0 {
    font-style:italic;
    color: #333;
}

.submitMargin button {margin-top: 23px;}
.hidden {display: none;}

form .row {margin-top: 10px;}
label {margin-bottom: 0px;}
form .kpcn-btn {width: 100%;}

.dataTables_wrapper .dataTables_filter {display: inline-block; float: right; margin-bottom: 15px;}
.dataTables_wrapper .dt-buttons {margin-top: 15px; max-width: 100%; overflow-x: scroll;}
.dataTables_wrapper .dt-buttons button {padding: .25rem .5rem}

#sidebar {background: #69628d;}
#sidebar ul li.active>a, a[aria-expanded="true"] {
    background: rgba(255,255,255,.4);
}
#sidebar ul li a:hover {color: #fff; background: rgba(255,255,255,.25);}
#sidebar .sidebar-header {
    background: #fff;}
#sidebar.active {max-width: 100px; min-width: 100px;}
#sidebar.active ul li a {padding: 16px 8px; font-size: 0.7em;}
#sidebar ul.components {border-bottom: none;}

.page-item.active .page-link {background-color: rgb(41,35,92); border-color: rgb(41,35,92);}

#content {position: relative;}

#content nav.navbar {margin: 20px 15px;}
@media screen and  (min-width: 991px){
    #content {max-width: calc(100% - 180px);}
}

.single-group {
    background: #f5f5f5; margin: 10px;

}
.single-group .group-i {padding: 10px; background-color: rgb(41,35,92); color: #fff;}
.single-group .group-participants {padding: 10px;}
button.btn-group-remove {border: none; font-size: 16px; float: right; padding: 0; background-color: transparent; color: #fff;}
button.btn-group-remove:hover {color: #dd2c42;}

button.btn-edit-status { margin-right: 5px;}
button.btn-edit-status:after {display: none;}
button.btn-edit-status:hover {color: #1a75dd;}
table td button, table td a {margin-top: 2px; margin-bottom: 2px;}
.buttons-print {margin-right: 10px; border-top-right-radius: .25rem!important; border-bottom-right-radius: .25rem!important;}
.btn.buttons-columnVisibility:first-of-type {border-top-left-radius: .25rem!important; border-bottom-left-radius: .25rem!important;}
.btn.buttons-columnVisibility {border-bottom: 3px solid darkred;}
.btn.buttons-columnVisibility.active {border-bottom: 3px solid greenyellow; border-bottom-color: green!important;}
button[data-cv-idx="0"] {border-top-left-radius: .25rem!important; border-bottom-left-radius: .25rem!important;}

.table-striped tbody tr.group {background-color: rgb(41,35,92); color: #fff; }
table tbody tr.group .btn-select-group {float: right;}

table tr.ui-draggable-handle {cursor: move;}
table tr td {font-size: 13.6px;}

.select2 span.selection {width: 100%;}
.select2-container .select2-selection--single {height: 37px;}
.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 37px;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height: 37px;}

div.dt-button-info {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px;
    background-color: #bff0c1;
    border: 2px solid #008000;
}

.img-preview {margin-bottom: 15px; height: 210px; object-fit: cover; width: 100%;}

.gallery-thumbs {margin-top: -5px; margin-bottom: 8px; overflow: hidden;}
.gallery-thumbs .gal-item {width: calc(20% - 10px); float: left; margin: 5px; position: relative;}
.gallery-thumbs .gal-item img {width: 100%; height: 100px; object-fit: cover;}
.gallery-thumbs .gal-item .btn-delete-galimg {padding: 5px; background: transparent; color: #fff; font-size: 18px; position: absolute; top: 0; right: 0; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 1px #000;}
.gallery-thumbs .gal-item .btn-delete-galimg:hover {color: red;}

.tile-image {
    position: relative;
}
.tile-image .btn-delete-promo-image {
    padding: 5px; background: transparent; color: #fff; font-size: 18px; position: absolute; top: 0; right: 0; text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 1px #000;
}
.tile-image .btn-delete-promo-image:hover{color: red;}

.usereditavatar {min-height: 300px; max-width: 300px; margin: 0 auto; position: relative;}
.usereditavatar  .dz-default.dz-message {position: absolute; bottom: 0; margin: 0 ; width: 100%; color: #fff; left: 0; text-shadow: 0 0 4px #000, 0 0 6px #000;}
.fileDrop {min-height: 20px; padding: 5px ;}
.fileDrop .dz-default.dz-message {margin: 0;}

#draggingContainer {z-index: 999999!important;}
.unassignedCol {z-index: 10;}
.unassignedCard {position: sticky; top: 0;}

/*table.table-overflow-x-visible {overflow-x:scroll;}*/
.dataTables_wrapper {overflow-x:scroll;}

.enr_assigned {font-weight: bold; color: #008800;}
.enr_rejected {color: red;}

.btn-trash { padding: 0; margin: 0; margin-left: 2px; opacity: 0; border: 0; background: transparent; color: darkred; cursor: pointer; display: none; transition: margin-left .2s, opacity .2s;}
tr:hover .btn-trash {opacity: 1; display: inline-block; margin-left: 6px;}
.btn-highglight {border: 0; background: transparent; padding: 0; margin-left: 5px; font-size: 18px; }
.btn-highglight:hover {color: darkgreen;}

.btn-hideunhide-news {
border: 0; background: transparent; padding: 0; margin-left: 5px; font-size: 18px;
}

.btn-unhighglight {color: darkred; border: 0; background: transparent; padding: 0; margin-left: 5px; font-size: 18px; }

.wcheck {display: flex; align-items: center; justify-content: space-around;}
.wcheck input[type=checkbox] {
    margin-right: 5px;
}

.header-row label {font-size: 18px; font-weight: bold;}

.ccheck {position: relative;}
.checkrow {display: flex;}
.customcheck {
    display: block;
    position: relative;
    padding-left: 28.5px;
    margin-bottom: 2px;
    margin-top: 2px;
    margin-left: 2px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.customcheck input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.customcheck {
    position: absolute;
    top: 0;
    left: 0;
    height: 28.5px;
    width: 28.5px;
    background-color: #99b2ee;
    border-radius: .2rem;
}

/* On mouse-over, add a grey background color */
.customcheck:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.customcheck input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.customcheck input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.customcheck .checkmark:after {
    left: 11px;
    top: 6px;
    width: 7px;
    height: 14px;
    border: solid black;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.loaderContainer {position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,.8); display: none;}
.spinHolder {height: 100%; width: 100%; display: flex; align-items: center; justify-content: center;}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

tr.selected {
    background-color: #c0bbc7!important;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.user-inactive { font-style: italic; color: #444;}

#galleryMeta {display: flex; flex-basis: 30%; position: relative;}
#galleryMeta .gallery-meta img {aspect-ratio: 1/1; object-fit: cover; width: 100%;}
#galleryMeta .btn-delete-galimg {position: absolute; top: 1rem; right: 1rem; background: red; padding: 0.25rem; color: #fff;}
#galleryMeta .drag-handle {background: white; color: #000; padding: 0.25rem; position: absolute; top:0;left:0; cursor: pointer;}