.left-side-menu hr {
    border-top: 1px solid #bdb2b7;
    margin-left: 25px;
    margin-right: 25px;
}

.container-milk {
    margin: 0px 0px;
}

@media (min-width: 576px) {
    .container-milk {
        margin: 0px 25px;
    }
}

.k-checkbox {
    border-color: rgba(0,0,0, 0.4);
}

.custom-checkbox input{
        color: rgb(0,0,0);
}


@media (max-width: 575px) {
    body [data-layout=topnav] .container-fluid, .container-fluid {
        margin: 0px 0px;
        padding-right: 0px;
        padding-left: 0px;
    }
}

.card-widget {
    font-size: 10pt;
}


body[data-sidelayout=detached] .left-side-menu {
    min-width: 250px;
    max-width: 250px;
}

body[data-sidelayout=detached] .body-content.left-menu {
    width: calc(100% - 250px);
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 767.98px) {
    body[data-sidelayout=detached] .body-content.left-menu {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
    }

    .button-menu-mobile.disable-btn {
        display: inline-block;
        position: relative;
        left: 10px;
    }
}


.k-grid .k-grid-md .k-edit-cell, .k-grid .k-grid-md .k-command-cell, .k-grid .k-grid-md .k-grid-edit-row td, .k-grid .k-grid-md .k-grid-edit-row .k-table-td, .k-grid-md .k-edit-cell, .k-grid-md .k-command-cell, .k-grid-md .k-grid-edit-row td, .k-grid-md .k-grid-edit-row .k-table-td {
    padding-block: 5px;
    padding-inline: 10px;
}

.k-grid .k-grid-md .k-table-th > .k-cell-inner > .k-link, .k-grid-md .k-table-th > .k-cell-inner > .k-link {
    padding-block: 5px;
    padding-inline: 10px;
}

.k-grid .k-grid-md td, .k-grid .k-grid-md .k-table-td, .k-grid-md td, .k-grid-md .k-table-td {
    padding-block: 5px;
    padding-inline: 10px;
}

.k-table-md {
    line-height: 1.8em;
    font-size: 0.8rem;
    font-weight: 400;
    font-family: Arial, sans-serif;
}

.left-side-menu {
    width: 250px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
}

.widget-row-title {
    font-weight: bold;
    margin-top: 10px;
    border-bottom: 1px solid #cccccc;
    color: #909090;
    margin-left: -15px;
    margin-right: -15px;
}

.side-nav .side-nav-link svg {
    display: inline-block;
    line-height: 1.0625rem;
    margin: 0 10px 0 0;
    font-size: 1.1rem;
    vertical-align: middle;
    width: 20px;
}

.k-scheduler-toolbar > ul.k-scheduler-views
{
    z-index: 100 !important;
}

.k-scheduler{
    min-height:200px;
}

.card-body .btn {
    min-width: 100px;
}

.form-group {
    margin-bottom: 0.5rem;
}

.form-control-plaintext {
    padding: .45rem 12px;
}

form .btn {
    min-width: 100px;
}

.milk-grid-item{
    width:100%;
    border-top:dashed #d9d9d9 1px;
}

.milk-grid-item:first-of-type{
    border-top: none;
}

.quotagrid {
    width: calc(100% - 10em);
    overflow-x: scroll;
    margin-left: 10em;
    overflow-y: visible;
    padding:0px;
}

.quotagrid td, .quotagrid th {
    text-align: right;
    padding: 5px 10px;
    margin: 0;       
    border-top-width: 0px;
    height: 25px;
    line-height: 15px;
}

.quotagrid td {
    white-space: nowrap;
    min-width: 100px;
}

.quotagrid .double-row td,
.quotagrid .double-row th {
    height: 40px;
}

.quotagrid .headcol {
    position: absolute;
    width: 10em;
    left: 0;
    top: auto;
    border-top-width: 1px;
    /*only relevant for first row*/
}

.quotagrid .alt-row > td, .quotagrid .alt-row > th{
    background: #f1f1f1;
}

.milk-datatable {
    width: 100%;
    font-size: 12px;
    margin-bottom: 5px;
    background-color: rgb(238, 238, 238);
}
.milk-datatable th {
    background-color: #313a46;
    font-weight: bold;
    padding: 5px 5px;
    color: white;
}
.milk-datatable td {    
    padding: 5px 5px;
}
    .milk-datatable .k-textbox>k.input {
        font-size: 12px;
    }
    .milk-datatable k-textbox>k.input, .milk-datatable input.k-select, .milk-datatable span.k-numerictextbox, .milk-datatable span.k-numerictextbox .k-input {
        height: 22px;
        line-height: 18px;
    }
.milk-datatable .k-numerictextbox .k-link{
    height: 0.75em;
}
.milk-datatable .k-input {
    font-size: 12px;    
}
.milk-datatable .k-dropdown-wrap .k-input {
    line-height: 18px;
    height: 21px;
}
.milk-datatable .k-select {
    line-height: 18px;
}

.milk-hide-required .milk-required-field{
    display: none;
}

.milk-row-error {
    background-color: #ffc0cb;
}

.milk-bid-success td {
    background-color: rgba(70, 207, 120, 0.2);
}
.milk-bid-notsuccess td {
    background-color: rgba(207, 70, 75, 0.2);
}

.milk-required-field {
    color:red; 
    font-size: 15px;
    position: absolute;
    top: 10px;
    left: -3px;
}

.milk-required-field {
    color: red;
    font-size: 15px;
    top: 10px;
    left: -3px;
}

.milk-phone .form-control {
    display: inline-block;
}

.k-checkbox-label {
    font-weight: 400;
    font-size: 0.8rem;
}

.k-numerictextbox .k-link {
    height: 0.9em;
}

.k-recur-view .k-check {
    padding-right: 10px;
}
.k-edit-field > ul.k-reset .k-widget {
    height: 32px;
}
.k-scheduler-edit-form {
    font-size: 10pt;
}
.k-scheduler-edit-form .k-edit-label {
    width: 20%;
}
.k-scheduler-edit-form .k-edit-field {
    width: 74%;
}
.k-scheduler-edit-form .k-edit-field li{
    display: flex;
}
.k-scheduler-edit-form  .k-edit-field {
    line-height: 2.4;
}

.k-edit-form-container .editor-label, .k-edit-label {
    padding: .65em 0 .5em;
}
.k-edit-field > input[type=radio], .k-edit-field > input[type=checkbox] {
    margin-top: 0.8em;
}

.k-edit-field > ul.k-reset .k-datepicker, .k-edit-field > ul.k-reset .k-dropdown, div[name=recurrenceRule] > .k-dropdown {
    width: 8.2em;
}
.k-textbox .milk-required-field, .k-dropdown .milk-required-field, .k-timepicker .milk-required-field, .k-datepicker .milk-required-field, .k-datetimepicker .milk-required-field, .k-numerictextbox .milk-required-field, .k-maskedtextbox .milk-required-field, .k-autocomplete .milk-required-field {
    color: red;
    font-size: 15px;
    position: absolute;
    top: 10px;
    left: -15px;
}

.k-input, .k-multiselect-wrap, .k-textbox > input, k-textbox>.k-input, k-textbox>.k-input:hover, textarea.k-textbox, textarea.k-textbox:hover {
    background-color: #fff;
    color: #000000;
}

.k-event {
    border: none;
    color: #333333;
    background: #eeeeee;
}
.k-task {
    display: flex;
}
    .k-event .event-container, .k-task .event-container  {
        height: 100%;
        width: 100%;
        -ms-border-radius: 3px;
        border-radius: 3px;
        padding: 2px 5px;
    }
    .k-event .event-container a,.k-task .event-container a{ 
        color: #333333;
    }

textarea.k-textbox { 
    padding-left: 10px; 
    line-height: 1.5;
}

.k-ie k-textbox>.k-input{
    height: -webkit-calc(2.25rem + 2px);
    height: calc(2.25rem + 2px);
}

.k-dropdown .k-input, .k-dropdowntree .k-dropdown-wrap .k-input, .k-selectbox .k-input {
    color: #6c757d;
}

.dropdown-menu {
    z-index: 12000;
}

.quotagrid td, .quotagrid th {
    border-left: 1px solid #cccccc;
    border-right: 1px solid #cccccc;
}

.quotagrid td.current-month, .quotagrid th.current-month {
    border-left: 2px solid #444444;
    border-right: 2px solid #444444;
}

.quotagrid .top-row.current-month {
    border-top: 2px solid #444444;
}
.quotagrid .bottom-row.current-month {
    border-bottom: 2px solid #444444;
}

.quotagrid td.milk-futureline {
    background-color: #DAF4FE;
}
.quotagrid .alt-row td.milk-futureline{
    background-color: #A7E2F8;
}
.quotagrid .milk-projectedline {
    background-color: #FFEDD9;
}
.quotagrid .alt-row td.milk-projectedline{
    background-color: #FFD6A9;
}

.quotagrid .purchase-suspended {
    border: 2px solid #db7093;
}

.quotagrid .sell-suspended {
    border: 2px solid #db7093;
}

.quotagrid .transfer-suspended {
    border: 2px solid #db7093;
}

.quotagrid .quota-error {
    background-color: #f0d2d2;
}
.quotagrid .alt-row .quota-error{
    background-color: #f0c2c2;
}

.quotagrid td.milk-projectedline.quota-error {
    background-color: #FFEDD9;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, #f0c2c2 2px, #f0c2c2 4px);
                     
}
.quotagrid .alt-row td.milk-projectedline.quota-error{
    background-color: #FFD6A9;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 2px, #f0c2c2 2px, #f0c2c2 4px);
}

.quotagrid .increase-error {
    border: 2px solid #db7093;
}



.quotagrid .grid-button {
    border: solid 1px #dddddd;
    background-color: #eeeeee;
    -ms-border-radius: 6px;
    border-radius: 6px;
    padding: 3px;
    width: 25px;
    height: 25px;
    margin: 2px;
    display: inline-block;
    color: black;
    cursor: pointer;
}



.alert-container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.alert-dismissable .close {
    right: auto;
}

.alert {
    padding: 5px 5px 5px 15px;
    margin-bottom: 5px;
}



.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
    margin-left: 0;
}



.milk-OutOfRange {
    color: #909090;
}

.milk-override {
    background-color: #bbdeed;
}

.milk-lostOpportunity td{
    background-color: #f0d2d2;
}
.milk-lostOpportunity.k-alt td{
    background-color: #f0c2c2;
}

.milk-spinner-container {
    position: absolute; 
    z-index: 100; 
    height: 100%; 
    width: 100%; 
    background-color: rgba(255, 255, 255, 0.4);
    display: none;
    min-height: 50px;
}

.milk-spinner {
    left: 50%;
    top: 50%;
    position: absolute;
}

.milk-button-icon {
    width: 20px;
}

.k-button.k-button-icon, .k-icon-button {
    height:auto;
}

.milk-danger {
    background-color: #f2dede;
}



.milk-grid {
    overflow-x: scroll;
}

span.milk-number-entry, input.milk-number-entry.k-input {
    text-align: right;
    max-width: 174px;
    padding-right: 0.4em;
}


.col-fixed-120{   
    width:120px;
    position:absolute;
    z-index:1;
    padding-left: 15px;
}
.col-offset-120{
    padding-left:120px;
    z-index:0;
    padding-right: 15px;
}

.modal-header {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #eeeeee;
    -ms-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -ms-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
}

.modal-header h5 {
    font-weight: bold;
}



.quota .estimated:after {
    content: "*";
    color: coral;
    position: absolute;
    font-size: 10px;
    top:3px;
    right: 5px;
}

.fa-align-center:before {
    content: none;
}

.milk-grid-alert-danger {
    color:#b94a48;
    background-color:#f2dede;
    border-color: #eed3d7;
    margin: 0px -5px;
    padding: 0px 5px;
}

.milk-grid-alert-warning {
    color:#c09853;
    background-color:#fcf8e3;
    border-color: #fbeed5;
    margin: 0px -5px;
    padding: 0px 5px;
}

.unsuitableCell {
    color:#aaaaaa;
    background-color:#D9DDE8;
    margin: 0px -5px;
    padding: 0px 5px;
}

.milk-legend-block {
    width: 20px; 
    height: 20px;
    border: 1px solid #888888;
    float: left;
}
.milk-legend-text {
    float: left;
    margin: 0px 10px;
}
.milk-legend {
    border: 1px solid #d3d3d3;
    border-radius: 10px;
    padding: 5px 20px;
    margin: 15px;
}

:not([title=''])[data-content] {
    cursor: pointer;
}

.form-control
{
   padding: 5px 9px;
   color: black;
}

table {
    border-spacing: 0px;
    -webkit-border-horizontal-spacing: 0px;
    -webkit-border-vertical-spacing: 0px;
}

/* KENDO CONTROLS*/
.k-widget {
    box-shadow: none;
}
.k-grid{
    border:none;
}
.k-grid-header-wrap {
    border: none;
}

.k-window .row, .k-window .row * {
    box-sizing: border-box;
}

.k-window-content {
    padding: 15px;
}

.k-input, .k-widget.k-input {
    color: black;
}

.milk-numbercolumn .k-cell-inner {
    float: right;
}

    .k-autocomplete .k-input {
        border: 1px solid #ccc;
    }

.k-input-inner {
    padding: 0.167em 6px;
}

/*.k-grid .k-command-cell > .k-button + .k-button {
    margin-left: 3px;
    -webkit-margin-end: unset;
    margin-inline-end: unset;
    -webkit-margin-start: 3px;
    margin-inline-start: 3px;
}*/

    .k-ie .k-autocomplete .k-input, .k-input.form-control {
    height: calc(2.25rem + 2px);
    line-height: 1.5;
    text-indent: 0.4em;
}


.k-event-template {
    padding: .2em 1.4em .3em .6em;
}


:first-child.k-event-actions {

    margin-top: 0px;
   
}

.k-button.milk-danger:hover {
    background-color: #e9c8c8;
}


.k-textbox > .k-input {
    width: 100%;
    overflow: visible;
    vertical-align: middle;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(204, 204, 204);
}

    .k-textbox > .k-input:hover {
        width: 100%;
        overflow: visible;
        vertical-align: middle;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(174, 174, 174);
    }


.k-window-titlebar {
    position: relative;
    height: auto;
}

.reportGrid th.k-header {
    white-space: normal !important;
}

.reportGrid .k-column-title {
    white-space: normal !important;
}

.k-grid tr.milk-rejected {
    background-color: #ffecea
}

.k-grid tr.k-alt.milk-rejected {
    background-color: #feddda
}

.k-grid tr td {
    border: none !important;
}


.k-grid {
    line-height: 1.3em;
    font-size: 0.75rem;
    font-weight: 400;
    font-family: Arial, sans-serif;
}



    .k-grid td.k-command-cell {
        text-overflow: clip;
    }


/* KENDO GRID */

.k-grid-header th.k-header.k-filterable > .k-link {
    margin-right: 1.2em;
}


.k-grid-content {
    overflow-x: visible;
}

.k-pager-input .k-textbox>.k-input{
    display: inline-block;
}

.k-grid-header th.k-header {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #d3d3d3;
}

.k-widget .k-pager-wrap {
    border-top: 1px solid #d3d3d3;
}

.k-grid-header th.milk-numbercolumn, td.milk-numbercolumn, div.milk-numbercolumn {
    text-align: right !important;
}

.k-pager-numbers .k-link, .k-pager-wrap {
    line-height: 1.5em;
}
.k-pager-numbers .k-link, .k-pager-numbers .k-state-selected {
    height: 1.5em;
}

.k-pager-wrap > .k-link {
    line-height: 1.5em;
    height: 1.5em;
}

.k-pager-nav {
    border-radius: 1.08em !important;
}

.k-pager-wrap .k-link {
    border-right-color: rgb(204, 204, 204) !important;
    border-left-color: rgb(204, 204, 204) !important;
    border-top-color: rgb(204, 204, 204) !important;
    border-bottom-color: rgb(204, 204, 204) !important;
}
.k-pager-wrap .k-link:hover {
    border-right-color: rgb(66, 139, 202) !important;
    border-left-color: rgb(66, 139, 202) !important;
    border-top-color: rgb(66, 139, 202) !important;
    border-bottom-color: rgb(66, 139, 202) !important;
}

.k-edge .k-pager-numbers .k-link, .k-webkit .k-pager-numbers .k-link, .k-ie11 .k-pager-numbers .k-link, .k-ff .k-pager-numbers .k-link{
    text-align: center !important;
}

.k-pager-wrap .k-pager-nav.k-pager-last {
    border-bottom-left-radius: 1.08em !important;
    border-bottom-right-radius: 1.08em !important;
    border-top-left-radius: 1.08em !important;
    border-top-right-radius: 1.08em !important;
}

.k-ie .k-pager-input k-textbox>.k-input {
    height: calc(1.38571428em + 2px);
}

.k-pager-input k-textbox>.k-input {
    line-height: 1.1em;
}

@media (max-width: 1025px) {
    .k-edge .k-grid .k-pager-numbers, .k-webkit .k-grid .k-pager-numbers, .k-ie11 .k-grid .k-pager-numbers, .k-ff .k-grid .k-pager-numbers { left: 5.8em; }
}

.k-grid tbody .k-button {
    min-width: 24px;
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 5px;
    padding-bottom: 3px;
    margin-top:0px;
    margin-bottom:0px;
}

.k-button-md.k-icon-button .k-button-icon {
    min-width: 15px;
    min-height: 15px; 
}

.k-grid td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.k-grid-content td {
    vertical-align: top;
}

.k-grid tr.milk-projectedline td{
    background-color: #f0c2c2;
}
.k-grid tr.milk-projectedline.k-alt td{
    background-color: #f5c7c7;
}

.k-grid tr.milk-creditReset td{
    border-bottom: 4px solid #008000;
}

.k-grid tr.milk-offroute td{
    background-color: #fff2ed;
}

.k-grid tr.milk-errorline.k-state-selected td {
    background-color: #993812;
}

.k-grid tr.milk-errorline td {
    background-color: #ffe0d4;
}

.milk-errorline {
    background-color: #ffe0d4;
}

.k-grid tr.milk-unprocessedline.k-state-selected td {
    background-color: #428bca;
}
.k-grid tr.milk-unprocessedline.k-alt.k-state-selected td {
    background-color: #3884c7
}

.k-grid tr.milk-unprocessedline td {
    background-color: #ffe4e3;
}

.k-grid tr.milk-unprocessedline.k-alt td {
    background-color: #ffeeed;
}

.k-grid tr.milk-futureline td {
    background-color: #DAF4FE;
}
.k-grid tr.milk-futureline.k-alt td{
    background-color: #A7E2F8;
}
.k-grid tr.milk-projectedline.milk-lostOpportunity td{
    background: linear-gradient(#FFEDD9, #f0c2c2);
}
.k-grid tr.milk-projectedline.milk-lostOpportunity.k-alt td{
    background: linear-gradient(#FFD6A9, #f0c2c2); 
}


.fullheightGrid .k-grid-content {
    height: auto !important;
    width: auto;
    min-height:75px;
    -ms-overflow-y: auto;
    overflow-y: auto;
}

.fullheightGrid .k-grid-header {
    padding-right: 0 !important;
}
.fullheightGrid .k-grid-footer {
    padding-right: 0 !important;
}

.k-counter-container {
    color: #9C9C9C;
    font-size: 12px;
    margin-top: 2px;
    margin-bottom: 5px;
    margin-left: auto;
    float: right;
}

#btnPrint {
    background-color: #d3d3d3;
    border: none;
    right: 60px;
    top: 17px;
    position: absolute;
}

.note-filter-card,
.notes-grid-card {
    background: #fff;
    border: 1px solid #e9ecf2;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04);
}
.note-filter-card { 
    padding: 18px 20px; margin-bottom: 18px; 
}
.notes-grid-card {
    padding: 8px; 
}
.notes-grid-card .k-grid { 
    border-width: 0; 
}
.notes-grid-card .k-grid td {
    vertical-align: top;
}

.card-body .note-filter-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #eef0f4;
}

.note-filter-header { 
    display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px;
}
.note-filter-title { 
    font-weight: 700; letter-spacing: .04em; color: #3a4254; font-size: 13px; padding-top: 6px;
}
.note-filter-actions {
    display: flex; gap: 8px;
}
.note-filter-fields { 
    display: flex; flex-wrap: wrap; gap: 16px; 
}
.note-filter-field {
    flex: 1 1 190px; min-width: 160px; 
}
.note-filter-field > label {
    display: block; color: #5b6573; margin-bottom: 5px; font-size: 13px; 
}
.note-filter-row2 { 
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px;
}

.note-daterange { 
    display: flex; align-items: center; gap: 8px;
}
.note-daterange .note-daterange-col { 
    flex: 1 1 0; min-width: 0; 
}
.note-daterange .note-daterange-sep {
    color: #9aa3af;
}
.note-filter-row2 .note-daterange .note-daterange-col { 
    flex: 0 0 150px; 
}

.note-results-header {
    display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 14px;
}
.note-results-count {
    color: #5b6573; font-size: 14px; 
}
.note-sort { 
    display: flex; align-items: center; gap: 8px; 
}
.note-sort label { 
    margin: 0; color: #5b6573; 
}
.note-sort-select { 
    border: 1px solid #d6dbe5; border-radius: 6px; padding: 5px 10px; background: #fff; 
}

.note-card {
    display: flex;
    background: #fff;
    border: 1px solid #e9ecf2;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04);
}
.note-card-author { 
    width: 150px; flex: 0 0 150px; display: flex; align-items: center; gap: 12px;
}
.note-avatar {
    width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%;
    color: #fff; font-weight: 600; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.note-author-info { 
    zline-height: 1.35; 
}
.note-author-name { 
    font-weight: 600; color: #2b3445; 
}
.note-author-date, .note-author-time { 
    color: #9aa3af; font-size: 12px;
}

.note-card-body { 
    flex: 1 1 auto; padding: 0 18px; min-width: 0; 
}
.note-card-text { 
    color: #3a4254; white-space: normal; word-break: break-word; margin-bottom: 10px;

}
.note-card-tags {
    margin-bottom: 8px; }

.note-attachment-link {
    display: inline-flex; align-items: center; gap: 5px; color: #2f6fed; margin-right: 14px; font-size: 13px;
}
.note-attachment-link i { 
    color: #9aa3af;
}

.note-card-meta { 
    width: 210px; flex: 0 0 210px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
}
.note-edited { 
    color: #9aa3af; font-size: 12px;
}
.note-card-actions {
    margin-top: 10px; 
}
.note-card-actions a { 
    color: #9aa3af; margin-left: 12px; cursor: pointer; font-size: 15px; 
}
.note-card-actions a:hover { 
    color: #2f6fed; }
.note-card-actions a.note-action-delete:hover {
    color: #e74c3c; }

.note-empty { 
    text-align: center; color: #9aa3af; padding: 40px 0; 
}

.note-tag-badge { 
    display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-right: 6px; margin-bottom: 4px;
}

.note-grid .k-grid-header { 
    display: none; 
}
.note-grid.k-grid, .note-grid .k-grid-content { 
    border: 0; background: transparent; 
}
.note-grid .k-grid-content { 
    overflow: visible;
}
.note-grid table, .note-grid tr, .note-grid td {
    border: 0 !important; background: transparent !important;
}
.note-grid td { 
    padding: 0 !important;
}
.note-grid .k-grid-pager { 
    border: 0; background: transparent; margin-top: 10px; 
}

.note-popup { 
    padding: 4px 2px; 
}
.note-popup .note-field { 
    margin-bottom: 20px; 
}
.note-popup .note-label { 
    font-weight: 600; display: block; margin-bottom: 6px; 
}
.note-popup .milk-required-field { 
    color: #e74c3c; 
}
.note-popup .note-info-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #eef4ff;
    border: 1px solid #d4e2fb;
    color: #2f6fed;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 20px;
}
.note-popup textarea.milk-textarea { 
    width: 100%; min-height: 130px;
}
.note-popup .note-char-count { 
    text-align: right; color: #9aa3af; font-size: 12px; margin-top: 4px; 
}
.note-popup .note-help { 
    color: #9aa3af; cursor: help; font-size: 15px; vertical-align: middle;
}
.note-popup .k-multiselect { 
    width: 100%; 
}
.note-tag-swatch { 
    display: inline-block; width: 10px; height: 10px; border-radius: 5px; margin-right: 6px;
}

.note-popup .note-create-tag { 
    display: flex; gap: 6px; margin-top: 8px; align-items: center; 
}
.note-popup .note-create-tag .note-create-tag-text { 
    flex: 1; 
}

.note-popup .note-dropzone {
    border: 2px dashed #cdd7ea;
    border-radius: 8px;
    background: #fafbfe;
    padding: 22px;
    text-align: center;
    margin-bottom: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.note-popup .note-dropzone.note-dropzone--drag { 
    border-color: #2f6fed; background: #eef4ff;
}
.note-popup .note-dropzone-icon { 
    font-size: 34px; color: #9aa9c4; display: block; margin-bottom: 4px; 
}
.note-popup .note-dropzone-text { 
    color: #5b6573; 
}
.note-popup .note-dropzone-text a { 
    color: #2f6fed;
}
.note-popup .note-dropzone-hint { 
    color: #9aa3af; font-size: 12px; margin-top: 8px; 
}
.note-popup .note-file-input { 
    display: none;
}

.note-popup .note-selected-files {
    list-style: none; padding: 0; margin: 0 0 14px; 
}
.note-popup .note-selected-files li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border: 1px solid #eef0f4; border-radius: 6px; margin-bottom: 6px;
}
.note-popup .note-selected-files .note-file-name { 
    display: flex; align-items: center; gap: 8px; word-break: break-all; 

}
.note-popup .note-selected-files .note-file-name i { 
    color: #9aa9c4;
}
.note-popup .note-selected-files .note-file-remove {
    cursor: pointer; color: #9aa3af; border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 0 4px;
}
.note-popup .note-selected-files .note-file-remove:hover {
    color: #e74c3c;
}

.note-popup .note-attachments-table { 
    width: 100%; margin-top: 6px; 
}
.note-popup .note-attachments-table th { 
    font-weight: 600; border-bottom: 1px solid #e6e9ef; padding: 8px;
}
.note-popup .note-attachments-table td { 
    padding: 8px; border-bottom: 1px solid #f0f2f6; 
}

.note-popup .note-footer { 
    border-top: 1px solid #e6e9ef; padding-top: 16px; margin-top: 8px; text-align: right; 
}
.note-popup .note-footer .btn { 
    min-width: 92px; margin-left: 6px; 
}