/*--------------helpers-----------------------------------------*/

.cc-relative {
    position: relative;
}

.cc-primary-light-color {
    color: var(--primary-light-color);
}

.cc-uppercase {
    text-transform: uppercase;
}

.cc-align-center {
    text-align: center;
}

.cc-absolute {
    position: absolute;
}

.cc-relative {
    position: relative;
}

.cc-weight-400 {
    font-weight: 400;
}

.cc-hide {
    display: none;
}

.cc-align-center {
    text-align: center;
}


.cc-visibility-hidden {
    visibility: hidden;
}


.cc-white-bkg {
    background-color: var(--white-color);
}

.cc-danger-bkg {
    background-color: var(--danger-color);
    color: var(--white-color);
}

.cc-warning-bkg {
    background-color: var(--warning-color);
    color: var(--white-color);
}


.cc-success-bkg {
    background-color: var(--success-color);
    color: var(--white-color);
}

.cc-in-progress-bkg {
    background-color: rgba(var(--rgba-success-color),.5);
    color: var(--white-color);
}

.cc-primary-bkg {
    background-color: var(--primary-color);
    color: var(--white-color);
}

.cc-primary-light-bkg {
    background-color: var(--primary-light-color);
    color: var(--white-color);
}



.cc-secondary-bkg {
    background-color: var(--secondary-color);
    color: var(--white-color);
}




.cc-secondary-xlight-bkg {
    background-color: var(--secondary-xlight-color);
    color: var(--secondary-color);
}




.cc-data-highlight {
    border-radius: 4px;
    padding: .2rem;
}


.cc-primary-color {
    color: var(--primary-color);
}

.cc-primary-light-color {
    color: var(--primary-light-color);
}


.cc-danger-color {
    color: var(--danger-color);
}

.cc-warning-color {
    color: var(--warning-color);
}


.cc-success-color {
    color: var(--success-color);
}

.cc-white-color {
    color: var(--white-color);
}

.cc-white-color {
    color: var(--white-color);
}

.cc-kill-horiz-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}



.cc-overflow-y-auto {
    overflow-y: auto;
}



.cc-kill-padding-left {
    padding-left: 0px !important
}

.cc-vertical-align-top {
    vertical-align: top !important;
}




/*----------icons---------------------*/

.cc-icon {
    color: var(--primary-light-color);
}

    .cc-icon.cc-icon-white {
        color: var(--white-color);
    }

    .cc-icon:hover {
        cursor: pointer;
    }

.cc-icon-dark {
    color: #1C272F;
}

.cc-icon-lg {
    font-size: 30px;
}

.cc-spinner-xs {
    height: 24px;
    width: 24px;
}

.cc-spin-animation {
    animation: spinner 1200ms linear infinite;
    -webkit-animation: spinner 1200ms linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}




/*--------------nav-tabs--------------------*/
.cc-nav-tabs {
    margin-bottom: 25px;
}

    .cc-nav-tabs .cc-nav-link.active {
        border-bottom: 5px solid var(--secondary-light-color);
        color: var(--primary-dark-color);
    }

    .cc-nav-tabs .cc-nav-item.show .cc-nav-link, .cc-nav-tabs .cc-nav-link.active {
        background-color: transparent;
    }

    .cc-nav-tabs .cc-nav-link {
        border: 0px solid transparent;
    }

.cc-nav-link {
    display: block;
    padding: 1rem 1.2rem;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.cc-nav-tabs .cc-nav-link {
    color: rgba(28,39,47,.6);
}

.cc-nav-tabs .cc-nav-link {
    border: 0px solid transparent;
    font-weight: 500;
}

.cc-nav-item .cc-nav-link:hover {
    background-color: #ededed;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    text-decoration: none;
}

/*--------------status colours--------------------*/
/*------------------------------------------------
legacy colours required for existing modules
-------------------------------------------------*/
.cc-btn-group .btn.cc-status-a-bkg {
    background-color: var(--status-a) !important;
    color: var(--white-color) !important;
}

.cc-btn-group .btn.cc-status-b-bkg {
    background-color: var(--status-b) !important;
    color: var(--white-color) !important;
}

.cc-btn-group .btn.cc-status-c-bkg {
    background-color: var(--status-c) !important;
    color: var(--white-color) !important;
}

.cc-cursor-pointer:hover {
    cursor: pointer;
}