html {
    min-height: 100%;
    margin-bottom: 1px;
}

body {
    height: 100%;
    background: #000;
}

a {
    background-color: #000;
    text-decoration: none;
    color: #ff0;
}

h1 {
    font-family: verdana, arial, sans-serif;
    font-size: 24pt;
    color: #ff0;
    font-weight: 700;
}

tr.resultLineHover {
    background: #463E41;
}

tr.resultWithdrawl {
    background: #111;
}

td {
    font-family: verdana, arial, sans-serif;
    font-size: 10pt;
    color: #ff0;
    border-color: white;
}

td.minitable {
    font-size: 10pt;
    color: #fff;
    font-family: verdana, arial, 'sans serif';
    text-align: center;
}

td.date {
    font-size: 12pt;
    color: #ff0;
}

td.copyright {
    font-size: 7pt;
    color: #ff0;
    border-left: none;
}

td.list {
    font-size: 10pt;
    color: #fff;
}

td.handicap {
    font-size: 10pt;
    color: #fff;
    text-align: center;
}

td.handicap-header {
    font-size: 10pt;
    color: #ff0;
    text-align: center;
}

td.col_header {
    font-size: 10pt;
    text-align: center;
    color: #ff0;
}

td.month {
    font-size: 14pt;
    color: #ff0;
}

td.small,
td.team {
    font-size: 10pt;
    color: #fff;
    text-align: center;
}

td.tabletext,
td.text {
    font-size: 10pt;
    color: #ff0;
    text-align: center;
}

td.moveleft {
    text-align: left;
}

td.moveright {
    text-align: right;
}

td.left {
    font-size: 12pt;
    text-align: left;
    padding: 0 2px;
}

td.center {
    font-size: 12pt;
    text-align: center;
}

td.right {
    font-size: 12pt;
    text-align: right;
}

td.home {
    text-align: right;
    padding-right: 5px;
}

td.away {
    text-align: left;
    padding-left: 5px;
}

td.forfeit,
td.postponed {
    FONT-SIZE: 10pt;
    color: red;
    font-weight: 700;
    text-transform: uppercase;
}

td.present {
    color: #0F0;
    text-align: center;
}

td.awol,
td.tba {
    color: red;
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
}

td.title {
    color: #ff0;
    text-align: center;
}

td.tdheader {
    border-bottom: solid 1px #fff;
    padding: 15px 5px 0;
    text-align: center;
    height: 50px;
}

td.tdleft {
    border-right: solid 1px #fff;
    padding: 5px;
    width: 140px;
}

td.tdmain {
    padding: 5px 15px;
    height: 100%;
}

td.tdright {
    border-left: solid 1px #fff;
    padding: 5px 0 5px 5px;
    width: 140px;
}

td.dateline {
    width: 100%;
    padding: 2px 5px;
    border: 1px solid #fff;
    background-color: navy;
}

p {
    font-family: verdana, arial, sans-serif;
    font-size: small;
    color: #fff;
}

p.header {
    font-size: 12pt;
    color: #0ff;
}

p.text {
    font-size: 10pt;
    color: #fff;
    padding: 0 10px;
}

p.pool {
    font-size: 12pt;
    color: #ff0;
    text-align: left;
    font-weight: 600;
}

p.bright {
    font-size: 10pt;
    color: #ff0;
    text-align: left;
    font-weight: 600;
    padding: 0 20px;
}

P.col_header {
    color: #0FF;
}

p.copyright {
    font-size: 7pt;
    color: #ff0;
}

p.main-header {
    font-size: 16pt;
    color: #ff0;
}

.results {
    font-size: 12pt;
    color: #ff0;
}

.matchno {
    font-size: 10pt;
    color: #0f0;
}

p.header2 {
    font-size: 18pt;
    color: #ff0;
    text-align: center;
}

p.subheader2 {
    font-size: 10pt;
    color: #ff0;
    text-align: center;
}

li,
ol,
ul {
    font-size: 10pt;
    color: #fff;
}

a.button:link {
    background-color: maroon;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    font-weight: 700;
}

a.button:active {
    font-size: 10pt;
}

a.button:visited {
    background-color: maroon;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    font-weight: 700;
}

a.button:hover {
    background-color: #cbcb00;
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    font-weight: 700;
}

a.button:active {
    background-color: gray;
    color: #ff0;
    text-decoration: none;
    font-weight: 700;
}

.match {
    color: #0f0;
}

.postponed {
    color: red;
    font-weight: 700;
    text-transform: uppercase;
}

.latest {
    COLOR: red;
}

.index-header {
    font-size: x-large;
    text-align: center;
}

.forfeit {
    font-size: 10pt;
    color: red;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    padding: 0 5px;
}

td.lhs-title {
    font-size: medium;
    text-align: center;
}

p.agm-header {
    font-size: large;
    color: #0ff;
}

p.agm-text {
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
}

p.agm-text-new {
    font-size: 14px;
    color: red;
    padding: 0 10px;
}

p.agm-main-header {
    font-size: 16pt;
    color: #ff0;
}

li.agm,
ol.agm {
    font-size: 14px;
    color: #fff;
}

li.agm-li-new {
    font-size: 14px;
    color: red;
}

ul.agm {
    font-size: medium;
    color: #fff;
}

li.agm {
    padding-bottom: 8px;
}

p.fix_sub_header {
    font-size: 12pt;
    color: #ff0;
    text-align: center;
}

a.fix_previous {
    text-decoration: underline;
}

a.fix_previous:active,
a.fix_previous:link,
a.fix_previous:visited {
    font-size: 10pt;
    color: #ff0;
    text-decoration: underline;
}

a.fix_previous:hover {
    font-size: 10pt;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: underline;
}

a.fix_next {
    text-decoration: underline;
}

a.fix_next:active,
a.fix_next:link,
a.fix_next:visited {
    font-size: 10pt;
    color: #ff0;
    text-decoration: underline;
}

a.fix_next:hover {
    font-size: 10pt;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    text-decoration: underline;
}

td.fix_col_header {
    font-size: 10pt;
    text-align: center;
    color: #ff0;
}

td.fix_month {
    font-size: 10pt;
    color: #ff0;
    padding: 5px 0 5px 10px;
    font-weight: 700;
}

td.fix_date {
    font-size: 10pt;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.fix_dd {
    font-size: 10pt;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.fix_suffix {
    font-size: 8pt;
    color: #fff;
    text-align: center;
    vertical-align: top;
}

td.fix_time {
    font-size: 10pt;
    color: #fff;
    text-align: center;
    padding: 0 4px;
}

td.fix_match {
    font-size: 10pt;
    color: #fff;
    text-align: center;
}

td.fix_matchWarning {
    font-size: 10pt;
    color: #000;
    text-align: center;
    background-color: red;
    font-weight: 700;
}

td.fix_home {
    font-size: 10pt;
    color: #fff;
    text-align: right;
    padding: 0 5px 0 0;
}

td.fix_home1 {
    font-size: 10pt;
    color: white;
    text-align: right;
    padding: 0 5px 0 0;
    text-transform: uppercase;
}

td.fix_home_YMCA {
    font-size: 10pt;
    color: #fff;
    text-align: right;
    padding: 0 5px 0 0;
    background-color: red;
}

td.result {
    font-size: 10pt;
    color: #ff0;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    padding: 0 5px;
}

td.result1 {
    font-size: 10pt;
    color: red;
    text-align: center;
    white-space: nowrap;
    font-weight: 700;
    padding: 0 5px;
}

td.fix_away {
    font-size: 10pt;
    color: #fff;
    text-align: left;
    padding: 0 0 0 5px;
}

td.fix_away1 {
    font-size: 10pt;
    color: white;
    text-align: left;
    padding: 0 0 0 5px;
    text-transform: uppercase;
}

td.fix_away_YMCA {
    font-size: 10pt;
    color: #fff;
    text-align: left;
    padding: 0 0 0 5px;
    background-color: red;
}

td.fix_referee0 {
    font-size: 10pt;
    color: #fff;
    text-align: center;
}

td.fix_referee1 {
    font-size: 10pt;
    color: #0f0;
    text-align: center;
}

td.fix_referee2 {
    font-size: 10pt;
    color: red;
    text-align: center;
    text-transform: uppercase;
}

td.fix_referee0_YMCA {
    font-size: 10pt;
    color: #fff;
    text-align: center;
    background-color: red;
}

a.fixtures0 {
    text-decoration: none;
}

a.fixtures0:active,
a.fixtures0:link,
a.fixtures0:visited {
    font-size: 10pt;
    text-decoration: none;
    color: #fff;
}

a.fixtures0:hover {
    font-size: 10pt;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

a.fixtures1 {
    text-decoration: none;
}

a.fixtures1:active,
a.fixtures1:link,
a.fixtures1:visited {
    font-size: 10pt;
    text-decoration: none;
    color: #0f0;
}

a.fixtures1:hover {
    font-size: 10pt;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

a.fixtures2 {
    text-decoration: none;
}

a.fixtures2:active,
a.fixtures2:link,
a.fixtures2:visited {
    font-size: 10pt;
    text-decoration: none;
    color: red;
}

a.fixtures2:hover {
    font-size: 10pt;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

a.fixturesX {
    font-size: 10pt;
    color: #0ff;
    text-decoration: none;
}

a.fixturesX:active,
a.fixturesX:link,
a.fixturesX:visited {
    font-size: 10pt;
    color: #0ff;
    text-decoration: none;
    font-weight: 700;
}

a.fixturesX:hover {
    font-size: 10pt;
    color: #0ff;
    text-decoration: underline;
    font-weight: 700;
    font-style: italic;
}

.fixturesX {
    color: #0ff;
    font-size: 10pt;
    padding-top: 10px;
}

a.matchLink:active,
a.matchLink:hover,
a.matchLink:link,
a.matchLink:visited {
    font-size: 10pt;
    color: #fff;
    text-decoration: none;
}

p.tab_sub_header {
    font-size: 12pt;
    color: #ff0;
    text-align: center;
}

td.tab_col_header {
    font-size: 10pt;
    text-align: center;
    color: #ff0;
}

td.tab_position {
    font-size: 10pt;
    text-align: right;
    color: #ff0;
    padding-right: 22px;
    line-height: 20px;
}

td.tab_team {
    font-size: 10pt;
    text-align: right;
    color: #ff0;
    padding-right: 20px;
    padding-left: 20px;
    white-space: nowrap;
}

td.tab_lost,
td.tab_played,
td.tab_won {
    font-size: 10pt;
    text-align: right;
    color: #fff;
    padding-right: 20px;
}

td.tab_against,
td.tab_for {
    font-size: 10pt;
    text-align: right;
    color: #fff;
    padding-right: 10px;
}

td.tab_diff {
    font-size: 10pt;
    text-align: right;
    color: #fff;
    padding-right: 20px;
}

td.tab_points {
    font-size: 10pt;
    text-align: right;
    color: #fff;
    padding-right: 15px;
}

td.tab_trend {
    font-size: 10pt;
    text-align: left;
    color: #fff;
}

.tables {
    color: #fff;
    text-decoration: none;
}

.tab_dd {
    font-size: 11pt;
    color: #ff0;
    text-align: center;
    vertical-align: middle;
}

.tab_suffix {
    font-size: 5pt;
    color: red;
    vertical-align: top;
    padding-left: 5px;
}

.tab_suffix2 {
    font-size: 5pt;
    color: #000;
    vertical-align: top;
    padding-left: 5px;
}

.tab_info {
    font-size: 10pt;
    color: #fff;
    vertical-align: top;
    padding-left: 5px;
    text-align: center;
}

a.tables {
    color: #fff;
    text-decoration: none;
}

a.tables:active,
a.tables:link,
a.tables:visited {
    color: #fff;
    font-size: 10pt;
    text-decoration: none;
    font-weight: 700;
}

a.tables:hover {
    color: #fff;
    font-size: 10pt;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

a.fixtures {
    text-decoration: none;
}

a.fixtures:active,
a.fixtures:link,
a.fixtures:visited {
    font-size: 10pt;
    text-decoration: none;
    color: #fff;
}

a.fixtures:hover {
    font-size: 10pt;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
}

p.teamlistheader {
    font-size: 14pt;
    color: #ff0;
    font-weight: 700;
    text-align: center;
}

td.teamlist {
    font-size: 10pt;
    color: #ff0;
    padding: 5px 10px;
    font-weight: 700;
    text-align: center;
}

a.teamlist {
    color: #69c;
    text-decoration: none;
}

a.teamlist:active,
a.teamlist:link,
a.teamlist:visited {
    color: #ff0;
    font-size: 10pt;
    text-decoration: none;
    font-weight: 700;
}

a.teamlist:hover {
    color: #ff0;
    font-size: 10pt;
    text-decoration: underline;
    font-weight: 700;
    font-style: italic;
}

a.teamdetails {
    color: #69c;
    text-decoration: none;
}

a.teamdetails:link {
    color: #ff0;
    font-size: 10pt;
    text-decoration: none;
    font-weight: 700;
}

a.teamdetails:active,
a.teamdetails:visited {
    color: #ff0;
    font-size: 10pt;
    text-decoration: none;
    font-weight: 700;
}

a.teamdetails:hover {
    color: #ff0;
    font-size: 10pt;
    text-decoration: underline;
    font-weight: 700;
    font-style: italic;
}

.dlTable {
    width: 100%;
    border: 0 solid red;
}

.dlTD {
    text-align: center;
    resize: both;
    overflow: auto;
}

.dlHeader {
    font-size: 16px;
    color: #0ff;
}

.dlSubHeader {
    font-size: 12px;
    color: #0ff;
}

.dlDivider {
    margin: 20px 0 0;
}

p.past_title {
    font-size: 20pt;
    color: #ff0;
    text-align: center;
    vertical-align: middle;
}

p.past_sub_title {
    font-size: 12pt;
    color: #ff0;
    text-align: center;
    vertical-align: middle;
}

td.past_text {
    font-size: 12pt;
    color: #fff;
    text-align: center;
    vertical-align: top;
    padding: 5px;
}

td.past_header {
    font-size: 12pt;
    color: #ff0;
    text-align: center;
    padding: 5px;
}

td.past_year {
    font-size: 12pt;
    color: #ff0;
    text-align: center;
    padding: 5px;
    white-space: nowrap;
}

a.past {
    font-size: 12pt;
    color: #ff0;
    text-decoration: none;
}

a.past:active,
a.past:link,
a.past:visited {
    font-size: 12pt;
    color: #ff0;
    text-decoration: none;
    font-weight: 700;
}

a.past:hover {
    font-size: 12pt;
    color: #ff0;
    text-decoration: underline;
    font-weight: 700;
    font-style: italic;
}

.YMCA {
    background-color: red;
}

.blackonblack {
    color: #000;
}

.month {
    font-size: 12pt;
    color: #0ff;
}

td.monthSelected {
    font-size: 12pt;
    font-style: italic;
    color: #000;
    background-color: #0ff;
    font-weight: 700;
}

td.course-h1 {
    font-size: 18pt;
    color: #ff0;
    text-decoration: none;
    font-weight: 700;
    height: 70px;
    text-align: center;
}

td.course-header {
    font-size: 12pt;
    color: #ff0;
    text-decoration: none;
    font-weight: 700;
    height: 50px;
    text-align: center;
}

td.course-text {
    font-size: 10pt;
    color: #ff0;
    text-decoration: none;
    font-weight: 700;
    height: 30px;
    text-align: center;
}

td.course-text-bold {
    font-size: 10pt;
    color: #ff0;
    text-decoration: none;
    font-weight: 900;
    height: 30px;
    text-align: center;
}

td.course-archive,
td.course-current {
    font-size: 12pt;
    color: #ff0;
    text-decoration: none;
    font-weight: 900;
    height: 30px;
    text-align: left;
    padding: 10px 0px 10px 10px;
}

#gbba {
    display: block;
    position: relative;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    width: 60%;
    min-height: 70px;
    font-size: x-large;
}

#charity {
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 2px;
    left: 30px;
}

#asat {
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 55px;
    left: 20px;
}

#timezone {
    padding: 0px;
    margin: 0px;
    position: absolute;
    top: 15px;
    right: 20px;
}

.nav-button {
    background-color: #840000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Verdana;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 15px;
    text-decoration: none;
    margin: 3px;
    width: 90;
}

.nav-button:hover {
    background-color: #c6c600;
}

.nav-button:active {
    position: relative;
    top: 1px;
}

.nav-button-fit {
    background-color: #840000;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Verdana;
    font-size: 16px;
    font-weight: bold;
    padding: 4px 15px;
    text-decoration: none;
    margin: 3px;
}

.nav-button-fit:hover {
    background-color: #c6c600;
}

.nav-button-fit:active {
    position: relative;
    top: 1px;
}

.smaller {
    font-size: 14px;
}

p.GBBA_Header,
li.GBBA_Header,
div.GBBA_Header,
a.GBBA_Header {
    margin-top: 1cm;
    margin-right: 0cm;
    margin-left: 0cm;
    text-indent: 18.0pt;
    font-size: 12.0pt;
    font-family: "Verdana", sans-serif;
    color: #8EAADB;
    font-weight: bold;
}

.constContainer {
    margin: 0;
    padding: 0
}

.ConstTitle {
    text-align: center;
    font-size: 18.0pt;
    font-family: "Verdana", sans-serif;
    color: yellow;
    font-weight: bold;
}

.constHeader {
    text-indent: 18.0pt;
    font-size: 12.0pt;
    font-family: "Verdana", sans-serif;
    color: #8EAADB;
    font-weight: bold;
}

.ConstText {
    padding-left: 36.0pt;
    font-size: 10.0pt;
    font-family: "Verdana", sans-serif;
    color: #fff;
}

.ConstOL {
    padding-left: 50pt;
    font-size: 10.0pt;
    font-family: "Verdana", sans-serif;
    color: #fff;
    list-style-type: lower-alpha;
}

.ConstOL2 {
    padding-left: 50pt;
    font-size: 10.0pt;
    font-family: "Verdana", sans-serif;
    color: #fff;
    list-style-type: lower-roman;
}

.ConstOL3 {
    padding-left: 50pt;
    font-size: 10.0pt;
    font-family: "Verdana", sans-serif;
    color: #fff;
    list-style-type: disc;
}

.ConstLI {
    font-family: "Verdana", sans-serif;
    margin-left: 5pt;
    font-size: 10.0pt;
    color: #fff;
}

ol.ConstOL {
    counter-reset: list;
}

ol.ConstOL>li.ConstLI {
    list-style: none;
    position: relative;
}

ol.ConstOL>li.ConstLI:before {
    counter-increment: list;
    content: counter(list, lower-alpha) ") ";
    position: absolute;
    left: -1.4em;
}

.circle {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    font-size: 10px;
    color: #fff;
    text-align: center;
    padding: 2%;
}

.win {
    background-color: green;
}

.loss {
    background-color: red;
}

#topButton {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button 20px from the bottom of the page */
    left: 30px;
    /* Place the button 30px from the left */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    background-color: #666;
    /* Set a background color */
    color: black;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 10px;
    /* Some padding */
    border-radius: 10px;
    /* Rounded corners */
    font-size: 16px;
    /* Increase font size */
}

#topButton:hover {
    background-color: #999;
    /* Add a dark-grey background on hover */
}

.dlImgage {
    max-width: 300px;
    max-height: auto;
}

.responsive {
    max-width: 70%;
    width: auto;
}

thead,
tfoot {
    background-color: #3f87a6;
    color: #fff;
}

.marquee {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: inherit;
    color: yellow;
}

.marquee p {
    -moz-animation: marquee 15s linear infinite;
    -webkit-animation: marquee 15s linear infinite;
    animation: marquee 15s linear infinite;
}

@-moz-keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@-webkit-keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%)
    }
    100% {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

table.tableizer-table {
    border: 0px solid #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    width: 80%;
}

.tableizer-table th {
    background-color: #104E8B;
    color: #fff;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
}

.tableizer-table td {
    padding-left: 14px;
    padding-right: 14px;
    margin: 3px;
    border: 0px solid #f00;
}

table.inner-table {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    width: 100%;
    border: 1px solid #ccc;
}

.tableizer-firstrow {
    font-size: 30px;
}

.hilight {
    background-color: #222;
}

.normal {
    background-color: #555;
}

.name {
    text-align: right;
}

.number {
    text-align: center;
    background-color: inherit;
}

.email {
    text-align: left;
    background-color: inherit;
}

.info {
    text-align: center;
    font-size: larger;
    background-color: inherit;
}

.alert {
    text-align: center;
    font-size: larger;
    font-weight: bold;
    color: #900;
    background-color: inherit;
}

.lastupdated {
    float: right;
    background-color: inherit;
}

.table-a {
    background-color: inherit;
}

.card_container {
    max-width: 200px;
    display: flex;
    gap: 50px;
}

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 5px;
    border-radius: 5px 5px 0 0;
}


/* 5px rounded corners */

img {
    border-radius: 5px 5px 0 0;
}


.cup_bracket {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
}
.round {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.participants {
    border: 3px solid gray;
    border-radius: 10px;
    padding: 15px;
    margin: 15px;
    text-align: center;
    width: 200px;
    background: black;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
}
.label {
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .cup_bracket {
        flex-direction: column;
        align-items: center;
    }
    .round {
        width: 100%;
    }
    .participants {
        width: 90%;
        max-width: 300px;
    }
}