/********************************************************** 
    Some styles that should be applied to almost all pages 
***********************************************************/

/* 
    Disabled links should not be clickable 
*/
a.disabled {
    pointer-events: none;
    cursor: default;
}

/* 
    Align text in Keen datatable headrs to be bottom aligned.  This lines up
    all the filter boxes.
*/
.kt-datatable__head .kt-datatable__cell {
    vertical-align: bottom !important;
}

/*
    For dropdowns that have an icon, this will color the icon as dim 
    when the item is disabled.
*/
.dropdown-menu > .dropdown-item > i {
    color: inherit;
}

/*
    The "form-group" class currently has a large margin which spaces out the input forms significantly.
    This is commonly used in Edit and Create pages.
*/
.form-group {
    margin-bottom: 3px !important;
}


/* Global SummerNote settings */
.note-editable {
    font-size: 14px !important;
}

.note-placeholder {
    font-size: 14px !important;
}

/****************************************************
	Keen styled checkboxes are hard to see...
*****************************************************/
.kt-checkbox > span:after {
    border: solid black;
}

/****************************************************
	Styling for inline edit boxes.  
    Use this INSTEAD of the "form-control" class.
*****************************************************/
.inline-edit {
    width: 100%;
    padding: 0.65rem 1rem;
    color: #495057;
    border: 1px solid #ebedf2;
    height: calc(1.5em + 1.3rem + 2px);
    line-height: 1.5;
    border-radius: 0.25rem;
}

.inline-edit:focus {
    outline: -webkit-focus-ring-color auto 1px;
}

.inline-edit-date {
    padding: 0.65rem 0.0rem 0.65rem 1.0rem;
    border-top: 1px solid #ebedf2;
    border-bottom: 1px solid #ebedf2;
    border-left: 1px solid #ebedf2;
    height: calc(1.5em + 1.3rem + 2px);
    line-height: 1.5;
    background-color: white;
    border-radius: 8px 0px 0px 8px;
    float: left;
    width: 58%;
}

.inline-edit-date-focus {
    border-top: 2px solid #101010;
    border-bottom: 2px solid #101010;
    border-left: 2px solid #101010;
}

.inline-edit-time {
    padding: 0.65rem 0.50rem 0.65rem 0rem;
    border-top: 1px solid #ebedf2;
    border-bottom: 1px solid #ebedf2;
    border-right: 1px solid #ebedf2;
    height: calc(1.5em + 1.3rem + 2px);
    line-height: 1.5;
    border-radius: 0px 8px 8px 0px;
    background-color: white;
    float: left;
    width: 42%;
}

.inline-edit-time-focus {
    border-top: 2px solid #101010;
    border-bottom: 2px solid #101010;
    border-right: 2px solid #101010;
}

/****************************************************
	Styling for tooltips
*****************************************************/
.tooltip-inner {
    background-color: #5578eb !important;
    color: #fff !important;
}


.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #5578eb !important;
}


.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #5578eb !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #5578eb !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #5578eb !important;
}

/****************************************************
	Styling for Global Selects
*****************************************************/
.ui-menu .ui-menu-item-wrapper{
    display: block;
    width: 105%;
}

    .ui-menu .ui-menu-item-wrapper:hover {
        color: white;
    }


/****************************************************
	Styling for Button Anchors
*****************************************************/
a[role=button] {
    color: #5867dd !important;
    text-decoration: none !important;
}

    a[role=button]:hover {
        color: #2739c1 !important;
        text-decoration: none !important;
    }

    a.btn-outline-primary[role=button]:hover {
        color: #ffffff !important;
        text-decoration: none !important;
    }


/****************************************************
	Highlight filter boxes that have text
*****************************************************/
input.column_filter:not(:placeholder-shown) {
    background-color: ivory;
}

/****************************************************
	Highlight targeted elements
*****************************************************/
.targeted {
    background-color: #0080ff1d !important;
    border: 2px solid #0080ff1d !important;
    border-radius: 6px !important;
}

@media (max-width: 1024px) {
    .kt-header__topbar {
        flex-direction: column!important;
    }
}