@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700|Roboto:400,900|ZCOOL+QingKe+HuangYou&display=swap);

*,
body,
html {
    box-sizing: border-box
}

body,
html {
    font-family: Roboto Condensed, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0
}

ol,
p,
ul {
    font-family: Roboto, sans-serif;
    font-size: 1.25rem
}

ol p,
ul p {
    font-size: .8em
}


@media screen and (max-width:700px) {
    header .row .col:nth-of-type(2) {
        order: 2
    }

    header .row .col:last-child {
        order: 1
    }
}

.logo {
    height: 3.5rem;
    width: auto
}

.donate {
    margin: .5rem;
    max-height: 150px
}

.social-icon {
    margin: .25em;
    width: 2.5rem
}

.tell-your-friends {
    text-align: center
}

.tell-your-friends>div {
    display: inline-block;
    vertical-align: middle
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.8rem
}

h3 {
    font-size: 1.6rem
}

h4 {
    font-size: 1.4rem
}

h5 {
    font-size: 1.2rem
}

h6 {
    font-size: 1rem
}

a {
    color: #00487b;
    text-decoration: none;
    transition: all .25s ease
}

a:hover {
    color: #222
}

.light-links .button {
    border: 2px solid #1396d3;
    padding: .25em 1em
}

.light-links a {
    color: #1396d3
}

.light-links a:hover,
button {
    color: #fff
}

button {
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 0;
    font-size: 1rem;
    margin: .25rem;
    padding: .55rem 1rem;
    transition: all .25s ease;
    white-space: nowrap
}

button:hover {
    background-color: #f8f8f8;
    color: #00487b;
    cursor: pointer
}

button[disabled] {
    cursor: not-allowed;
    opacity: .25
}

button[disabled]:hover {
    background-color: transparent;
    color: #fff
}

button.textOnly {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0
}

button.textOnly:hover {
    color: #00487b
}

button.altBtn {
    border-color: #00487b;
    color: #00487b
}

button.altBtn:hover {
    background-color: #00487b;
    color: #fff
}

button.altBtn[disabled]:hover {
    border-color: #00487b;
    color: #00487b
}

button.primaryBtn {
    background-color: #00487b;
    border-color: #00487b;
    color: #fff
}

button.primaryBtn:hover {
    background-color: #efefef;
    color: #00487b
}

button.primaryBtn[disabled]:hover {
    background-color: #00487b;
    border-color: #00487b;
    color: #fff
}

.goog-te-gadget-simple {
    border: 0 !important;
    font-family: Roboto, sans-serif
}

.goog-te-gadget-simple .goog-te-menu-value span:first-child {
    font-family: Roboto, sans-serif;
    font-size: .85rem;
    line-height: 2.5
}

.goog-te-gadget-simple .goog-te-menu-value span:last-child {
    color: #3c3c3c !important;
    font-size: 0
}

.goog-te-gadget-simple .goog-te-menu-value span:last-child:before {
    content: "〈";
    display: inline-block;
    font-size: 1.5rem;
    padding-right: 1rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

span.version {
    color: #aaa;
    font-size: 14px;
    margin: 0 10px
}

span.tag,
span.version {
    font-family: Roboto;
    font-weight: 400;
    vertical-align: middle
}

span.tag {
    background-color: #ccc;
    border-radius: 12px;
    font-size: 12px;
    padding: .5em 1em
}

span.tag.release {
    background-color: #5cb3ee
}

span.tag.bugfix {
    background-color: #ff8b9f
}

@media screen and (max-width:700px) {
    .board-block>.row {
        display: block
    }

    .board-block .board-side #board .row,
    .board-block .pattern-side #board .row {
        display: inline-block;
        /* width: 20% */
    }

    .board-block .board-side #bingopattern,
    .board-block .pattern-side #bingopattern {
        margin: 0 auto;
        max-width: 100%;
        width: 175px
    }

    .board-block .board-side.min-size-200,
    .board-block .pattern-side.min-size-200 {
        display: block;
        flex: none !important;
        margin: 0 auto !important;
        max-width: 100%;
        width: 250px
    }
}

* {
    box-sizing: border-box
}

.flex {
    display: flex;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

@media screen and (min-width:816px) {
    .flex {
        display: block
    }
}

.row {
    align-content: center;
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.row.vertical {
    flex-flow: column
}

.row.vertical-row {
    display: inline-flex;
    flex: 1 1 20%;
    flex-flow: column nowrap
}

.row.justify-center {
    justify-content: center
}

.row.justify-start {
    justify-content: flex-start
}

.row.justify-start>.col {
    flex: 0 1;
    white-space: nowrap
}

.row.justify-end {
    justify-content: flex-end
}

.row.justify-space-between {
    justify-content: space-between
}

.row.align-stretch {
    align-items: stretch
}

.row.align-start {
    align-items: start
}

.row.align-end {
    align-items: flex-end
}

.row.align-center {
    align-items: center
}

.row.no-padding,
.row.no-padding .col {
    padding: 0
}

.row.no-wrap {
    flex-wrap: nowrap
}

.row.set-size>.col {
    flex-basis: 0
}

.row.gutters-sm>.col {
    margin: .25rem
}

.row.gutters-md>.col {
    margin: .5rem
}

.row.gutters-lg>.col {
    margin: 1rem
}

.row.three-cols>.col {
    width: 33%
}

.row>.col {
    flex: 1 1 auto
}

.row>.col.min-size-100 {
    min-width: 100px
}

.row>.col.min-size-150 {
    min-width: 150px
}

.row>.col.min-size-200 {
    min-width: 200px
}

.row>.col.min-size-225 {
    min-width: 225px
}

.row>.col.min-size-250 {
    min-width: 250px
}

.row>.col.min-size-300 {
    min-width: 300px
}

.row>.col.max-size-250 {
    max-width: 250px
}

.row>.col.max-size-400 {
    max-width: 400px
}

.row>.col:first-child {
    margin-left: 0
}

.row>.col:last-child {
    margin-right: 0
}

.row>.col.shrink {
    flex: 0 1
}

.row>.col.grow {
    flex: 1 1
}

.row>.col.stretch {
    align-self: stretch
}

@media screen and (max-width:700px) {
    .row>.col {
        display: block;
        flex: auto;
        margin: 0 auto;
        width: 100%
    }

    .row>.col.min-size-250 {
        display: block;
        flex: auto;
        max-width: 100%;
        width: 250px
    }
}

@media screen and (max-width:1024px) {
    .board-block>.row {
        align-items: center
    }
}

.board-block .pattern-side .callNumber {
    color: red;
    font-family: ZCOOL QingKe HuangYou, Roboto Condensed, Helvetica, cursive;
    font-size: 3rem;
    margin-bottom: .5rem;
    text-align: center;
    width: 100%
}

.board-block .pattern-side .callNumber span {
    background: #161616;
    display: inline-block;
    padding: .25rem;
    text-align: center;
    width: 45%
}

.board-block .pattern-side .callNumber-text {
    font-family: Roboto Condensed, sans-serif;
    font-size: .8rem;
    font-size: .8vw
}

@media screen and (max-width:700px) {
    .board-block .pattern-side .callNumber-text {
        font-size: 1rem
    }
}

.board-block .pattern-side #bingopattern {
    align-items: flex-start;
    display: flex;
    margin: 0 auto
}

.board-block .pattern-side #bingopattern .row {
    flex-basis: 1 1 20%
}

.board-block .pattern-side #bingopattern .row:first-child .col:first-child span {
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg)
}

.board-block .pattern-side #bingopattern .row:nth-child(2) .col:first-child span {
    margin-top: -.5rem;
    -webkit-transform: rotate(-7deg);
    transform: rotate(-7deg)
}

.board-block .pattern-side #bingopattern .row:nth-child(3) .col:first-child span {
    margin-top: -.75rem
}

.board-block .pattern-side #bingopattern .row:nth-child(4) .col:first-child span {
    margin-top: -.5rem;
    -webkit-transform: rotate(7deg);
    transform: rotate(7deg)
}

.board-block .pattern-side #bingopattern .row:nth-child(5) .col:first-child span {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg)
}

.board-block .pattern-side #bingopattern .col {
    padding: 1.75vh .5vw;
    position: relative
}

@media screen and (max-width:1024px) {
    .board-block .pattern-side #bingopattern .col {
        padding: 2vh .5vw
    }
}

.board-block .pattern-side #bingopattern .col:first-child {
    height: 3rem;
    height: 3vw;
    line-height: 1.5
}

.board-block .pattern-side #bingopattern .col:first-child span {
    font-family: Roboto, sans-serif;
    font-size: 1.5rem;
    font-size: 1.5vw;
    font-weight: 800
}

@media screen and (max-width:700px) {
    .board-block .pattern-side #bingopattern .col:first-child span {
        font-size: 1.5rem
    }
}

.board-block .pattern-side #bingopattern .col:not(:first-child) {
    background: #efefef;
    border: 1px solid #fff
}

.board-block .pattern-side #bingopattern .col span {
    border-radius: 100%;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0
}

.board-block .pattern-side #bingopattern .col span.free-space {
    color: #676767;
    font-size: .5rem;
    font-size: 1vh;
    line-height: 1.5;
    margin: .2vw;
    text-align: center;
    text-transform: uppercase
}

@media screen and (max-width:700px) {
    .board-block .pattern-side #bingopattern .col span.free-space {
        font-size: 10px;
        margin: .25em
    }
}

.board-block .pattern-side #bingopattern .col.selected span {
    background-color: #c70600;
    margin: .25vw
}

@media screen and (max-width:1024px) {
    .board-block .pattern-side #bingopattern .col.selected span {
        margin: .5vw
    }
}

.board-block .pattern-side #bingopattern .col.selected span.free-space {
    color: #c70600;
    overflow: hidden
}

.board-block .pattern-side #bingopattern .col:hover {
    cursor: pointer
}

.board-block .pattern-side .pattern-select {
    border: 1px solid #fff;
    display: block;
    width: 100%
}

.board-block .pattern-side .pattern-select div[class$=-singleValue] {
    color: #888
}

.board-block .pattern-side .pattern-select div[class$=-Input] {
    color: #fff
}

.board-block .pattern-side .pattern-select div[class$=-control] {
    background: #222;
    border: none;
    border-radius: 0;
    color: #efefef
}

.board-block .pattern-side .pattern-select div[class$=-menu] * {
    color: #222
}



.board-block .board-side #board * {
    font-size: 2.7rem;
    font-size: 3vw;
    line-height: 1.5
}

@media screen and (max-width:700px) {
    .board-block .board-side #board * {
        font-size: 20px
    }
}



.board-block .board-side #board .ball button {
    background-color: inherit;
    border: unset;
    border-radius: unset;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    margin: unset;
    padding: unset;
    transition: inherit;
    white-space: nowrap
}

.board-block .board-side #board .ball button:hover {
    background: inherit;
    color: inherit
}

.board-block .board-side #board .ball button:focus {
    outline: none
}

.board-block .board-side #board .ball.called {
    color: #fff
}

.board-block .board-side #board .ball.active {
    -webkit-animation: blink 1s infinite;
    animation: blink 1s infinite;
    color: #fff
}

@-webkit-keyframes blink {
    0% {
        color: #fff
    }

    50% {
        color: #3c3c3c
    }

    to {
        color: #fff
    }
}

@keyframes blink {
    0% {
        color: #fff
    }

    50% {
        color: #3c3c3c
    }

    to {
        color: #fff
    }
}

.game-controls .ball-display {
    align-items: center;
    border-radius: 100%;
    box-shadow: inset .5rem .5rem 1.5rem .25rem hsla(0, 0%, 100%, .3), inset -.25rem -.25rem 1.5rem .5rem rgba(0, 0, 0, .4);
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 200px;
    min-width: 160px;
    position: relative;
    width: 100%
}

.game-controls .ball-display:after {
    content: "";
    display: block;
    padding-bottom: 100%
}

.game-controls .ball-display .content {
    background: #fff;
    background: radial-gradient(circle at 20% 20%, #fff, #efefef);
    border-radius: 100%;
    box-shadow: inset -.5rem -.5rem 2rem 0 rgba(0, 0, 0, .16), 0 0 0 .25rem #fff;
    min-width: 60px;
    min-width: 3vw;
    padding: 28%;
    position: relative;
    text-align: center
}

.game-controls .ball-display .content .ball-content {
    align-items: center;
    bottom: 0;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0
}

.game-controls .ball-display .content .ball-content .ball-letter,
.game-controls .ball-display .content .ball-content .ball-number {
    display: block;
    line-height: 1;
    width: 100%
}

.game-controls .ball-display .content .ball-content .ball-letter {
    font-size: 2rem;
    font-weight: 700
}

.game-controls .ball-display .content .ball-content .ball-number {
    font-size: 3.25rem
}

.game-controls .ball-display .content img {
    max-width: 100%;
    padding: .25rem
}

.game-controls .ball-display.blue {
    background: radial-gradient(circle at 20% 20%, #00f, #0000ad)
}

.game-controls .ball-display.blue .content {
    border: .15rem solid blue
}

.game-controls .ball-display.red {
    background: radial-gradient(circle at 20% 20%, red, #910000)
}

.game-controls .ball-display.red .content {
    border: .15rem solid red
}

.game-controls .ball-display.white {
    background: radial-gradient(circle at 20% 20%, #fff, #b6b6b6)
}

.game-controls .ball-display.white .content {
    border: .15rem solid red
}

.game-controls .ball-display.green {
    background: radial-gradient(circle at 20% 20%, green, #004a00)
}

.game-controls .ball-display.green .content {
    border: .15rem solid green
}

.game-controls .ball-display.yellow {
    background: radial-gradient(circle at 20% 20%, #ffe52a, #f7bd00)
}

.game-controls .ball-display.yellow .content {
    border: .15rem solid #f7bd00
}

.game-controls .previous-calls {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    text-align: center
}

.game-controls .previous-calls div {
    align-content: stretch;
    align-items: center;
    border: 2px solid #fff;
    border-radius: 100%;
    display: flex;
    flex: 0 0 18%;
    height: 2rem;
    justify-content: center;
    margin: 0 1%
}

.game-controls .previous-calls div span {
    color: #fff
}

.game-controls .previous-calls div.blue {
    border-color: blue
}

.game-controls .previous-calls div.red {
    border-color: red
}

.game-controls .previous-calls div.white {
    border-color: #fff
}

.game-controls .previous-calls div.green {
    border-color: green
}

.game-controls .previous-calls div.yellow {
    border-color: #f7bd00
}

.game-controls .modal .previous-calls {
    justify-content: start
}

.game-controls .modal .previous-calls div {
    flex: 0 0 32px;
    margin: 5px
}

.game-controls .gameplay-controls button {
    display: block;
    margin: .5rem auto;
    min-width: 175px;
    width: 80%
}

.game-controls .game-settings span {
    line-height: 2.5
}

.game-controls .game-settings .voice-select {
    border: 1px solid #fff;
    max-width: 360px;
    min-width: 200px;
    width: 100%
}

.game-controls .game-settings .voice-select div[class$=-singleValue] {
    color: #888
}

.game-controls .game-settings .voice-select div[class$=-Input] {
    color: #fff
}

.game-controls .game-settings .voice-select div[class$=-control] {
    background: #222;
    border: none;
    border-radius: 0;
    color: #efefef
}

.game-controls .game-settings .voice-select div[class$=-menu] * {
    color: #222
}

@media screen and (max-width:700px) {
    .game-controls .game-settings .row {
        flex-direction: column
    }
}

.card-block {
    margin: 1rem auto;
    max-width: 80%
}

.card-block .card {
    border-radius: .5rem;
    display: inline-block;
    margin: .5%;
    padding: .5rem;
    width: 49%
}

.card-block .card .col {
    flex-basis: 20%;
    margin: 0 !important;
    max-width: 20%;
    padding: 0 !important
}

.card-block .card .col .freespace {
    padding: .55rem 0
}

.card-block .card .col .freespace>span {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase
}

.card-block .card .col .card-letter,
.card-block .card .col .card-number {
    margin: 0;
    padding: .25em;
    text-align: center
}

.card-block .card .col .card-letter {
    color: #fff;
    font-size: 3rem;
    line-height: 1.5
}

.card-block .card .col .card-numbers {
    border-bottom: 1px solid #cecece;
    border-top: 1px solid #cecece
}

.card-block .card .col .card-numbers .card-number {
    background: #fff;
    border: 1px solid #cecece;
    font-size: 3rem
}

.card-block .card .col .card-numbers .card-number:first-child {
    border-top: 0
}

.card-block .card .col .card-numbers .card-number:last-child {
    border-bottom: 0
}

.print-six .card-block {
    margin: 0 auto;
    max-width: 1024px
}

.print-six .card-block .card {
    width: 32%
}

.print-six .card-block .card .col .card-letter {
    font-size: 2.25rem;
    height: 3.25rem;
    line-height: 1;
    max-height: 3.25rem
}

.print-six .card-block .card .col .card-numbers .card-number {
    font-size: 2.25rem;
    height: 3.5rem;
    max-height: 3.5rem
}

.print-six .card-block .card .col .card-numbers .card-number .freespace {
    padding: .57rem 0
}

.print-six .card-block .card .col .card-numbers .card-number .freespace>span {
    font-size: .8rem
}

@media screen and (max-width:700px) {
    .social.col {
        display: block;
        flex: none !important;
        width: 100%
    }

    footer .row {
        flex-flow: column;
        text-align: center
    }

    footer .row>.col {
        padding: .5em;
        text-align: center;
        width: 100% !important
    }
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.uppercase {
    text-transform: uppercase
}

.medium-text {
    font-size: 1rem;
    line-height: 1.5
}

.small-text {
    font-size: .9rem;
    line-height: 1.5
}

.x-small-text {
    font-size: .8rem;
    line-height: 1.25
}

.no-text-wrap {
    white-space: nowrap
}

.wrap-text {
    white-space: normal !important
}

.date {
    color: #00487b
}

[data-visibility=hide] {
    display: none !important
}

[data-disabled=true] {
    cursor: not-allowed;
    opacity: .3;
    pointer-events: none
}

.menu {
    font-family: Roboto Condensed, sans-serif;
    list-style: none;
    margin: 0;
    padding: 0
}

@media screen and (max-width:700px) {
    .menu {
        white-space: pre-wrap
    }
}

.menu li {
    display: inline-block;
    padding: .25em .5em
}

.menu li a {
    border: 3px solid transparent;
    font-size: 1.5rem;
    font-weight: 700;
    padding: .5em
}

.menu li a:hover {
    border: 3px solid #00487b
}

@media screen and (max-width:700px) {
    .menu li a {
        font-size: 18px;
        padding: .25em
    }
}

.modal {
    background: #222;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4);
    color: #fff;
    display: block;
    left: calc(50% - 25vw);
    padding: 2rem;
    position: absolute;
    text-align: center;
    top: 10%;
    width: 50vw;
    z-index: 999
}

.modal-backdrop {
    background: hsla(0, 0%, 100%, .3);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 998
}

.modal-backdrop:hover {
    cursor: pointer !important;
    pointer-events: none !important
}

div[class$=-placeholder] {
    color: #444
}

div[class$=-control] {
    border-color: #444
}

div[class$=-indicatorContainer] svg {
    fill: #444
}

.rc-slider {
    max-width: 300px;
    min-width: 200px;
    position: relative;
    touch-action: none
}

.rc-slider .rc-slider-rail,
.rc-slider .rc-slider-track {
    border-radius: 5px;
    height: 10px
}

.rc-slider .rc-slider-track {
    background: #0c0c0c;
    border: 1px solid #000;
    position: absolute;
    top: 0
}

.rc-slider .rc-slider-rail {
    background: #fff
}

.rc-slider .rc-slider-handle {
    background: #00477a;
    border-radius: 0;
    box-shadow: 1px 0 2px rgba(0, 0, 0, .5);
    cursor: grab;
    height: 24px;
    margin-top: -16px;
    position: absolute;
    touch-action: pan-x;
    width: 15px
}

.number-select {
    max-width: 250px;
    min-width: 175px
}

.number-select.single {
    max-width: 150px;
    min-width: 125px
}

.toggle {
    cursor: pointer;
    padding: 0;
    position: relative;
    white-space: nowrap
}

.toggle,
.toggle input {
    border: none;
    outline: none
}

.toggle input {
    -webkit-appearance: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%
}

.toggle .toggle-span {
    background: #fff;
    border: 2px solid #011f37;
    color: #011f37;
    display: inline-block;
    height: 1.5rem;
    margin-right: .5em;
    vertical-align: middle;
    width: 1.5rem
}

.toggle.checked .toggle-span:before {
    content: "✓";
    display: block;
    font-size: 1.25rem;
    line-height: 1;
    position: relative;
    text-align: center;
    width: 100%
}

.inline-block {
    display: inline-block
}

.block {
    display: block
}

.vertical-align-middle {
    vertical-align: middle
}

.hide {
    display: none
}

.show {
    display: block
}

.padding-sm {
    padding: .25rem
}

.padding-md {
    padding: .5rem
}

.padding-lg {
    padding: .75rem
}

.padding-xlg {
    padding: 1rem
}

.padding-xxlg {
    padding: 2rem
}

.padding-top-sm {
    padding-top: .25rem
}

.padding-top-md {
    padding-top: .5rem
}

.padding-top-lg {
    padding-top: .75rem
}

.padding-top-xlg {
    padding-top: 1rem
}

.padding-top-xxlg {
    padding-top: 2rem
}

.padding-bottom-sm {
    padding-bottom: .25rem
}

.padding-bottom-md {
    padding-bottom: .5rem
}

.padding-bottom-lg {
    padding-bottom: .75rem
}

.padding-bottom-xlg {
    padding-bottom: 1rem
}

.padding-bottom-xxlg {
    padding-bottom: 2rem
}

.padding-left-sm {
    padding-left: .25rem
}

.padding-left-md {
    padding-left: .5rem
}

.padding-left-lg {
    padding-left: .75rem
}

.padding-left-xlg {
    padding-left: 1rem
}

.padding-left-xxlg {
    padding-left: 2rem
}

.padding-right-sm {
    padding-right: .25rem
}

.padding-right-md {
    padding-right: .5rem
}

.padding-right-lg {
    padding-right: .75rem
}

.padding-right-xlg {
    padding-right: 1rem
}

.padding-right-xxlg {
    padding-right: 2rem
}

.padding-horizontal-sm {
    padding-left: .25rem;
    padding-right: .25rem
}

.padding-horizontal-md {
    padding-left: .5rem;
    padding-right: .5rem
}

.padding-horizontal-lg {
    padding-left: .75rem;
    padding-right: .75rem
}

.padding-horizontal-xlg {
    padding-left: 1rem;
    padding-right: 1rem
}

.padding-horizontal-xxlg {
    padding-left: 2rem;
    padding-right: 2rem
}

.padding-vertical-sm {
    padding-bottom: .25rem;
    padding-top: .25rem
}

.padding-vertical-md {
    padding-bottom: .5rem;
    padding-top: .5rem
}

.padding-vertical-lg {
    padding-bottom: .75rem;
    padding-top: .75rem
}

.padding-vertical-xlg {
    padding-bottom: 1rem;
    padding-top: 1rem
}

.padding-vertical-xxlg {
    padding-bottom: 2rem;
    padding-top: 2rem
}

.no-margin {
    margin: 0
}

.margin-sm {
    margin: .25rem
}

.margin-md {
    margin: .5rem
}

.margin-lg {
    margin: .75rem
}

.margin-xlg {
    margin: 1rem
}

.margin-xxlg {
    margin: 2rem
}

.margin-top-none {
    margin-top: 0
}

.margin-top-sm {
    margin-top: .25rem
}

.margin-top-md {
    margin-top: .5rem
}

.margin-top-lg {
    margin-top: .75rem
}

.margin-top-xlg {
    margin-top: 1rem
}

.margin-top-xxlg {
    margin-top: 2rem
}

.margin-bottom-none {
    margin-bottom: 0
}

.margin-bottom-sm {
    margin-bottom: .25rem
}

.margin-bottom-md {
    margin-bottom: .5rem
}

.margin-bottom-lg {
    margin-bottom: .75rem
}

.margin-bottom-xlg {
    margin-bottom: 1rem
}

.margin-bottom-xxlg {
    margin-bottom: 2rem
}

.margin-left-none {
    margin-left: 0
}

.margin-left-sm {
    margin-left: .25rem
}

.margin-left-md {
    margin-left: .5rem
}

.margin-left-lg {
    margin-left: .75rem
}

.margin-left-xlg {
    margin-left: 1rem
}

.margin-left-xxlg {
    margin-left: 2rem
}

.margin-right-none {
    margin-right: 0
}

.margin-right-sm {
    margin-right: .25rem
}

.margin-right-md {
    margin-right: .5rem
}

.margin-right-lg {
    margin-right: .75rem
}

.margin-right-xlg {
    margin-right: 1rem
}

.margin-right-xxlg {
    margin-right: 2rem
}

.margin-horizontal-none {
    margin-left: 0;
    margin-right: 0
}

.margin-horizontal-sm {
    margin-left: .25rem;
    margin-right: .25rem
}

.margin-horizontal-md {
    margin-left: .5rem;
    margin-right: .5rem
}

.margin-horizontal-lg {
    margin-left: .75rem;
    margin-right: .75rem
}

.margin-horizontal-xlg {
    margin-left: 1rem;
    margin-right: 1rem
}

.margin-horizontal-xxlg {
    margin-left: 2rem;
    margin-right: 2rem
}

.margin-vertical-none {
    margin-bottom: 0;
    margin-top: 0
}

.margin-vertical-sm {
    margin-bottom: .25rem;
    margin-top: .25rem
}

.margin-vertical-md {
    margin-bottom: .5rem;
    margin-top: .5rem
}

.margin-vertical-lg {
    margin-bottom: .75rem;
    margin-top: .75rem
}

.margin-vertical-xlg {
    margin-bottom: 1rem;
    margin-top: 1rem
}

.margin-vertical-xxlg {
    margin-bottom: 2rem;
    margin-top: 2rem
}

.red-bg {
    background-color: red !important
}

.dark-red-bg {
    background-color: #7b0000 !important
}

.dark-blue-bg {
    background-color: #00487b !important
}

.white-bg {
    background-color: #fff !important;
    padding: 12px
}

.dark-bg {
    background-color: #222 !important
}

.dark-gray-bg {
    background: #1b1b1b !important
}

.pale-gray-bg {
    background: #efefef
}

.extra-pale-gray-bg {
    background: #f9f9f9
}

.red-text {
    color: red !important
}

.white-text {
    color: #fff !important
}

.gray-text {
    color: #888 !important
}

.blue-text {
    color: #1396d3 !important
}

.yellow-text {
    color: #ffca28 !important
}

[data-color=red] {
    background-color: red
}

[data-color=orange] {
    background-color: orange
}

[data-color=orange] .card-letter {
    color: #000 !important
}

[data-color=yellow] {
    background-color: #ff0
}

[data-color=yellow] .card-letter {
    color: #000 !important
}

[data-color=green] {
    background-color: green
}

[data-color=blue] {
    background-color: blue
}

[data-color=purple] {
    background-color: purple
}

[data-color=aqua] {
    background-color: aqua
}

[data-color=aqua] .card-letter {
    color: #000 !important
}

[data-color=brown] {
    background-color: brown
}

[data-color=gray] {
    background-color: gray
}

[data-color=gray] .card-letter {
    color: #000 !important
}

[data-color=pink] {
    background-color: pink
}

[data-color=pink] .card-letter {
    color: #000 !important
}

[data-color=dk-gray] {
    background-color: #353535
}

@media print {
    @page {
        margin: .5in .25in .5in .25in !important
    }

    @page :blank {
        display: none
    }

    div {
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        -webkit-break-inside: avoid;
        page-break-inside: avoid
    }

    .no-print,
    footer,
    header {
        display: none
    }

    body {
        -webkit-print-color-adjust: exact !important
    }

    .card-block {
        margin: 1rem auto;
        max-width: unset
    }

    .pale-gray-bg {
        background: #fff
    }

    .print-bw {
        -webkit-filter: Gray();
        filter: Gray();
        filter: url(#grayscale);
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%)
    }

    .print-two .card .col .freespace {
        padding: .52rem 0
    }

    .print-four .card .col .card-letter,
    .print-four .card .col .card-number {
        font-size: 2.5rem !important;
        line-height: 1 !important
    }

    .print-four .card .col .freespace {
        padding: .25rem 0
    }

    .print-four .card .col .freespace span {
        font-size: 1rem;
        line-height: 1
    }

    .print-six .card {
        width: 30%
    }

    .print-six .card .col .card-letter,
    .print-six .card .col .card-number {
        font-size: 2.5rem !important;
        line-height: 1 !important
    }

    .print-six .card .col .freespace {
        padding: .25rem 0
    }

    .print-six .card .col .freespace span {
        font-size: 1rem;
        line-height: 1
    }
}