:root {
/*In use (our styles)*/
--white-color: #FFFFFF;
--gupter: 'Gupter', serif;
--openSance: 'Open Sans', sans-serif;
--regular: 400;
--medium: 500;
--semi-bold: 600;
--bold: 700;
--green: #20A920;
--blue: #223A54;
--lightGray: rgb(247, 247, 247);
--text-color: #4D4C4C;
--error-color: rgb(230, 87, 87);
--heading-size: 44px;
--paragraph-size: 16px;
--banner-heading: 50px;
--subheading-size: 16px;
--cta-text-size: 20px;
--background-gradient-color: linear-gradient(339deg, #000 -19.36%, #223A54 54.7%, #000 128.75%);
--cinzel: 'Cinzel', serif;
}

.responstable {
width: 100%;
overflow: hidden;
border-collapse: separate;
border-spacing: 5px;
}

.border-green-2 {
border: 2px solid rgba(180, 175, 175, 0.624);
transition: all 0.3s ease;
}

.border-green-2:hover{
border: 2px solid var(--green) !important;
}

.table-holder {
/*width: 80%;*/
width: 100%;
border-radius: 10px;
}

.responstable tr {
border: none;
}

.responstable tr:nth-child(odd) {
background-color: var(--lightGray);
}

.responstable th {
border: 1px solid #FFF;
background-color: var(--blue);
color: #FFF;
padding: 1em;
font-size: var(--paragraph-size);
font-weight: var(--semi-bold);
font-family: var(--openSance);
text-align: left !important;
}

.responstable th,
.responstable td {
padding: 1em;
}

.responstable th:first-child {
display: table-cell;
text-align: center;
}

.responstable th:nth-child(2) {
display: table-cell;
}

.responstable th:nth-child(2)::after {
content: attr(data-th);
}

.responstable td {
word-wrap: break-word;
text-align: left;
font-family: var(--openSance);
font-size: 14px !important;
color: var(--text-color);
}

.responstable td:first-child {
display: table-cell;
text-align: left;
}

.responstable td {
border: 1px solid rgba(180, 175, 175, 0.624) !important;
}

.table-holder {
overflow-x: auto;
}

.responstable {
width: 100%;
table-layout: fixed;
}

@media (max-width: 991px) {
.table-holder {
width: 100% !important;
}
}

@media (max-width: 480px){
.responstable th, .responstable td{
font-size:14px;
padding:0.5em;
}
.responstable td {
border: 1px solid var(--lightGray);
font-size:12px !important;
}

/*Newly added code for table scroll*/  
.scrollable-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}

.scrollable-table::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}

.scrollable-table table {
min-width: 600px;
width: max-content;
border-collapse: collapse;
}

.scrollable-table table th,
.scrollable-table table td {
min-width: 140px;
white-space: nowrap;
}
}

@media (min-width: 480px) {
.responstable th,
.responstable td {
display: table-cell;
padding: 1em;
}

.responstable th:nth-child(2) span {
display: block;
}

.responstable th:nth-child(2)::after {
display: none;
}
}

@media (max-width: 350px){
.responstable th{
font-size:12px !important;
}
}