@import url('https://fonts.googleapis.com/css?family=Inter');


:root {
    --font-size-0: 11px;
    --font-size-1: 11px;
    --font-size-2: 12px;
    --font-size-3: 13px;
    --font-size-4: 14px;
    --font-size-title-1: 20px;
    --font-size-title-2: 22px;
    --font-size-title-3: 23px;
    --font-size-title-4: 18px;
    --font-size-title-5: 26px;
    --font-size-title-6: 24px;
    --font-family-1: 'Inter', 'Arial', sans-serif !important;
    --font-family-2: 'Arial', sans-serif, 'Inter';
    --font-family-3: sans-serif, 'Inter', 'Arial';
    --element-height-1: 22px;
    --element-height-2: 24px;
    --element-height-3: 26px;
    --button-color-add: #138dab;
    --button-color-add-hover: #18A5C8;
    --button-color-delete: #f3a710;
    --button-color-delete-hover: #ffc1071a;
    --button-color-edit-hover: #EEF3F4;
    --button-color-delete-red: #A71212;
    --button-color-delete-hover-red: #F8DADA;
}

/*Labels*/
.label-info {
    /*use in module for text inside grid*/
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

.label-info-1 {
    /*use in module for labels and textbox*/
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}
.label-info-grid {
    /*use in module for grids*/
    font-size: var(--font-size-0) !important;
    font-family: var(--font-family-1) !important;
}

.label-info-2 {
    font-size: var(--font-size-3) !important;
    font-family: var(--font-family-1) !important;
}

.label-info-3 {
    font-size: var(--font-size-4) !important;
    font-family: var(--font-family-1) !important;
}

/*Labels bold*/
.label-info-bold {
    font-size: var(--font-size-1) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}

.label-info-1-bold {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}

.label-info-2-bold {
    font-size: var(--font-size-3) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}

.label-info-3-bold {
    /*use for text title in tabstrips*/
    font-size: var(--font-size-4) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}

/*title*/
.title-1 {
    /*use in module for title*/
    font-size: var(--font-size-title-5) !important;
    font-family: var(--font-family-1) !important;
}

.title-2 {
    font-size: var(--font-size-title-6) !important;
    font-family: var(--font-family-1) !important;
}

.title-3 {
    font-size: var(--font-size-title-3) !important;
    font-family: var(--font-family-1) !important;
}

.title-4 {
    font-size: var(--font-size-title-4) !important;
    font-family: var(--font-family-1) !important;
}

.title-5 {
    font-size: var(--font-size-title-1) !important;
    font-family: var(--font-family-1) !important;
}

/*title bold*/
.title-1-bold {
    font-size: var(--font-size-title-5) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}

.title-2-bold {
    font-size: var(--font-size-title-2) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}

.title-3-bold {
    font-size: var(--font-size-title-3) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}

.title-4-bold {
    font-size: var(--font-size-title-4) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}


/* Buttons*/

.button-add {
    background-color: var(--button-color-add) !important;
    color: #FFF !important;
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    border: solid 0px !important;
    display: flex;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    /*width: 80px !important;*/
    justify-content: center !important;
}

    .button-add i {
        padding-right: 0.4rem !important;
    }
    .button-add span {
        padding-right: 0.4rem !important;
    }

    .button-add:hover {
        background-color: var(--button-color-add-hover) !important;
    }



.button-edit {
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    background-color: transparent !important;
    color: var(--button-color-add) !important;
    border: solid 1px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    /*width: 80px !important;*/
    justify-content: center !important;
}

    .button-edit i {
        padding-right: 0.4rem !important;
    }

    .button-edit span {
        padding-right: 0.4rem !important;
    }

    .button-edit:hover {
        background-color: var(--button-color-edit-hover) !important;
    }

.button-delete {
    border-color: var(--button-color-delete) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    background-color: transparent !important;
    color: var(--button-color-delete) !important;
    border: solid 1px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    /*width: 80px !important;*/
    justify-content: center !important;
}

    .button-delete i {
        padding-right: 0.4rem !important;
    }

    .button-delete span {
        padding-right: 0.4rem !important;
    }

    .button-delete:hover {
        background-color: var(--button-color-delete-hover) !important;
    }

.button-delete-red {
    border-color: var(--button-color-delete-red) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    background-color: transparent !important;
    color: var(--button-color-delete-red) !important;
    border: solid 1px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    /*width: 80px !important;*/
    justify-content: center !important;
}

    .button-delete-red i {
        padding-right: 0.4rem !important;
    }

    .button-delete-red span {
        padding-right: 0.4rem !important;
    }

    .button-delete-red:hover {
        background-color: var(--button-color-delete-hover-red) !important;
    }



.button-search {
    background-color: var(--button-color-add) !important;
    color: #FFF !important;
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-top-right-radius: 0.2rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: 0.2rem !important;
    border-bottom-left-radius: 0 !important;
    border: solid 0px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    width: 40px !important;
    justify-content: center !important;
}

    .button-search i {
        padding-right: 0.4rem !important;
    }

    .button-search:hover {
        background-color: var(--button-color-add-hover) !important;
    }

/*Textbox*/
.textbox-info-1 {
    /*use in module to format a textbox*/
    height: var(--element-height-3) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.175rem 0.4rem 0.2rem;
    /*color: black !important;*/
    outline: none !important;
}

.textbox-info-2 {
    /*use in module to format a textbox for searching only*/
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.175rem 0.4rem 0.2rem;
    /*color: black !important;*/
    outline: none !important;
}

/* Datepicker*/
.datepicker-1 {
    height: var(--element-height-3) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

/*numeric element telerik*/
.texboxNumeric-1 {
    height: var(--element-height-3) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}
/*numeric element html*/
.texboxNumeric-2 {
    /*use in module to format a numeric input */
    height: var(--element-height-3) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.175rem 0.4rem 0.2rem;
    outline: none !important;
}

/*combobox*/
.combobox-1 {
    height: var(--element-height-3) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}
/*to automatic format a telerik element*/
.k-toolbar {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.k-grid-header {
    padding-top: 4px !important;
   /* padding-left: 0px !important;
    padding-right: 0px !important;*/
    padding-bottom: 4px !important;
}
.k-cell-inner > .k-link {
    padding: 7px 5px 7px 2px !important
}
.k-grid tbody td {
    padding: 4px 5px 4px 8px !important
}
.k-grid th:first-child {
    padding-left: 8px !important;
}
.k-grid tbody tr {
    line-height: 13px !important;
}

.k-grid-pager {
    height: 45px !important;
}

.k-pager-wrap {
    padding: .5rem .1rem !important;
}
.k-upload {
    font: unset;
}
.k-button-md {
    font: unset;
}
.k-upload-button input {
    font: unset;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

.k-grouping-header {
    /*padding: 0 !important;*/
    display: flex;
    align-items: center;
    background-color: unset !important;
    height: 25px !important
}
    .k-grouping-header .k-group-indicator {
        border-color: #e4e7eb !important;
        color: #212529 !important;
        background-color: #e4e7eb !important;
        height: 22px !important;
        padding: 3px !important;
    }
.k-grid-norecords {
    align-items: center !important;
    justify-content: center !important;
}
.k-header {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    /*padding-left:15px !important;
padding-right:0px !important;*/
}
.k-input-md, .k-picker-md {
    font-size: var(--font-size-2) !important;
    height: 27px !important
}

.k-checkbox-label {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding-left: 0.25rem
}

.k-colorpicker {
   /* display: flex !important;*/
    align-items: center !important;
}

.k-calendar-container .k-calendar, .k-datetime-container .k-calendar {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: .5rem .1rem !important;
    width: 233px !important;
}
.k-calendar-table .k-content k-month {
    width: 233px !important
}
.k-calendar-table {
    width: initial !important;
}
.k-list-content .k-list-ul {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

.k-datetime-time-wrap {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

.k-calendar-md {
    --INTERNAL--kendo-calendar-view-width: 225px !important;
    --INTERNAL--kendo-calendar-cell-padding-x: 2px !important;
    --INTERNAL--kendo-calendar-cell-padding-y: 2px !important;
    --INTERNAL--kendo-calendar-view-height: auto;
}

.k-header-column-menu {
    padding-left: 1px !important;
    padding-right: 1px !important;
    width: auto !important;
    margin: 0 !important;
}

.k-calendar-monthview .k-calendar-td, .k-month-calendar .k-calendar-td{
    height:20px;
}

.k-calendar-view{
    min-height:unset !important;
}

/*grids with collapse options*/
.k-grid .k-drag-cell > .k-icon, .k-grid .k-hierarchy-cell > .k-icon {
    padding: 0px !important;
}
.k-input-md .k-input-inner, .k-picker-md .k-input-inner {
    padding: 0.175rem 0.4rem 0.2rem;
}

button.k-grid-update.k-button {
    background-color: var(--button-color-add) !important;
    color: #FFF !important;
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    border: solid 0px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    justify-content: center !important;
    position: absolute !important;
    left: 51% !important;
}

    button.k-grid-update.k-button span {
        padding-right: 0.3rem !important;
    }

    button.k-grid-update.k-button:hover {
        background-color: var(--button-color-add-hover) !important;
    }

button.k-button.k-grid-cancel {
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    background-color: transparent !important;
    color: var(--button-color-add) !important;
    border: solid 1px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    justify-content: center !important;
    position: absolute !important;
    right: 51% !important;
}

    button.k-button.k-grid-cancel span {
        padding-right: 0.3rem !important;
    }

    button.k-button.k-grid-cancel:hover {
        background-color: var(--button-color-edit-hover) !important;
    }

.k-window-title {
    font-size: var(--font-size-4) !important;
    font-family: var(--font-family-1) !important;
    font-weight: bold;
}


.k-pager-sizes.k-label  span{
    content: 'Items per page';
}

.k-splitbar {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--header-color);
}

    .k-splitbar:focus {
        background: #d7dedf !important;
        color: var(--primary);
    }

    .k-splitbar:hover {
        background: #d7dedf !important;
        color: var(--primary);
    }

    .k-splitbar .k-icon {
        color: var(--primary);
    }

.k-splitbar-horizontal .k-i-arrow-60-left {
    display: none !important;
}

.k-splitbar-horizontal .k-i-arrow-60-right {
    display: none !important;
}

.k-splitbar-vertical .k-i-arrow-60-up {
    display: none !important;
}

.k-splitbar-vertical .k-i-arrow-60-down {
    display: none !important;
}
.k-i-filter::before {
    content: "\e031" !important;
}

.k-cell-inner .k-grid-filter, .k-cell-inner .k-header-column-menu, .k-cell-inner .k-hierarchy-cell .k-icon {
    padding-left: 0px !important;
    padding-right: 0px !important;
    width: auto !important;
    margin: 0 !important;
}

.k-splitter .k-scrollable{
    overflow-x:hidden !important;
}


.k-popup.k-column-menu {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

.k-column-menu .k-expander {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}


.k-popup > .k-widget {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}
.k-widget.k-window.k-display-inline-flex {
    min-width: 500px !important;
}
.k-edit-form-container {
    min-width: 465px !important;
}

.k-menu-group-md .k-menu-item {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

* {
    scrollbar-width: thin !important;
    scrollbar-color: #ccc transparent !important;
}

.k-group-cell, .k-header {
    background-color: unset !important;
}

.k-filter-menu.k-popup .k-filter-menu-container, .k-grid-filter-popup.k-popup .k-filter-menu-container {
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
}

.k-grid-excel {
    /*background-color: var(--button-color-add) !important;*/
    color: black !important;
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 23px !important;
    border-radius: 0.2rem !important;
    border: solid 0px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    justify-content: initial !important;
}

.k-list-item, .k-list-optionlabel{
    font-size:11px !important;
    padding-right:0px !important;
    padding-left:5px !important;
}

.grid-container-notes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0px 5px 0px 0px;
    grid-gap: 10px;
    max-height: 40em !important;
    overflow-y: scroll;
}

.k-coloreditor-cancel {
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    background-color: transparent !important;
    color: var(--button-color-add) !important;
    border: solid 1px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    justify-content: center !important;
    position: absolute !important;
    right: 51% !important;
}
.k-coloreditor-apply {
    background-color: var(--button-color-add) !important;
    color: #FFF !important;
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    border: solid 0px !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    justify-content: center !important;
    position: absolute !important;
    left: 51% !important;
}
.k-coloreditor-footer.k-actions{
    padding-bottom:20px;
}

.button-Merced {
    background-color: #1569B3 !important;
    color: #FFF !important;
    border-color: var(--button-color-add) !important;
    height: var(--element-height-2) !important;
    font-size: var(--font-size-2) !important;
    font-family: var(--font-family-1) !important;
    padding: 0.05rem 0.5rem !important;
    border-radius: 0.2rem !important;
    border: solid 0px !important;
    display: flex;
    align-items: center !important;
    outline: none !important;
    cursor: pointer;
    /*width: 80px !important;*/
    justify-content: center !important;
}

.k-grid-header .k-grid-filter, .k-grid-header .k-header-column-menu {
    padding: unset !important;
    height: unset !important;
}

.carousel-indicators li {
    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 4px !important;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #f4b279 !important;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
}