/* -------------------- Basic HTML tags -------------------- */
@font-face {
    font-family: 'blessedday_regular';
    src: url('../fonts/blessedday/blessedday-dylk-webfont.woff2') format('woff2'),
        url('../fonts/blessedday/blessedday-dylk-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'KrinkesDecorPERSONALUSE';
    src: url('../fonts/decor/KrinkesDecorPERSONALUSE.eot?#iefix') format('embedded-opentype'),
        url('../fonts/decor/KrinkesDecorPERSONALUSE.woff') format('woff'),
        url('../fonts/decor/KrinkesDecorPERSONALUSE.ttf') format('truetype'),
        url('../fonts/decor/KrinkesDecorPERSONALUSE.svg#KrinkesDecorPERSONALUSE') format('svg');
    font-weight: normal;
    font-style: normal;
}



body {
    font: 12px/1.5 "Roboto", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: #000;
    background-color: #f3f3f3;
}

a:focus {
    outline: 1px dotted invert;
}

hr {
    border-color: #ccc;
    border-style: solid;
    border-width: 1px 0 0;
    clear: both;
    height: 0;
}


h1 {
    font-size: 30px;
    letter-spacing: -1.5px;
}

h2 {
    margin-top: 40px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2px;
}

ol {
    list-style: decimal;
    list-style-position: inside;
}

ul.bullets {
    list-style: disc;
    list-style-position: inside;
}

ul.bullets li {
    margin-left: 20px;
    margin-bottom: 5px;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
    margin-bottom: 15px;
}

a,
a:visited {
    color: #1a5fff;
    text-decoration: none;
}

a:hover,
a:active {
    text-decoration: underline;
}

h1 a,
h1 a:visited,
h2 a,
h2 a:visited,
h3 a,
h3 a:visited,
h4 a,
h4 a:visited,
h5 a,
h5 a:visited,
h6 a,
h6 a:visited {
    color: #444444;
}

h1 a:hover,
h1 a:active,
h2 a:hover,
h2 a:active,
h3 a:hover,
h3 a:active,
h4 a:hover,
h4 a:active,
h5 a:hover,
h5 a:active,
h6 a:hover,
h6 a:active {
    color: #0063be;
}


b,
strong {
    font-weight: 700;
}



/* --------------------  Custom general classes -------------------- */

.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.align-justify {
    text-align: justify;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.bottom-spacing {
    margin-bottom: 20px;
}



/* -------------------- Page elements -------------------- */


#mobile {
    display: none !important;
}

#header {
    margin-bottom: 20px;
}

#header-status {
    background: #000000;
    padding: 0;
    color: #aaaaaa;
}

#text-invitation {
    display: block;
    float: left;
    padding: 9px 0 11px 0;
}

#message-notification {
    display: block;
    float: left;
    background: url(../images/mail-q-bg.jpg) top left no-repeat;
    color: #6dc6e7;
    padding: 9px 0 11px 0;
    text-decoration: none;
    margin-left: 10px;
}

#message-notification span {
    color: #444444;
    margin-right: 15px;
    text-align: center;
    display: block;
    float: left;
    width: 32px;
}

#message-notification a:hover,
#message-notification a:active {
    color: #ffffff;
}

a#logout,
a#logout:visited {
    display: block;
    float: right;
    background: url(../images/icon-logout.gif) center right no-repeat;
    color: #6dc6e7;
    padding: 9px 20px 11px 0px;
    text-decoration: none;
}

a#logout:hover,
a#logout:active {
    color: #ffffff;
}

#header-main {
    background: #005195 url(../images/header-bg.jpg) repeat-x top left;
    height: 0px;
}

#header-main #logo {
    background: url(../images/logo.jpg) no-repeat right 10px;
    width: 100%;
    height: 70px;
}

#subnav {
    background: #ffffff url(../images/submenu-bg.gif) repeat-x bottom left;
    height: 48px;
}

#subnav ul {
    list-style: none;
    margin: 0;
    padding: 0;

}

#subnav ul li {
    float: left;
    margin: 0 18px 0 0;
    padding: 0;
}

#subnav ul a,
#subnav ul a:visited {
    display: block;
    float: left;
    color: #0063be;
    font-size: 14px;
    padding: 9px 0 0 0;
    text-decoration: none;
}

#subnav ul a:hover,
#subnav ul a:active {
    text-decoration: underline;
}

#footer {
    padding: 0;
    color: #aaaaaa;
    padding: 12px 0 15px 0;
    margin-top: 30px;
    border-top: 1px solid #cccccc;
}



/* -------------------- Nav tabs (sliding door technique) -------------------- */


ul#nav {
    float: left;
    margin-top: 60px;
    list-style: none;
    font-size: 14px;
    margin-bottom: 0;

}

ul#nav li {
    background: transparent url(../images/tab-left.gif) no-repeat scroll left top;
    float: left;
    margin: 0 5px 0 0;
    padding: 0 0 0 9px;
}

ul#nav li a,
ul#nav li a:visited {
    background: transparent url(../images/tab-right.gif) no-repeat scroll right top;
    color: #FFFFFF;
    display: block;
    float: left;
    padding: 7px 15px 6px 6px;
    text-decoration: none;
}

ul#nav li a:hover {
    padding: 8px 15px 5px 6px;
}

ul#nav li#current {
    /* give the id="current" to the currently selected tab */
    background: transparent url(../images/tab-active-left.gif) no-repeat scroll left top;
}

ul#nav li#current a {
    background: transparent url(../images/tab-active-right.gif) no-repeat scroll right top;
    color: #444444;
}




/* -------------------- Box module -------------------- */

div.module {
    background: url(../images/module-body-left-bg.gif) no-repeat scroll bottom left;
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

div.module div.module-body {
    background: url(../images/module-body-right-bg.gif) no-repeat scroll bottom right;
    padding: 20px 3% 20px 3%;
    float: left;
    width: 94%;
}

/* Percentage padding in the module dependant on the cell width */
.grid_1 div.module div.module-body {
    padding: 20px 8% 20px 8%;
    float: left;
    width: 84%;
}

.grid_2 div.module div.module-body {
    padding: 20px 7% 20px 7%;
    float: left;
    width: 86%;
}

.grid_3 div.module div.module-body {
    padding: 20px 6% 20px 6%;
    float: left;
    width: 88%;
}

.grid_4 div.module div.module-body {
    padding: 20px 5% 20px 5%;
    float: left;
    width: 90%;
}

.grid_5 div.module div.module-body {
    padding: 20px 4% 20px 4%;
    float: left;
    width: 92%;
}

.grid_6 div.module div.module-body {
    padding: 20px 3% 20px 3%;
    float: left;
    width: 94%;
}

.grid_7 div.module div.module-body {
    padding: 20px 2.75% 20px 2.75%;
    float: left;
    width: 94.5%;
}

.grid_8 div.module div.module-body {
    padding: 20px 2.5% 20px 2.5%;
    float: left;
    width: 95%;
}

.grid_9 div.module div.module-body {
    padding: 20px 2.25% 20px 2.25%;
    float: left;
    width: 95.5%;
}

.grid_10 div.module div.module-body {
    padding: 20px 2% 20px 2%;
    float: left;
    width: 96%;
}

.grid_11 div.module div.module-body {
    padding: 20px 1.75% 20px 1.75%;
    float: left;
    width: 96.5%;
}

.grid_12 div.module div.module-body {
    padding: 20px 1.5% 20px 1.5%;
    float: left;
    width: 97%;
}



div.module div.module-table-body {
    background: url(../images/module-body-right-bg.gif) no-repeat scroll bottom right;
    padding: 0;
    float: left;
    width: 100%;
}

div.module h2 {
    /* Sliding right image */
    background: url(../images/module-header-left-bg.gif) no-repeat scroll top left;
    display: block;
    float: left;
    height: 32px;
    /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
    margin-right: 0px;
    padding-right: 0px;
    /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #444444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    margin-bottom: 0;
    letter-spacing: normal
}

div.module h2 span {
    /* Background left image */
    background: url(../images/module-header-right-bg.gif) no-repeat top right;
    display: block;
    line-height: 20px;
    /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
    padding: 7px 0 5px 18px;

}

div.module table {
    width: 100%;
    margin: 0 0 10px 0;
    border-left: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

div.module table.tr {
    border-collapse: separate;
    border-right: 1px solid #aaaaaa;
    border-left: 1px solid #aaaaaa;
}

div.module table th {
    background-color: #eeeeee;
    color: #444444;
    padding: 5px;
    text-align: left;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

div.module table td {
    background-color: #ffffff;
    padding: 5px;
    ;
    border-right: 1px solid #d9d9d9;

}

/*
 white-space: -moz-pre-wrap !important;  
white-space: -pre-wrap;     
white-space: -o-pre-wrap;    
white-space: pre-wrap;      
word-wrap: break-word;      
word-break: break-all;
white-space: normal;
*/
div.module table tr.odd td {
    /* You can use this style if you want to do zebra-colored tables with other technique than Table Sorter script used here */
    background-color: #f1f5fa;
}

.table-apply {
    width: 40%;
    float: right;
    text-align: right;
    margin-right: 10px;
}




/* -------------------- Pager -------------------- */
.pager {
    display: block;
    padding: 0px 10px 10px 10px;
    width: 40%;
    float: left;
}

.pager .first,
.pager .prev,
.pager .next,
.pager .last {
    margin-bottom: -2px;
}





/* -------------------- Button (sliding door technique) -------------------- */

/* button outside a module box */
a.button {
    /* Sliding right image */
    background: transparent url(../images/button-right-bg-m.gif) no-repeat scroll top right;
    display: block;
    float: left;
    height: 26px;
    /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
    padding-right: 11px;
    /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #444444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

a.button span {
    /* Background left image */
    background: transparent url(../images/button-left-bg-m.gif) no-repeat top left;
    display: block;
    line-height: 15px;
    /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
    padding: 4px 0 7px 10px;
}

a.button:hover {
    background-position: bottom right;
    color: #0063be;
}

a.button:hover span {
    background-position: bottom left;
    color: #0063be;
}

/* button inside a module box */
div.module a.button {
    /* Sliding right image */
    background: transparent url(../images/button-right-bg.gif) no-repeat scroll top right;
    display: block;
    float: left;
    height: 26px;
    /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
    padding-right: 11px;
    /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
    /* FONT PROPERTIES */
    text-decoration: none;
    color: #444444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

div.module a.button span {
    background: transparent url(../images/button-left-bg.gif) no-repeat top left;
    display: block;
    line-height: 15px;
    /* CHANGE THIS VALUE ACCORDING TO BUTTONG HEIGHT */
    padding: 4px 0 7px 10px;
}



/* -------------------- Pagination -------------------- */

.pagination {
    margin-bottom: 20px;
    float: right;
}

.pagination a.button {
    margin-right: 10px;
}

.pagination a.last {
    margin-right: 0;
}

.pagination .numbers {
    float: left;
    padding-top: 3px;
    margin-right: 15px;
}

.pagination .numbers span {
    padding: 0 5px 0 5px;
}

.pagination .current {
    font-weight: bold;
}




/* -------------------- Forms -------------------- */
.search_box {
    width: 20% !important;
}

fieldset {
    margin-top: 15px;
    margin-bottom: 15px;
}

legend {
    margin-bottom: 10px;
    display: block;
}

label {
    display: block;
    margin-bottom: 5px;
}

select {
    padding: 2px;
}

textarea {
    padding: 3px;
}

/* .form-control {
	width: 46%
} */

.input-medium {
    width: 46%
}

.input-long {
    width: 75%
}




/* -------------------- Text input and select input notifications -------------------- */

.notification-input {
    background: 10px 50% no-repeat;
    margin: 0 0 0 5px;
    padding: 5px 0 5px 32px;
    font-size: 12px;
}

.ni-correct {
    background-image: url(../images/tick-on-white.gif);
    color: #00ae42;
}

.ni-error {
    background-image: url(../images/cross-on-white.gif);
    color: #c9282d;
}




/* --------------------  Boxed notifications -------------------- */

.notification {
    display: block;
    padding: 20px 20px 20px 45px;
    border: 1px solid;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-position: 20px 20px;
}

.n-success {
    background-color: #a3e6bd;
    border-color: #68d59b;
    background-image: url(../images/notification-tick.gif);
}

.n-information {
    background-color: #9fddea;
    border-color: #5fceea;
    background-image: url(../images/notification-information.gif);
}

.n-attention {
    background-color: #f9e497;
    border-color: #ffcb4f;
    background-image: url(../images/notification-exclamation.gif);
}

.n-error {
    background-color: #ffc6ca;
    border-color: #efb9c3;
    background-image: url(../images/notification-slash.gif);
}

/* -------------------- Indicators -------------------- */


.indicator {
    width: 220px;
    height: 12px;
    background: url(../images/indicator-bg.gif) no-repeat top left;
}

.indicator div {
    height: 12px;
    background: url(../images/indicator-green-to-red.gif) no-repeat top left;
}

.indicator div.reverse {
    background: url(../images/indicator-red-to-green.gif) no-repeat top left;
}




/* -------------------- Category list -------------------- */

a.removable,
a.removable:visited {
    padding: 5px 18px 5px 0px;
}

a.removable:hover,
a.removable:active {
    background: url(../images/cross-small.gif) no-repeat center right;
}




/* -------------------- To-do list -------------------- */

a.checkable,
a.checkable:visited {
    padding: 5px 18px 5px 0px;
}

a.checkable:hover,
a.checkable:active {
    background: url(../images/tick-small.gif) no-repeat center right;
}

a.completed,
a.completed:visited {
    color: #aaaaaa;
}




/* -------------------- Messages -------------------- */
.separated {
    border-top: 1px solid #cccccc;
    padding-top: 15px;
}

.user {
    display: block;
    padding-left: 22px;
    background: url(../images/user.gif) left 50% no-repeat;
    font-size: 14px;
    color: #666666;
    font-weight: normal;
}

.user-female {
    display: block;
    padding-left: 22px;
    background: url(../images/user-female.gif) left 50% no-repeat;
    font-size: 14px;
    color: #666666;
    font-weight: normal;
}

.reply {
    padding-left: 20px;
    background: url(../images/arrow-curve-180-left.gif) left 50% no-repeat;
    margin-right: 7px;
}

.forward {
    padding-left: 20px;
    background: url(../images/arrow-curve-000-left.gif/) left 50% no-repeat;
    margin-right: 7px;
}

a.delete,
a.delete:visited {
    padding-left: 16px;
    background: url(../images/cross-small.gif) left 50% no-repeat;
    color: #C00;
}

h3.mail {
    display: block;
    padding: 20px 0px 20px 70px;
    background: url(../images/Crystal_Project_mail_open.gif) left 50% no-repeat;
}

#p-messages {
    padding: 20px;
}





/* -------------------- Login page -------------------- */

form.login {
    background: url(../images/Crystal_Clear_locked.gif) 87% 10px no-repeat;
}





/* -------------------- Dashboard -------------------- */

ul.dashboard-grid {
    list-style: none;
    padding: 0;
}

ul.dashboard-grid li {
    width: 14%;
    display: inline-block;
}

a.dashboard-module,
a.dashboard-module:visited {
    /* width: 142px;
	height: 142px; */
    padding: 10px;
    display: block;
    /* float: left; */
    background: #fff;
    border-radius: 10px;
    margin: 0 8px 8px 0;
    text-align: center;
    color: #444444;
    box-shadow: 3px 3px 5px 1px #cfcfcf;
}

a.dashboard-module:hover,
a.dashboard-module:active {
    background-position: bottom left;
    text-decoration: none;
    color: #0063be;
}

a.dashboard-module .icon-holder {
    font-size: 45px;
}

/* a.dashboard-module img {
	margin-top: 20px;
} */

a.dashboard-module span {
    margin-top: 10px;
    display: block;
}

/* HOME PAGE*/
#header-main {
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
    background: -webkit-linear-gradient(#7a7a7a, #ededed);
    background: -moz-linear-gradient(#7a7a7a, #ededed);
}

body.home-page div#header-status,
#subnav {
    display: none;
}

body.home-page .main-part {
    width: 100%;
    float: left;
    margin-top: 7%
}

body.home-page .main-part div.module {
    width: 48%;
    padding: 18px 17px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.5);
}

body.home-page .main-part div.module div.module-body {
    background: none;
    border: 2px solid #eee;
    border-radius: 5px;
    float: right;
    width: 60%;
}

body.home-page .main-part div.module div.module-body form p {
    padding-bottom: 22px;
}

body.home-page .main-part div.module div.module-body form p label {
    width: 35%;
    float: left
}

body.home-page .main-part div.module div.module-body form p input {
    background: none;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 3px;
    width: 55%;
    padding: 5px 8px;
}

body.home-page .main-part div.module div.module-body form fieldset {
    width: 65%;
    float: right
}

body.home-page .main-part div.module .left-module-part {
    width: 30%;
    float: left;
}

body.home-page .main-part div.module .left-module-part div.login-image {
    background: url(../images/lock-icon.png) no-repeat;
    width: 152px;
    height: 137px;
    float: left;
    margin: 15px 0 25px 10px;
}

body.home-page .main-part div.module .left-module-part .left-info {
    width: 85%;
    text-align: justify
}

body.home-page .main-part div.module2 {
    width: 40%;
    float: left;
    margin-left: 4%;
    padding: 18px 17px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 1px 4px 15px rgba(0, 0, 0, 0.5);
}

body.home-page .main-part div.module2 .m-container {
    width: 100%;
    float: left;
}

body.home-page .main-part div.module2 .m-container .l-img {
    width: 40%;
    float: left;
}

body.home-page .main-part div.module2 .m-container .l-img img {
    width: 84%;
    float: left;
}

body.home-page .main-part div.module2 .m-container .right-text {
    width: 50%;
    float: left;
    padding-top: 10px;
    padding-left: 30px;
}

body.home-page .main-part div.module2 .m-container .right-text p {
    padding-bottom: 10px;
}

body.home-page .main-part div.module2 .m-container .bottom-text {
    width: 100%;
    float: left;
}

body.home-page .main-part div.module2 .m-container .bottom-text p {
    text-align: justify;
    padding-top: 10px;
}

#header-status {
    background: #353535;
    color : #fff;
}

a#cpassword,
a#cpassword:visited,
a#logout,
a#logout:visited {
    color: #fff !important
}

a {
    cursor: pointer
}

.s-btn {
    background: gray;
    padding: 3px 10px;
    color: #fff;
    border-radius: 3px;
    margin-left: 10px;
    cursor: pointer
}

.p-btn {
    background: #353535;
    padding: 3px 10px;
    color: #fff;
    border-radius: 3px;
}

ul#nav {
    margin-top: 9px;
}

.empty-list {
    height: 150px;
}

/*-------RESPONSIVE--------*/
@media only screen and (min-width:240px) and (max-width:414px) {
    body {
        overflow-x: hidden
    }

    body.home-page .main-part div.module {
        width: 85% !Important;
        float: left
    }

    body.home-page .main-part div.module2 {
        width: 85%;
        margin-left: 0px;
    }

    body.home-page .main-part div.module .left-module-part {
        float: right;
    }

    body.home-page .main-part div.module div.module-body {
        float: left
    }

    body.home-page .main-part div.module .left-module-part div.login-image {
        width: 124px;
        margin: 0px 0px 24px -30px;
    }

    body.home-page .main-part div.module div.module-body form fieldset {
        float: left
    }
    .form-check .form-check-label {
        height: 18px !important;
        margin-top: 0 !important;
    } 
}

@media only screen and (min-width:415px) and (max-width:768px) {
    body {
        overflow-x: hidden
    }

    body.home-page .main-part div.module {
        width: 85% !Important;
        float: left;
    }

    body.home-page .main-part div.module2 {
        width: 85%;
        margin-left: 0px;
    }
    .form-check .form-check-label {
        height: 18px !important;
        margin-top: 0 !important;
    } 

}

@media only screen and (min-width:769px) and (max-width:1024px) {
    body.home-page .main-part div.module .left-module-part div.login-image {
        margin: 15px 0px -5px 10px
    }
}

#myTable, #newDataTable {
    width: 100%;
}

h2.pageHeading {
    color: #4D83FF;
    margin-top: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

div#listing {
    /* padding: 0rem 1.04rem; */
}

.permissions .form-check {
    margin: 0px;
}

.container#listing,
.container {
    max-width: 100%;
    padding: 0 !important;
}

.tableCard {
    float: left;
    width: 50%;
    margin-bottom: 5px;
}

.tableCard.store {
    width: 33%;
    position: relative;
}

.tableCard.addNewCard {
    text-align: right;
}

.multiButtns {
    display: inline-block;
    margin: 10px 2px;
}

.multiButtns a,
.multiButtns a:visited {
    color: #fff;
}

#myTable i,
#mytaskTable i,
#newDataTable i {
    display: inline-block;
    font-size: 20px;
    width: 20px;
    text-align: left;
    color: #4d83ff;
}

.trash i {
    color: #ff4747 !important;
    cursor: pointer;
}

.trash.faded i {
    cursor: no-drop;
}


.dataTables_wrapper .dataTable tbody tr td,
table.dataTable thead th {
    font-size: 14px !important;
    word-break: break-all !important;
}

.todo_list_Table tbody tr td {
    white-space: normal !important;
}

.dataTables_wrapper .dataTable thead .sorting:before,
.dataTables_wrapper .dataTable thead .sorting_asc:before,
.dataTables_wrapper .dataTable thead .sorting_desc:before,
.dataTables_wrapper .dataTable thead .sorting_asc_disabled:before,
.dataTables_wrapper .dataTable thead .sorting_desc_disabled:before {
    top: 1.5rem;
    bottom: auto;
}

#myTable_filter input.form-control.form-control-sm, #newDataTable_filter input.form-control.form-control-sm {
    margin: 0;
    border-radius: 0;
    height: auto;
    border: 1px solid #efefef;
    margin-left: 5px;
}

.text-muted a {
    color: #686868 !important;
}

.footer .text-muted .text-primary a {
    color: #1a5fff !important;
}

select.search_box {
    width: 100% !important;
    color: #000;
    border: 1px solid #000;
}

.dataTables_wrapper .dataTable .btn.shortBtn {
    padding: 3px 9px;
    display: inline-flex;
}

a.shortBtn,
a.shortBtn:visited {
    color: #fff !important;
}

.auth .brand-logo>img {
    width: 100%;
}

.auth .brand-logo {
    width: 30%;
    display: inline-block;
    margin-right: 3%;
    vertical-align: middle;
    margin-bottom: 0px;
}

.logo-header {
    margin-bottom: 1rem;
    width: 100%;
    float: left;
}


.brand-title {
    display: inline-block;
    vertical-align: middle;
    width: 66%;
}

.brand-title h1 {
    padding: 0;
    margin: 0;
}

.top-error {
    color: #000 !important;
    background: #ffdada;
    padding: 10px 15px;
}

.top-error araier_massege_admin {
    color: #000 !important;
}

.top-error p {
    margin: 0px;
    color: #000 !important;
}

.sidebar .nav.sub-menu .nav-item::before {
    content: none;
}

.sidebar .nav.sub-menu {
    padding: 0.25rem 0 0.6rem 1.35rem;
}


li.nav-item.hover-open .nav.flex-column.sub-menu li a span {
    left: -24px !important;
    padding-left: 48px !important;
    box-shadow: none !important;
}

li.nav-item.hover-open .nav.flex-column.sub-menu li a i {
    z-index: 999999;
    position: relative;
    left: -25px;
}

.fileUploadSection {
    display: flex;
}

.fileUploadSection .input-group-append {
    display: block;
}

.fileUploadSection .input-group-append button {
    line-height: 1.4;
}

.row.editFormRow {
    margin-left: 0px;
    margin-right: 0px;
}

.labelMarginZero {
    margin: 0px !important;
}

.uploadedLogoOuter {
    float: left;
    width: 100%;
    text-align: right;
    padding-right: 10px;
}

.dt-buttons {
    float: left;
    margin-bottom: 10px;
    width: 320px;
}

#myTable_filter, #newDataTable_filter {
    float: right;
}

#myTable_filter input, #newDataTable_filter input {
    padding: 5px 8px !important;
}

/* .tableWithNoExport .dt-buttons {
	display: none;
}

.truck .tableWithNoExport .dt-buttons {
	display: inline-block;
} */

.dataTables_length {
    float: left;
}

.dataTables_length select {
    background: transparent;
}

div#err_id {
    margin-bottom: 15px;
}
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

body .chosen-container {
    width: 100% !important;
}

.chosen-container-single .chosen-single {
    border: 1px solid #000000;
    padding: 0.875rem 1.375rem;
    height: auto;
    background: #e9ecef;
    border-radius: 0;
    line-height: normal;
    box-shadow: none;
    color: #000000;
}


.chosen-container-multi .chosen-choices {
    border: 1px solid #000000;
    padding: 0.500rem 1.375rem;
    height: auto;
    background: #e9ecef;
    border-radius: 0;
    line-height: normal;
    box-shadow: none;
    color: #000000;
}

.chosen-container-active.chosen-with-drop .chosen-single {
    border: 1px solid #000000;
    padding: 0.875rem 1.375rem;
    height: auto;
    background: #e9ecef;
    border-radius: 0;
    line-height: normal;
    box-shadow: none;
    color: #000000;
}

.chosen-container .chosen-drop {
    border: 1px solid #000000;
    color: #000000;
}

.chosen-container-single .chosen-search input[type="text"] {
    padding: 0.500rem;
    border: 1px solid #000;
}

.chosen-container-single .chosen-search input[type="text"]:focus {
    border: 1px solid #80bdff;
}

.chosen-container .chosen-results li {
    color: #000000;
}

.form-control,
.dataTables_wrapper select {
    border: 1px solid #000;
}

.modal-content {
    color: #000;
}


.contain-row {
    float: left;
    width: 95%;
    max-width: 1170px;
    margin: 0 auto;
}

ul.theme-change {
    padding: 0px;
    text-align: right;
    font-size: 0;
}

ul.theme-change li {
    list-style: none;
    padding: 0px;
    display: inline-block;
}

ul.theme-change li a {
    font-size: 14px;
    background: #efefef;
    padding: 5px 25px;
    color: #000;
}



ul.theme-change li:first-child a {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

ul.theme-change li:last-child a {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

ul.theme-change li a:hover {
    text-decoration: none;
}

.displaytOnlyName {
    padding: 0.875rem 1.375rem;
    border: 1px solid #aaa;
    background: #e9ecef;
}

.displaytOnlyName p {
    margin: 0px;
    font-weight: 100;
}

.port-div,
.biller-div,
.qty-div,
.ref-div,
.remarks-div,
.vessel-do-div {
    display: none;
}

.calendar-table * {
    color: #000;
}


.form-control:disabled,
.dataTables_wrapper select:disabled,
.form-control[readonly],
.dataTables_wrapper select[readonly] {
    color: #000;
}

.form-control[readonly],
.dataTables_wrapper select[readonly] {
    background: rgba(233, 236, 239, 0.4);
    cursor: not-allowed;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

#new_datepickers {
    cursor: pointer;
    background: #e9ecef;
}

.form-control,
.dataTables_wrapper select,
.form-control[disabled],
.dataTables_wrapper select[disabled] {
    background: #e9ecef;
    color: #000;
}


.chosen-container .chosen-results li.no-results {
    background: #e9ecef;
    color: #000;
}

.auth form .form-group .form-control:focus,
.auth form .form-group .dataTables_wrapper select:focus,
.dataTables_wrapper .auth form .form-group select:focus {
    background: #e9ecef;
    color: #000;
}


h1.welcomeText {
    color: #4d83ff;
    font-family: 'blessedday_regular';
    font-size: 60px;
}

.table td img {
    border-radius: 0px;
}

h2.ownerTitle {
    color: #4D83FF;
    margin: 0;
}

.ownerDetails {
    margin-bottom: 20px;
}

.ownerDetails p {
    margin: 0;
}

.brand-title.full-length {
    text-align: center;
    width: 100%;
}

.brand-title,
.auth-form-light h4 {
    color: #4d83ff;
}

.auth form .form-group .form-control,
.auth form .form-group .dataTables_wrapper select,
.dataTables_wrapper .auth form .form-group select {
    background: #e9ecef;
    color: #000000;
}

::placeholder {
    color: rgba(0, 0, 0, 0.7) !important;
    opacity: 1;
}

:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.7) !important;
}

::-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.7) !important;
}

body div.dataTables_wrapper div.dataTables_length select {
    color: #000 !important;
    border: 1px solid rgba(151, 151, 151, 0.18) !important;
}

.form-check-auto-approve .form-check {
    margin: 17px 0;
}

.chosen-container-multi .chosen-choices li.search-choice {
    box-shadow: none;
    color: #ffffff;
    border: 0;
    background: var(--text-primary-color);
}


a.search-choice-close {
    position: relative;
}

a.search-choice-close::after {
    position: absolute;
    content: "x";
    top: -2px;
    right: 0;
    color: #ffffff;
    z-index: 12;
    font-size: 13px;
    background: transparent;
    width: 14px;
    height: 14px;
    text-align: center;
    border-radius: 100%;
}

.staff_type {
    display: none;
}

.staff_type.active {
    display: flex;
}


.chosen-disabled {
    /* opacity: 1;
	color: #000;
	border: 1px solid #aaa; */
}

#filter div#dealer_div {
    float: left;
    width: 100%;
}

form#filter {
    float: left;
    width: 100%;
    padding-left: 12px;
}

#filter .chosen-container-single .chosen-single {
    background: #fff;
    color: #000000;
}

#myTable .currency-holder i, #newDataTable .currency-holder i {
    font-size: 15px !important;
    color: #000;
    /* display: none; */
}

#myTable .currency-holder a i, #newDataTable .currency-holder a i {
    color: #1a5fff;
}

.filter-search-box input {
    background: #e9ecef;
    color: #000;
    border: 1px solid rgba(151, 151, 151, 0.18);
    font-weight: 100;
    padding: 7px 10px;
    font-size: 12px;
    /* max-width: 100% !important; */
}

.filter-search-box input:focus {
    border-color: #80bdff;
}

@media (min-width: 992px) {
    nav#sidebar {
        position: fixed;
        left: 0;
        height: 0px;
    }

    .main-panel {
        margin-left: 257px;
    }

    .sidebar-icon-only .main-panel {
        margin-left: 70px;
    }

    body.sidebar-open nav#sidebar {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

.chosen-container-single .chosen-single div {
    width: 10px;
    height: 20px;
    top: 45%;
    transform: translateY(-50%);
    right: 10px;
    background: transparent;
}

h2#swal2-title {
    text-transform: capitalize;
}

.hide {
    display: none;
}

.form-check .form-check-label {
    margin-top: 0.9rem;
}

.dt-buttons a {
    color: #fff;
}

.dt-buttons.wide {
    width: 100%;
}


form#searchData {
    margin-top: 45px;
}

div#loader {
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    content: '';
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
}

.loaderHolder {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    width: 110px;
    text-align: center;
    color: #fff;
}

.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #3498db;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: auto;
    margin-bottom: 0;
}


.darkMode div#loaderMain {
    background: var(--bodyBgColor) !important;
}

div#loaderMain {
    position: fixed;
    background: #f3f3f3;
    content: '';
    z-index: 9999;
    width: 100%;
    height: 100%;
    display: none;
}

.loaderHolderMain {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 48%;
    width: 110px;
    text-align: center;
    color: #fff;
}

.loaderMain {
    margin: auto;
    margin-bottom: 0;
}

.loaderHolderMain img {
    width: 150px;
    height: auto;
}
.darkMode .loaderHolderMain .dark-logo{
    display: block !important;
}
.darkMode .loaderHolderMain .main-logo{
    display: none !important;
}

tfoot {
    font-size: 14px;
}

div#listLoader {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    content: '';
    z-index: 99999999999999;
    width: 90%;
    height: 100px;
}

.listloaderHolder {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    width: 110px;
    text-align: center;
    color: #fff;
}

.loader-handle {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #3498db;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin: auto;
    margin-bottom: 0;
}


#searchFilterData input.btn.btn-primary.mr-2 {
    padding: 14px 25px;
}

.search_filter_div {
    margin-bottom: 30px;
}

.form-group label {
    width: 100%;
}


.search_filter_div .multiButtns {
    margin: 0;
}

.search_filter_div .multiButtns a {
    padding: 10px 20px;
}


.tableStructDetails {
    display: table;
}

.tableHeadDetails,
.tableBodyDetails {
    display: table-row;
}


.tableHeadDetails>div,
.tableBodyDetails>div {
    display: table-cell;
    border: solid;
    border-width: thin;
    padding-left: 5px;
    padding-right: 5px;
}



/* DivTable.com */
.divTable {
    display: table;
    width: 100%;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}

.divTableCell,
.divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 15px 10px;
}

.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}

.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}

.divTableBody {
    display: table-row-group;
}

.divTableRow.divTableHeadBody {
    font-weight: 800;
}

h3.currentDateTime {
    margin: 0;
    font-size: 18px;
    color: #4a4a4a;
}


.swal2-container {
    z-index: 106060 !important;
}


#exampleModalLong #mytaskTable.table th,
#exampleModalLong #mytaskTable.table td {
    padding: 0.75rem 0.9375rem;
}


.commentAuthor {
    float: left;
    width: 30%;
}

.commentDetails {
    float: left;
    width: 58%
}

.taskAuthor {
    text-align: right;
    position: relative;
}

.taskAuthor .commentAuthor {
    float: right;
}

.chosen-container .chosen-results {
    max-height: 180px;
}

.taskAuthor .commentDetails {
    float: right;
}

.edit_task_comment {
    position: absolute;
    top: 7px;
    left: 10px;
    display: none;
}

#mytaskTable tr:hover {
    cursor: pointer;
}

#mytaskTable tr:hover .edit_task_comment {
    display: block;
}


.comment_link_chat {
    position: relative;
}

span.comment_count {
    background: #4d83ff;
    color: #fff;
    position: absolute;
    padding: 3px 5px;
    border-radius: 100%;
    font-size: 7px;
    display: inline-block;
    word-break: normal;
}








:root {
    --bodyBgColor: #1c1e2f;
    --headerSidebarBgColor: #222437;
    --textPrimary: #b9c0d3;
    --formBorderColor: #424351;
    --text-primary-color: #4d83ff;
    --text-white: #fff;
}

span.season_name {
    color: #4a4a4a;

}

.season-div-content {
    padding: 0 15px;
    margin: 0 15px;
    position: relative;
}

.season-div-content::before {
    content: "||";
    font-size: 25px;
    position: absolute;
    left: -5px;
    color: #4D83FF;
    top: 50%;
    transform: translateY(-53%);
}

.season-div-content::after {
    content: "||";
    font-size: 25px;
    position: absolute;
    right: -5px;
    color: #4D83FF;
    top: 50%;
    transform: translateY(-53%);
}


.content-wrapper {
    padding: 0.5rem 1.04rem;
}

.grid-margin {
    margin-bottom: 0.875rem;
}





.darkMode span.season_name {
    color: var(--text-white);
}


/* Dark Theme */

/* .darkMode .btn-primary {
	background: #008B46;
	border: #008B46;
} */

.darkMode .auth form .auth-link {
    color: var(--text-primary-color);
}

.darkMode .auth form .auth-link:hover {
    opacity: 0.9;
}

.darkMode .content-wrapper {
    background: var(--bodyBgColor);
}

.darkMode .footer,
.darkMode .navbar .navbar-menu-wrapper,
.darkMode .navbar .navbar-brand-wrapper,
.darkMode .sidebar,
.darkMode .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown,
.darkMode .auth .auth-form-light,
.darkMode .list-group-item {
    background: var(--headerSidebarBgColor);
}

.darkMode .card {
    background: var(--headerSidebarBgColor);
    border: 1px solid var(--headerSidebarBgColor);
}

.darkMode select.form-control,
.darkMode .dataTables_wrapper select {
    outline: none;
}


.darkMode .navbar .navbar-menu-wrapper,
.darkMode .navbar .navbar-brand-wrapper {
    border-bottom: 1px solid var(--headerSidebarBgColor);
}

.darkMode .navbar .navbar-brand-wrapper,
.darkMode .sidebar {
    border-right: 1px solid var(--headerSidebarBgColor);
}

.darkMode .sidebar .nav:not(.sub-menu)>.nav-item {
    border-bottom: 1px solid var(--headerSidebarBgColor);
}

.darkMode .text-muted,
.darkMode .text-muted a,
.darkMode .text-dark {
    color: var(--textPrimary) !important;
}

.darkMode .card .card-title,
.darkMode .card .card-header {
    color: var(--textPrimary);
}

.darkMode .text-muted a:hover {
    opacity: 0.9;
}

.darkMode .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item:hover .text-primary {
    color: var(--text-white) !important;
}

.darkMode .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-toggler,
.darkMode .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-name,
.darkMode .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link::after,
.darkMode .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item {
    color: var(--textPrimary);
}

.darkMode .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item:hover {
    background: var(--text-primary-color);
    color: var(--text-white);
}

.darkMode .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand {
    color: var(--text-primary-color);
}



.darkMode .sidebar .nav .nav-item .nav-link,
.darkMode .sidebar .nav .nav-item .nav-link i.menu-arrow {
    color: var(--textPrimary);
}


/* .darkMode .sidebar .nav:not(.sub-menu)>.nav-item:hover>.nav-link,
.darkMode .sidebar .nav:not(.sub-menu)>.nav-item.active a {
	background: var(--text-primary-color);
	color: var(--text-white);
} */

/* .darkMode .sidebar .nav .nav-item.active>.nav-link i,
.darkMode .sidebar .nav .nav-item.active>.nav-link .menu-title,
.darkMode .sidebar .nav .nav-item.active>.nav-link .menu-arrow {
	background: var(--text-primary-color);
	color: var(--text-white);
} */

.darkMode .sidebar .nav.sub-menu .nav-item .nav-link:hover {
    color: var(--text-primary-color);
}


/* .darkMode .sidebar .nav:not(.sub-menu)>.nav-item:hover>.nav-link i.menu-arrow,
.darkMode .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item:hover {
	background: var(--text-primary-color);
	color: var(--text-white);
} */

body.darkMode,
.darkMode .dataTables_wrapper .dataTable thead tr th,
.darkMode .dataTables_wrapper .dataTable tbody tr td,
.darkMode table#calendar thead tr th,
.darkMode table#myTable thead th,
.darkMode table#myTable tbody td,
.darkMode table#newDataTable thead th,
.darkMode table#newDataTable tbody td,
.darkMode table#calendar thead th,
.darkMode table#calendar tbody td,
.darkMode table#mytaskTable thead th,
.darkMode table#mytaskTable tbody td,
.darkMode .chosen-container-single .chosen-single {
    color: var(--textPrimary);
}

.darkMode table#mytaskTable tbody td {
    border: none;
}

.darkMode table#myTable thead th,
.darkMode table#myTable tbody td,
.darkMode table#newDataTable thead th,
.darkMode table#newDataTable tbody td,
.darkMode table#calendar thead th,
.darkMode table#calendar tbody td {
    border: 1px solid rgba(151, 151, 151, 0.18);
}


.darkMode .stretch-card>.card {
    border: 1px solid var(--headerSidebarBgColor);
}

.darkMode .form-control,
.darkMode .dataTables_wrapper select,
.darkMode #myTable_filter input.form-control.form-control-sm,
.darkMode #newDataTable_filter input.form-control.form-control-sm,
.darkMode .chosen-container-single .chosen-single,
.darkMode .chosen-container .chosen-drop,
.darkMode .displaytOnlyName {
    border: 1px solid var(--formBorderColor);
    background: var(--bodyBgColor);
    color: var(--textPrimary);
}

.darkMode .form-control:focus,
.darkMode .dataTables_wrapper select:focus,
.darkMode #myTable_filter input.form-control.form-control-sm:focus,
.darkMode #newDataTable_filter input.form-control.form-control-sm:focus,
.darkMode .chosen-container-active.chosen-with-drop .chosen-single,
.darkMode .chosen-container .chosen-drop {
    border: 1px solid #80bdff;
    background: var(--bodyBgColor);
    color: var(--textPrimary);
}

.darkMode .dataTables_wrapper .dataTable tbody tr:nth-child(odd),
.darkMode .table-striped tbody tr:nth-of-type(odd) {
    background: var(--bodyBgColor);
}

.darkMode .chosen-container .chosen-results li.no-results {
    background: var(--bodyBgColor);
}

.darkMode .chosen-container .chosen-results li,
.darkMode .chosen-container-single .chosen-search input[type="text"] {
    color: var(--textPrimary);
}

.darkMode .page-item.disabled .page-link,
.darkMode .page-item:first-child .page-link,
.darkMode .page-item:last-child .page-link,
.darkMode .pagination a,
.darkMode .pagination a:visited {
    background: var(--bodyBgColor);
    color: var(--textPrimary);
    border: 1px solid var(--text-white);
}

.darkMode .page-item.active .page-link {
    background: var(--text-primary-color);
    color: var(--text-white);
    border: 1px solid var(--text-primary-color);
}

.darkMode .pagination a:hover,
.darkMode .page-item:first-child .page-link:hover,
.darkMode .page-item:last-child .page-link:hover {
    background: #fff;
    color: var(--text-primary-color);
}

.darkMode.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title,
.darkMode.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
.darkMode.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
    background: var(--headerSidebarBgColor);
    color: var(--textPrimary);
    box-shadow: none;
}

.darkMode.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title:hover {
    background: var(--text-primary-color);
    color: var(--text-white);
}

.darkMode.sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link:hover {
    background: var(--text-primary-color);
    color: var(--text-white);
}

.darkMode.sidebar-icon-only .sidebar .nav .nav-item.active>.nav-link i {
    background: transparent;
}

.darkMode.sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title {
    border-radius: 0px;
}
.sidebar .nav .nav-item .nav-link .menu-title{
    font-size: 0.82rem;
}

.darkMode a.dashboard-module,
.darkMode a.dashboard-module:visited {
    background: var(--text-primary-color);
    color: var(--text-white);
    box-shadow: none;
}

.darkMode a.dashboard-module:hover,
.darkMode a.dashboard-module:active {
    background: var(--text-primary-color);
    color: var(--text-white);
    text-decoration: none;
    opacity: 0.9;
}

.darkMode ul.theme-change li a {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
}

.darkMode .auth form .form-group .form-control,
.darkMode .auth form .form-group .dataTables_wrapper select,
.darkMode .dataTables_wrapper .auth form .form-group select,
.darkMode .auth form .form-group .form-control:focus,
.darkMode .auth form .form-group .dataTables_wrapper select:focus,
.darkMode .dataTables_wrapper .auth form .form-group select:focus {
    background: var(--bodyBgColor);
    color: var(--text-white);
}

.darkMode ::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.darkMode :-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.darkMode ::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.darkMode .form-control:disabled,
.darkMode .dataTables_wrapper select:disabled,
.darkMode .form-control[readonly],
.darkMode .dataTables_wrapper select[readonly] {
    background-color: var(--headerSidebarBgColor);
    color: var(--text-white);
}

.darkMode #new_datepickers {
    background-color: var(--headerSidebarBgColor);
}

.darkMode div.dataTables_wrapper div.dataTables_length select {
    color: var(--text-white) !important;
}

.darkMode .chosen-container-multi .chosen-choices {
    border: 1px solid var(--formBorderColor);
    padding: 0.500rem 1.375rem;
    height: auto;
    background: var(--bodyBgColor);
    border-radius: 0;
    line-height: normal;
    box-shadow: none;
    color: #000000;
}

.darkMode #filter .chosen-container-single .chosen-single {
    background: var(--headerSidebarBgColor);
    color: var(--text-white);
}

.darkMode #myTable .currency-holder i, .darkMode #newDataTable .currency-holder i {
    color: var(--textPrimary);
}

.darkMode .filter-search-box input {
    background: var(--headerSidebarBgColor);
    color: var(--text-white);
    border: 1px solid var(--formBorderColor);
    font-weight: 100;
    padding: 7px 10px;
}

.darkMode .filter-search-box input:focus {
    border-color: #80bdff;
}

.darkMode tfoot {
    color: var(--text-white);
}





ul.theme-change li a.active {
    background: var(--text-primary-color);
    color: var(--text-white);
}


nav#sidebar::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    border: 1px solid rgba(77, 131, 255, .4);
    padding: 2px 0;
    background-color: rgba(77, 131, 255, .4);
}

nav#sidebar::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
}

.table-responsive::-webkit-scrollbar {
    height: 8px;
}

nav#sidebar::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(77, 131, 255, .3);
    background-color: var(--text-primary-color);
    border: 1px solid var(--text-primary-color);
}


/* .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand#desk {
	display: inline-block !important;
}

.navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand#mobile {
	display: none !important;
} */

.form-control:focus,
.dataTables_wrapper select:focus,
.chosen-container-single.chosen-container-active a.chosen-single,
.darkMode .form-control:focus,
.darkMode .dataTables_wrapper select:focus,
.darkMode .chosen-container-single.chosen-container-active a.chosen-single,
.filter-search-box input:focus,
.darkMode .filter-search-box input:focus,
.form-control#new_datepickers[readonly]:focus {
    background: #4d83ff;
    color: #fff;
}

.darkMode .modal-content {
    background: var(--headerSidebarBgColor);
    color: var(--text-white);
}

.darkMode .modal-content .close {
    color: var(--text-white);
}


.darkMode h3.currentDateTime {
    color: var(--text-white);
}



.filter-search-box input:focus::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1;
}

.filter-search-box input:focus:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.filter-search-box input:focus::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}


.datepicker_filter:focus::placeholder,
.datepicker_filter2:focus::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1;
}

.datepicker_filter:focus:-ms-input-placeholder,
.datepicker_filter2:focus:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.datepicker_filter:focus::-ms-input-placeholder,
.datepicker_filter2:focus::-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* my style */
#calendar .my-calender-bg-info {
    background-color: var(--text-primary-color) !important;
    color: var(--text-primary-color) !important;
}

#calendar .my-calender-bg-info:hover {
    cursor: pointer !important;
}

#calendar .my-calender-bg-info a {
    color: #fff !important;
}

#calendar .my-calender-bg-info a:hover {
    text-decoration: none !important;
    opacity: 0.8;
}

#calender .task_calender_date {
    color: #000 !important;
}

.todo-list {
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0;
}

.todo-list>li {
    border-radius: 2px;
    background: #f8f9fa;
    border-left: 2px solid #e9ecef;
    color: #495057;
    margin-bottom: 2px;
    padding: 10px;
}

.todo-list>li:last-of-type {
    margin-bottom: 0;
}

.todo-list>li>input[type='checkbox'] {
    margin: 0 10px 0 5px;
}

.todo-list>li .text {
    display: inline-block;
    font-weight: 600;
    margin-left: 5px;
}

.todo-list>li .badge {
    font-size: .7rem;
    margin-left: 10px;
}

.todo-list>li .tools {
    color: #dc3545;
    display: none;
    float: right;
}

.todo-list>li .tools>.fa,
.todo-list>li .tools>.fas,
.todo-list>li .tools>.far,
.todo-list>li .tools>.fab,
.todo-list>li .tools>.glyphicon,
.todo-list>li .tools>.ion {
    cursor: pointer;
    margin-right: 5px;
}

.todo-list>li:hover .tools {
    display: inline-block;
}

.todo-list>li.done {
    color: #697582;
}

.todo-list>li.done .text {
    font-weight: 500;
    text-decoration: line-through;
}

.todo-list>li.done .badge {
    background: #adb5bd !important;
}

.todo-list .primary {
    border-left-color: #007bff;
}

.todo-list .secondary {
    border-left-color: #6c757d;
}

.todo-list .success {
    border-left-color: #28a745;
}

.todo-list .info {
    border-left-color: #17a2b8;
}

.todo-list .warning {
    border-left-color: #ffc107;
}

.todo-list .danger {
    border-left-color: #dc3545;
}

.todo-list .light {
    border-left-color: #f8f9fa;
}

.todo-list .dark {
    border-left-color: #343a40;
}

.todo-list .lightblue {
    border-left-color: #3c8dbc;
}

.todo-list .navy {
    border-left-color: #001f3f;
}

.todo-list .olive {
    border-left-color: #3d9970;
}

.todo-list .lime {
    border-left-color: #01ff70;
}

.todo-list .fuchsia {
    border-left-color: #f012be;
}

.todo-list .maroon {
    border-left-color: #d81b60;
}

.todo-list .blue {
    border-left-color: #007bff;
}

.todo-list .indigo {
    border-left-color: #6610f2;
}

.todo-list .purple {
    border-left-color: #6f42c1;
}

.todo-list .pink {
    border-left-color: #e83e8c;
}

.todo-list .red {
    border-left-color: #dc3545;
}

.todo-list .orange {
    border-left-color: #fd7e14;
}

.todo-list .yellow {
    border-left-color: #ffc107;
}

.todo-list .green {
    border-left-color: #28a745;
}

.todo-list .teal {
    border-left-color: #20c997;
}

.todo-list .cyan {
    border-left-color: #17a2b8;
}

.todo-list .white {
    border-left-color: #ffffff;
}

.todo-list .gray {
    border-left-color: #6c757d;
}

.todo-list .gray-dark {
    border-left-color: #343a40;
}

.todo-list .handle {
    cursor: move;
    display: inline-block;
    margin: 0 5px;
}

.todo-list .icheck-primary {
    font-weight: 800;
}

.darkMode .todo-list>li {
    background: #1c1e2f;
    border-left: 2px solid var(--textPrimary);
    color: var(--textPrimary);
}

.add-btn-task {
    font-weight: 500;
    font-size: 16px;
}

body .dataTables_wrapper #myTable.dataTable thead tr th,
body .dataTables_wrapper #myTable.dataTable tbody tr td,
body .dataTables_wrapper #myTable.dataTable tfoot tr td,
body .dataTables_wrapper #newDataTable.dataTable thead tr th,
body .dataTables_wrapper #newDataTable.dataTable tbody tr td,
body .dataTables_wrapper #newDataTable.dataTable tfoot tr td {
white-space: break-spaces;
padding: 0.5em 0.5em;
font-size: 0.85rem !important;
word-break: normal !important;    
}

body .dataTables_wrapper #myTable.dataTable thead tr th:last-child,
body .dataTables_wrapper #myTable.dataTable tbody tr td:last-child,
body .dataTables_wrapper #myTable.dataTable tfoot tr td:last-child,
body .dataTables_wrapper #newDataTable.dataTable thead tr th:last-child,
body .dataTables_wrapper #newDataTable.dataTable tbody tr td:last-child,
body .dataTables_wrapper #newDataTable.dataTable tfoot tr td:last-child {
white-space: nowrap;
}

body .dataTables_wrapper #myTable.dataTable tbody tr td a, body .dataTables_wrapper #newDataTable.dataTable tbody tr td a {
display: inline-block;
}

.dataTables_wrapper .dataTable thead .sorting:before,
.dataTables_wrapper .dataTable thead .sorting_asc:before,
.dataTables_wrapper .dataTable thead .sorting_desc:before,
.dataTables_wrapper .dataTable thead .sorting_asc_disabled:before,
.dataTables_wrapper .dataTable thead .sorting_desc_disabled:before,
.dataTables_wrapper .dataTable thead .sorting:after,
.dataTables_wrapper .dataTable thead .sorting_asc:after,
.dataTables_wrapper .dataTable thead .sorting_desc:after,
.dataTables_wrapper .dataTable thead .sorting_asc_disabled:after,
.dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
display: none;
}

.success_row{
    background: #dff0d8 !important;
}
.danger_row{
    background: #f2dede !important;
}
.darkMode .dataTable tbody tr.success_row td, .darkMode .dataTable tbody tr.danger_row td{
    color: #08113b !important;
}
.highlightData{
    background: rgb(247, 153, 153);
    padding: 2px 6px;
}
.sidebar .nav .nav-item .nav-link i.menu-icon {
    margin-right: 0.5rem;
}
.sidebar .nav.sub-menu .nav-item .nav-link {
    white-space: normal;
}
.dataTables_filter input.form-control.form-control-sm {
    margin: 0;
    border-radius: 0;
    height: auto;
    border: 1px solid #efefef;
    margin-left: 5px;
}
.dataTables_filter {
    float: right;
}
.dataTables_filter input {
    padding: 5px 8px !important;
}
.darkMode .form-control,
.darkMode .dataTables_wrapper select,
.darkMode .dataTables_filter input.form-control.form-control-sm,
.darkMode .chosen-container-single .chosen-single,
.darkMode .chosen-container .chosen-drop,
.darkMode .displaytOnlyName {
    border: 1px solid var(--formBorderColor);
    background: var(--bodyBgColor);
    color: var(--textPrimary);
}

.darkMode .form-control:focus,
.darkMode .dataTables_wrapper select:focus,
.darkMode .dataTables_filter input.form-control.form-control-sm:focus,
.darkMode .chosen-container-active.chosen-with-drop .chosen-single,
.darkMode .chosen-container .chosen-drop {
    border: 1px solid #80bdff;
    background: var(--bodyBgColor);
    color: var(--textPrimary);
}

.show-more-filters{
    font-size: 15px;
    text-decoration: underline;
    /* color: red; */
    color: white !important;
}
.show-more-filters:hover{
    font-size: 15px;
    text-decoration: underline;
    /* color: red; */
    color: white !important;
    opacity: 0.9;
}
.select2-container .select2-selection--single {
    height: 2.875rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 45px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--text-primary-color) !important;
    color: white;
}
.select2-container .select2-selection--multiple {
    min-height: 2.875rem !important;
}


body.darkMode .select2-container--default .select2-results__option .select2-results__option {
    background-color: var(--bodyBgColor) !important;
    color: #fff !important;
}
body.darkMode .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--text-primary-dark-color) !important;
    color: white !important;
}
body.darkMode .select2-container--default .select2-results__option--group {
    color: #d9534f !important;
    background-color: var(--bodyBgColor) !important;
}
body.darkMode .select2-results__option--selectable {
    color: var(--text-primary-dark-color) !important;
    background-color: var(--bodyBgColor) !important;
}
body.darkMode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--text-primary-dark-color) !important;
    border: 1px solid var(--formBorderColor) !important;
}
body.darkMode .select2-container--default .select2-selection--single {
    background-color: var(--bodyBgColor) !important;
    border: 1px solid var(--formBorderColor) !important;
    border-radius: 4px;
}
body.darkMode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff !important;
}
body.darkMode .select2-container--default .select2-selection--multiple {
    background-color: var(--bodyBgColor) !important;
}
body.darkMode .select2-search--dropdown {
    background-color: var(--bodyBgColor) !important;
}
body.darkMode .select2-container--default .select2-search--dropdown .select2-search__field {
    color: #fff !important;
    background-color: var(--bodyBgColor) !important;
    border: 1px solid var(--formBorderColor) !important;
}
body.darkMode .select2-dropdown {
    background-color: var(--bodyBgColor) !important;
    border: 1px solid var(--formBorderColor) !important;
}
.select2-container--open {
  z-index: 999999 !important;
  position: relative;
}

.select2-container--readonly .select2-selection {
    pointer-events: none !important;
    background-color: #e9ecef !important;
    opacity: 0.6;
    cursor: not-allowed;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--text-primary-color);
}
.select2-container .select2-selection--single .select2-selection__clear {
    background-color: transparent;
    border: none;
    font-size: 1.5em;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 40px;
    margin-right: 20px;
    padding-right: 0px;
}