body[data-layout-mode="light"] {
  --bs-body-color: #3333 !important;
}

body {
  
  font-size: 14px;
 
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 10px 0;
	color : #333 !important;
  

}

h3 {
  line-height: 30px;
}

.h4, h4 {
    font-size: 1.125rem;
}

.h5, h5 {
    font-size: 1.0rem !important;
}

.text-dark {
    color: #333 !important;
}

.table {
    width: 100% !important;
    margin-bottom: 1.5rem !important;
    color: #333 !important;
}

.table .thead-light th {
    color: #333 !important;
    background-color: #f3f7f9;
    border-color: #dee2e6;
}


.form-control {

    color: #333 !important; 
    background-color: #fff;

}

.form-control:focus {
    color: #333 !important;
    background-color: #fff;
    border-color: #b1bbc4;
    outline: 0;
    box-shadow: none;
}

.custom-select.is-invalid:focus, .custom-select.is-valid:focus, .custom-select:invalid:focus, .custom-select:valid:focus, .form-control.is-invalid:focus, .form-control.is-valid:focus, .form-control:invalid:focus, .form-control:valid:focus {
    box-shadow: none !important;
}

.navbar-custom {
    background-color: #0082fb;
    box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15);
    padding: 0 10px 0 0;
    position: fixed;
    left: 0;
    right: 0;
    height: 70px;
    z-index: 1001;
}

.left-side-menu {
	width: 240px;
	background: #fff;
	bottom: 0;
	padding: 20px 0;
	position: fixed;
	transition: all .1s ease-out;
	top: 70px;
	box-shadow: 0 0 35px 0 rgba(154, 161, 171, .15)
}

#sidebar-menu>ul {
	list-style: none;
	padding: 0
}

#sidebar-menu>ul>li>a {
	color: #333 !important;
	display: block;
	padding: 12px 20px;
	position: relative;
	transition: all .4s;
	
	font-size: .95rem
}

#sidebar-menu>ul>li>a:active,
#sidebar-menu>ul>li>a:focus,
#sidebar-menu>ul>li>a:hover {
	color: #00acc1;
	text-decoration: none
}

#sidebar-menu>ul>li>a>span {
	vertical-align: middle
}

#sidebar-menu>ul>li>a i {
	display: inline-block;
	line-height: 1.0625rem;
	margin: 0 10px 0 3px;
	text-align: center;
	vertical-align: middle;
	width: 16px;
	font-size: 18px
}

#sidebar-menu>ul>li>a svg {
	width: 16px;
	height: 16px;
	margin-left: 3px;
	margin-right: 10px
}

#sidebar-menu>ul>li>a .drop-arrow {
	float: right
}

#sidebar-menu>ul>li>a .drop-arrow i {
	margin-right: 0
}

#sidebar-menu>ul>li>a.mm-active {
	color: #00acc1
}

#sidebar-menu>ul>li ul {
	padding-left: 34px;
	list-style: none
}

#sidebar-menu>ul>li ul ul {
	padding-left: 20px
}

#sidebar-menu .badge {
	margin-top: 4px
}

#sidebar-menu .menu-title {
	padding: 10px 20px;
	letter-spacing: .05em;
	pointer-events: none;
	cursor: default;
	font-size: .6875rem;
	text-transform: uppercase;
	color: #6e768e;
	font-weight: 600
}

#sidebar-menu .menuitem-active>a {
	color: #00acc1
}

#sidebar-menu .menuitem-active .active {
	color: #00acc1
}

.nav-second-level li a {
	padding: 8px 20px;
	color: #333;
	display: block;
	position: relative;
	transition: all .4s;
	font-size: .875rem
}

.nav-second-level li a:focus,
.nav-second-level li a:hover {
	color: #00acc1
}

.nav-second-level li.active>a {
	color: #00acc1
}

.menu-arrow {
	transition: transform .15s;
	position: absolute;
	right: 20px;
	display: inline-block;
	font-family: 'Material Design Icons';
	text-rendering: auto;
	line-height: 1.5rem;
	font-size: 1.1rem;
	transform: translate(0, 0)
}

.menu-arrow:before {
	content: "\F0142"
}
.img-responsive {
   height: auto;
   width: auto;
   max-height: 72px;
   max-width: 200px;
}

.switchery {
   width: 50px;
}

/* .switchery:before {
   content: 'Yearly';
   color: #333;
   position: absolute;
   left: 40px;
   top: 50%;
   transform: translateY(-50%);
} */
.switchery:before {
   color: #333;
   position: absolute;
   left: 40px;
   top: 50%;
   transform: translateY(-50%);
}

.js-switch:checked+.switchery:before {
   content: 'Monthly';
   color: #fff;
   left: 40px;
}

.text-price {
   font-weight: 6;
   color: blue;
}

.table-width {
   width: 100% !important;
}

.morecontent span {
   display: none;
}

.morelink {
   display: block;
}

.form-style {
   width: 85px;
   height: 20px;
   padding: 5px 5px 5px 5px;
   cursor: auto
}

.hidden-form {
   display: none;
}

.show-cursor {
   cursor: default;
}

.loader__label {
   float: left;
   margin-left: 50%;
   -webkit-transform: translateX(-50%);
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -o-transform: translateX(-50%);
   transform: translateX(-50%);
   margin: 0.5em 0 0 50%;
   font-size: 0.875em;
   letter-spacing: 0.1em;
   line-height: 1.5em;
   color: #1976d2;
   white-space: nowrap;
   -webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
   -moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
   animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

@-webkit-keyframes loader-label {
   0% {
      opacity: 0.25;
   }

   30% {
      opacity: 1;
   }

   100% {
      opacity: 0.25;
   }
}

@-moz-keyframes loader-label {
   0% {
      opacity: 0.25;
   }

   30% {
      opacity: 1;
   }

   100% {
      opacity: 0.25;
   }
}

@keyframes loader-label {
   0% {
      opacity: 0.25;
   }

   30% {
      opacity: 1;
   }

   100% {
      opacity: 0.25;
   }
}

.taskButton {
   width: 150px;
   height: 50px;
   padding: 5px 5px 5px 5px;
   cursor: auto;
}

.statusButton {
   width: 80px;
   height: 20px;
   padding: 5px 5px 5px 5px;
   cursor: auto;
}

.dealsbutton {
   width: 150px;
   height: 20px;
   padding: 5px 5px 5px 5px;
   cursor: auto;
}

.tableColumnWith {
   width: 20px;
}

.notescheck{
   margin-left: 250px;
}

.card-wrapper {
   cursor: pointer;
}

.notesbg{
   color:#f5f7fb;
}

.tdwidth{
   width: 10px;
}

/* for datatable mobile view */
@media only screen and (max-width: 768px) {
	.tables-responsive{
		display:block;
		width: 100%;
		overflow-x: auto;
    }
}

.dealFormStyle{
   width: 150px; 
   height: 20px; 
   padding: 5px 5px 5px 5px;
   cursor: auto;
}
.dlMyTask{
   width: 80px; 
   height: 20px; 
   padding: 5px 5px 5px 5px; 
   cursor: auto;
}
.mdlTask{
   width: 150px;
   height: 50px; 
   padding: 5px 5px 5px 5px; 
   cursor: auto;
}

/* This style used to show multiselect drop down list and placeholder.*/
.select2-container--default .select2-selection--multiple .select2-selection__choice
{
   background-color: #3353ed !important;
}
.select2-search__field:placeholder-shown {
   width: 100% !important; 
}.uploaded-file-name {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
        font-size: 13px;
        margin-top: 5px;
        color: #444;
    }