html,
body,
div.content {
 background-color: #f7f7f7;
 color: #333;
 margin: 0;
 font-family: 'BentonSans', sans-serif;
}

.background-radial-gradient {
 background-color: hsl(218, 41%, 15%);
 background-image: radial-gradient(650px circle at 0% 0%, hsl(218, 41%, 35%) 15%, hsl(218, 41%, 30%) 35%, hsl(218, 41%, 20%) 75%, hsl(218, 41%, 19%) 80%, transparent 100%), radial-gradient(1250px circle at 100% 100%, hsl(218, 41%, 45%) 15%, hsl(218, 41%, 30%) 35%, hsl(218, 41%, 20%) 75%, hsl(218, 41%, 19%) 80%, transparent 100%);
}

.bg-glass {
 background-color: hsla(0, 0%, 100%, 0.9) !important;
 backdrop-filter: saturate(200%) blur(25px);
}

.content {
 width: 100%;
 height: 100%;
}

a {
 color: #006BA6;
}

a:visited {
 color: #FCFCFF;
}

#bottom-half-div {
 background-color: none;
 overflow-y: hidden;
 width: 100%;
}

.calc-table {
 width: 100%;
 background-color: none;
}

table {
 width: 100%;
}

#calc-display-div {
 min-height: 55px;
 background-color: #fcfcff;
 color: #333;
 text-align: center;
 font-family: 'BentonSans', sans-serif;
 vertical-align: middle;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border: 2px solid #e3e3e3;
}

#calc-display-x {
 min-height: 55px;
 font-size: 40px;
 font-weight: bold;
 text-align: center;
 vertical-align: middle;
}

#total-calc-display-x {
 min-height: 55px;
 font-size: 40px;
 font-weight: bold;
 text-align: center;
 vertical-align: middle;
}

.calc-icon-cell {
 background-color: #CCCCCC;
 width: 40px;
 padding-left: 20px;
 padding-right: 20px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-bottomleft: 10px;
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
}

.clear-icon-cell {
 width: 40px;
 padding-right: 20px;
 padding-left: 20px;
 -webkit-border-top-right-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-bottomright: 10px;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
}

.calc-display-table {
 min-height: 55px;
 vertical-align: middle;
 width: 100%;
}

.tip-percent {
 color: #fcfcff;
}

.calc-table {
 margin: 0;
}

.results-table {
 margin: 0;
 overflow-y: hidden;
}

.calc-row {
 display: flex;
}

.calc-button-cell {
 padding: 3px;
 width: 33.33%;
 text-align: center;
}

.calc-button-x {
 padding: 0;
 width: calc(100% - 10px);
 height: 70px;
 line-height: 70px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 font-size: 40px;
 background-color: #fcfcff;
 color: #333333;
 margin: 5px;
 border: 2px solid #e3e3e3;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}



.accent-blue {
 background: #006BA6;
}

.accent-blue-gradient {
 background: rgb(0, 107, 166);
 background: -moz-linear-gradient(90deg, rgba(0, 107, 166, 1) 10%, rgba(92, 196, 255, 1) 100%);
 background: -webkit-linear-gradient(90deg, rgba(0, 107, 166, 1) 10%, rgba(92, 196, 255, 1) 100%);
 background: linear-gradient(90deg, rgba(0, 107, 166, 1) 10%, rgba(92, 196, 255, 1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#006ba6", endColorstr="#5cc4ff", GradientType=1);
}

.calc-button-cell {
 padding: 3px;
 width: 33.33%;
 height: 70px;
}

.calc-button {
 border: 1px solid #999;
 border-radius: 10px;
 text-align: center;
 margin: 0;
 height: 70px;
}

.calc-result > td {
 font-size: 23px;
 text-align: center;
 border: 2px solid #fcfcff;
 width: 33.33%;
}

.calc-results-header > th {
 background-color: #ccc;
 font-size: 20px;
 width: 33.33%;
 text-align: center;
 border: 2px solid #fcfcff;
}

.calc-results-scroll {
 display: flex;
 flex-direction: column;
 height: 100%;
}

.calc-results-scroll tbody {
 display: block;
 width: 100%;
}

.calc-results-scroll tr.calc-result {
 display: flex;
 width: 100%;
 table-layout: fixed;
}

.calc-results-scroll tr.calc-result td {
 flex-grow: 1;
 flex-basis: 0;
}

.results-div {
 height: 100%;
 max-height: 100%;
}

.results-div {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: center;
 align-content: center;
}

.calc-display-row {
 height: 40px;
 min-height: 40px;
}

.results-row {}

.results-item {
 width: 33.33%;
 background-color: #f2f2f2;
}

.xresults-div {
 margin-left: auto;
 margin-right: auto;
 width: 100%;
}

.results-table-header {
 min-width: 300px;
 width: 100%;
}

.tip-row {
 min-width: 300px;
 width: 100%;
}

.tip-buttons {}

.results-table-scroll {
 min-width: 300px;
 width: 100%;
 overflow-x: hidden;
}

.results-table-scroll > tfoot > td {
 background-color: #000;
}

.logo-header {
 padding-top: 30px;
 margin-bottom: -30px;
}

.logo-header > h1 {
 color: #FCFCFF;
}

#placeholder-row {
 display: none;
 text-align: center;
 padding: 30px;
 color: #333;
 font-size: 20px;
}

.arrow {
 padding-top: 40px;
 margin-bottom: -90px;
}

/* Mobile Styles */
@media (max-width: 992px) {
 #top-half-div:not(.show-calculator) .calc-button-x {
  display: none;
 }
}

/* Desktop Styles */
@media (min-width: 992px) {
 .desktop-hide {
  display: none;
 }
}

/* Styles for dark mode */
@media (prefers-color-scheme: dark) {

 html,
 body,
 div.content {
  background-color: #333;
  color: #f7f7f7;
 }

 #calc-display-div {
  background-color: #444;
  color: #f7f7f7;
 }

 .calc-icon-cell {
  background-color: #666;
 }

 .clear-icon-cell {
  background-color: #666;
 }

 .calc-button-x {
  background-color: #444;
  color: #f7f7f7;
 }

 .calc-result > td {
  background-color: #333;
  border: 2px solid #fcfcff;
 }

 .calc-results-header > th {
  background-color: #666;
  border: 2px solid #fcfcff;
 }

 .results-item {
  background-color: #222;
 }

 #placeholder-row {
  color: #333;
 }

 .bg-glass {
  background-color: #2d2d2d !important;
 }

}