/***********************************************************
 * Theme colors
 ***********************************************************/
:root {
    --a1:  #0AE5B5;
    --a2:  #5EF2D2;
    --a3:  #96FAE4;
    --a4:  #CEFFF4;
    --a11: #69E5F8;

    --b1:  #FFDD00;
    --b2:  #DDCD69;
    --b3:  #FFF8C9;
    --b11: #FDE440;

    --g1: #2B2B2B;
    --g2: #757575;
    --g3: #C1C1C1;
    --g4: #DEDEDE;
    --g5: #F4F4F4;
    --g6: #F8F8F8;

    --c1: #FF0000;
    --c2: #FF9393;
    --c3: #FFDEDE;

    --v1: #C469F8;
    --v2: #F88D69;
    --v3: #F2AD46;

    --w1: white;
}



/***********************************************************
 * General
 ***********************************************************/
#left {
    background-color: var(--g1);
    color: var(--g3);
}



/***********************************************************
 * Home Page
 ***********************************************************/
.bg-welcome-box-top {
    /*background: #FFDD00;*/
    background: #E1D585;
}
.bg-welcome-box-mid {
    background: #eae2b0;
}
.bg-welcome-box-bot {
    background: #f3efdb;
}



/***********************************************************
 * Project
 ***********************************************************/
.project-title {
    /* ... */
}
.subproject-card {
    background-color: white;
}
.subproject-count {
    color: var(--a1) !important;
}
.subproject-child-count {
    background: var(--a1);
    color: white;
}



/***********************************************************
 * Tlicks
 ***********************************************************/
.tlick-container .tlick-card {
    /*background: linear-gradient(to right, #D4FFF5 0%, #72F5D8 100%);  !* og, save this *!*/
    background: var(--w1);
    box-shadow:
            0 2px 6px 2px #00000026,
            0 1px 2px 0   #0000004D;
}
.tlick-container .tlick-card.urgent {
    background: var(--c3);
}
.tlick-container .tlick-card.completed {
    background: var(--a4);
}

.tlick-container .tlick-card:hover {
    background: var(--g5);
}



/***********************************************************
 * Buttons
 ***********************************************************/
.btn-tlicker-primary {
    background: var(--a1);
}
.btn-tlicker-primary:hover {
    background: #00C196;
}

.btn-tlicker-secondary {
    background: var(--g4);
}
.btn-tlicker-secondary:hover {
    background: var(--g3);
}

.btn-tlicker-dark {
    background: var(--g2);
}
.btn-tlicker-dark:hover {
    background: var(--g1);
}

.btn-tlicker-light {
    background: var(--g5);
}
.btn-tlicker-light:hover {
    background: var(--g3);
}

.btn-tlicker-white {
    background: var(--w1);
}
.btn-tlicker-white:hover {
    background: var(--g5);
}

.btn-tlicker-white-reverse {
    background: var(--g5);
}
.btn-tlicker-white-reverse:hover {
    background: var(--w1);
}

.btn-tlicker-transparent {
    background: transparent;
}
.btn-tlicker-transparent:hover {
    background: var(--g4);
}

.btn-tlicker-warning {
    background: var(--b1);
}
.btn-tlicker-warning:hover {
    background: #DDBF00;
}
.btn-tlicker-warning:disabled {
    background: #DDBF00;
    opacity: 40%;
}



/***********************************************************
 * Text colors
 ***********************************************************/
.forest-orange {
    color: #FE725E !important;
}

.cl-a1 {
    color: var(--a1) !important;
}
.cl-a2 {
    color: var(--a2) !important;
}
.cl-a3 {
    color: var(--a3) !important;
}
.cl-a4 {
    color: var(--a4) !important;
}
.cl-a11 {
    color: var(--a11) !important;
}

.cl-b1 {
    color: var(--b1) !important;
}
.cl-b2 {
    color: var(--b2) !important;
}
.cl-b3 {
    color: var(--b3) !important;
}
.cl-b11 {
    color: var(--b11) !important;
}

.cl-g1 {
    color: var(--g1) !important;
}
.cl-g2 {
    color: var(--g2) !important;
}
.cl-g3 {
    color: var(--g3) !important;
}
.cl-g4 {
    color: var(--g4) !important;
}
.cl-g5 {
    color: var(--g5) !important;
}
.cl-g6 {
    color: var(--g6) !important;
}

.cl-c1 {
    color: var(--c1) !important;
}
.cl-c2 {
    color: var(--c2) !important;
}
.cl-c3 {
    color: var(--c3) !important;
}

.cl-v1 {
    color: var(--v1) !important;
}
.cl-v2 {
    color: var(--v2) !important;
}
.cl-v3 {
    color: var(--v3) !important;
}

.cl-w1 {
    color: var(--w1) !important;
}



/***********************************************************
 * Background colors
 ***********************************************************/
.bg-forest-orange {
    background: #FE725E !important;
}

.bg-a1 {
    background: var(--a1) !important;
}
.bg-a2 {
    background: var(--a2) !important;
}
.bg-a3 {
    background: var(--a3) !important;
}
.bg-a4 {
    background: var(--a4) !important;
}
.bg-a11 {
    background: var(--a11) !important;
}

.bg-b1 {
    background: var(--b1) !important;
}
.bg-b2 {
    background: var(--b2) !important;
}
.bg-b3 {
    background: var(--b3) !important;
}
.bg-b11 {
    background: var(--b11) !important;
}

.bg-g1 {
    background: var(--g1) !important;
}
.bg-g2 {
    background: var(--g2) !important;
}
.bg-g3 {
    background: var(--g3) !important;
}
.bg-g4 {
    background: var(--g4) !important;
}
.bg-g5 {
    background: var(--g5) !important;
}
.bg-g6 {
    background: var(--g6) !important;
}

.bg-c1 {
    background: var(--c1) !important;
}
.bg-c2 {
    background: var(--c2) !important;
}
.bg-c3 {
    background: var(--c3) !important;
}

.bg-v1 {
    background: var(--v1) !important;
}
.bg-v2 {
    background: var(--v2) !important;
}
.bg-v3 {
    background: var(--v3) !important;
}

.bg-w1 {
    background: var(--w1) !important;
}