/* To Do Area  */

.todo-client-sel {
    position: relative;
    display: flex;
    margin-bottom: 16px;
}

.todo-client-sel-wrap label,
.create-manual-ocassion .form-item-staff label {
    font-family: 'Montserrat-Regular';
    margin-bottom: 5px;
}

.todo-client-sel .cl-todo-input input {
    min-width: 65px;
    height: 38px;
    padding: 10px !important;
    background-color: #fff !important;
    border: 0.5px solid #808080 !important;
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 18px;
    color: #000;
    background-image: none !important;
}

.todo-client-sel .selected-item {
    display: flex;
    justify-content: flex-start;
    background-color: #F2F1F6;
    height: 38px;
    border: 0.5px solid #808080 !important;
    border-right: none !important;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    white-space: nowrap;
    color: #000;
    padding: 12px 39px;
    cursor: pointer;
    position: relative;
    font-size: 14px;
    font-family: Montserrat-Medium, Sans-serif;
    width: 153px;
}

.cl-todo-input {
    width: calc(100% - 153px);
}

.todo-client-sel .selected-item::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M13.567 14L8.52445 8.95741C8.13556 9.2858 7.68419 9.5429 7.17034 9.72872C6.6565 9.91451 6.10972 10.0074 5.53 10.0074C4.12429 10.0074 2.93458 9.52022 1.9609 8.54583C0.98721 7.57146 0.500366 6.39075 0.500366 5.00372C0.500366 3.61668 0.98756 2.43597 1.96195 1.46158C2.93632 0.487194 4.11919 0 5.51056 0C6.90191 0 8.08262 0.487194 9.05267 1.46158C10.0227 2.43597 10.5078 3.61733 10.5078 5.00566C10.5078 5.56609 10.417 6.1034 10.2356 6.61761C10.0541 7.13179 9.79049 7.60494 9.44481 8.03705L14.5004 13.0667L13.567 14ZM5.51703 8.71113C6.54327 8.71113 7.41557 8.34924 8.13392 7.62547C8.85229 6.90171 9.21148 6.02779 9.21148 5.00372C9.21148 3.97963 8.85229 3.10571 8.13392 2.38194C7.41557 1.65818 6.54327 1.2963 5.51703 1.2963C4.4836 1.2963 3.60518 1.65818 2.88177 2.38194C2.15835 3.10571 1.79665 3.97963 1.79665 5.00372C1.79665 6.02779 2.15835 6.90171 2.88177 7.62547C3.60518 8.34924 4.4836 8.71113 5.51703 8.71113Z' fill='%23808080'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 16px;
}


.todo-client-sel .selected-item::after {
    content: '';
    display: block;
    width: 14px;
    height: 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M7.50037 9.5L0.500366 2.32175L2.27688 0.5L7.50037 5.88369L12.7239 0.52719L14.5004 2.34894L7.50037 9.5Z' fill='%23808080'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 8px;
}

.todo-client-sel .custom-sel-dropdown {
    position: absolute;
    background-color: #F2F1F6;
    top: 43px;
    left: 0px;
    right: 0;
    z-index: 99;
    width: 100%;
    border-radius: 6px;
    display: none;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    overflow: hidden;
}

.todo-client-sel .custom-sel-dropdown .select-option {
    color: #000;
    padding: 11px 19px;
    border-bottom: 0.5px solid rgba(128, 128, 128, 0.13);
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    line-height: 14px;
    font-family: Montserrat-Medium, Sans-serif;
}

.todo-client-sel .custom-sel-dropdown .select-option:hover {
    background-color: rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.todo-client-sel .custom-sel-dropdown .select-option:last-child {
    border: 0
}

.todo-client-sel.active .custom-sel-dropdown {
    display: block;
}

/* Create Manual Ocassion CSS */
body.user-logged-in.path-add,
body.user-logged-in.path-todo {
    background: #fff;
}

.cl-content-width.todo-main-content {
    padding: 60px 16px 30px;
}

.create-manual-ocassion .cl-edit-center-width {
    max-width: initial;
}

body .create-manual-ocassion .cl-cancel-btn-2 {
    font-weight: bold;
    font-family: 'Montserrat-Regular';
}

.create-manual-ocassion .cl-edit-nav-title.cl-h5 {
    line-height: 32px;
}

.create-manual-ocassion .cl-edit-center-width .cl-h5 {
    line-height: 23px;
    color: #000;
}

.create-manual-ocassion .cl-input-type-2 label,
.create-manual-ocassion .cl-date-type-1 label,
.create-manual-ocassion .cl-textarea-type-1 label {
    font-weight: 500;
    font-family: 'Montserrat-Regular';
    color: #000;
}

.create-manual-ocassion .form-item {
    position: relative;
}

.create-manual-ocassion .cl-input-type-2 label.error,
.create-manual-ocassion .form-item label.error {
    font-size: 12px;
    color: red;
    position: absolute;
    left: 0;
    bottom: -15px;
    margin-bottom: 0;
    font-family: 'Montserrat-Regular';
    font-weight: normal;
}

.create-manual-ocassion .cl-input-type-2 input,
.create-manual-ocassion .cl-input-type-2 input:focus {
    background-color: #F2F1F6 !important;
    margin-bottom: 0;
}

.create-manual-ocassion .form-item-staff .form-control {
    margin-bottom: 16px;
    border: 0.5px solid #808080 !important;
    background: #F2F1F6;
    border-radius: 4px;
}

.create-manual-ocassion .cl-assignment .cl-h5 span {
    color: red;
    margin: 0 0.3em;
}

.create-manual-ocassion .cl-textarea-type-1 .bottom-label {
    margin-bottom: 16px;
    font-size: 14px;
    font-family: 'Montserrat-Regular';
    color: #000;
}

body .create-manual-ocassion .cl-btn-2 {
    padding: 16px 12px;
    font-family: 'Montserrat-Medium';
    background: #FAE36E !important;
    color: #000 !important;
}

.create-manual-ocassion .todo-client-sel .selected-item::before {
    background-image: url('../images/icons/occasion/search.svg');
}

.create-manual-ocassion .todo-client-sel .form-item {
    position: static;
}

.create-manual-ocassion .todo-client-sel {
    position: relative;
}

.create-manual-ocassion .cl-input-type-2 .form-item {
    margin-bottom: 18px !important;
}

.create-manual-ocassion .cl-search-type {
    margin-bottom: 0;
}

.create-manual-ocassion .form-control {
    margin-bottom: 18px;
}

.create-manual-ocassion .form-item-staff label.form-required {
    /* margin-bottom: 16px; */
}

/* My Occasion CSS*/
body.user-logged-in.path-occasions,
body.user-logged-in.path-store {
    background: #fff;
}

.todo-listing.cl-main-content {
    padding-top: 60px !important;
}

.todo-listing h3.cl-h3 {
    font-size: 18px;
    font-family: 'Montserrat-Regular';
    font-weight: bold;
    line-height: normal;
}

.create-occasion {
    background: #FAE36E url('../images/icons/occasion/black-plus.svg') right 16px center no-repeat;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    color: #000 !important;
    font-size: 16px;
    font-family: 'Montserrat-Medium';
    padding: 12px;
    border-radius: 6px;
    text-transform: capitalize;
    max-width: 318px;
    margin-left: auto;
    margin-right: auto;
}

.create-occasion.create-occasion-for-client {
    max-width: none;
}

.employee-filter {
    margin-bottom: 12px;
}

.todo-occasion-wrapper label {
    margin-bottom: 6px;
    font-family: 'Montserrat-Regular';
}

.todo-occasion-wrapper .cl-select-type-3 {
    border-radius: 4px;
    padding: 10px 47px 10px 12px;
    border: 1px solid rgba(128, 128, 128, 0.4) !important;
    background: #F2F1F6 url('../images/icons/occasion/down-arrow.svg') 97% center no-repeat !important;
}

.todo-occasion-wrapper .employee-filter .cl-select-type-3 {
    background: #F2F1F6 url('../images/icons/occasion/down-arrow.svg') 98.5% center no-repeat !important;
}

.todo-listing .profile-btns {
    justify-content: flex-end;
}

.todo-listing .todo-count {
    font-size: 14px;
}

.occasion-client-employee-fields .select2-container--default .select2-selection--single {
    background-color: #f2f2f6;
    border: 1px solid #aaa !important;
    border-radius: 4px;
}

.occasion-client-employee-fields #store-department-wrapper div select,
.occasion-client-employee-fields #department-wrapper div select {
    background-color: #f2f2f6;
    border: 1px solid #aaa !important;
    border-radius: 4px;
}

.occasion-client-employee-fields #store-department-wrapper div label,
.occasion-client-employee-fields #department-wrapper div label {
    font-family: 'Montserrat-Regular';
    margin-bottom: 5px;
}

.todo-listing-store-filter select,
.todo-listing-department-filter select {
    background-color: #f2f1f6;
}

.todo-listing-store-filter select:focus,
.todo-listing-department-filter select:focus {
    background-color: #f2f1f6;
}

.create-manual-ocassion #employee-wrapper {
    margin-bottom: 24px !important;
}

.todo-category #filter_category-actions_multiSelect{
    width: 100%;
}

.todo-category .multiselect-wrapper .multiselect-input {
    margin: 0;
    padding: 11px 8px;
    background: #f1f1f1 url(../../../../themes/custom/clientela/assets/arrow-down.svg) right 13px center no-repeat;
    cursor: initial;
}

.todo-category .multiselect-wrapper #filter_category-actions_inputCount {
    left: -50px !important;
}

.todo-category .multiselect-wrapper .multiselect-list {
    margin-top: 15px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    z-index: 11;
}

.todo-category .multiselect-wrapper span label,
.todo-category .multiselect-wrapper ul li label {
    font-weight: normal;
    font-size: 14px;
    color: #272727;
    position: relative;
    line-height: 20px;
}

.todo-category .multiselect-wrapper span label span {
    padding: 8px 10px;
    display: inline-block;
    cursor: pointer;
}

.todo-category .multiselect-list label span:before {
    content: '';
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #272727;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    padding: 6px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    margin-top: -3px;
}

.todo-category .multiselect-wrapper hr {
    display: none !important;
}

.todo-category .multiselect-wrapper ul li {
    padding: 8px 10px;
    border-top: 1px solid rgba(128, 128, 128, 0.4);
}

.todo-category .multiselect-wrapper ul li:hover {
    background-color: transparent;
}

.todo-category .multiselect-wrapper ul li.active {
    background-color: transparent;
    color: #272727;
}

.todo-category .multiselect-list label input:checked+span:after {
    content: '';
    display: block;
    position: absolute;
    top: 12px;
    left: 16px;
    width: 6px;
    height: 10px;
    border: solid #272727;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.todo-category .multiselect-list li label input:checked+span:after {
    content: '';
    display: block;
    position: absolute;
    top: 4px;
    left: 6px;
    width: 6px;
    height: 10px;
    border: solid #272727;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.todo-category .multiselect-input-div .multiselect-dropdown-arrow{
    display: none !important;
}

.todo-listing .submit-section {
    justify-content: center;
}

.todo-listing .submit-section input {
    min-width: 150px;
}

.todo-category .multiselect-wrapper .multiselect-input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #272727;
    font-size: 14px;
}

.todo-category .multiselect-wrapper .multiselect-input::-moz-placeholder {
    /* Firefox 19+ */
    color: #272727;
    font-size: 14px;
}

.todo-category .multiselect-wrapper .multiselect-input:-ms-input-placeholder {
    /* IE 10+ */
    color: #272727;
    font-size: 14px;
}

.todo-category .multiselect-wrapper .multiselect-input:-moz-placeholder {
    /* Firefox 18- */
    color: #272727;
    font-size: 14px;
}

@media (max-width: 767px) {
    .cl-content-width.todo-main-content {
        padding: 40px 16px 20px;
        max-width: initial;
    }

    .todo-listing.cl-main-content {
        padding-top: 16px !important;
        max-width: 100%;
    }

    .todo-listing h3.cl-h3 {
        margin-bottom: 30px !important;
    }
}