/* Panel's */

.xd-panel {
    overflow-x: hidden;
    border-radius: 25px;
    border-style: solid;
    border-color: white;
    border-width: 1px;
}

.xd-panel-heading {
    overflow: hidden;
    background-color: rgb(23, 27, 31);
}

.xd-panel-footer {
    height: 50px;
    text-align: center;
    line-height: 2.6;
    overflow: hidden;
    font-size: 14pt;
    color: white;
}

.xd-panel-icon {
    text-align: center;
    display: block;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers children along the main (vertical) axis */
}

.xd-panel-icon-med {
    font-size: 2rem;
}

.xd-panel-icon-large {
    font-size: 3rem;
}

.xd-panel-body {
    height: 100px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers children along the main (vertical) axis */
}

.xd-panel-body-large {
    height: 150px;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column; /* Stacks children vertically */
    justify-content: center; /* Centers children along the main (vertical) axis */
}

.xd-panel-lbl-large {
    font-size: 24pt;
    color: white;
    text-align: center;
    overflow: hidden;
}

.xd-panel-lbl-top {
    padding-top: 4px;
}

.xd-panel-lbl-bottom {
    padding-bottom: 4px;
}

.xd-panel-lbl {
    font-size: 14pt;
    text-align: center;
    overflow: hidden;
}

.xd-panel-lbl-small {
    font-size: 8pt;
    color: white;
    text-align: center;
    overflow: hidden;
}


.xd-panel-green {
    border-color: #5cb85c;
}

    .xd-panel-green .xd-panel-heading {
        border-color: #5cb85c;
        color: #fff;
        background-color: #5cb85c;
    }

    .xd-panel-green .xd-panel-footer .xd-panel-lbl {
        color: #5cb85c;
    }

    .xd-panel-green .xd-panel-footer i {
        color: #5cb85c;
    }

    .xd-panel-green a {
        color: #5cb85c;
    }

        .xd-panel-green a:hover {
            color: #008343;
        }

.xd-panel-red {
    border-color: #d9534f;
}

    .xd-panel-red .xd-panel-heading {
        border-color: #d9534f;
        color: #fff;
        background-color: #d9534f;
    }

    .xd-panel-red .xd-panel-footer .xd-panel-lbl {
        color: #d9534f;
    }

    .xd-panel-red .xd-panel-footer i {
        color: #d9534f;
    }

    .xd-panel-red a {
        color: #d9534f;
    }

        .xd-panel-red a:hover {
            color: #860400;
        }

.xd-panel-yellow {
    border-color: #f0ad4e;
}

    .xd-panel-yellow .xd-panel-heading {
        border-color: #f0ad4e;
        color: #fff;
        background-color: #f0ad4e;
    }

    .xd-panel-yellow .xd-panel-footer .xd-panel-lbl {
        color: #f0ad4e;
    }

    .xd-panel-yellow .xd-panel-footer i {
        color: #f0ad4e;
    }

    .xd-panel-yellow a {
        color: #f0ad4e;
    }

        .xd-panel-yellow a:hover {
            color: #925500;
        }


.xd-panel-blue {
    border-color: #1571d2;
}

    .xd-panel-blue .xd-panel-heading {
        border-color: #1571d2;
        color: #fff;
        background-color: #1571d2;
    }

    .xd-panel-blue .xd-panel-footer .xd-panel-lbl {
        color: #1571d2;
    }

    .xd-panel-blue .xd-panel-footer i {
        color: #1571d2;
    }

    .xd-panel-blue a {
        color: #1571d2;
    }

        .xd-panel-blue a:hover {
            color: #003f81;
        }


.xd-panel-teal {
    border-color: #41b38e;
}

    .xd-panel-teal .xd-panel-heading {
        border-color: #41b38e;
        color: #fff;
        background-color: #41b38e;
    }

    .xd-panel-teal .xd-panel-footer .xd-panel-lbl {
        color: #41b38e;
    }

    .xd-panel-teal .xd-panel-footer i {
        color: #41b38e;
    }

    .xd-panel-teal a {
        color: #41b38e;
    }

        .xd-panel-teal a:hover {
            color: #03865c;
        }

.xd-panel-purple {
    border-color: #5a3dcc;
}

    .xd-panel-purple .xd-panel-heading {
        border-color: #5a3dcc;
        color: #fff;
        background-color: #5a3dcc;
    }

    .xd-panel-purple .xd-panel-footer .xd-panel-lbl {
        color: #5a3dcc;
    }

    .xd-panel-purple .xd-panel-footer i {
        color: #5a3dcc;
    }

    .xd-panel-purple a {
        color: #5a3dcc;
    }

        .xd-panel-purple a:hover {
            color: #2603ac;
        }