button {
    background: none;
    border: none;
    outline: none !important;
    outline-color: transparent !important;
    padding: 5px;
    position: relative;
}


button::before,
button::after {
    border: none;
    position: absolute;
    z-index: -1;
}

button:hover {
    color: #c3c2c2;
}

.button1::after {
    height: 0;
    left: 0;
    top: 0;
    width: 100%;
}

.button1:hover:after {
    height: 100%;
}

.button2::after {
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
}

.button2:hover:after {
    width: 100%;
}

.buttonWithBg {
    color: #69b14d;
    background-color: black;
    border-radius: 20px;
    padding: 0px;
    margin: 5px;
}


.buttonWhite {
    color: white;
}

.buttonWhite::after {
    height: 0;
    left: 50%;
    top: 50%;
    width: 0;
}

.buttonWhite:hover:after {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}

.k-icon-super {
    margin-bottom: 13px;
    margin-left: -7px;
    color: gray;
    font-size: 12px !important;
}

.k-icon-16 {
    font-size: 16px !important; /* Sets icon size to 16px */
}

.k-icon-24 {
    font-size: 24px !important; /* Sets icon size to 24px */
}

.k-icon-28 {
    font-size: 28px !important; /* Sets icon size to 28px */
}

.k-icon-36 {
    font-size: 36px !important; /* Sets icon size to 36px */
}

.k-icon-60 {
    font-size: 60px !important; /* Sets icon size to 60px */
}

.k-input-label {
    color: darkgrey !important;
}

.ol-tooltip {
    position: relative;
    background: rgba(100, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    opacity: 0.9;
    white-space: nowrap;
    font-size: 12px;
}

.ol-tooltip-measure {
    opacity: 1;
    font-weight: bold;
}

.ol-tooltip-static {
    background-color: #ff0005;
    color: white;
    border: 1px solid white;
}

    .ol-tooltip-measure:before,
    .ol-tooltip-static:before {
        border-top: 6px solid rgba(100, 0, 0, 0.8);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
    }

    .ol-tooltip-static:before {
        border-top-color: #ff0005;
    }

.k-splitter {
    border-color: #222222;
}

.k-splitbar {
    width: 15px;
    height: 15px;
    color: #69b14d;
    background-color: #222222;
}

    .k-ghost-splitbar .k-icon,
    .k-splitbar .k-icon {
        font-size: 20px !important;
}

.k-splitbar-draggable-horizontal .k-resize-handle {
    width: 2px;
}

.k-splitbar-draggable-vertical .k-resize-handle {
    height: 2px;
}

.k-window, .k-window:focus, .k-window.k-state-focused {
    box-shadow: 10px 20px 8px 5px rgb(0 0 0 / 50%);
}



.k-window-title {
    font-size: 16px !important;
}

.k-window-titlebar {
    border-color: #222222 !important;
    color: #ffffff;
    background-color: #222222;
    height: 40px;
}

.k-pager-wrap {
    border-color: #222222 !important;
    color: #ffffff;
    background-color: #222222;
}

.k-grid {
    border-color: #222222 !important;
}

    ::-webkit-scrollbar {
        width: 12px;
        background-color: #222222;
    }

::-webkit-scrollbar-thumb {
    background-color: #e9e9e9;
    outline: 1px solid black;
}

    /*
    .k-grid-container::-webkit-scrollbar {
        width: 7px;
        color: aqua;
        background-color: mediumpurple;
        scrollbar-base-color: greenyellow;
    }

    .k-grid-content::-webkit-scrollbar-thumb {
        background-color: blue;
        outline: 1px solid magenta;
    }
        */

.k-content {
    background-color: #222222;
}

.navbar {
    background-color: #ffffff;
}

.k-fab-item-icon {
    padding: 0px;
    height: 32px;
    width: 32px;
    border-color: white;
    border-width: thin;
}

.k-chip {
    border-radius: 2px!important;
}

.k-input-solid {
    border-color: rgba(0,0,0,.08);
    color: darkgray !important;
    background-color: #fff !important;
}

.grid-without-expand-col .k-grid .k-hierarchy-col {
    width: 0px !important;
    display: none !important;
}

.k-detail-row > .k-hierarchy-cell {
    width: 0px !important;
    display: none !important;
}

.k-detail-row > .k-detail-cell {
    padding-left: 0px;
}

h6.collact-filter {
    padding-top: 10px;
    padding-bottom: 2px;
    margin-bottom: 0px;
}