* {
    padding: 0px;
    margin: 0%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-color: #f7f6fe !important;
}

.table-responsive {
    overflow-x: auto;
}

.main-table {
    width: 100%;
}

.main-table tr,
.main-table td,
.main-table th,
.main-table thead,
.main-table tbody {
    border: 1px solid #ddd !important;
}

.main-table tr th {
    background-color: #f9fafb;
    font-size: 15px;
    white-space: nowrap;
    padding: 4px;
    height: 43px;
    vertical-align: middle;
    color: #6b7280;
    font-weight: bold;
}

.w-fit {
    width: fit-content;
}
.main-table tr td {
    vertical-align: middle;
    background-color: white;
    height: 41px;
    font-size: 15px;
    color: #444;
    padding: 4px;
}

.info .box .color {
    width: 18px;
    height: 18px;
    border-radius: 3px;
}

.info .box .one {
    background-color: #eee;
}

.info .box .two {
    background-color: #00c851;
}
.info .box .three {
    background-color: #bbb;
}
.info .box .four {
    background-color: #ff4444;
}
.info .box .five {
    background-color: #ffbb33;
}

.info .box .text {
    font-weight: bolder;
    font-family: Georgia, "Times New Roman", Times, serif;
}
.table-color td {
    position: relative;
}
.table-color td .toltip-table {
    background-color: #2c2c2c;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    padding: 10px;
    width: fit-content;
    color: white;
    white-space: nowrap;
    font-size: 15px;
    transform: translateX(-50%);
    text-align: start;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    transition: 300ms;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    -o-transition: 300ms;
    z-index: 1000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.table-color tr:nth-of-type(1) .toltip-table,
.table-color tr:nth-of-type(2) .toltip-table {
    bottom: unset;
    top: calc(100% + 10px);
}
.table-color tr td:nth-of-type(1) .toltip-table {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -moz-transform: translateX(0%);
    -ms-transform: translateX(0%);
    -o-transform: translateX(0%);
    left: unset;
    right: 0;
}
.table-color td .toltip-table::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 10px;
    border-style: solid;
    border-color: #2c2c2c transparent transparent transparent;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: 1500;
    -o-transform: translateX(-50%);
}
.table-color tr:nth-of-type(1) .toltip-table::before,
.table-color tr:nth-of-type(2) .toltip-table::before {
    top: unset;
    bottom: 100%;
    border-color: transparent transparent #2c2c2c transparent;
}
.table-color tr td:nth-of-type(1) .toltip-table::before {
    transform:translateX(0) ;
    -webkit-transform:translateX(0) ;
    -moz-transform:translateX(0) ;
    -ms-transform:translateX(0) ;
    -o-transform:translateX(0) ;
    left: unset;
    right: 10px;
}
.table-color td:hover .toltip-table {
    visibility: visible;
    opacity: 1;
}
.table-color .bg-danger {
    background-color: #ff4444 !important;
}
.table-color .bg-success {
    background-color: #00c851 !important;
}
.table-color .bg-warning {
    background-color: #bbb !important;
}
.table-color .bg-greey {
    background-color: #eee !important;
}
.table-color .bg-orange {
    background-color: #ffbb33 !important;
    white-space: nowrap;
}