/* By www.Ezsoft.lk */

/* 
Buttons---------------
SIGN IN------------------
Dashboard------------------
*/

:root {
    --blue: #1b84e7;
    --indigo: #6610f2;
    --indigo_2: #300d4f;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #f27510;
    --yellow: #F49917;
    --green: #23BF08;
    --green_2: #00de72;
    --teal: #1CAF9A;
    --cyan: #5B93D3;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #1b84e7;
    --secondary: #6c757d;
    --secondary2: #e3e5e7;
    --secondary3: #f4f4f5;
    --success: #23BF08;
    --info: #5B93D3;
    --warning: #F49917;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --radius: 5px;

    /*month colors*/
    --jan: #3e95cd;
    --feb: #8e5ea2;
    --mar: #3cba9f;
    --apr: #e8c3b9;
    --may: #c45850;
    --jun: #ff3d67;
    --jul: #ffcd56;
    --aug: #006371;
    --sep: #530E41;
    --oct: #C2185B;
    --nov: #B3E5FC;
    --dec: #CDDC39;

    --ez_primary: hsla(214, 90%, 52%, 0.1);
    --ez_primary_color: #1676F3;

    --ez_warning: hsla(3, 100%, 60%, 0.1);
    --ez_warning_color: #FF4238;

    --ez_success: hsla(145, 76%, 44%, 0.12);
    --ez_success_color: #15c15d;
}

label, body{
    color: var(--secondary);
}
.bg-primary {
    background-color: var(--blue) !important;
}

.bg-accent {
    background-color: var(--purple) !important;
}

.bg-green {
    /*background-color: var(--green) !important;*/
    background-image: linear-gradient(to right, #43e97b 0%, #38f9d7 100%);
}

.bg-red {
    /*background-color: var(--red) !important;*/
    background: #FF512F;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right,#FF512F, #DD2476);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right,#FF512F, #DD2476); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-weight: 100;
}
.display1{
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 14px;
    display: block;
}

.display1_inline{
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 14px;
}
.row {
    margin: 0;
}

body {
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #868ba1;
    background-color: #f0f2f7;
}

.sidenav {
    width: 250px;
    /*background-color: var(--indigo_2);*/
}

header,
main,
footer {
    padding-left: 250px;
}

h2 {
    font-weight: 100;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

nav {
    background-color: #34495e;
    height: 50px;
    line-height: 50px;
}

.button-collapse {
    padding-left: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
}

i.fa.fa-bars,
a.button-collapse {
    text-decoration: none;
    color: white;
}

#search {
    padding-left: 40px;
    width: 90%;
}

#carbonads {
    position: static;
    display: block;
    max-width: 400px;
    padding: 15px 15px 15px 160px;
    margin: 0 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    padding-left: 15px;
    background-color: rgba(0, 0, 0, .05);
}

span.badge.red {
    color: #fff;
}

/* Buttons ----------------------------------------------------------------------------- */

.btn-blue-gradient {
    min-height: 40px;
    background-image: linear-gradient(to right, #300d4f 0%, #22063a 100%);
    /*background-color: #300d4f;*/
    background-repeat: repeat-x;
    border-radius: 0;
    white-space: nowrap;
    vertical-align: middle;
    color: #fff !important;
    border-radius: 2px;
    font-family: 'Asap', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.btn-blue-gradient:hover{
    box-shadow: rgba(0, 0, 0, 0.18) 0px 9px 18px;
    /*background-color: rgb(40, 11, 66);*/
}

.btn-red-gradient {
    min-height: 40px;
    background-image: linear-gradient(-225deg, rgb(247, 94, 48) 0%, #ef5350 48%, #f44336 100%);
    background-repeat: repeat-x;
    border-radius: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.btn-green-gradient {
    min-height: 40px;
    background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
    background-repeat: repeat-x;
    border-radius: 0;
    white-space: nowrap;
    vertical-align: middle;
}

.btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #6c757d;
}
.btn-ez-1 {
    border: none;
    /*background: linear-gradient(135deg,#ff8787,#ff7600);*/
    background: var(--ez_warning_color);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
}

.btn-ez-4 {
    border: none;
    background: linear-gradient(135deg,#ff8787,#ff7600);
    color: white !important;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    font-size:12px !important;
}

.btn-ez-5 {
    border: none;
    background: linear-gradient(135deg,#ff8787,#ff7600);
    color: white !important;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    font-size:12px !important;
}
.btn-ez-6 {
    border: none;
    background: linear-gradient(135deg, #ffd4d4, #ffc299);
    color: white !important;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    font-size:12px !important;
}



.btn-ez-small {
    border: none;
    background: linear-gradient(135deg,#ff8787,#ff7600);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    font-size: 12px;
    margin: 0 !important;
}

.btn-ez-2{
    border: none;
    background: linear-gradient(135deg,#73a5ff,#5477f5);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;

}
.btn-ez-3{
    border: none;
    background: linear-gradient(135deg,#73a5ff,#5477f5);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    padding:0;
    padding-left:2px;
    padding-right:2px;
}

.btn-ez-waring{
    border: none;
    background: var(--ez_warning);
    color: var(--ez_warning_color);
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 12px;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-round {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.btn {
    margin-bottom: 5px;
}

.btn:hover, .btn-large:hover, .btn-small:hover {

    /*background-color: #2bbbad;*/
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);

}

/* SIGN IN --------------------------------------------------------------------------------- */

.login-section {
    padding-top: 120px;
}

.sign-in-box {
    padding: 40px;
    padding-top: 100px;
    position: relative;
    min-height: 100vh!important;
    background-color: #fff;

}

.signin-title-primary {
    font-family: 'Asap', sans-serif;
    font-weight: 500;
    color:var(--indigo_2);
    margin-bottom: 8px;    
}

.signin-title-secondary {
    font-weight: 300;
    margin-bottom: 50px;
    margin-top: 0;
    font-family: 'Asap', sans-serif;
    color: var(--secondary) !important;
}

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

span {
    color: var(--blue);
    margin-right: 8px;
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    /*font-family: 'Comfortaa', cursive;*/
    /*font-weight: 400;*/
}

span .lnr{
    color: var(--indigo_2)!important;
    background-color: var(--indigo_2)!important;
}



.background {
    /*background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    background-image: linear-gradient(to right, #300d4f 0%, #22063a 100%);
}

.h_card{
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    background-color: #fff;
}


li {
    /*font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;*/
    font-family: 'Asap', sans-serif;
}

/* card --------------------------------------------------------------------------------- */

.card {
    position: relative;
    float: left;
    padding: 8px;
    background-color: white;
    margin-bottom: 10px;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius);
    /*overflow: hidden;*/
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.card-title-red {
    color: var(--red);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}

.card-title-green {
    color: var(--green);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}

.card-title-blue {
    color: var(--blue);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}

/* hr --------------------------------------------------------------------------------- */

hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}

a {
    color: var(--blue) !important;
}

/* MODAL -------------------------------------------------------------------------------------*/

.modal {
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius);
}
#modalok .modal-content, .modalok .modal-content ,#modalerror .modal-content, .modalerror .modal-content{
    text-align: center;
}

.modal .modal-footer .waves-red {
    color: var(--red) !important;
}

/* MODAL OK -------------------*/

#modalok img, .modalok img {
    width: 80px;
    color: var(--success);
}

#modalok ,.modalok {
    width: 450px;
    text-align: center;
}

#modalok .success, .modalok .success {
    color: var(--success);
}

#modalok .modal-footer, .modalok .modal-footer {
    text-align: center;
}

/* MODAL ERROR -------------------*/

#modalerror img, .modalerror img {
    width: 80px;
    color: var(--success);
}

#modalerror, .modalerror {
    width: 450px;
    text-align: center;
}

#modalerror .error-msg, .modalerror .error-msg{
    color: var(--red);
}

#modalerror .modal-footer, .modalerror .modal-footer {
    text-align: center;
}
.modalmonth{
    width: 30%;
    text-align: center;
}
.modalmonth .row{
    /*margin-bottom: 3px;*/
}
.month_div{
    /*border-radius: 25px;*/
    min-height: 45px!important;
    text-align: center;
    line-height: 45px;
    align-content: center;
    color: #093560;
    border: 1px solid #ced4da;
    /*padding: 5px;*/
    /*margin: 3px;*/
    font-weight: 600;
    /* margin: 3px; */
}

.month_div_active{
    background-color: #1b84e7;
    color: white;
    cursor: pointer;
}

.month_div:hover{
    background-color: #1b84e7;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    color: white;
    cursor: pointer;
}

input.select-dropdown.dropdown-trigger {
    text-align: center;
}
/* WIDGETS ----------------------------------------------- */

.card-sales {
    padding: 10px;
}

.card-sales .card-title {
    color: var(--blue);
}

.border-left {
    border-right: 1px solid #ced4da;
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: 0.65625rem;
    background-color: #e9ecef;
    border-radius: 3px;
}

.wd-50p {
    width: 50%;
}

.wd-70p {
    width: 70%;
}

.wd-35p {
    width: 35%;
}

.progress-bar {
    height: 15px;
    font-size: 11px;
}

.progress,
.progress-bar {
    border-radius: 15px;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #1b84e7;
    transition: width 0.6s ease;
}

.value {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    color: #343a40;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 16px;
}

/* Collection ------------------------------------------------------------------------------ */

.collection {
    border: none;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius);
}

.collection .collection-item.active {
    background-color: var(--blue);
    color: #fff !important;
}

.lnr {
    font-size: 20px;
}

.chip {
    color: white;
    border-radius: 16px;
    line-height: 32px;
    color: white;
    margin: 0;
    text-align: center;
    font-family: 'Asap', sans-serif;
    font-weight: 600;
}

.chip_blue {
    background-color: var(--blue); 
    color: white;
    line-height: 32px;
    border-radius: 16px;
    cursor: pointer;

}
.chip_purple {
    background-color: var(--purple); 
    color: white;
    line-height: 32px;
    border-radius: 16px;
    cursor: pointer;
}
.chip_green {
    background-color: var(--green_2); 
    color: white;
    line-height: 32px;
    border-radius: 16px;
    cursor: pointer;
}

.chip_primary {
    color: white;
    border-radius: 16px;
    line-height: 32px;
    color: #1676F3;
    margin: 0;
    text-align: center;
    font-family: 'Asap', sans-serif;
    font-weight: 600;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: var(--ez_primary);
}

.chip_success {
    color: white;
    border-radius: 16px;
    line-height: 32px;
    color: #15c15d;
    margin: 0;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: var(--ez_success);
    text-align: center;
    font-family: 'Asap', sans-serif;
    font-weight: 600;
}

.chip_warning {
    color: white;
    border-radius: 16px;
    line-height: 32px;
    color: #FF4238;
    margin: 0;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: var(--ez_warning);
    text-align: center;
    font-family: 'Asap', sans-serif;
    font-weight: 600;
}

/* TABLE----------------------------------------------------------------- */

table {
    border: none;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius);
    background-color: #fff;
}

th {
    font-family: "Lato", "Helvetica Neue", Arial, sans-serif;
    color: var(--blue);
    font-weight: 700;
    text-transform: uppercase;
}

table tr td {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    /*    font-size: 14px!important;*/
    color: black;
}

/* FORM CONTROLS---------------------------------------------------------------- */

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 1px 0 0 var(-green_2);
    box-shadow: 0 1px 0 0 var(-green_2);
}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]).form-control-2 {

    -webkit-box-shadow: 0 1px 0 0 var(-green_2);
    box-shadow: 0 1px 0 0 var(-green_2);
}

input:not([type]),
input[type=text]:not(.browser-default).form-control-2 {
    display: block;
    width: 100%;
    padding: 0.594rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    height: 30px;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius);
    border: none !important;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.errspan {
    float: right;
    font-size: 25px;
    margin-right: -12px;
    margin-top: -45px;
    position: relative;
    z-index: 2;
    color:var(--blue);
    border-radius: 50%;

}

/* RADIO BUTTONS ---------------------------------------------------------------------- */

[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:after {
    background-color:var(--green_2);
}

[type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:before, [type="radio"].with-gap:checked + span:after {
    border: 2px solid var(--green_2);
}

/* CHECKBOX ---------------------------------------------------------------------------- */

[type="checkbox"]:checked + span:not(.lever):before {
    top: -4px;
    left: -5px;
    width: 12px;
    height: 22px;
    border-top: 2px solid transparent;
    border-left: 2px solid transparent;
    border-right: 2px solid var(--green_2);
    border-bottom: 2px solid var(--green_2);
    -webkit-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}


label span{
    color: var(--indigo_2);
    /*font-family: "Roboto", sans-serif;*/
    /*font-family: 'Asap', sans-serif;*/
    font-weight: 300;
}

/* DATE PICKER ---------------------------------------------------------- */

.date-text{
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 300!important;
}
.datepicker-date-display{
    /* background-image: linear-gradient(to right, #1b84e7 0%, #6f42c1 100%); */
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.datepicker-table td.is-today {
    color: black !important;
    background-color: #ffd600 !important;
    font-weight: bold !important;

}
.datepicker-done{
    display: none !important;
}

.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done {
    color: var(--blue);
    padding: 0 1rem;
}

.datepicker-table td.is-selected {
    background-color: var(--blue);
    color: #fff;
}

/* RANGE ----------------------------------------------------------- */

input[type=range] + .thumb{
    background-color: var(--blue);
}

.noUi-connect {
    background-image: linear-gradient(to right, #1b84e7 0%, #6f42c1 100%)!important;
}

.noUi-target.noUi-horizontal .noUi-tooltip{
    background-color: var(--blue)!important;
}

.noUi-target.noUi-horizontal .noUi-active .noUi-tooltip{
    padding: 2px;
}

/* SELECT --------------------------------------------------------- */

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: #000!important;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset!important;
}

.select-wrapper input.select-dropdown{
    color: #000000;
    font-family: "Roboto", sans-serif;
    /*    font-weight: 400!important;*/
}
.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid var(--blue);
}
.select-wrapper .caret{
    fill: var(--blue);
}

.dropdown-content li > a, .dropdown-content li > span{
    color: var(--blue);
    font-family: "Roboto", sans-serif;
    font-weight: 400!important;
    font-size: 14px;
}

.select-wrapper ul {
    border: none;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(0, 40, 100, 0.12);
}

li{
    color: #000000;
    font-family: "Roboto", sans-serif;
    font-weight: 300!important;
}


.dropdown-content{
    border: 1px solid rgba(0, 40, 100, 0.2);
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius);
}


/* SWITCHES ----------------------------------------------- */
.switch label{
    color: #000000;
    /*font-family: "Roboto", sans-serif;*/
    font-family: 'Asap', sans-serif;
    font-weight: 300!important;
}
.switch label input[type=checkbox]:checked + .lever{
    /*background-image: linear-gradient(to right, #fff 0%, #ccc 100%)!important;*/
    background-color: #99ffcd!important;
}
.switch label input[type=checkbox]:checked + .lever:after{
    background-color: var(--green_2);
}

/* COLLAPSIBLE ---------------------------------------------- */
.collapsible{
    border: none;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius)!important;
}
.collapsible-header{
    padding-bottom: 5px;
    padding-bottom: 5px;
}

.collapsible-body span{
    color: #000000;
}
.collapsible li:first-child .collapsible-header{
    border-top-right-radius: 5px!important;
    border-top-left-radius: 5px!important;
}
.collapsible li:last-child .collapsible-header{
    border-bottom-right-radius: 5px!important;
    border-bottom-left-radius: 5px!important;
}

.collapsible-header i{
    color: var(--blue);
}
.collapsible-body{
    background-color: #fff;
    padding: 20px;
}

.collapsible-body-2{
    margin-top: 10px!important;
}

.collapsible-title{
    color: var(--blue);
    font-weight: 500;
}
.sidenav .collapsible-header, .sidenav.fixed .collapsible-header{
    /*    line-height: 25px!important;*/
}

.round-16{
    border-radius: var(--radius)!important;
}

.squre-only{
    border-radius: 0px!important;
}

.addmodal{
    border: none;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius)!important;
    padding: 10px;
    min-width: 300px;
    background-color: #fff;
    margin: 10px;
}

.title{
    border: none;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    background-color: #fff;
    padding: 5px;
    padding-left: 0;
    color: var(--indigo_2);
    font-weight: 500;
    font-size: 18px;
}

.sub-title{
    font-size: 15px;
    color: var(--secondary);
    font-weight: 400;   
}
.collapsible-header.squre-only{
    padding-bottom: 10px;
    padding-top: 10px;
}

span.collapsible-title{
    padding-top: 3px;
}
.user-view{
    padding-top: 15px!important;
    padding-bottom: 10px!important;
}



/*Transfer model*/

#transfer_header{
    margin-top: 0!important;
}
.tr_value{
    color: var(--blue);
}

/*custom bottom sheet*/
.ninety{
    max-height: 90%!important;
    min-height: 90%!important;

}
.eighty{
    max-height: 80%!important;
    min-height: 80%!important;

}
.seventy{
    max-height: 70%!important;
    min-height: 70%!important;

}

.sixty{
    max-height: 60%!important;
    min-height: 60%!important;
}
.fifty{
    max-height: 50%!important;
    min-height: 50%!important;
}

.mg0{
    margin: 0!important;
}

.mg-up-down0{
    margin-bottom: 0;
    margin-top: 0;
}

.mg-left-right0{
    margin-right:0;
    margin-left:0;
}

.red-f{
    color: var(--red)!important;
}
.red-b{
    background-color: var(--red)!important;
}

.force-center{
    text-align: center!important;
}

h4 a{
    font-weight: 400;
}

.table-sub-header{
    font-weight: 400!important;
    padding: 4px;
}

.paddingTop150{
    padding-top: 120px!important;
}
.paddingTop20{
    padding-top: 20px!important;
}

.picker__nav--next:before {
    border-right: 0;
    border-left: .75em solid var(--blue);
}

.picker__nav--prev:before{
    border-right: .75em solid var(--blue);
}

/*.picker__button--close{
    border: none;
    background: linear-gradient(135deg,#ff8787,#ff7600);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 1.25rem;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    margin-bottom: 10px;
}
.picker__button--clear{
    border: none;
    background: linear-gradient(135deg,#ff8787,#ff7600);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 1.25rem;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    margin-bottom: 10px;
    margin-right: 5px;
    margin-left: 5px;
        
}

.picker__button--today{
      border: none;
    background: linear-gradient(135deg,#73a5ff,#5477f5);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 8px -1px rgba(0,32,128,.2), 0 8px 24px -2px rgba(0,128,255,.1);
    font-size: 1.25rem;
    transition: all .2s;
    outline: 0;
    will-change: opacity;
    margin-bottom: 10px;
    
}*/

.picker__table{
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    background-color: #fff;
}

.card-ez{
    padding: 8px;
    background-color: white;
    margin-bottom: 10px;
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sales-target-div{
    font-weight: 400!important;
    color: var(--dark)!important;
    border-radius: 16px;
    line-height: 35px;
    background-color: var(--secondary2);
}

.sales-amount{
    font-weight: 600;
}

.sales-target-month-div{
    font-weight: 400!important;
    color: var(--dark)!important;
    line-height: 35px;
    /*    border-top-right-radius: 0;
        border-bottom-right-radius: 0;*/
    padding-left: 8px;
    background-color: var(--secondary3);
}

.dot {
    height: 25px;
    width: 25px !important;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    line-height: 35px;
    margin-top: 5px;
    margin-left: 8px;
}

/*collapsible----------------------------------*/

li a{
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

.collapsible-header{
    padding-left: 0!important;
    padding-right: 0!important;
}

li .active span{
    color: #1967d2 !important;
    font-weight: 500;
}


li .active{
    background-color: #e8f0fe;
}

.collapse_sub_title{
    color: var( --dark);
    font-size: 13px;
}

.queue-no{
    font-size: 15px;
    margin-right: 10px;
}

.timeline ul {
    padding: 1em 0 0 2em;
    margin: 0;
    list-style: none;
    position: relative;

}
.timeline ul::before {
    content: ' ';
    height: 100%;
    width: 1px;
    background-color: #d9d9d9;
    position: absolute;
    top: 0;
    left: 2.7em;
    z-index: 1;
}
.timeline li div {
    display: inline-block;
    margin: 1em 0;
    vertical-align: top;
}
.timeline .bullet {
    width: 1.5em;
    height: 1.5em;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fff;
    z-index: 1;
    margin-right: 1em;
}
.timeline .bullet.pink {
    border: 2px solid #F93B69;
}
.timeline .bullet.green {
    border: 2px solid #B0E8E2;
}
.timeline .bullet.orange {
    border: 2px solid #EB8B6E;
}
.timeline .queue-no {
    width: 20%;
    margin: 0.5em 0;
    padding-top: 0.25em;
}
.timeline .desc {
    width: 50%;
}
.timeline h3 {
    font-size: 1.1em;
    font-weight: 400;
    margin: 0;
}
.timeline h4 {
    margin: 0;
    font-size: 0.9em;
    font-weight: 400;
    color: #808080;
}
.timeline .people img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.nav-light{
    background: #fff;
}
.nav-light ul a{
    font-weight: 400;

}

.nav-light ul li .active{
    background-color: #e8f0fe;
    font-weight: 600;
}


.stock_item_name{
    font-size: 20px;
    padding-left:20px;
    color: #754fa8;
    font-weight:bold;
}

.tbl_current_stock_index{
    background-color:#e8f0fe;
    padding: 7px;
    font-weight: 600;
    padding-left: 30px !important;
    color:#1f78e5;
    height:100%;
    padding-top: 8px !important;
}
.tbl_current_stock_index_2{
    background-color:#e8f0fe;
    padding: 7px;
    font-weight: 600;
    text-align: center;
    color:#1f78e5;
    height:100%;
    padding-top: 8px !important;
}
.lnr.lnr-menu {
    padding-left: 8px!important;
}

.tbl_current_stock_item_name_sub{
    background-color:#fafafa;
    padding: 7px;
    font-weight: 500;
    padding-top: 8px!important;
    padding-left: 30px!important;

}

.tbl_current_stock_summary_mp_th{
    background-color: #a9ffcb;
}
.tbl_current_stock_summary_exp_th{
    background-color: #ffd2d2;
}

.tbl_header{
    background-color: #039be5!important;

}

.tbl_header th{
    padding-bottom: 10px!important;
    padding-top: 10px !important;
    color: #fff!important;
    background-color: #039be5!important;
    border: none;

}

.tbl_stock_light_purple{
    background-color:#c9c0e9;
}

#tbl_prd_sum {

    width: 100% !important;

}


.followMeBar {
    background: #e64a19;
    padding: 10px 20px;
    position: relative;
    z-index: 1;
    color: #fff;
}

.followMeBar.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 0;
}

.followMeBar.fixed.absolute {
    position: absolute;
}

.picker__table{
    box-shadow: 0 6px 15px rgba(36, 37, 38, 0.08);
    background-color: #fff;
}

.picker__table thead tr{
    /*background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    background: var(--ez_primary);
}
.picker__table thead tr th{
    color: var(--ez_primar_color)!important; 
}

.picker__table{
    border-radius: 10px!important;
}

.picker__box{
    border-radius: 15px;
}
.picker__weekday{
    color: #fff!important;
}
.picker--focused .picker__day--highlighted, .picker__day--highlighted:hover, .picker__day--infocus:hover, .picker__day--outfocus:hover {
    background: var(--blue);
    color: #fff;
}
.picker__frame{
    top:0!important;
    margin-top: 20px!important;
}


/* Style Placeholders */
::-webkit-input-placeholder {
    color: var(--indigo_2)!important;
}
::-moz-placeholder {
    color: var(--indigo_2)!important;
}
:-ms-input-placeholder {
    color: var(--indigo_2)!important;
}
::placeholder {
    color: var(--indigo_2)!important;
}


.l-bg-green {
    background: linear-gradient(45deg, #9ce89d, #cdfa7e) !important;
    color: #fff;
}

.l-bg-orange {
    background: linear-gradient(45deg, #fda582, #f7cf68) !important;
    color: #fff;
}
.l-bg-cyan {
    background: linear-gradient(45deg, #72c2ff, #86f0ff) !important;
    color: #fff;
}
.l-bg-purple {
    background: linear-gradient(45deg, #a890d3, #edbae7) !important;
    color: #fff;
}

.bottom-shadow{
    box-shadow: 0 2px 25px -13px rgba(36, 37, 38, 0.5);
}
.input-field > label {
    color: var(--secondary)!important;
}
#tit_invo{
    color: var(--ez_primary_color)!important;
    background-color: var(--ez_primary)!important;
    font-weight: 600;
}

.search{
    background: #eeeeee!important;
    border-radius: 8px!important;
    border-bottom: none!important;
    padding-left: 5px!important;;

}

/*titles ---------------------------------- */
.company_name_title{
    font-weight: 400;
    color: var(--purple);
    padding-top: 5px;
}


._m_15{
    margin-top: 15%;
}
._m_0{
    margin-top: 3%;
}

._m_top35px{
    margin-top: 55px!important;
}
._m_top0px{
    margin-top:0!important;
}

.login_container{
    margin-top: 10px!important;
    min-height: 95vh!important;
    width: 100%!important;
}
.modal{
    z-index: 10000!important;  
}