/*
    Alert!! Please read before changing!!
    This file represents the style gloal overriders of kendo eleemnts.
    The ones that refer to the grid are in the grid-component.css
*/

.k-widget {
    /*This is to set the font color of all cells that in rows not selected. This class is common to everything on telerik. It makes sense to have the same font color everywhere*/
    color: #616362; /*dark-grey*/
}

.k-block, .k-content, .k-dropdown .k-input, .k-popup, .k-toolbar, .k-widget { /*Sets the font color for the text inside the filter menu. i.e: "Show items with value that"*/
    color: #616362;
    background-color: white;
}



/*#region Filter menu*/
.k-filter-help-text, .k-filter-menu .k-textbox, .k-filter-menu .k-widget { /*On the filtering menu add space between the operator dropdowns and the other controls*/
    margin: 0.50em 0 0;
    margin-top: 0.5em;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.k-filter-menu { /*same as perform fonts h4. Impacts all the controls inside it, like the buttons */
    font-size: 1.125rem;
    font-family: "Lato";
    font-weight: bold;
}

    .k-filter-menu.k-popup, .k-grid-filter-popup.k-popup { /*Defines the padding in the filtering menu popup in the grid*/
        padding: 0.5em; /*inherited from the previous version*/
    }

        .k-filter-menu.k-popup .k-filter-menu-container, .k-grid-filter-popup.k-popup .k-filter-menu-container {
            width: 258px;
        }

/*#endregion*/


/*#region Kendo dialog*/
/*
    Override of kendo UI dialog styling
*/
.k-window {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.delete-confirmation-primary-title {
    text-align: center;
    margin: 0 10px 10px 10px;
    font-weight: bold;
    color: #ec1c2c;
}

.delete-confirmation-info-title {
    text-align: center;
    font-weight: normal;
}


.k-dialog-button-layout-stretched .k-button-solid-primary:not(:hover):not(.k-state-hover):not(:active):not(.k-state-active) {
    color: #009e49;
}

.k-dialog-buttongroup .k-button {
    color: #616362;
}

.k-button.k-button-solid-primary {
    background-color: #009e49 !important;
}

.k-dialog-titlebar {
    background-color: #009e49;
}

.k-dialog-title,
.k-dialog-title span {
    color: white;
}

.k-dialog-buttongroup button.k-button-solid-primary:active,
.k-dialog-buttongroup k-button:active,
.k-dialog-buttongroup .k-action-buttons .k-button-solid-primary.k-state-hover,
.k-dialog-buttongroup .k-action-buttons .k-button-solid-primary:hover,
.k-dialog-buttongroup .k-button.k-button-solid-primary.k-state-hover,
.k-dialog-buttongroup .k-button.k-button-solid-primary:hover,
.k-dialog-buttongroup .k-button:hover {
    border: none !important;
    background-color: rgba(0, 158, 73, 0.1);
    background-image: none;
}

.k-dialog-buttongroup .k-button,
.k-dialog-buttongroup button {
    padding: 12px 16px !important;
    margin: 0 !important;
    height: auto !important;
    color: #009e49 !important;
    border-width: 0 !important;
    box-shadow: none !important;
    font-family: Lato;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}

    .k-dialog-buttongroup button.k-button-solid-primary {
        padding: 0 !important;
        color: white !important;
        font-family: Lato;
        font-size: 18px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        text-align: center;
    }


.k-dialog-button-layout-stretched .k-button.k-button-solid-primary:focus,
.k-dialog-button-layout-stretched .k-button.k-state-focused, .k-dialog-button-layout-stretched .k-button:focus,
.k-dialog-button-layout-stretched .k-button.k-state-focused, .k-dialog-button-layout-stretched .k-button:focus {
    box-shadow: none;
}

.k-dialog-button-layout-stretched .k-button {
    padding: 5px 0 0 0;
}

.k-dialog-button-layout-stretched .k-button,
.k-dialog-buttongroup .k-action-buttons:hover {
    border: none;
    color: #009e49;
}

.k-block ::selection, .k-panel ::selection, .k-widget ::selection {
    background-color: rgba(0, 158, 73, 0.1);
    color: #616362;
}

.kiv-dialog-text-bold {
    font-weight: bold;
}

.kiv-dialog-text-green {
    color: #009e49;
}

/*#endregion*/

/*#region Input fields (checkbox)*/
input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 5px;
    line-height: 30px;
    border-radius: 0;
    border-color: #cccccc;
    background-color: #fff;
}

    input[type="checkbox"]:before {
        content: url('/portfolios/css/common/Content/checkbox/checkbox_small_unchecked_default_20.svg');
        display: inline-block;
        background-color: white;
        width: 20px;
        height: 20px;
        border-radius: 0;
    }

    input[type="checkbox"]:hover:before {
        content: url('/portfolios/css/common/Content/checkbox/checkbox_small_unchecked_hover_20.svg');
        display: inline-block;
        border-color: #009e49;
    }

    input[type="checkbox"]:checked:before {
        content: url('/portfolios/css/common/Content/checkbox/checkbox_small_checked_20.svg');
    }

    input[type="checkbox"]:checked, input[type="checkbox"]:checked:focus {
        border-color: #009e49;
        color: white;
        background-color: #009e49;
        box-shadow: none;
    }

    input[type="checkbox"]:focus {
        box-shadow: none;
        border-color: #cccccc;
    }


/*#endregion*/

/*#region Numeric Text box + Textbox*/

/*Strategy is to have the border in the k-input and not the k-input-inner (which is the html input)*/
.k-input .k-input-inner[type=text], .k-input.k-textbox input {
    padding: 1px 20px 1px 20px;
    border: none;
    height: 28px;
    /*same as body in typography*/
    font-size: 1.125rem;
    font-weight: 300;
}

    .k-input .k-input-inner[type=text]:focus, .k-input.k-textbox input:focus {
        font-weight: normal;
        color: #616362;
    }

.k-input.k-numerictextbox, .k-input.k-textbox {
    border: solid 1px #cccccc;
    outline: none;
}

    .k-input.k-numerictextbox:hover, .k-input.k-textbox:hover {
        border: solid 1px #009e49;
        background-color: #ffffff;
        color: #009e49;
    }

.k-numerictextbox.k-input:focus-within, .k-textbox.k-input:focus-within, .k-widget.k-numerictextbox.k-input:focus-within, .k-widget.k-textbox.k-input:focus-within { /*Removes the box shadow around the element when it is selected */
    box-shadow: none;
}

.k-filter-menu .k-numerictextbox.k-input,
.k-filter-menu .k-datepicker {
    margin: 0.5em 0 0.5em;
}

/*Numeric Text box + Text box with errors*/
.k-numeric-wrap.k-invalid input[type='text'].k-input, .k-numeric-wrap.k-invalid input[type='text'].k-input:hover,
input[type='text'].k-textbox.k-invalid,
input[type='text'].k-textbox.k-invalid:hover { /*Same as input[type='text'].kv-input-error in forms fields.css*/
    border: solid 1px #ec1c2c; /*Overrides the text input one. Not a perfect solution*/
    background-color: #ffffff;
    color: #ec1c2c;
}

/*#endregion*/

/*#region Kendo Context Menu*/

.k-menu .k-item {
    background-color: white;
}

.k-widget .k-reset .k-header .k-menu .k-menu-vertical .k-context-menu .k-popup {
    border: thin solid #cccccc !important;
}

.k-menu.k-context-menu .k-item.k-state-hover, .k-menu.k-context-menu .k-item:hover,
.k-menu .k-menu-scroll-button:hover,
.k-menu .k-state-hover > .k-link {
    background-color: white;
    color: #009e49;
}

.k-menu.k-context-menu .k-item.k-state-focused,
.k-menu .k-state-focused > .k-link {
    background-color: rgba(0, 158, 73, 0.1) !important;
    color: #009e49;
    border: none;
    box-shadow: none;
}

.k-menu .k-item:not(:last-child),
.k-menu.k-header:not(:last-child) {
    border-bottom: thin solid #cccccc !important;
}

/*#endregion*/

/*#region Date picker*/
.k-datepicker .k-icon.k-i-calendar,
.k-datepicker,
.k-datepicker.k-input .k-input-inner[type=text] {
    /*font-size: 1.125rem;*/ /*same as body in typography*/
    font-size: 14px !important;
    /*padding: 3px 0 3px 0 !important;*/
    padding: 0 !important;
    background-color: #f0f0f0 !important;
    border-color: #c4c4c4 !important;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 0px;
    outline: 0 none !important;
}

.k-datepicker button:hover,
.k-datepicker .k-button:hover{
    border:none !important;
}

.k-calendar td.k-state-focused .k-link {
    box-shadow: none;
    background-color: #009e49;
    border-color: #009e49;
}

    .k-calendar td.k-focus.k-today .k-link,
    .k-calendar td.k-state-focused.k-today .k-link,
    .k-calendar-td k-today,
    .k-calendar-td k-today k-focus,
    .k-calendar .k-today .k-link {
        color: #2e2e2e;
    }

.k-calendar .k-today .k-link {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #2e2e2e;
}

.k-calendar .k-calendar-header .k-nav-today,
.k-calendar .k-footer .k-nav-today {
    color: #009e49;
}

.k-calendar td.k-focus .k-link,
.k-calendar td.k-state-focused .k-link {
/*    color: white;*/
    box-shadow: rgba(0, 158, 73, 0.75) 0px 0px 4px 0px;
}

.k-animation-container .k-calendar-container .k-header,
.k-animation-container .k-calendar-container .k-header > a {
    color: black !important;
}

.k-animation-container .k-calendar-container .k-footer > a {
    color: #616362 !important;
}

.k-animation-container .k-calendar-container k-calendar-view thead,
.k-animation-container .k-calendar-container .k-calendar-th {
    border-color: #d5d5d5;
    color: #2e2e2e;
    background-color: #f5f5f5;
    padding: 0.25em 2px;
    border-bottom-width: 1px;
    box-sizing: border-box;
}

.k-calendar .k-calendar-decadeview, .k-calendar .k-calendar-monthview, .k-calendar .k-calendar-yearview {
    padding: 0 !important;
}

.k-animation-container .k-calendar-container .k-button:hover,
.k-animation-container .k-calendar-container .k-button:focus:hover
.k-animation-container .k-calendar-container .k-button:focus:hover,
.k-animation-container .k-calendar-container .k-button:focus,
.k-animation-container .k-calendar-container .k-button:focus:focus
.k-animation-container .k-calendar-container .k-button:focus:focus
.k-animation-container .k-calendar-container .k-button-flat:hover,
.k-animation-container .k-calendar-container .k-button.k-button-clear:hover
.k-animation-container .k-calendar-container .k-button-flat:focus,
.k-animation-container .k-calendar-container .k-button.k-button-clear:focus {
    border-color: #bdbdbd !important;
    background-color: #bdb4af !important;
    border: solid 1px #bdbdbd !important;
    box-shadow: none;
}

.k-datepicker .k-button {
    margin: 0;
}

.k-datepicker .k-input-button,
.k-datepicker .k-icon.k-i-calendar,
.k-datepicker .k-input-button.k-button {
    width: calc(1.4285714286em + 8px) !important;
    height: calc(1.4285714286em) !important;
    color: #616362 !important;
    border-color: #c5c5c5 !important;
    /*background-image: none,linear-gradient(to bottom,rgba(246,246,246,.25) 0,rgba(241,241,241,0) 100%) !important;*/
    background-image: none,linear-gradient(to bottom,rgba(241,241,241,.25) 0,rgba(246,246,246,0) 100%) !important;
    background-color: #ececec;
}

.k-datepicker .k-icon.k-i-calendar,
.k-datepicker {
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 100%);
    background-color: #f0f0f0;
}

    .k-datepicker:hover,
    .k-datepicker.k-focus,
    .k-datepicker .k-icon.k-i-calendar:hover,
    .k-datepicker .k-icon.k-i-calendar.k-focus,
    /*    .k-datepicker:hover > .k-button-icon,
    .k-datepicker.k-focus > .k-button-icon,
    .k-datepicker:hover > .k-button,
    .k-datepicker.k-focus > .k-button,*/
    .k-datepicker:hover > .k-i-calendar,
    .k-datepicker.k-focus > .k-i-calendar
    .k-datepicker:hover > .k-i-calendar:before,
    .k-datepicker.k-focus > .k-i-calendar:before,
    .k-datepicker:hover .k-icon.k-i-calendar,
    .k-datepicker.k-focus .k-icon.k-i-calendar,
    .k-datepicker:hover > .k-icon:before,
    .k-datepicker.k-focus > .k-icon:before {
        background-image: none !important;
        /*border-color: #bdbdbd !important;*/
        /*background-color: #bdb4af !important;*/
        /*border-color: #bdbdbd !important;*/
        /*box-shadow: none;*/
        color: black !important;
        /*background-color: #f0f0f0 !important;*/
        background-color: #E6E6E6 !important;
        border-color: #c4c4c4 !important;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px 0px;
        outline: 0 none !important;
    }

.k-picker-wrap.k-state-default {
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.25) 0,rgba(255,255,255,0) 100%);
}

.k-calendar td.k-selected .k-link, .k-calendar td.k-state-selected .k-link {
    background-color: #009e49;
    border-color: #009e49;
    color: white;
}

.k-datepicker.k-input .k-input-button.k-icon-button {
    padding: 0px 0px 0px 0px;
    margin: 4px 0px 0px 0px;
}
/*#endregion*/

/*#region Drop down*/
.k-dropdown-wrap {
    padding-right: 20px; /*The width of the selector*/
}

    .k-dropdown-wrap .k-select {
        width: 20px;
        background-color: #cccccc;
    }

        .k-dropdown-wrap .k-select .k-icon.k-i-arrow-60-down {
            top: -4px;
            color: #888;
        }

    .k-dropdown-wrap .k-input {
        height: 30px;
    }

.k-dropdown .k-state-hover .k-input, .k-dropdown .k-state-focused .k-input {
    color: #616362;
}

.k-picker.k-focus, .k-picker:focus, .k-widget.k-picker.k-focus, .k-widget.k-picker:focus {
    border-color: #009e49;
    box-shadow: rgba(0, 158, 73, 0.75) 0px 0px 4px 0px;
}

.k-picker > span.k-input-inner {
    background-color: white;
}

.k-focus.k-selected, .k-listview > .k-focus.k-selected, .k-listview > .k-state-focused.k-state-selected, .k-state-focused.k-state-selected, td.k-focus.k-selected, td.k-state-focused.k-state-selected {
    box-shadow: rgba(0, 158, 73, 0.75) 0px 0px 3px 1px;
}

.k-list-item.k-selected,
.k-list-item.k-selected.k-hover, .k-list-item.k-selected:hover {
    color: #fff;
    background-color: #009e49;
}

.k-list-ul > .k-selected label,
.k-list-ul > .k-selected span:not(.color-circle):not(.kv-label) {
    color: #fff !important;
}

.k-dropdownlist, .k-dropdownlist.k-hover {
    color: #616362;
    /*font-size: 0.875rem;*/
}

/*#region dropdown list icon buttons*/

.k-dropdownlist > .k-icon-button {
    height: 30px;
    width: 20px;
    background-color: #e9e9e9;
    border: none;
}

.k-dropdownlist.k-hover > .k-icon-button {
    background-color: #d2d2d2;
    border: none;
}

/*#endregion*/

/*#region dropdown list list items styling*/
.k-list-item {
    /*font-size: 0.875rem;*/
    font-size: 1.125rem;
    color: #616362;
}

    .k-list-item.k-selected {
        border-radius: 0;
        box-shadow: none;
    }

    .k-list-item.k-hover {
        box-shadow: none;
        border-radius: 0;
        color: #616362;
    }


/*#endregion*/

/*#endregion*/

/*#region Buttons*/
/*#region standard button*/
.k-button {
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    padding: 0;
    background-color: white;
    border: solid 1px #009e49;
    text-align: center;
    margin: 2px;
    color: #009e49 !important;
}

    .k-button:hover, .k-button:focus:hover {
        background-color: rgba(0, 158, 73, 0.1);
        border: solid 1px #009e49;
        box-shadow: none;
    }

    .k-button:active {
        background-color: rgba(0, 158, 73, 0.3);
        border: solid 1px #009e49;
    }

    .k-button:focus:active {
        box-shadow: none;
        background-color: rgba(0, 158, 73, 0.3);
        border: solid 1px #009e49;
    }

    .k-button:focus {
        border: solid 1px #009e49;
        box-shadow: none;
    }

    .k-button:disabled, .k-button[disabled], .k-button:disabled:hover, .k-button[disabled]:hover {
        background-color: white;
        border: solid 1px #cccccc;
        color: #cccccc !important;
    }

/*#endregion*/

/*#region primary button*/
.k-button-solid-primary:focus:active:not(.k-state-disabled):not([disabled]) {
    box-shadow: none;
}

.k-button.k-button-solid-primary {
    height: 34px;
    line-height: 30px;
    padding: 1px;
    border-width: 1px;
    background-color: #009e49;
    border-color: white;
    text-align: center;
    color: white !important;
    background-clip: content-box; /* <---- */
    box-shadow: inset 0 0 0 1px transparent; /* <-- 1px spread radius */
    border-style: solid;
}

    .k-button.k-button-solid-primary:hover {
        border-color: #009e49;
        background-color: #009e49;
    }

    .k-button.k-button-solid-primary:active {
        border-color: white;
        box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5);
        outline: 0;
        background-color: #009e49;
    }

    .k-button.k-button-solid-primary:focus:active:not(.k-state-disabled):not([disabled]) {
        border-color: transparent;
        box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.5);
        outline: 0;
    }

    .k-button.k-button-solid-primary:focus {
        outline: 0;
    }

    .k-button.k-button-solid-primary:disabled, .k-button.k-button-solid-primary[disabled] {
        background-color: #cccccc;
        color: #fffffe;
        box-shadow: none;
        border-color: transparent;
    }


/*#endregion*/

/*#endregion*/

/*#region Checkbox - same as kv small*/
.k-checkbox {
    width: 20px;
    height: 20px;
    margin: 5px;
    line-height: 30px;
    border-radius: 0;
    border-color: #cccccc;
    background-color: #fff;
}

.tooltip {
    pointer-events: none;
}

.k-checkbox:before {
    content: url('/portfolios/css/common/Content/checkbox/checkbox_small_unchecked_default_20.svg');
    display: inline-block;
    background-color: white;
    width: 20px;
    height: 20px;
    border-radius: 0;
}

.k-checkbox:hover:before {
    content: url('/portfolios/css/common/Content/checkbox/checkbox_small_unchecked_hover_20.svg');
    display: inline-block;
    border-color: #009e49;
}

.k-checkbox:checked:before {
    content: url('/portfolios/css/common/Content/checkbox/checkbox_small_checked_20.svg');
}

.k-checkbox:checked, .k-checkbox:checked:focus {
    border-color: #009e49;
    color: white;
    background-color: #009e49;
    box-shadow: none;
}

.k-checkbox:focus {
    box-shadow: none;
    border-color: #cccccc;
}

/*#endregion*/