* {
    color: #121250;
    font-family: 'Poppins', sans-serif;
}

::-webkit-scrollbar {
    width: 7px;
    height: 4px;
}

 ::-webkit-scrollbar-track {
    width: 3px;
}

 ::-webkit-scrollbar-thumb {
    background-color: #6c6e71b3;
    border-radius: 5px;
}

.offcolor {
    color: #7a7aa7;
}


/* menu active */

/* .activebefor::before {
    content: "|";
    width: 5px;
    background: #5955e8;
    color: #5955e8;
    position: absolute;
    height: 100%;
    left: 0;
    border-radius: 5px;
} */

.activebefor div i {
    color: #5955e8 !important;
}

.activebefor div div {
    color: #5955e8 !important;
    font-weight: 700;
}

.activebefor i {
    color: #5955e8 !important;
}

.activebefor {
    color: #5955e8 !important;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .mobilegrid {
        grid-template-rows: auto 1fr;
    }
}

.boxshadow {
    box-shadow: 0px 3px 7px -5px #5955e8;
}

.lowofftext {
    color: #3f3f72;
}

.offdarck {
    color: #383868;
}

.descriptioncolor {
    color: #7f86a9;
}

.cardbg {
    background-image: url('../images/bgcard2.png');
    box-shadow: 0px 1px 7px -3px #5955e8;
    background-size: cover;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #5955e8 !important;
    color: #fff !important;
}

span .paginate_button:hover {
    background: #5b57e8 !important;
}

span .paginate_button {
    padding: 3px 13px !important;
    background: #e6e6f2;
    border: 0px solid !important;
    border-radius: 5px !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.dataTables_paginate .previous {
    padding: 3px 13px !important;
    background: #e6e6f2 !important;
    border: 0px solid !important;
    border-radius: 5px !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.dataTables_paginate .next {
    padding: 3px 13px !important;
    background: #e6e6f2 !important;
    border: 0px solid !important;
    border-radius: 5px !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}


/* disabled */

.dataTables_paginate .previous.disabled {
    background: #e9e9e9 !important;
    color: #a3a3a3 !important;
}

.dataTables_paginate .next.disabled {
    background: #e9e9e9 !important;
    color: #a3a3a3 !important;
}


/* disabled hover */

.dataTables_paginate .previous.disabled:hover {
    background: #e9e9e9 !important;
    color: #a3a3a3 !important;
}

.dataTables_paginate .next.disabled:hover {
    background: #e9e9e9 !important;
    color: #a3a3a3 !important;
}


/* hover */

.dataTables_paginate .previous:hover {
    background: #5b57e8 !important;
    color: white !important;
}

.dataTables_paginate .next:hover {
    background: #5b57e8 !important;
    color: white !important;
}

.dataTables_info {
    background: #eaecf7;
    padding: 3px 10px;
    padding-top: 3px !important;
    margin-top: 4px;
    border-radius: 5px;
    color: #5e6278 !important;
}

.montabel thead tr {
    background: #f8f9fb;
}

.montabel thead tr th {
    padding: 8px 12px !important;
    color: #3e3e70;
    font-weight: 500 !important;
    letter-spacing: 1px;
    border-bottom: 0px solid !important;
}

.montabel thead tr th:last-child {
    text-align: center;
}

.montabel tbody tr td:last-child {
    text-align: center;
}

.montabel tbody tr td {
    padding: 8px 12px;
    color: #383868;
    border-bottom: 0.5px solid #e7ebff;
}

.montabel tbody tr:first-child td {
    border-top: 0.5px solid #e7ebff;
}

table.dataTable.no-footer {
    border-bottom: 0px solid !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: 0px;
    background-color: #e5e9fd;
}

.dataTables_wrapper .dataTables_filter input {
    margin-bottom: 6px;
    background-color: #eaecf7;
    border-color: #eaecf7;
    color: #5E6278;
    padding: 0.35rem 0.65rem;
    border-radius: 0.475rem;
}

@media (max-width: 640px) {
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
}

.dataTables_wrapper .dataTables_length select {
    margin-bottom: 6px;
    background-color: #eaecf7;
    border-color: #eaecf7;
    color: #5E6278;
    padding: 0.35rem 0.65rem;
    border-radius: 0.475rem;
}

.textfiled {
    width: 100%;
    /* margin-bottom: 6px; */
    background-color: #eaecf7;
    border-color: #eaecf7;
    color: #5E6278;
    padding: 0.75rem 1rem;
    border-radius: 0.475rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.textfiled:focus {
    outline: 0px;
    background-color: #e5e9fd;
}

@media (max-width: 1024px) {
    .textfiled {
        padding: 0.35rem 0.6rem;
    }
}

input.formsubmit {
    transition: color 0.2s ease, background-color 0.2s ease;
    background-color: #5955e8;
}

input.formsubmit:hover {
    background-color: #dae0ff !important;
    color: #121250;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.addbtnstyle {
    background: #5955e8;
    padding: 6px 12px;
    border-radius: 7px;
    color: #fff;
    letter-spacing: 0.8px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.addbtnstyle:hover {
    background: #ffffff;
    color: #121250;
}

.settingbtnstyle {
    background: #5955e8 !important;
    padding: 6px 12px;
    border-radius: 7px;
    color: #fff;
    letter-spacing: 0.8px;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.settingbtnstyle:hover {
    background: #ececf8 !important;
    color: #121250;
}

.loginfiled {
    width: 100%;
    margin-bottom: 6px;
    /* background-color: #eaecf7; */
    background-color: #e5e9fd;
    border-color: #eaecf7;
    color: #5E6278;
    padding: 0.4rem 0.4rem;
    border-radius: 0.475rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.loginfiled:focus {
    outline: 0px;
    /* background-color: #e5e9fd; */
    background-color: #eaecf7;
}

@media (max-width: 1024px) {
    .loginfiled {
        padding: 0.35rem 0.6rem;
    }
}

.loginbtn {
    width: 100%;
    background: #5955e8 !important;
    padding: 6px;
    text-align: center;
    border-radius: 8px;
    color: #fff;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.loginbtn:hover {
    background: #fff !important;
    color: #5955e8 !important;
}

.heightfull {
    height: 100% !important;
}


/* color filed design */

.colorfiled {
    width: 100%;
    height: 100%;
    /* margin-bottom: 6px; */
    background-color: #eaecf7;
    border-color: #eaecf7;
    color: #5E6278;
    padding: 0.15rem 0.15rem;
    border-radius: 0.475rem;
}

input[type="color"] {
    -webkit-appearance: none;
    border: none;
    width: 100%;
    /* height: 32px; */
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 0.475rem;
}

.select .ms-options-wrap button{
    width: 100%;
    /* margin-bottom: 6px; */
    background-color: #eaecf7;
    border-color: #eaecf7;
    color: #5E6278;
    padding: 0.75rem 1rem;
    border-radius: 0.475rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

/*************** SCROLLBAR BASE CSS ***************/
 
.scroll-wrapper {
    overflow: hidden !important;
    padding: 0 !important;
    position: relative;
}
 
.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
 
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}
 
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
 
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}
 
.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
 
 
 
/*************** SCROLLBAR MAC OS X ***************/
 
.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div
{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}
 
.scrollbar-macosx > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}
 
.scrollbar-macosx > .scroll-element .scroll-element_track { display: none; }
.scrollbar-macosx > .scroll-element .scroll-bar {
    background-color: #6C6E71;
    display: block;
 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
 
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    -ms-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element.scroll-draggable .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    opacity: 0.7;
}
 
 
.scrollbar-macosx > .scroll-element.scroll-x {
    bottom: 0px;
    height: 0px;
    left: 0;
    min-width: 100%;
    overflow: visible;
    width: 100%;
}
 
.scrollbar-macosx > .scroll-element.scroll-y {
    height: 100%;
    min-height: 100%;
    right: 0px;
    top: 0;
    width: 0px;
}
 
/* scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element.scroll-x .scroll-bar { height: 7px; min-width: 10px; top: -9px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-bar { left: -9px; min-height: 10px; width: 7px; }
 
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_outer { left: 2px; }
.scrollbar-macosx > .scroll-element.scroll-x .scroll-element_size { left: -4px; }
 
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_outer { top: 2px; }
.scrollbar-macosx > .scroll-element.scroll-y .scroll-element_size { top: -4px; }
 
/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -11px; }
.scrollbar-macosx > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -11px; }