@charset "UTF-8";

@media all
{
    .width-100{
        width: 100%;
    }
    .width-90{
        width: 90%;
    }
    .width-80{
        width: 80%;
    }
    .width-70{
        width: 70%;
    }
    .width-60{
        width: 60%;
    }
    .width-50{
        width: 50%;
    }
    .width-40{
        width: 40%;
    }
    .width-30{
        width: 30%;
    }
    .width-20{
        width: 20%;
    }
    .width-10{
        width: 10%;
    }
    .width-0{
        width: 0%;
    }
    .bg-outline-success {
        --bs-bg-opacity: 1;
        border: 1px solid rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
        background-color: #FFF !important;
        color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity));
    }
    .bg-outline-warning {
        --bs-bg-opacity: 1;
        border: 1px solid rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
        background-color: #FFF !important;
        color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity));
    }
    .bg-outline-danger {
        --bs-bg-opacity: 1;
        border: 1px solid rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
        background-color: #FFF !important;
        color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity));
    }
    .bg-red {
        background-color: #F44336 !important;
        color: #FFF;
    }
    .bg-outline-red {
        border: 1px solid #F44336;
        background-color: #FFF !important;
        color: #F44336;
    }
    .bg-pink {
        background-color: #E91E63 !important;
        color: #FFF;
    }
    .bg-outline-pink {
        border: 1px solid #E91E63;
        background-color: #FFF !important;
        color: #E91E63;
    }
    .bg-purple {
        background-color: #9C27B0 !important;
        color: #FFF;
    }
    .bg-outline-purple {
        border: 1px solid #9C27B0;
        background-color: #FFF !important;
        color: #9C27B0;
    }
    .bg-deep-purple {
        background-color: #673AB7 !important;
        color: #FFF;
    }
    .bg-outline-deep-purple {
        border: 1px solid #673AB7;
        background-color: #FFF !important;
        color: #673AB7;
    }
    .bg-indigo {
        background-color: #3F51B5 !important;
        color: #FFF;
    }
    .bg-outline-indigo {
        border: 1px solid #3F51B5;
        background-color: #FFF !important;
        color: #3F51B5;
    }
    .bg-blue {
        background-color: #2196F3 !important;
        color: #FFF;
    }
    .bg-outline-blue {
        border: 1px solid #2196F3;
        background-color: #FFF !important;
        color: #2196F3;
    }
    .bg-light-blue {
        background-color: #03A9F4 !important;
        color: #FFF;
    }
    .bg-outline-light-blue {
        border: 1px solid #03A9F4;
        background-color: #FFF !important;
        color: #03A9F4;
    }
    .bg-cyan {
        background-color: #00BCD4 !important;
        color: #FFF;
    }
    .bg-outline-cyan {
        border: 1px solid #00BCD4;
        background-color: #FFF !important;
        color: #00BCD4;
    }
    .bg-teal {
        background-color: #009688 !important;
        color: #FFF;
    }
    .bg-outline-teal {
        border: 1px solid #009688;
        background-color: #FFF !important;
        color: #009688;
    }
    .bg-green {
        background-color: #4CAF50 !important;
        color: #FFF;
    }
    .bg-outline-green {
        border: 1px solid #4CAF50;
        background-color: #FFF !important;
        color: #4CAF50;
    }
    .bg-light-green {
        background-color: #8BC34A !important;
        color: #FFF;
    }
    .bg-outline-light-green {
        border: 1px solid #8BC34A;
        background-color: #FFF !important;
        color: #8BC34A;
    }
    .bg-lime {
        background-color: #CDDC39 !important;
        color: #FFF;
    }
    .bg-outline-lime {
        border: 1px solid #CDDC39;
        background-color: #FFF !important;
        color: #CDDC39;
    }
    .bg-yellow {
        background-color: #FFE821 !important;
        color: #FFF;
    }
    .bg-outline-yellow {
        border: 1px solid #FFE821;
        background-color: #FFF !important;
        color: #FFE821;
    }
    .bg-amber {
        background-color: #FFC107 !important;
        color: #FFF;
    }
    .bg-outline-amber {
        border: 1px solid #FFC107;
        background-color: #FFF !important;
        color: #FFC107;
    }
    .bg-orange {
        background-color: #FF9800 !important;
        color: #FFF;
    }
    .bg-outline-orange {
        border: 1px solid #FF9800;
        background-color: #FFF !important;
        color: #FF9800;
    }
    .bg-deep-orange {
        background-color: #FF5722 !important;
        color: #FFF;
    }
    .bg-outline-deep-orange {
        border: 1px solid #FF5722;
        background-color: #FFF !important;
        color: #FF5722;
    }
    .bg-brown {
        background-color: #795548 !important;
        color: #FFF;
    }
    .bg-outline-brown {
        border: 1px solid #795548;
        background-color: #FFF !important;
        color: #795548;
    }
    .bg-grey {
        background-color: #9E9E9E !important;
        color: #FFF;
    }
    .bg-outline-grey {
        border: 1px solid #9E9E9E;
        background-color: #FFF !important;
        color: #9E9E9E;
    }
    .bg-blue-grey {
        background-color: #607D8B !important;
        color: #FFF;
    }
    .bg-outline-blue-grey {
        border: 1px solid #607D8B;
        background-color: #FFF !important;
        color: #607D8B;
    }
    .bg-black {
        background-color: #000000 !important;
        color: #FFF;
    }
    .bg-outline-black {
        border: 1px solid #000000;
        background-color: #FFF !important;
        color: #000000;
    }
    .bg-white {
        background-color: #FFFFFF !important;
        color: #000;
    }
    .bg-outline-white {
        border: 1px solid #FFFFFF;
        background-color: #000 !important;
        color: #FFF;
    }

    #popup {
        margin: 2% auto;
    }

    #popup .modal-header {
        text-align: center;
    }

    #popup .modal-dialog {
        width: 90%;
        max-width: 90%;
    }

    #popup-action {
        margin: 2% auto;
    }

    #popup-action .modal-header {
        text-align: center;
    }

    #popup-action .modal-dialog {
        width: 80%;
        max-width: 80%;
    }

    .page-break {
        border: 1px dashed #999;
    }

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

    .text-right {
        text-align: right;
        float: right;
    }

    #data-table {
        display: block;
    }

    #data-list {
        display: none;
    }

    .box {
        padding: 10px;
        border: 2px solid #e9ecef;
    }

    .dtp > .dtp-content > .dtp-date-view > header.dtp-header {
        background: #4b58f1;
    }

    .dtp div.dtp-date, .dtp div.dtp-time {
        background: #6571ff;
    }

    .dtp .p10 > a {
        color: #fff;
        text-decoration: none;
    }

    .dtp table.dtp-picker-days tr > td > a.selected {
        background: #6571ff;
        color: #fff;
    }

    .dtp div.dtp-actual-year {
        color: #fff;
    }
    .year-picker-item.active {
        color: #6571ff;
    }
}

@media screen and (max-width: 769px)
{
    #data-table {
        display: none;
    }

    #data-list {
        display: block;
    }

    #popup .modal-dialog {
        width: 95%;
        max-width: 95%;
    }

    #popup-action .modal-dialog {
        width: 95%;
        max-width: 95%;
    }

}

@media screen and (min-width: 770px)
{
    #data-table {
        display: block;
    }

    #data-list {
        display: none;
    }
}