.table1{
    width: 100%;

    border-width: 10px;
    border-style: solid;
    border-image-source: url('img/content/table1-border2.png'); 
    border-image-slice: 10 fill; 
    border-image-repeat: repeat; 
    padding: 4px;
    color: #5A2800;
    z-index: 1;
    background-color: #f1e0c5;
    position: relative;
}
.table1.dark{
    background-color: #c7b599;
}
.heading1{
    border-width: 6px;
    border-radius: 4px;
    border-style: solid;
    border-image-source: url('img/content/table1heading-border.png'); 
    border-image-slice: 6 fill; 
    border-image-repeat: repeat; 
    padding-left: 9px;
    height: 36px;
    line-height: 24px;
    text-align: left;
    margin: 0 -2px -4px -2px;
    z-index: 2;

    position: relative;


    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: #fffef2;
}
.table1 td{ 

}
.content-table{
    box-shadow: 3px 3px 3px #7d3600;
    outline: 1px solid #5F4D41;
    position: relative;
    width: 100%;
    background-color: #d4c0a1;
    padding: 0px;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0;
}
.content-table td{
        border: 1px solid #faf0d7;
        padding: 2px 5px;
}
.content-table .heading{
    font-weight: bold;
    white-space: nowrap;
}

.content-table tr:nth-child(even) td{
    background-color: #F1E0C6;
}
.content-table tr.even td{
    background-color: #F1E0C6 !important;
}
.content-table tr:nth-child(odd) td{
    background-color: #D4C0A1;
}
.content-table tr.odd td{
    background-color: #D4C0A1 !important;
}
.content-table tr[bgcolor] td{
    background-color: transparent;
}
.content-table table{
        border-collapse: collapse;
}
.txt-bold{
    font-weight: bold;
}
.content-table.dark{
    border: 1px solid #faf0d7;
}
.content-table.dark td{
    background-color: #D4C0A1 !important;
    border: 0 none transparent;
}
table.nopadding tr td{
    padding: 0 !important;
}
/* button */
.btn{
    font-family: "Roboto", sans-serif;
    position: relative;
    background: transparent;
    height: 31px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: normal;
    user-select: none;
    -webkit-user-select: none;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;
  border: 0 none;
  z-index: 1;
  image-rendering: pixelated;
      image-rendering: -webkit-optimize-contrast;
    transition: color ease .2s;
    padding: 0 10px;
    font-size: 13px;
    color: #ffd18c !important;
    text-shadow: var(--text-shadow-outline);
    width: max-content;
}
.btn.wide{
    width: 135px;
}
.btn::before, .btn::after{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    z-index: -1;
    transition: opacity .15s;
    pointer-events: none;
    background-image: url(img/content/btn/btn-left.png), url(img/content/btn/btn-right.png), url(img/content/btn/btn-body.png);
    background-repeat: no-repeat;
    background-position: left center, right center, center center;
    background-size: auto 100%, auto 100%, calc(100% - 10px) 100%;
}
.btn::after{
    background-image: url(img/content/btn/btn-left-hover.png), url(img/content/btn/btn-right-hover.png), url(img/content/btn/btn-body-hover.png);
    opacity: 0;
}
.btn:hover{
    color: #fff78c !important;
}
.btn:hover::after{
    opacity: 1;
}
/* red button */
.btn.red::before {background-image: url(img/content/btn/red/btn-left.png), url(img/content/btn/red/btn-right.png), url(img/content/btn/red/btn-body.png);}
.btn.red::after {background-image: url(img/content/btn/red/btn-left-hover.png), url(img/content/btn/red/btn-right-hover.png), url(img/content/btn/red/btn-body-hover.png);}

/* green button */
.btn.green::before {background-image: url(img/content/btn/green/btn-left.png), url(img/content/btn/green/btn-right.png), url(img/content/btn/green/btn-body.png);}
.btn.green::after {background-image: url(img/content/btn/green/btn-left-hover.png), url(img/content/btn/green/btn-right-hover.png), url(img/content/btn/green/btn-body-hover.png);}

/*  yellow button */
.btn.yellow::before {background-image: url(img/content/btn/yellow/btn-left.png), url(img/content/btn/yellow/btn-right.png), url(img/content/btn/yellow/btn-body.png);}
.btn.yellow::after {background-image: url(img/content/btn/yellow/btn-left-hover.png), url(img/content/btn/yellow/btn-right-hover.png), url(img/content/btn/yellow/btn-body-hover.png);}

/*  gray button */
.btn.gray::before {background-image: url(img/content/btn/gray/btn-left.png), url(img/content/btn/gray/btn-right.png), url(img/content/btn/gray/btn-body.png);}
.btn.gray::after {background-image: url(img/content/btn/gray/btn-left-hover.png), url(img/content/btn/gray/btn-right-hover.png), url(img/content/btn/gray/btn-body-hover.png);}


.btn.green .hover, .btn.green .hover::before, .btn.green .hover::after{
    background-image: url(img/content/green-btn-sprite-hover.png) !important;
}
.btn.sm{
    height: 23px !important;
    font-size: 12px;
}
.btn.sbtn{
    height: 18px;
    font-size: 12px;
    background: url(img/content/btn-gray.png) repeat-x center center;
    line-height: 18px;
    font-family: Verdana, Arial, Times New Roman, sans-serif;
    font-weight: 600;
    color: #ebebeb !important;
    text-shadow: unset !important;
    border-radius: 6px;
    padding: 0 18px;
    font-size: 10px;
    box-shadow: 0 1px 1px #fff5 inset;
}
.btn.bbtn{
    height: 35px;
    color: #d9f7ff !important;
    text-shadow: 0 1px 3px #000;
    font-weight: bold;
}
.btn.bbtn::before, .btn.bbtn::after{
    background-size: auto 100%, auto 100%, calc(100% - 15px) 100%;
}
.btn.bbtn::before {background-image: url(img/content/btn/bbtn/btn-left.png), url(img/content/btn/bbtn/btn-right.png), url(img/content/btn/bbtn/btn-body.png);}
.btn.bbtn::after {background-image: url(img/content/btn/bbtn/btn-left-hover.png), url(img/content/btn/bbtn/btn-right-hover.png), url(img/content/btn/bbtn/btn-body-hover.png);}
.cbtn{
    background: #5A2800;
    color: #f1e0c5;
    margin: 0 2px;
    padding: 2px 6px;
    outline: 2px solid transparent;
    transition: background-color ease .1s, color ease .1s, outline-color ease .2s;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    border: 0 none transparent;
    cursor: pointer;
}
.cbtn:hover{
    text-decoration: none !important;
    background: #854817;
    color: #f1e0c5 !important;
}
.cbtn:active{
    outline-color: #582e0c5d;
}
.btn.sbtn:hover{
    color: #fff !important;
}
.btn.sbtn::before, .btn.sbtn::after{
    background: transparent;
    display: none;
}
/*TABS*/
.tabs {
    display: flex;
    padding-left: 2px;
}
.tab-button {
    padding: 7px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all ease 0.3s;
    color: unset;
    margin-right: 2px;
    border-radius: 2px 2px 0 0;
    border: 1px solid transparent;
    background: transparent;
        border-bottom: 0 none transparent;
}

.tab-button:hover {
    background: #D4C0A1;
}

.tab-button.active {
    background: linear-gradient(#F1E0C6, #D4C0A1);
    opacity: 1;
    border: 1px solid black;
        border-bottom: 0 none transparent;
}
.tab-content {
    opacity: 0; 
    visibility: hidden;
    display: none;
    transition: opacity 0.1s ease, visibility 0s 0.1s; 
}
.tab-content.active {
    opacity: 1; 
    visibility: visible;
    display: revert;
    transition: opacity .3s ease, visibility .3s ease; 
}

.alert{
    width: 100%;
    margin: 10px 0;
    padding: 15px;
    border-radius: 4px;
    border-style: solid;
    border-image: url(img/content/warning-border.png) 7 repeat;
    border-image-width: 7px;
    border-image-outset: 1px;
    background-color: #d3b39c;
    box-shadow: 0 0 10px rgb(255 0 0 / 34%) inset;
    color: #970000;
    font-size: 14px;
}
.alert.yellow{
    border-image-source: url(img/content/warning-border-yellow.png);
    box-shadow: 0 0 20px rgb(167 116 1 / 59%) inset;
    color: #7a5000;
    background-color: #e1cea4;
}
.alert.green{
    border-image-source: url(img/content/warning-border-green.png);
    box-shadow: 0 0 20px rgba(67, 167, 1, 0.59) inset;
    color: #00580f;
    background-color: #cae1a4;
}
/* progressbar */
.progressbar{
    width: 100%;
    border-width: 4px;
    border-style: solid;
    border-radius: 4px;
    border-image-source: url('img/content/border2.png'); 
    border-image-slice: 4; 
    border-image-repeat: repeat; 
    height: 25px;
    color: #eef3f5;
    text-shadow: var(--text-shadow-outline);
    z-index: 1;
    background-color: #372d26;
    position: relative;
} 
.progressbar div{
    height: 17px;
    background: url(img/content/progressbar.png);
}
.progressbar.red div{
    background: url(img/content/progressbar-red.png);
}
.progressbar.blue div{
    background: url(img/content/progressbar-blue.png);
}
.progressbar.yellow div{
    background: url(img/content/progressbar-yellow.png);
}
.progressbar.orange div{
    background: url(img/content/progressbar-orange.png);
}
.progressbar span{
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 17px;
    z-index: 2;
    top: 0;
    left: 0;
    font-size: 14px;
}
table.no-padding td{
    padding: 0 !important;
}
table.clear td{
    border: 0 none transparent !important;
    padding: 0 !important;
}
.eqbox{
    display: flex;
    flex-direction: row;
    gap: 2px;
    margin: 10px;
    justify-content: center;
    position: relative;
}
.eqbox .row{
    gap: 2px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.eqbox .item .img{
    display: block;
    width: 32px;
    height: 32px;
    margin: 2px;
    margin: 2px;
    image-rendering: pixelated;
    background-position: center center;
    background-repeat: no-repeat;
}

.eqbox .item{
    border: 1px solid #faf0d7;
    overflow: hidden;
    width: 36px;
    height: 36px;
    box-sizing: content-box;
    background: #d4c0a1;
    box-shadow: 0 3px 5px #905120;
    z-index: 9;

    transition: ease .1s;
}
.eqbox .item.green{border-color: #166e00;background-color: #5fdd00;}
.eqbox .item.green .img{box-shadow: inset 0 0 16px rgb(1 86 15 / 98%);}

.eqbox .item.purple{border-color: #5e0099;background-color: #b926cb;}
.eqbox .item.purple .img{box-shadow: inset 0 0 16px rgb(96 0 145 / 98%);}

.eqbox .item.blue{border-color: #002863;background-color: #007eff;}
.eqbox .item.blue .img{box-shadow: inset 0 0 16px rgb(0 25 96);}

.eqbox .item.red{border-color: #7a0000;background-color: #ff0404;}
.eqbox .item.red .img{box-shadow: inset 0 0 16px rgb(0 0 0 / 60%);}


.eqbox .item.yellow{border-color: #7c7c01;background-color: #ffe000;}
.eqbox .item.yellow .img{box-shadow: inset 0 0 16px rgb(84 84 0);}

.eqbox .item.gray{border-color: #646464;background-color: #adadad;}
.eqbox .item.gray .img{box-shadow: inset 0 0 16px rgb(96 96 96);}

.eqbox .cap, .eqbox .soul{
height: 20px;
    font-size: 10px;
    padding: 1px 0;
    font-weight: 600;
    line-height: 10px;
    text-align: center;
}
.eqbox .item.tooltip-trigger:hover{
    cursor: help;  
    transform: scale(1.1);
    z-index: 10;
}
.tooltip-simple {
    position: relative;
    border-width: 1px;
    border-style: solid;
    background: #0008;
    color: #e9e9e9;
    border-radius: 0;
    filter: drop-shadow(0 2px 5px #000000b6);
    padding: 10px;
    width: max-content;
    max-width: 300px;
    text-align: center;
    font-weight: 500;
    text-shadow: var(--text-shadow-outline);
    font-size: 13px;
    border: 1px solid #000000;
    box-shadow: 0 0 15px #0005 inset;
}
.tooltip-simple::before{
    content: "";
    position: absolute;
    left: -8px;
    top: 0;
    width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 7px solid #000;
	border-bottom: 7px solid transparent;
}
.tooltip-item {
    position: relative;
    border-width: 1px;
    border-style: solid;
    background: #dbcab0;
    color: #e9e9e9;
    border-radius: 0;
    filter: drop-shadow(0 2px 5px #000000b6);
    padding: 10px;
    width: max-content;
    max-width: 300px;
    text-align: center;
    font-weight: 500;
    text-shadow: var(--text-shadow-outline);
    font-size: 13px;
    border-color: #ebdfcd;
    box-shadow: 0 0 15px #0005 inset;
    outline: 1px solid #5f4d41;
}
.tooltip-item::before{
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 14px solid #ebdfcd;
	border-bottom: 7px solid transparent;
}
.tooltip-item .title{
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0, 0, 0, 0.342);
    margin-bottom: 4px;
    color: #ffffff;
    text-align: center;
    display: block;
}
.tooltip-item.green {
    border-color: #5fdd00;
    box-shadow: 0 0 35px #166e00 inset;
    outline-color: #166e00;
}
.tooltip-item.green::before{border-right-color: #5fdd00;}
.tooltip-item.green .title{color: #77ff0e;}

.tooltip-item.red {
    border-color: #dd0000;
    box-shadow: 0 0 35px #6e0000 inset;
    outline-color: #6e0000;
}
.tooltip-item.red::before{border-right-color: #dd0000;}
.tooltip-item.red .title{color: #ff3232;}

.tooltip-item.yellow {
    border-color: #ddd900;
    box-shadow: 0 0 35px #6e5d00 inset;
    outline-color: #6e5d00;
}
.tooltip-item.yellow::before{border-right-color: #ddd900;}
.tooltip-item.yellow .title{color: #ffea32;}

.tooltip-item.gray {
    border-color: #e9e9e9;
    box-shadow: 0 0 35px #646464 inset;
    outline-color: #646464;
}
.tooltip-item.gray::before{border-right-color: #e9e9e9;}
.tooltip-item.gray .title{color: #f8f8f8;}

.tooltip-item.purple {
    border-color: #b926cb;
    box-shadow: 0 0 35px #600091fa inset;
    outline-color: #600091fa;
}
.tooltip-item.purple::before{border-right-color: #b926cb;}
.tooltip-item.purple .title{color: #e732ff;}

.tooltip-item.blue {
    border-color: #2592ff;
    box-shadow: 0 0 35px #001960 inset;
    outline-color: #001960;
}
.tooltip-item.blue::before{border-right-color: #2592ff;}
.tooltip-item.blue .title{color: #2abbff;}

.tooltip-eqitem {
    position: relative;
    border: 5px solid;
    border-image: url(img/content/tooltip-border.png) 4 repeat;
    border-image-width: 4px;
    font-size: 11px;
    border-radius: 2px;
    box-shadow: 0 0 5px #0009;
    color: #f3ebdc;
    text-shadow: 0 0 3px #000;
    background: linear-gradient(#272727, #000000);
    min-width: 150px;
}
.tooltip-eqitem::before{
    content: "";
    position: absolute;
    left: -12px;
    top: -3px;
    width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-right: 7px solid #131313;
	border-bottom: 7px solid transparent;
}
.tooltip-eqitem .title{
    text-align: center;
    display: block;
    font-size: 15px;
    font-weight: bold;
}
.tooltip-eqitem .title::after, .tooltip-eqitem .attr::before, .tooltip-eqitem .desc::before{
    content: "";
    width: 100%;
    display: block;
    background: url(img/content/tooltip-spacer.png) center center;
    height: 5px;
    margin: 5px 0;
    opacity: 0.6;
}

.tooltip-eqitem .inside{
    padding: 5px 10px 10px 10px;
}
.tooltip-eqitem .desc i{
    margin: 3px 0;
    padding: 3px;
    border: 1px solid #c5c5c544;
    color: #dad1c1;
    border-radius: 2px;
    background: #fff1;
    display: block;
    max-width: 170px;
    text-align: center;
}

 /*YELLOW TOOLTIP*/
.tooltip-eqitem.yellow .title::before{
    content: '[LEGENDARY]';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.yellow .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-gold.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px #ffc400 inset;
}
.tooltip-eqitem.yellow {background: linear-gradient(#664d09, #000000);}
.tooltip-eqitem.yellow .title{color: #ffd900;}

 /*PURPLE TOOLTIP*/
.tooltip-eqitem.purple .title::before{
    content: '[EPIC]';
    color: #fff;
    font-size: 10px;
    display: block;
    text-align: center;
}
.tooltip-eqitem.purple .inside{
    border: 3px solid;
    border-image: url(img/content/tooltip-border-inside-purple.png) 3 repeat;
    border-image-width: 3px;
    box-shadow: 0 0 12px #ff00ff inset;
}
.tooltip-eqitem.purple {background: linear-gradient(#660966, #000000);}
.tooltip-eqitem.purple .title{color: #ea00ff;}
.houseimg{
    background-color: #0003;
    width: 150px;
    height: 150px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-bottom: 10px;
    margin-right: 10px;
    border: 1px solid black;
    box-sizing: content-box;
    image-rendering: pixelated;
    position: relative;
    cursor: zoom-in;
    transition: background-size ease .2s;
}
.houseimg.zoomed{
    cursor: zoom-out;
}
.houseimg::after{
    content: "+";
    color: #fff;
    font-family: Verdana, sans-serif;
    position: absolute;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    width: 10px;
    height: 10px;
    line-height: 10px;
    pointer-events: none;
    font-size: 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow-outline);
}
.forum-hr{
    border: 0 none;
    width: 100%;
    height: 1px;
    background: #00000014;
    margin: 3px 0;
}
blockquote.forum-quote {
  margin-left: 0.25em;
  padding-left: 0.5em;
  border-left: 0.25em solid #1F5011;
  color: #1F5011;
}
blockquote.forum-code {
  margin-left: 0.25em;
  padding-left: 0.5em;
  border-left: 0.25em solid #423e37;
  color: #423e37;
}
.player-flag{
    display: inline-block;
    box-sizing: content-box;
    width: 14px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #905120;
    border-radius: 12px;
    vertical-align: bottom;
    background-size: auto 14px;
}
/* CREATE ACCOUNT check classes*/
/* createaccount classes */

.PWStrengthIndicator {
	text-align: center;
	border: 1px solid #0006;
    border-top: 0 none;
	color: #fff;
    text-shadow: var(--text-shadow-outline);
    font-weight: bold;
	width: 100%;
    font-size: 11px;
    padding: 1px 0;
    margin: 0 ;
	text-transform: capitalize;
    border-radius: 0 0 4px 4px;
}

.PWStrengthLevel0,
.PWStrengthLevel1 {
	background: linear-gradient(#ee4c30, #af4431)
}

.PWStrengthLevel2 {
	background: linear-gradient(#ff8800, #b86200)
}

.PWStrengthLevel3 {
	background: linear-gradient(#dfe20a, #8e9100)
}

.PWStrengthLevel4 {
	background: linear-gradient(#34cf0d, #1d8f00)
}
.PWStrengthContainer{
    position: relative;
    width: 100%;
}
.PWStrengthToolTip {
    position: absolute;
    box-shadow: 0 3px 11px #00000046;
	display: none;
	width: 220px;
	top: -20px;
	font-size: 12px;
	z-index: 1000;
	right: -250px;

    padding: 8px;
    border: 1px double #5A2800;
    color: #5A2800;
    background-image: url(img/paper-only-lt.png);
    z-index: 1000;
}

.TextInputLine .PWStrengthToolTip {
	left: 270px;
	min-width: 250px
}

.PWStrengthToolTipHeadline {
	font-weight: 700;
    margin-bottom: 5px;
}


.PWStrengthToolTip .HelperDivArrow {
	position: absolute;
	top: 2px;
	left: -7px;

    width: 0; 
    height: 0; 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right:6px solid #5A2800; 
}
.PWStrengthToolTip .InputIndicator{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;

    border: 1px solid;
}


.PWStrengthToolTip .InputIndicatorOK{
    border-color: #173f04;
    background: linear-gradient(#40f712, #1f660a);
}
.PWStrengthToolTip .InputIndicatorNotOK{
    border-color: #3f0404;
    background: linear-gradient(#ff1d1d, #660a0a);
}
input.ok{
    outline-color: green !important;
}
input.nok{
    outline-color: red !important;
}
input.nok::after{
    content: "x";
    position: absolute;
    right: -20px;
    top: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 8px;
}
input.ok, input.nok{
    position: relative;
}
.cafield-cnt{
    position: relative;
    width: max-content;
}
.ca-checkbox{
    border-radius: 50%;
    display: inline-block;
    width: 15px;
    height: 15px;
    position: absolute;
    right: -20px;
    top: 5px;
    background: linear-gradient(#564127, #95702cbd);
    border: 1px solid #5f4d41;
}
#page-createaccount #cflag{
    position: absolute;
    right: -20px;
    top: 3px;
}
.ca-checkbox::before{
    position: absolute;
    width: 13px;
    height: 13px;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 13px;
    font-family: "Font Awesome 7 Pro";
    font-size: 9px;
    color: #ff3939;
    content: "\f00d";
    text-shadow: 0 0 2px rgb(0, 0, 0);
    font-weight: 900 !important;
    transition: color ease .4s, box-shadow ease .4s;
}
.ca-checkbox.ok{
    box-shadow: 0 0 5px #35a800;
}
.ca-checkbox.ok::before{
    content: "\f00c";
    color: #51ff00;
}
#acc_name_check, #email_check, #password_check2, #name_check{
    color: #cc0000;
    font-size: 11px;
    padding: 4px 0 0 0;
    float: left;
    width: 100%;
    transition: all ease .2s;
    opacity: 1;
    font-weight: bold;
}
#acc_name_check:empty, #email_check:empty, #password_check2:empty, #name_check:empty{
    height: 0;
    padding: 0;
    opacity: 0;
}
input[type="text"], input[type="password"], select{
    height: 25px;
    border-radius: 4px;
    outline: 2px solid transparent;
    background: #fff8ed;
    border: 1px solid #95846b;
    transition: outline-color ease .2s;
}
input[type="text"].sm, input[type="password"].sm{
    height: 16px;
}
input[type="text"]:focus, input[type="password"]:focus{
    outline-color: #613906a8;
    background: #ffffff;
}
#page-createaccount select{
    width: 250px;
}
.cafield-cnt input{
    width: 250px;
}
#page-createaccount #char_name{

}
#page-createaccount #verify{
    width: 150px;
    height: 30px;
    border-radius: 0 4px 4px 0;
    border-left: 0 none;
}
#page-createaccount #passor{
    border-radius: 4px 4px 0 0;
}
#page-accountmanagement #logout-btn {
    position: absolute;right: 0;top: 5px;
}
@media only screen and (max-width: 1196px) {
    #page-accountmanagement #logout-btn {
        position: relative;
        display: flex;
        margin: 0 auto;
    }
    #page-createaccount #verify{
        width: calc(100% - 100px);
    }
    .col-middle input[type=text], .col-middle input[type=password]{
        width: 100%;
    }
    .col-middle textarea{
        width: 100%;
    }
    .responsive-img{
        width: 100%;
        height: auto;
    }

    input[type="text"], input[type="password"], select{

    }
    #page-createaccount select{
        width: 100% !important;
    }
    .cafield-cnt{
        width: calc(100% - 20px);
    }
    .PWStrengthToolTip {
        position: unset;
        width: 100%;
        font-size: 9px !important;
    }
    .PWStrengthToolTip .HelperDivArrow{
        display: none;
    }
    .sex-input label{
        width: max-content;
        width: 50%;
        padding: 0 0 !important;
    }
    .sex-input {
        width: calc(100% - 20px);
    }
    .charname-input{

    }
    .choosevoc{
        transform: scale(0.7);
    }
    .crac-checkbox:checked + label .choosevoc {
    transform: scale(0.8) !important;
    }
    #page-createaccount td[width="150"]{
        max-width: 130px !important;
    }
    .hfieldarea div{
        margin: 10px 0 !important;
    }
    .hfieldarea{
        flex-direction: column;
    }
    #character-skills-table img{
        width: 25px;
        height: auto;
    }
    #character-skills-table .captions{
        font-size: 2.2vw;
    }
    .spotlight-table .toptd-container{
        display: grid !important; 
        grid-template-columns: 1fr 1fr 1fr;
    }
    .toptd .imgtop{
        
    }
    .toptd{
        width: 100% !important;
    }
    .toptd .toptext{
        font-size: 10px;
        word-break: break-all;
    }
     .mobile-wrap{
        word-break: break-all;
     }
     .mobileaccpanel .bigbtn{
        width: 100%;
     }
     .exptable-container{
        grid-template-columns: 1fr 1fr !important;
     }

}
@media only screen and (max-width: 600px) {
     #page-magicitems #attributes{
        overflow: scroll;
     }
     .shop-category-box{
        font-size: 9px !important;
        margin-right: 2px !important;
        padding: 3px 3px !important;
     }
     .shop-category-box, .tab-button{
        font-size: 2.2vw !important;
     }
     .btn{
        white-space: nowrap;
        font-size: 11px !important;
     }
}
.hfieldarea{
    display: flex;justify-content: space-around;align-items: center;flex-wrap: wrap;
}
.charname-input{
    float: left;
}
.sex-input{
    height: 25px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    border: 1px solid #5f4d41;
}
.sex-input label{
    display: inline-block;
    background: linear-gradient(#fdeed7, #cfb792);
    padding: 0 10px;
    cursor: pointer;
    /* color: #fff; */
    font-size: 13px;
    box-shadow: 0 2px 2px #ffffffc2 inset;
    white-space: nowrap;
        text-align: center;
    height: 25px;
    line-height: 25px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
   user-select: none;  
}
.sex-input input{
    display: none;
}
.sex-input input:checked + label {
    box-shadow: 0 2px 5px #000 inset;
    font-weight: bold;
}

.gen-name-btn{
    position: absolute;
    height: 25px;
    width: 30px;
    right: 0;
    line-height: 25px;
    font-size: 16px;
    border-radius: 0 4px 4px 0;
    border: 1px solid #95846b;
    /* border-left: 0 none; */
    box-shadow: 0 2px 2px #ffffffc2 inset;
    outline: 2px solid transparent;
    background: linear-gradient(#fdeed7, #cfb792);
    transition: outline-color 
                ease .2s, color 
                ease .2s;
    display: block;
    float: left;
    text-align: center;
    color: #5A2800;
}
.gen-name-btn:hover{
    color: #974c0f !important;
}
.gen-name-btn:active{
    outline-color: #613906a8;
}
.vocation-option{
    display: inline-flex;
    width: 25%;
    align-content: space-around;
    justify-content: center;
}
/* Create Character */
#crac-description{
    display: block;
    position: relative;
    text-align: center;
    color: #ffefcd;
    padding: 5px;
    background: #181716e8;
    border: 1px solid #2c2119;
    border-radius: 2px;
    transition: all ease .2s;
    z-index: 1;
    width: 100%;
    opacity: 1;
    visibility: visible;
    font-size: auto;
}
#crac-description.first::after {left: 12%;}
#crac-description.second::after {left: 38%;}
#crac-description.third::after {left: 63%;}
#crac-description.fourth::after {left: 88%;}
#crac-description::after {
    content: " ";
    position: absolute;
    bottom: calc(100%);
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color:  transparent transparent #2c2119 transparent;

    transition: all ease .2s;
}
#crac-description:empty {
    visibility: hidden;
    opacity: 0;
    font-size: 0;
}

.choosevoc {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    margin: 10px 0 0 0;
    background: radial-gradient(#705936, #d3c0a2);
    box-sizing: border-box;
    transition: border 
ease .2s, box-shadow 
ease .4s, transform 
ease .2s !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-shadow: 3px 3px 3px #7d3600, 1px 0 #faf0d7 inset, -1px 0 #faf0d7 inset, 0 1px #faf0d7 inset, 0 -1px #faf0d7 inset;
    outline: 1px solid #5F4D41;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.choosevoc .text{
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 12px 0;
    text-align: center;
    left: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-shadow: var(--text-shadow-outline);
    transition: all ease .1s;
}
.choosevoc .vocimg{
    position: relative;
    width: 100px;
    height: 100px;
    z-index: 15;
}
.choosevoc .vocimg img{
position: absolute;
    right: 34px;
    bottom: 36px;
    transition: all 
ease .2s;
    /* transform: scale(2); */
    image-rendering: pixelated;
    z-index: 10;
}
.crac-checkbox{
    display: none;
}
.crac-checkbox:checked + label .choosevoc .text{
    color: #eeff00;
    font-size: 15px;
}
.crac-checkbox:checked + label .choosevoc .vocimg img{
    filter: drop-shadow(0 0 1px #ffe600) drop-shadow(0 0 1px #ffe600) drop-shadow(0 0 10px rgb(172, 126, 0));
}
.crac-checkbox:checked + label .choosevoc {
    background: radial-gradient(#523d18, #ffee00);
}
.crac-checkbox + label .choosevoc::after {
    content: "";
    width: 102px;
    height: 102px;
    position: absolute;
    top: 0;
    left: 0;    
    background-image: url(img/circle-100px.png);
    opacity: 0;
    transition: opacity ease .2s;
}
.crac-checkbox:checked + label .choosevoc::after {
    opacity: 1;
}
.page-item{
    display: inline-block;
    margin: 0 2px;
    padding: 1px 4px;
    background-color: #d4c0a1;
    border-radius: 3px;
    color: unset;
    outline: 2px solid transparent;
    transition: background-color ease .1s, color ease .1s, outline-color ease .2s;
}
.page-item:not(.disabled):not(.dots):not(.active):hover{
    background-color: #b8a384;
    cursor: pointer;
    color: unset !important;
    text-decoration: none !important;
}
.page-item:not(.disabled):not(.dots):not(.active):active{
    outline-color: #5A2800;
}
.page-item.disabled{
    cursor: default !important;
    opacity: 0.5;
}
.page-item.active{
    cursor: default !important;
    background-color: #5A2800;
    color: #f1e0c5;
}
.page-item.dots{
    background-color: transparent;
    cursor: default !important;
}
.pedestal-sm{
    width: 51px;
    height: 51px;
    background-image: url(img/content/pedestal-sm.png);
    background-repeat: no-repeat;
    position: relative;
    margin: 3px;
}
.pedestal-sm img{   
    position: absolute;
    bottom: 10px;
    right: 10px;
    image-rendering: pixelated;
}
.status-badge{
    width: 15px;
    height: 15px;
    display: flex;
    font-size: 9pt;
    border-radius: 50%;
    justify-content: center;
    flex-wrap: wrap;
    background: #726145;
    border: 1px solid #5a4b34;
    box-shadow: 0 0 5px #463a27;
    box-sizing: content-box;
    /* outline: 1px solid #5a4e35; */
    /* text-shadow: 0 0 5px #000; */
    align-content: space-around;
    color: #d4c0a1;

}
.status-badge.red{
    background: #9b0000;
    border: 1px solid #910000;
    box-shadow: 0 0 5px #9f0000;
}
.status-badge.green{
    background: #2c9b00;
    border: 1px solid #1a8300;
    box-shadow: 0 0 5px #238f00;
    text-shadow: 0 0 2px #006600;
    color: #b8ff9c;
}
.quest-container {
        margin-bottom: 6px;
        font-size: 14px;
        box-shadow: 3px 3px 3px #7d360065;
}
.quest-header {
    background-clip: padding-box;
    padding: 0;
    background-color: #d4c0a1;
    display: flex;
    border: 1px solid #faf0d7;
    outline: 1px solid #5f4d41;
    justify-content: space-between;
    align-items: center;
    z-index: 0;
    position: relative;
}
.quest-togglebtn i{
    transition: all ease .3s;
}
.quest-header.active .quest-togglebtn i{
    transform: rotate3d(1 , 0, 0, 180deg);
}
.quest-name{
    width: 100%;
    font-weight: 600;
    padding: 8px;
}
.quest-status {
    padding: 8px;
    border-radius: 3px;
}
.quest-difficulty {
    padding: 8px;
    white-space: nowrap;
}
.quest-difficulty i:not(.muted){
    color: #582a00;
    text-shadow: 0 0 5px #0003;
}
.quest-difficulty i.muted{
    color: #a5957e;
}
.quest-togglebtn {
    padding: 8px;
    height: 100%;
    transition: background ease .3s;
    cursor: pointer;
}
.quest-header.active .quest-togglebtn, .quest-togglebtn:hover {
    background: #fff2;
}
.status-done { background-color: #4CAF50; }
.status-undone { background-color: #f44336; }
.quest-details {
    padding: 5px;
    outline: 1px solid #5f4d41;
    margin-top: -1px;
    background-color: #f1e0c6;
    display: none;
    box-shadow: -1px 0 0 #faf0d7 inset, 1px 0 0 #faf0d7 inset, 0 -1px 0 #faf0d7 inset, 0 1px 0 #faf0d7 inset;
}
.quest-details .inside-details{
    display: flex;
    justify-content: space-between;
}
.quest-details-headline{
    font-size: 10px;
    font-weight: 600;
    border-bottom: 1px solid #dfcfb7;
    margin-bottom: 10px;
    color: #8b775a;
}
.quest-hidden.hidden{
    display: none;
}
.reward-item {
    border: 1px solid #ddcdb5;
    overflow: hidden;
    width: 32px;
    height: 32px;
    box-sizing: content-box;
    background: radial-gradient(#e3d1b5, #bdab90);
    outline: 1px solid #8b785d;
    display: inline-block;
    margin: 0 5px 0 0;
    position: relative;
}
.reward-item .item-count{
    background: #0008;
    color: #fff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 8px;
    font-weight: 400;
    border-radius: 2px;
    bottom: 0;
    right: 0;
    position: absolute;
    padding: 0 3px;
}
.reward-item img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
}
.badge{
    display: inline-block;
    /* vertical-align: middle; */
    padding: 1px 6px;
    border-radius: 5px;
    background-color: #582a00;
    color: #ffffff;
    font-size: 12px;
    text-shadow: 0 0 1px #000;
    font-weight: 500;
    box-shadow: 0 -1px 1px #00000038 inset;
}
.badge.green{background-color: #13b913;}
.badge.red{background-color: #b91313;}
.badge.blue{background-color: #1377b9;}
.badge.yellow{background-color: #dfab00;color: #281300b5;}
.news-ticker{
    font-size: 13px;
    display: flex;
    max-height: 20px;
    min-height: 20px;
    width: 100%;
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}
.news-ticker .icon{
    width: 16px;
    height: 16px;
    margin: 2px;
    flex: 20px;
    background-repeat: no-repeat;
}
.news-ticker .text{
    display: block;
    width: 95%;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 3px 0 2px 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    max-height: 20px;
}
.news-ticker .date{
    padding: 3px 3px 0 3px;
    word-break: keep-all;
    white-space: nowrap;
}
.news-ticker .plusminus{
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: block;
    flex: 20px;
    background-image: url(img/plus.gif);
    background-repeat: no-repeat;
    background-position: center;
}
.news-ticker.active .plusminus{
    background-image: url(img/minus.gif);
}
.news-ticker.active{
     max-height: 2000px;
     transition: max-height 1s ease;
}
.news-ticker.active .text{
    max-height: 2000px;
    transition: max-height 1s ease;
}
.news-ticker:nth-child(even){
    background: #F1E0C6;
}
.news-ticker:nth-child(odd){
    background: #D4C0A1;
}
.checkbox{
    display: flex;
    align-items: top;
}
.checkbox input[type="checkbox"]{
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    position: absolute;
}
.checkbox label{
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    user-select: none;
}
.checkbox label::before{
    content: "\f00c";
    color: transparent;
    outline: 2px solid transparent;
    font-family: "Font Awesome 7 Pro"; 
    font-weight: 400;
    width: 12px;
    height: 12px;
    text-align:center;
    font-size: 9px;
    border: 2px solid #5A2800;
    border-radius: 3px;
    line-height: 12px;
    transition: all ease .3s;
    margin-right: 6px;
}
.checkbox input:checked + label::before{
    font-weight: 900;
    color: #f1e0c5;
    background: #5A2800;
    transition: all ease .3s;
}
.checkbox input:active + label::before{
    outline-color: #613906a8;
    transition: all ease .3s;
}

/* player spotlight */
.spotlight-table{
    width: 100%;
    border-spacing: 5px;
    border-collapse: separate;
}
.spotlight-table .toptd-container, .topguilds-container{
    display: flex; 
    gap: 5px;
    justify-content: space-evenly;
}

.toptd{
    width: 100%;
    text-align: center;
    background: url(img/paper-only-lt.png);
    vertical-align: top;
    box-shadow: 0 0 50px #6e5324a8 inset, 2px 2px 3px #00000085;
    position: relative;
    border: 4px solid;
    border-image: url(img/content//border2.png) 4 repeat;
    border-image-width: 4px;
    transition: box-shadow ease .2s;
    border-radius: 3px;

    display: inline-flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}
.toptd .title{
    color: #fffcf3;
    font-family: 'Martel';
    font-weight: normal;
    font-size: 14px;
    text-shadow: var(--text-shadow-outline);
    white-space: nowrap;
    margin-top: 5px;
}
.toptd .imgtop{
    width: 84px;
    height: 84px;
    border-radius: 999px;
    position: relative;
    display: block;
    margin: 0 auto 7px auto;
    background: radial-gradient(#705936, #d3c0a2);
    box-shadow: 0 0 9px #7d3600;
    cursor: pointer;
    transition: transform ease .2s, box-shadow ease .3s, color ease .3s;
}
		.toptd .hpbar{
			position: absolute;
    display: block;
    width: 27px;
    height: 4px;
    border: 1px solid #000;
    background: #000;
    left: calc(50% - 13px);
    bottom: 0;
		}
		.toptd .hpbar div{
			height: 2px;
			background: #00bb00;
		}
			.toptd .nick{
			color: #00bb00;
    font-weight: bold;
    font-size: 11px;
    text-shadow: var(--text-shadow-outline-tibia);
    font-family: verdana;
    bottom: 6px;
    position: absolute;
    width: 100px;
    left: calc(50% - 50px);
    word-break: break-all;

    transition: color ease .1s;
		}
			
/*
.toptd .imgtop::after{
    content: "";
    width: 84px;
    height: 84px;
    display: block;
    background-image: url(img/circle-100px.png);
    background-size:     cover;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 auto;
    border-radius: 999px;
}*/
.toptd .imgtop .outfit{
    position: absolute;
    width: 64px;
    height: 64px;
    bottom: 0px;
    right: 18px;
    
    z-index: 2;
}
.toptd .toptext:hover .imgtop .outfit{

}
.toptd .toptext:hover .imgtop .nick{
    color: #5bff5b;
}
.toptd .toptext:hover .charname{
    font-size: 16px;
    color: yellow;
}
.toptd .toptext{
    text-decoration: none !important;
    display: block;
    transition: color ease .2s;
        width: 100%;
}
.toptd .badge{
    width: 100%;
    display: block;
    height: 25px;
    text-align: center;
    background: linear-gradient(transparent, #35110094);
    line-height: 20px;
    border-radius: 0;
    text-shadow: 0 1px 2px #000;
}
.topguild{
    width: 33%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.guildrankimg{
    width: 96px;
    height: 96px;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 5px auto;

    transition: all ease .2s;
}
.guildrankimg img{
    z-index: 2 !important;
    border-radius: 999px;
}
.guildrankimg .kills{
    position: absolute;
    bottom: 12px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0px 3px #000;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 4;
}
.guildrankimg::after{
    content: "";
    border-radius: 999px;
    width: 64px;
    height: 64px;
    background: radial-gradient(#ffd4a3, #000000);
    position: absolute;
    display: block;
    z-index: 1 !important;
}
.guildrankimg::before{
    content: "";
    width: 96px;
    height: 96px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3 !important;
}
.topguild .text{
    margin-bottom: 5px;
}
.guildrankimg.rank1::before{background-image: url(../../images/guildranks/1.png);}
.guildrankimg.rank2::before{background-image: url(../../images/guildranks/2.png);}
.guildrankimg.rank3::before{background-image: url(../../images/guildranks/3.png);}
.toptd .text{
    height: 17px;
}
.toptd .toptext:hover .guildrankimg{
    transform: translateY(-3px);
    filter: drop-shadow(0 3px 9px #7d3600);
}
.toptd .topguildrank{
    font-family: sans-serif;
    text-shadow: none;
    font-weight: 900;
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
    box-shadow: 0 1px 6px #0005, 0 1px 0 #fff5 inset;
    color: #fffceee7;
}
.toptd .topguildrank .txt{
    color: transparent;
    background-clip: text;
}
.toptd .topguildrank.rank1{
    background: linear-gradient(#ffe256, #977806);
    border-bottom: 1px solid #493a03;
}
.toptd .topguildrank.rank1 .txt{
    background-image: linear-gradient(360deg, rgb(104, 93, 29), rgb(86 74 0));
    filter: drop-shadow(0 1px 0 rgba(255, 238, 144, 0.219)) drop-shadow(0 -1px 0 rgba(46, 20, 5, 0.185));
}
.toptd .topguildrank.rank2{
    background: linear-gradient(#d3d3d3, #88989b);
    border-bottom: 1px solid #3f3f3f;
}
.toptd .topguildrank.rank2 .txt{
    background-image: linear-gradient(360deg, rgb(97, 97, 97), rgb(37, 37, 37));
    filter: drop-shadow(0 1px 0 rgba(158, 158, 158, 0.76)) drop-shadow(0 -1px 0 rgba(46, 20, 5, 0.185));
}
.toptd .topguildrank.rank3{
    background: linear-gradient(#f3ca95, #957645);
    border-bottom: 1px solid #271500;
}
.toptd .topguildrank.rank3 .txt{
    background-image: linear-gradient(360deg, rgb(134, 96, 24), rgb(86 74 0));
    filter: drop-shadow(0 1px 0 rgba(255, 220, 144, 0.219)) drop-shadow(0 -1px 0 rgba(46, 20, 5, 0.185));
}
.toptd .topguildrank{}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.text-bold{
    font-weight: bold;
}
.wiki-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.wiki-container .card{
    background: linear-gradient(#dfcdb4, #D4C0A1);
    border: 1px solid #faf0d7;
    outline: 1px solid #5F4D41;
    padding: 20px;
    box-shadow: 3px 3px 3px #7d3600;
    transition: transform 0.3s 
    ease, box-shadow 0.3s 
    ease, border-color 0.3s 
    ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    text-decoration: none !important;
    overflow: hidden;
}
.wiki-container .card .header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
.wiki-container .card .fa{
    font-size: 90px;
    opacity: 0.07;
    position: absolute;
    top: calc(50% - 45px);
    right: 0;
    color: #5f4d41;
    z-index: 0;
    transition: all ease .3s;
}
.wiki-container .card .header .title {
    font-size: 16px;
    font-weight: 600;
    z-index: 1;
    transition: color ease .2s;
}
.wiki-container .card .desc {
    font-size: 13px;
    color: #5f4d41;
    font-weight: 500;
    z-index: 1;
    text-shadow: 0 0 5px #d8c5a8, 0 0 4px #d8c5a8, 0 0 3px #d8c5a8, 0 0 2px #d8c5a8, 0 0 1px #d8c5a8, 0 0 5px #d8c5a8, 0 0 5px #d8c5a8;
}
.wiki-container .card:hover{
    box-shadow: 3px 6px 5px #7d3600, 0 0 50px #ffde8aa6 inset;
    transform: translateY(-3px);
    border-color: #ffffff;
}
.wiki-container .card:hover .fa{
    transform: scale(1.1);
}
.wiki-container .card:hover .header .title{
    color: #6e5d11;
}
.shop-category-header{
    height: 20px;
    padding: 0;
    position: relative;
    margin-top: 15px;
}
.shop-category-header .shop-categories{
    position: absolute;
    bottom: 0;
}
.shop-category-header .shop-categories .shop-category-box{
    border-width: 4px 4px 0 4px;
    border-style: solid;
    border-image-source: url(img/content/border2.png);
    border-image-slice: 4;
    border-image-repeat: repeat;
    display: flex;
    background: linear-gradient(#7f888b, #322822);
    padding: 3px 10px;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0px 6px #000000, 0 1px 2px #a1b4b9b0 inset;
    margin-right: 4px;
    float: left;
    text-shadow: 0 1px 3px #000;
    mask-image: linear-gradient(#000 79%, transparent 100%);
    color: #fffed8;
    transition: color 
ease .2s, transform 
ease .2s, filter 
ease .2s;
    text-decoration: none !important;
    font-weight: normal;
    /* line-height: 1px; */
    align-items: center;
}
.shop-category-header .shop-categories .shop-category-box:hover{
    color: #ffefc5;
    cursor: pointer;
    transform: translateY(-2px);
    filter: brightness(1.2);
}
.shop-category-header .shop-categories .shop-category-box.active{
    background: linear-gradient(#f4ca00, #5d4200);
    transform: translateY(-2px);
    font-weight: bold;
    color: #fff1d2;
}
.exptable-container{
	display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 5px;
}