:root {
    --color-background: #e5e6e6;
    --color-background-soft: #ffffff;

    --color-background-light: #e5e6e6;
    --color-heading: #313534;
    --color-text: #313534;
}
#hotmailDelist{
    position:fixed; top:15%;left:50%;transform: translateX(-50%);margin:0 auto;width:80%;max-height: 90%;
    height:auto; overflow:auto; min-height:200px;background:#fff;border:1px solid #18a0f6;z-index:999999;box-sizing: border-box;padding: 20px;
}


.headerbar {
    position: relative;
    min-height: 64px;
    border-bottom: 1px solid #151515;
}
#header {
    background: var(--color-background-soft);
    color: var(--color-text);

}
body{
    background: var(--color-background);
    color: var(--color-text);
}

*{-webkit-overflow-scrolling: touch;}
#notificationBar{
    background: #3c3f41;
    color: #bababb;
    box-shadow: 0 0 10px 5px #858585;
    margin: 0 -24px -5px;
    padding: 5px 25px 5px;
}
#notificationBar span{
    margin-left: 15px;
}

.spinning_icon{
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.highlight {
    font-weight: bold;
}
.ext_inquiry .fc-actionRow {
     color: black !important;
}
div#notificationpopups {
    position: fixed;
    right: 0;
    top: 90px;
    z-index: 9999;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    vertical-align: top;
}
section {
    position: relative;
    padding: 0 24px;
}
.popupbubble header{
    font-weight: bold;
}
.popupbubble {
    background: white;
    border: 1px solid #18a0f6;
    margin-bottom: 25px;
    padding: 10px;
    border-radius: 15px 0 0 15px;
    border-right: none;
}

.quicknav{
    font-weight: bold;
    float: left;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
}
.quicknav ul{list-style-type: none}
.quicknav a{
    margin-right: 20px;
    font-size: 18px;
    float: none;
    cursor: pointer;
    text-decoration: none;
}

.select2-result-label.ui-select-choices-row-inner{
border-bottom: 1px solid #c0c0c0;

}
.select2-highlighted small {
    color:#fff !important;
}

.select2-result-label.ui-select-choices-row-inner small{
    font-size: 12px;
    color: #3e3e3e;
}
.CodeMirror-scroll {
    overflow: scroll !important;
    overflow-x: scroll;
    margin-bottom: -87px;
    margin-right: -50px;
    padding-bottom: 0 !important;
    height: 100%;
    outline: none;
    position: relative;
    overflow-x: visible !important;
}
.noGoal{background:#17a0f6 !important;}
.tdGoalSuccessClick{background:#77c577 !important;}
.tdGoalWaitClick{background:#d2da68 !important;}
.tdGoalSuccessOpen{background:#77c577 !important;}
.tdGoalWaitOpen{background:#d2da68 !important;}
.tdSuccess{background:#77c577 !important;}
.tdWarning{background:#d2da68 !important;}
.tdDanger{background:#f44336 !important;}
.mimedeleted{background:#f44336 !important; text-decoration: line-through;}
.mimeselected{background:#77c577 !important; font-weight: bold;}
.tdActive{background: #9ae09d  !important;}
.tdInactive{background: #ffa19a !important;}
.tdDefault{background:#17a0f6 !important;}
.ccchild{background:rgba(24, 160, 246, 0.54) !important;}
@media (max-width: 768px){
    .headerbar-right {
        position: fixed;
        top: 0;
    }
}
.alert-grey.alert {
    background: #b5b7ba;
    border: 1px solid #9ca4ad;
    color: #000000;
}
.new_discord{background:#fff4ba;}
.monitorBox {
    padding: 7px;
    margin: 12px 0;
    border: 1px solid;
    box-sizing: border-box;
}
.CodeMirror {
     border: 1px solid #eee;
     height:550px !important;
 }
.headbar-top{
    text-align: center;
    font-size: 16px;
    position: fixed;
    left: 50%;
    padding: 8px 15px 0;
    border: 3px solid #24a3f4;
    color: black;
    border-radius: 0 0 20px 20px;
    border-top: none;
    transform: translateX(-50%);
    background: white;
    font-weight: bold;
}

.tableTD {
    max-width: 180px;
    width: 180px;
}

.CurrentCampainLog {
    background-color: #17a0f6;
    font-weight: bold;
    border: 1px solid #6790f6;
}

.CurrentFirm {
    background-color: #17a0f6;
}
.CurrentFirm a:hover {
    background-color: #58cff6 !important;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td{
    border:none;
}
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid rgba(189, 193, 193, 0.2) !important;
}
.table-bordered > thead > tr > td.today{
    background-color: beige !important;
    border: 2px dashed #adadad !important;
    border-top: 1px solid rgba(189, 193, 193, 0.2) !important;
    border-bottom: 1px solid rgba(189, 193, 193, 0.2) !important;
}
.table-bordered > tbody > tr > td.today-border{
    border: 2px dashed #adadad !important;
    border-top: 1px solid rgba(189, 193, 193, 0.2) !important;
    border-bottom: 1px solid rgba(189, 193, 193, 0.2) !important;
}
.table-hover > tbody > tr:hover {
    background-color: rgba(23, 160, 246, 0.35) !important;
}
.text-deline {
    text-decoration: line-through !important;
}
body.notLoggedIn{
  background:url("/assets/img/wall-wallpaper-concrete-colored-painted-textured-concept.jpg");
    background-position: center;
    background-size: cover;
}
.loginBox .form-control {

    border-bottom-color: #fafafa;
    color:white;

}
.loginBox .form-control:hover,
.loginBox .form-control:active,
.loginBox .form-control:focus {
    border-bottom-color: #fafafa;
    color:white;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid transparent;
    -webkit-text-fill-color: white;
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0 1000px #002b44 inset;
    border-radius: 7px;
    transition: background-color 600000s ease-in-out 0s !important;
    padding-left: 5px;
}
input:auto-fill {
    border: 1px solid transparent;
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0 1000px #180e0e00 inset;
    transition: background-color 5000s ease-in-out 0s;
}
.loginBox .card {
    border-radius: 7px;
    border: 2px solid #00000033;
    background: #00000054;
    box-shadow: 3px 3px 8px 0 #00000096;
    max-width: 400px;
    width: 90%;
    color:white;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 20px;
}
.loginBox .loginbtn:hover {
    color: #004874;
    background: #fff;
    border-color: #004874;
}
.loginBox .loginbtn:focus {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.loginBox .loginbtn:active {
    color: #004874;
    background: #ffffff;
    border-color: #004874;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.loginBox .loginbtn {
    color: #ffffff;
    background: rgba(0, 0, 0, 0);
    border-color: #ffffff;
    border-radius: 7px;
    width: 100%;
    padding: 7px 0;
}
.loginBox{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    margin-top: -64px;


}
.modalBoxCover .btn-bar{
    position: absolute;
    top: -11px;
    right: -2px;
    border-radius: 0 2px 0 10px;
    overflow: hidden;
    box-shadow: 3px 3px 8px 0 #00000096;
    border: 1px solid #000000bd;
}
.modalBoxCover .smallBox{
    border-radius: 7px;
    border: 2px solid #000000bd;
    background: #ffffff9c;
    box-shadow: 3px 3px 8px 0 #00000096;
    max-width: 400px;
    width: 90%;
    color:#040404;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 20px;
    overflow: hidden;

}
.modalBoxCover{
    cursor:pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}


body.landingPage{ background: #e5e6e6;}
.aoe-prev-frame {
    border: 1px solid;
    margin-bottom: 15px;
}
.aoe-prev-frame p.Web {
    background: #e7790d;
    font-size: 16px;
    color: white;
}
.eoa-full-prev-dark{
    background:rgba(0, 0, 0, 0.8);
    position:fixed;
    top:0;
    left:0;
    z-index:99998;
    width:100%;
    height:100%;
}
.eoa-full-prev{
    position: fixed;
    z-index: 99999;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-50%);
    left: 50%;
    height: 85%;
    max-width: 90%;
    top: 5%;
}
.aoe-prev-frame p.Mobile {
    background: #8bc34a;
    font-size: 16px;
    color: white;
}

.aoe-prev-frame p.Application {
    background: #0078d7;
    font-size: 16px;
    color: white;
}

.aoe-prev-frame p{
    padding:0 5px;
    margin:0;
    text-align: center;
}
.center-center-small-box {
    position: absolute;
    top: 50px;
    left:50%;
    transform: translateX(-50%);
    background: white;
    z-index: 99999;
    padding: 15px;
    overflow-y: auto;
    margin-bottom: 29px;
}
.table{box-sizing: border-box  !important;}
.prevWindow, .center-center-box{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 99999;
    transform: translate(-50%,-50%);
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 160, 246, 0.84);
    padding: 15px;
}
.fc-day-grid-event .fc-content {
    white-space: normal !important;
    overflow: hidden;
}
.fc-day-grid-event {
    padding: 4px !important;
    font-size: 11px !important;
}
span.fc-title {
    font-size: 11px !important;

}
.fc-sch span.fc-title {
    font-size: 11px !important;

    overflow: hidden;
    word-wrap: break-word;
}
.fc-event, .fc-event-dot {
}
span.fc-actionRow {
    float: right;
    width: 40px;
    text-align: right;
    font-size: 14px;
}
span.fc-actionRow i{
    margin-left:8px;
}
/*.fc-da-event-del{*/
    /*position: absolute;*/
    /*top: 0px;*/
    /*right: 1px;*/
    /*font-size: 15px;*/
/*}*/
.header-nav-profile .dropdown.open > a {;
}
.header-nav > li > a:hover, .header-nav > li > a:focus {
    text-decoration: none;
    background-color: transparent;
}
.prevWindow iframe{
    width: 100%;
    height: 100%;
    border: none;
}
.prevWindow{
    right: 23px;
    left: initial;
    height: 90%;
    transform: translate(0,-50%);
    max-width: 700px;
    width: 90%;
}
.style-warning-bright{
    background-color: #fff8b2;
    border-color: #fff37a;
    color: #000000;
}
.style-success-bright{
    background-color: #bcf3be;
    border-color: #9bff9f;
    color: #000000;
}
.style-infinity-bright{
    background-color: #beb4ff;
    border-color: #6a53fb;
    color: #000000;
}
.dataTable th{cursor:pointer;}
td.form-group.uib-time.minutes,td.form-group.uib-time.hours {
    padding-top: 0;
}
.uib-timepicker a.btn.btn-link{
    line-height: 0;
padding:0 14px;}
input.ng-datepicker-input:focus {
    outline: none;
}
textarea.form-control {
    font-size: 12px;
    padding: 5px;
    border: 1px solid #b5b6b6;
}
.alert-dismissable .close, .alert-dismissible .close {
     position: relative;
     top: -2px;
      right: 0;
     color: inherit;
 }
.notLoggedIn #base{padding-left:0}
.notLoggedIn #menubar.animate{
     -webkit-transition: initial;
    -o-transition: initial;
     transition: initial;
}
.inTableInput {
    border: none;
    background: rgba(173, 173, 173, 0.32);
    padding: 1px 5px;
}
:focus {
    outline: none;
}
.section-body{

}
.dropzone .dz-preview .dz-filename, .dropzone .dz-preview .dz-size {
    display: block !important;
}
.dropzone .dz-preview.dz-file-preview .dz-image {
    background: #18a0f6!important;
    background: linear-gradient(to bottom, #18a0f6, #18a0f6) !important;
}

 td.fc-today {
     background: #b9b9b9 !important;
     background-color: #b9b9b9 !important;
 }
.contextPlaceIn, .contextPlace{
    border: 1px solid #c0c0c0;
    position: absolute;
    z-index: 9999999;
    margin-top: -170px;
    margin-left: -85px;
    background: white;
    border-radius: 9px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 250px;
    list-style-type: none;
    visibility:hidden;

}
.contextPlaceOn{
    border: 1px solid #c0c0c0;
    position: absolute;
    z-index: 9999999;
    margin-top: -170px;
    margin-left: -85px;
    background: white;
    border-radius: 9px;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 250px;
    list-style-type: none;

}
.contextPlaceIn li,.contextPlace li {
    border-bottom:1px solid #c0c0c0;
    padding: 2px 15px;
    cursor: pointer;
}
.contextPlaceIn li:hover, .contextPlace li:hover {
    background:#dcdada;
}
.contextPlaceIn li:last-child, .contextPlace li:last-child {
    border-bottom:none;
}
.header-nav-profile .dropdown > a{min-width:50px;    padding: 18px 15px;}
.header-nav-profile .dropdown.open > a{padding:15px 12px;}
.toast-container{
    position: fixed;
    width: 100%;
    font-size:16px;
    max-width: 500px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    margin: 20px 0 6px;
    z-index: 999999;
    padding: 15px;
    background-color: #000;
    background-position: 15px center;
    background-repeat: no-repeat;
    color: #ffffff;
    opacity: 0.8;
    filter: alpha(opacity=80);
}
input.ng-datepicker-input{border:none;}
.uib-time input{height: 25px}
.ng-datepicker > .calendar > span > span.day:hover {
    background: #20AFA6 !important;
    color: #fff;
}
section .style-secondary, .offcanvas-pane .style-secondary, .card .style-secondary, section.style-secondary, .offcanvas-pane.style-secondary, .card.style-secondary {
    background-color: #6c757d;
    border-color: #666e77;
    color: #ffffff;
}
.section-body:first-child {
     margin-top: 0;
}
.section-header {
    height: auto;
    padding: 8px 0 8px;
}
#changeOverlay{
    height: 100%;
    width: 100%;
    background: #000000f2;
    position: fixed;
    z-index: 99999;
}

#changeOverlay .textBox {
    max-width: 450px;
    width:100%;
    top: 50%;
    color:#fff;
    font-size:15px;
    text-align: center;
    transform: translateY(-50%);
    margin: 0 auto;
    position: relative;
}
#overload{
    height: 100%;
    width: 100%;
    background: #E5E6E6;
    position: fixed;
    z-index: 99999;
}
#overload .spinner {
    width: 160px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    position: relative;
}
#overload .spinner > div {
    width: 50px;
    height: 50px;
}
.spinner {
    margin: 50px auto ;
    width: 70px;
    text-align: center;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #18a0f6;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.rotate {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
      }
}

.tooltip-inner {
    max-width: none;
    text-align:left;
    width:100%;
    white-space: pre-line !important;
}

.tooltip {
    width:initial;
    min-width: 150px;
    max-width: none;
    text-align:left;
}
.infobox{
    float: right;
    font-size: 23px;
    cursor:help;
}
div#coverLoader .content{
    top: 20%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
div#coverLoader .spinner{
    margin:10px auto;
}
div#coverLoader .spinner > div{
    background-color:#fff;
}

div#coverLoader b{
    font-size: 18px;
    color:#fff;
}
div#coverLoader {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
}
div.cover {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
}
.spanspin{
    display: inline-block;
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


@-moz-keyframes loading {
    0% {
        background-position: 0 -407px;
    }

    100% {
        background-position: -14px -407px;
    }
}
@-webkit-keyframes loading {
    0% {
        background-position: 0 -407px;
    }

    100% {
        background-position: -14px -407px;
    }
}
@-o-keyframes loading {
    0% {
        background-position: 0 -407px;
    }

    100% {
        background-position: -14px -407px;
    }
}
@-ms-keyframes loading {
    0% {
        background-position: 0 -407px;
    }

    100% {
        background-position: -14px -407px;
    }
}
@keyframes loading {
    0% {
        background-position: 0 -407px;
    }

    100% {
        background-position: -14px -407px;
    }
}




@media (max-width: 768px){

    .quicknav{
        display:none;
    }

    .headerbar-right .header-nav-profile {
        position: initial;
        float: right;
    }

    .headerbar-right .header-nav-options {
        margin-right: 12px;
        display:none;
        float: left;
    }
    .header-fixed .headerbar-left {
        position: fixed;
        width: 45%;
    }
    .headerbar-right {
        position: fixed;
    }
    .header-nav-profile .dropdown > a {
         min-width: 50px;
         padding: 20px 15px 0px;
     }
    #content {
        position: relative;
        width: 100%;
        left: 0;
        padding-top: 1px;
    }
    .header-nav > li {
        position: relative;
        display: block;
        padding: 14px 0 14px 0px;
        float: left;
    }
    li.header-nav-brand {
         display: none !important;
     }
}




    /***************************** Dropzone Styling *****************************/

    /**
     * The dnd-list should always have a min-height,
     * otherwise you can't drop to it once it's empty
     */
.nestedDemo .dropzone ul[dnd-list] {
    margin: 0px;
    min-height: 27px;
    padding-left: 0px;
}

.nestedDemo .dropzone li {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    padding: 0px;
}

/**
 * Reduce opacity of elements during the drag operation. This allows the user
 * to see where he is dropping his element, even if the element is huge. The
 * .dndDragging class is automatically set during the drag operation.
 */
.nestedDemo .dropzone .dndDragging {
    opacity: 0.7;
}

/**
 * The dndDraggingSource class will be applied to the source element of a drag
 * operation. It makes sense to hide it to give the user the feeling that he's
 * actually moving it. Note that the source element has also .dndDragging class.
 */
.nestedDemo .dropzone .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be added as child of the dnd-list
 * while the user is dragging over it.
 */
.nestedDemo .dropzone .dndPlaceholder {
    background-color: #ddd;
    display: block;
    min-height: 25px;
}

/***************************** Element Selection *****************************/

.nestedDemo .dropzone .selected .item {
    color: #3c763d;
    background-color: #dff0d8;
}

.nestedDemo .dropzone .selected .box {
    border-color: #d6e9c6;
}

.nestedDemo .dropzone .selected .box {
    background-color: #dff0d8;
    background-image: linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);
    border-color: #d6e9c6;
    color: #3c763d;
}

/***************************** Element type specific styles *****************************/

.nestedDemo .dropzone .item {
    padding: 10px 15px;
}

.nestedDemo .dropzone .container-element {
    margin: 0px;
    background: #18a0f64d;
    border-color:white;
}
.nestedDemo .dropzone .container-element h3{
    text-align:center;
    margin:5px;
}

.nestedDemo .dropzone .container-element .column {
    float: left;
    width: 50%;
}

/***************************** Toolbox *****************************/

.nestedDemo .toolbox ul {
    cursor: move;
    list-style: none;
    padding-left: 0px;
}

.nestedDemo .toolbox button {
    margin: 5px;
    opacity: 1.0;
    width: 123px;
}

.nestedDemo .toolbox .dndDragging {
    opacity: 0.5;
}

.nestedDemo .toolbox .dndDraggingSource {
    opacity: 1.0;
}

/***************************** Trashcan *****************************/

.nestedDemo .trashcan ul {
    list-style: none;
    padding-left: 0px;
}

.nestedDemo .trashcan img {
    width: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

.nestedDemo .trashcan .dndDragover img {
    width: 100%;
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}

.nestedDemo .trashcan .dndPlaceholder {
    display: none;
}

.nestedDemo .box{
    background: #c1c1c12e;
    border: 1px solid #b9b9b9;
}
.nestedDemo .box .column{background:#ffffff}
.nestedDemo .dropzone .container-element.fourRows .column {width:25%;border:1px solid #cecece}
.nestedDemo .dropzone .container-element.threeRows .column {width:33.33333333%;border:1px solid #cecece}
.nestedDemo .dropzone .container-element.twoRows .column {width:50%;border:1px solid #cecece}
.nestedDemo .dropzone .container-element.oneRows .column {width:100%;border:1px solid #cecece}
.nestedDemo .dropzone li.selected{
    background-color: #4caf504a !important;
    border-color: #949e94 !important;
}
html{font-size:16px;}


.runtimeCalenderDefault.fc-h-event.fc-event{
    background-color: #611877 !important;
    border-color: #611877 !important;
    color: #ffffff !important;
}
.style-accent-dark.fc-h-event.fc-event{
    color: #b5b7b3 !important;
    background-color: #313534 !important;
    border-color: #b5b7b3 !important;
}

.sp-container.sp-light.sp-input-disabled.sp-alpha-enabled.sp-palette-buttons-disabled.sp-initial-disabled.gjs-one-bg.gjs-two-color {
    right: 25px;
    left: unset !important;
}
.prevSelected{border:1px solid blue}

.html_wizardcreate1 #content .section-body{
    padding-bottom: 0px;
}
.html_wizardcreate1 #content section{
    padding-bottom:0px;
}

.campaign_firm_table td{padding:2px 8px !important;}
.campaign_tpl_info_table td{padding:2px 8px !important;}


.arrow_box {
    position: absolute;
    bottom:24px;right:-4px;
    z-index: 99999;
    padding:4px;
    background: #88b7d5;
    border: 2px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #88b7d5;
    border-width: 15px;
    margin-left: -15px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 18px;
    margin-left: -18px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #313534;
        --color-background-soft: #313534;
        --color-background-light: #2b323a;
        --color-heading: #e5e6e6;
        --color-text: rgba(255, 255, 255, 0.65);
    }
    #notificationBar {
        box-shadow: 0 0 10px 5px #000000 !important;
    }
    .headerbar-right .brand-holder{
        background: #fff;
        border-radius: 15px;
        padding: 5px;
    }
    .headerbar-left,.headerbar-right{
        background: var(--color-background-soft);
        color: var(--color-text);
        border-bottom: none;
    }

    #hotmailDelist{
        background: var(--color-background-soft);

    }
    .header-nav-brand{padding:8px 0 !important;}
    .header-nav .header-nav-brand img{height: 40px;}
    .card,.panel{
        background: var(--color-background-light) !important;
        color: var(--color-text) !important;
        border: 1px solid #151515 !important;
        border-radius: 10px;
    }
    .prevWindow, .center-center-box{
        background: var(--color-background-light) !important;

    }
    .tdSuccess,.tdGoalSuccessOpen,.tdActive {
        background: #134313 !important;
    }
    .tdInactive {
        background: #51140f  !important;
    }
    .tdGoalWaitClick {
        background: #5c611b !important;
    }
    button{
        background-color: #005991 !important;
        border-color: #002841 !important;
        box-shadow: none;
        border: 1px solid;
        border-radius: 4px;
        padding: 3px 10px;
    }
    .select2-search input{
        color: rgb(0 0 0 / 65%) !important;
    }
    .style-default-bright,.style-default-light{
        background: var(--color-background-light);
        background-color: var(--color-background-light) !important;
        color: var(--color-text) !important;
    }
    .form-control{
        color: var(--color-text);
        border-bottom:1px solid  var(--color-text);
    }
    input,select{
        background-color: var(--color-background-light) !important;
        color: var(--color-text);
        border-bottom: 1px solid var(--color-background-soft);
    }
    section .style-primary, .offcanvas-pane .style-primary, .card .style-primary, section.style-primary, .offcanvas-pane.style-primary, .card.style-primary, .btn-primary{
        background-color: #005991 !important;
        border-color: #002841 !important;
    }
    section .style-danger, .offcanvas-pane .style-danger, .card .style-danger, section.style-danger, .offcanvas-pane.style-danger, .card.style-danger, .btn-danger{
        background-color: #8f180f !important;
        border-color: #8f180f !important;
    }
    section .style-success, .offcanvas-pane .style-success, .card .style-success, section.style-success, .offcanvas-pane.style-success, .card.style-success, .btn-success{
        background-color: #048402 !important;
        border-color: #048402 !important;
    }
    section .style-warning, .offcanvas-pane .style-warning, .card .style-warning, section.style-warning, .offcanvas-pane.style-warning, .card.style-warning, .btn-warning{
        background-color: #cd7c04 !important;
        border-color: #cd7c04 !important;
    }
    .table .table,.panel{
        background: var(--color-background-light);
    }
    tr.ccchild {
        background: rgb(0 73 120 / 54%) !important
    }
    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: rgb(0 0 0);
    }
    table.table-hover > tbody > tr:hover {
        background-color: #003c46 !important;
    }
    .btn{
        border-radius: 3px;
    }.btn-default {
         color: #b5b7b3;
         background-color: #313534;
         border-color: #b5b7b3;
     }
    .header-nav-profile .dropdown.open > a{
        background: #313534;
    }
    .header-nav-profile .dropdown.open{
        color: var(--color-heading) !important;
    }
    .header-nav-profile .dropdown.open > a{
        border-color: transparent !important;
    }
    .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th{
        background-color: rgb(56 89 89 / 35%) !important;
    }
    .dropdown-menu{
        background: var(--color-background-soft);
        border-color: var(--color-text) !important;
    }
    .CurrentFirm{
        background: #00585f !important;
    }
    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
        background-color: #043a58 !important
    }
    .dropdown-menu > li > a{
        color: var(--color-text) !important;
    }
    .style-success-bright {
        background-color: #035506 !important;
        border-color: #004c03 !important;
        color: var(--color-heading) !important;
    }
    .style-primary-bright {
        background-color: #1e7d78 !important;
        border-color: #0e5551 !important;
        color: var(--color-heading) !important;
    }
    .style-warning-bright {
        background-color: #8a7d00 !important;
        border-color: #5e5609 !important;
        color: var(--color-heading) !important;
    }
    .style-accent-bright {
        background-color: #714679 !important;
        border-color: #422647 !important;
        color: var(--color-heading) !important;
    }
    /* Wenn die Select-Box fokussiert ist */
    select:focus {
        border-color: #555; /* Rahmenfarbe im Fokus */
        outline: none; /* Entfernt den Standard-Umriss */
    }

    /* Die Optionen selbst (in der Dropdown-Liste) */
    option {
        background: var(--color-background-soft);
        border-color: var(--color-text) !important;
    }
    .autocomplete li{

        color: var(--color-heading) !important;
        background: var(--color-background-soft)!important;
        border-color: var(--color-text) !important;
    }

    /* Breite und Farbe des Scrollbalkens */
    ::-webkit-scrollbar {
        width: 7px; /* Breite für vertikale Scrollbars */
        height: 7px; /* Höhe für horizontale Scrollbars */
    }

    /* Farbe des Scrollbalken-Hintergrunds */
    ::-webkit-scrollbar-track {
        background-color: #373737; /* Hintergrund des Scrollbereichs */
    }

    /* Farbe des Scrollbalkens selbst */
    ::-webkit-scrollbar-thumb {
        background-color: #888; /* Farbe des Scrollbalkens */
        border-radius: 5px; /* Abgerundete Ecken */
    }

    /* Scrollbalken bei Hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

}