/* #region STICKY TITLE */
.kmp-stickytitle {
    padding: 8px 20px 6px 20px;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #FFF;
}
/* #endregion STICKY TITLE */

/* #region LOADER SPINNER LARGE */
.lds-roller { display: inline-block; position: relative; width: 64px; height: 64px; }
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; }
.lds-roller div:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #3B3B3B; margin: -3px 0 0 -3px; }
.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.lds-roller div:nth-child(1):after { top: 50px; left: 50px; }
.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.lds-roller div:nth-child(2):after { top: 54px; left: 45px; }
.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.lds-roller div:nth-child(3):after { top: 57px; left: 39px; }
.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.lds-roller div:nth-child(4):after { top: 58px; left: 32px; }
.lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.lds-roller div:nth-child(5):after { top: 57px; left: 25px; }
.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.lds-roller div:nth-child(6):after { top: 54px; left: 19px; }
.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.lds-roller div:nth-child(7):after { top: 50px; left: 14px; }
.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.lds-roller div:nth-child(8):after { top: 45px; left: 10px; }
@keyframes lds-roller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* #endregion LOADER SPINNER LARGE */

/* #region LOADER SPINNER SMALL - FOR USE INSIDE INPUTS */
.lds-ring-wrapper { position: absolute; }
.lds-ring { display: inline-block; position: relative; width: 16px; height: 16px; }
.lds-ring div { box-sizing: border-box; display: block; position: absolute; width: 12px; height: 12px; margin: 2px; border: 1px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: #999 transparent transparent transparent; }
.lds-ring div:nth-child(1) { animation-delay: -0.45s; }
.lds-ring div:nth-child(2) { animation-delay: -0.3s; }
.lds-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* #endregion LOADER SPINNER SMALL - FOR USE INSIDE INPUTS */

/* #region ACCORDION */
.kmp-accordion .material-icons {
    transition-property: all;
    transition-duration: .5s;
}
/* #endregion ACCORDION */

/* #region TABBED */
.kmp-tabbed .kmp-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.kmp-tabbed .kmp-tabs li {
    padding: 15px;
    border: 1px solid #CCCCCC;
    background: #EEEEEE;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: -1px;
}
.kmp-tabbed .kmp-tabs li.active {
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}
.kmp-tabbed .kmp-tab {
    padding: 15px;
    border: 1px solid #CCCCCC;
}
/* #endregion TABBED */

/* #region COLOURPICKER */
.custom-colour-picker {
    padding: .5rem .5rem .5rem 0 !important;
    display: flex;
    align-items: center;
}
.tranparent-colour {
    height: 25px;
    border: 1px solid #aaa;
    width: 50px;
    background: linear-gradient(to top right, #d1d1d1 calc(50% - 1px), red, #d1d1d1 calc(50% + 1px) );
    cursor: pointer;    
}
.colour-picker-text {
    padding-left: 5px;    
}
/* #endregion COLOURPICKER */