* {
    box-sizing: border-box;
}
body {
    font-family:Arial, Arial, Helvetica, sans-serif;
}
.has-image {
    background-size: contain;
    background-repeat:no-repeat;
    background-position: 50% 50%;
    color:inherit;
    text-shadow:inherit;
    /*
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;*/

}

.bingo-word {
    display:flex;
    width:100%;
    height:100%;
    justify-content:center;
}

.header {
    font-family:Arial, Arial, Helvetica, sans-serif;
    font-size:24px;
    padding-top:10px;
    padding-bottom:10px;
}

.cell {
    font-family:Arial, Arial, Helvetica, sans-serif;
    font-size:32px;
    cursor:pointer;
    /* 75 for 4x4*/
    /* 90 for 1x2 */
    /* 150 for 1x1 */
    width: 150px;
    height:150px;
    background-color:#fff;
}

.enlarged {
    font-size:130px;
}

#height-test, #width-test {
    padding:6px; /* adjust to make text fit in box without touching border */
}

#height-test {
    overflow:hidden;
}

#hidden {
    position:absolute;
    top:-5000px;
}

.output {
    margin:auto;
    page-break-after:always;
}

.output-cell {
}

.highlighted {
    /*box-shadow: inset 0 0 0 1000px rgba(255, 195, 17, .5);*/
    background-size: contain;
    background-repeat:no-repeat;
    background-position: 50% 50%;
}

.call-sheet {
    margin-left:50px;
    list-style-type:none;
}

ol.call-sheet {
    margin-top:20px;
}

.call-sheet img {
    max-width:100px;
    max-height:100px;
    margin-top:5px;
    display:block;
}

.call-sheet li {
    font-size:18px;
    padding-bottom:15px;
    width:32%;
    display:inline-block;
    vertical-align:top;
}

#additional-set {
    text-align:center;
    border-top:1px solid black;
    border-bottom:1px solid black;
    padding:5px;
    font-weight:bold;
}

.card-wysiwyg {
    box-shadow: #d8d8d8 0 0 10px 0;
    padding:20px;
    border-color:black;
}

.mini-card .card-wysiwyg {
    padding:3px;
}

.pdf .card-wysiwyg {
    box-shadow:none;
}

.playable .card-box-cell {
    cursor:pointer;
}

.card-size-wrapper {
    /*width:501px;*/
    margin:auto;
}

.card-letters {
    display:flex;
    margin-bottom:20px;
    justify-content:center;
}

.size-7 .card-box-cell-height,
.size-6 .card-box-cell-height,
.size-5 .card-box-cell-height,
.size-4 .card-box-cell-height,
.size-3 .card-box-cell-height {
    margin-top:100%;
}

.card-box-cell {
    position:relative;
}

.card-box-cell-inner {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.card-box-cell {
    border-top-width:1px;
    border-right-width:1px;
    border-style:solid;
    border-color:inherit;
}

.size-7 .card-box-cell:nth-child(7n+1),
.size-6 .card-box-cell:nth-child(6n+1),
.size-5 .card-box-cell:nth-child(5n+1),
.size-4 .card-box-cell:nth-child(4n+1),
.size-3 .card-box-cell:nth-child(3n+1) {
    border-left-width:1px;
}

.size-7 .card-box-cell:nth-last-child(-n+7),
.size-6 .card-box-cell:nth-last-child(-n+6),
.size-5 .card-box-cell:nth-last-child(-n+5),
.size-4 .card-box-cell:nth-last-child(-n+4),
.size-3 .card-box-cell:nth-last-child(-n+3) {
    border-bottom-width:1px;
}

.size-7 .card-letters > div, .size-7 .card-boxes > div {
    /*width:100px;*/
    width:calc(100% / 7);
    max-width:150px;
}

.size-6 .card-letters > div, .size-6 .card-boxes > div {
    /*width:100px;*/
    width:calc(100% / 6);
    max-width:150px;
}

.size-5 .card-letters > div, .size-5 .card-boxes > div {
    /*width:100px;*/
    width:calc(100% / 5);
    max-width:150px;
}

.card-boxes {
    margin-left:auto;
    margin-right:auto;
    border-color:inherit;
    perspective: 1000px;
}


/* flip the pane when hovered */
/*
.flipper:hover {
	transform: rotateY(180deg);
}*/

.flipper {
    transition: transform .25s linear;
    transform-style: preserve-3d;
    position: relative;
}

.flipper-flipped {
	/*transform: rotateY(180deg);*/
}

.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    transform-style: preserve-3d;
    transition: transform .25s linear;
}

.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
    /*visibility:hidden;*/
}

.flipper-flipped .back {
    /*visibility:visible;*/
    transform: rotateY(0deg);
}

.flipper-flipped .front {
    visibility:visible;
    transform: rotateY(180deg);
}

.back-tooltip {
    display:none;
}

.flipper-flipped .back-tooltip {
    content:"Back";
    display:inline-block;
    background-color:#ffc300;
    font-size:12px;
    position:absolute;
    bottom:0px;
    left:0;
    color:black;
    padding:2px;
}

.flipper-tooltip {
    display:none;
}

.active-cell .flipper-tooltip {
    display:block;
    cursor:pointer;
    position:absolute;
    bottom:0px;
    right:0;
    background-image:url("../img/flip.svg");
    background-color:#ffc300;
    background-size:10px 10px;
    width:15px;
    height:15px;
    background-repeat:no-repeat;
    background-position:center center;
}



.card-render h1 {
    margin:0;
    /*margin-bottom:20px;*/
    font-size:32px;
    text-align:center;
    /*padding-bottom:20px;*/
    /*padding-bottom:5%;*/
}

.card-render .card-letters {
    font-family: Arial, Arial, Helvetica, sans-serif;
    font-size: 24px;
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    margin-bottom:0;
    align-items:flex-end;
}

.card-title-pretty {
    display:flex;
    align-items:top;
    justify-content:center;
    text-align:center;
    margin-bottom:2%;
}

.size-7 form {
    max-width:calc(150px * 7);
}

.size-6 form {
    max-width:calc(150px * 6);
}

.size-5 form {
    max-width:calc(150px * 5);
}

.size-4 form {
    max-width:calc(150px * 4);
}

.size-3 form {
    max-width:calc(150px * 3);
}

.size-4 .card-letters > div, .size-4 .card-boxes > div {
    /*width:100px;*/
    width:calc(100% / 4);
    max-width:150px;
}

.size-3 .card-letters > div, .size-3 .card-boxes > div {
    /*width:100px;*/
    width:calc(100% / 3);
    max-width:150px;
}

.card-letters > div {
    text-align:center;
}

.card-boxes {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    /*
    border-right:1px solid black;
    border-bottom:1px solid black;
    background-color:#fff;*/
}

.card-box-cell {
    /*border-left:1px solid black;
    border-top:1px solid black;*/
    /*overflow: hidden;*/ /* is this ok? */
}

.pdf .card-box-cell {
    background-repeat:no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    /*
    position:relative;
    overflow:hidden;*/
}

.card-boxes textarea {
    vertical-align: middle;
    text-align: center;
    border: none;
    font-family: Arial, Arial, Helvetica, sans-serif;
    font-size: 18px;
    overflow: auto;
    /* this needs to match the CELL_PADDING_IN_CSS javascript variable */
    padding: 5px;
    /* The padding-top is adjust dynamically in the JavaScript to control the vertical alignment of the text */
    /* 40% roughly aligns with the center, which is an OK default value when the page loads */
    padding-top:40%;
    resize: none;
    width:100%;
    height: calc(100%);
    overflow-wrap:normal;
    overflow:hidden;
    line-height:normal;
    outline:none;
}

.card-wysiwyg {
    margin-left:auto;
    margin-right:auto;
}

#menu-expander {
    width: 35px;
    height: 35px;
    border-radius: 10%;
    background-image: url(../img/bars.svg);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center;
    z-index:10;
    /*background-color: #009adb;*/
    cursor:pointer;
    user-select:none;
    background-color:rgba(255,255,255,.8);
}

#mini-menu2.menu-expanded #mini-menu2-content {
    display:flex;
    flex-wrap:wrap;
    line-height:1.5;

}


#mini-menu2 {
    position:absolute;
    right:5px;
    bottom:5px;
    z-index:12;
    display:flex;
    border:1px solid transparent;
    flex-direction:row-reverse;
    box-shadow:#ccc 0 0 10px 0;
}

#mini-menu2-content {
    display:none;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    background-color: white;

}

#mini-menu2 img {
    width:20px;
    height:20px;
    cursor:pointer;
}

#clear-puzzle {
    cursor:pointer;
}

#mini-menu2-content > div {
    margin-left:10px;
    margin-right:10px;
}


#mini-menu2:hover, #mini-menu2.menu-expanded {
    /*border:1px solid black;*/
    box-shadow:#ccc 0 0 10px 0;
}

.print-icon {
    font-size:18px;
    cursor:pointer;
    /*margin-left:auto;*/
}

#mini-menu2 a {
    text-decoration:none;
    font-weight:bold;
    color:#000;
    cursor:pointer;
}

.help-box {
	position: relative;
	background: #fff587;
	border: 2px solid #000000;
}
.help-box:after, .help-box:before {
	top: 100%;
	right:0px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.help-box:after {
	border-color: rgba(255, 245, 135, 0);
	border-top-color: #fff587;
	border-width: 15px;
	margin-right: 0px;
}
.help-box:before {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 18px;
    position: absolute;
    bottom: 0;
    right: -3px;
}

@media print {
    #mini-menu2 {
        display:none;

    }

    .create-card {
        display:none;
    }

    #card-wrapper, .card-wrapper {
        background-color:transparent;
        padding:0;
    }

    #footer {
        display:none;
    }

    .wrapper {
        max-width:none;
    }
}



#bingo-background-wrapper {
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    opacity:.7;
    filter:blur(10px);
    overflow:hidden;
}


.create-card {
    background-color: #fff587;
    max-width: 500px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: #ccc 0 0 2px 0;
    border:2px solid black;
}

.create-card, .create-card li {
    line-height:1.3;
    font-size: 18px;
}

.create-card form {
    text-align:center;
}

.create-card ul, .create-card ol {
    /*
    display:table;
    margin:0 auto;*/
    text-align:left;
    margin-left:25px;
}

.create-card ol li {
    list-style: decimal;
}

.create-card ul li {
    list-style: circle;
}

/*
.create-card li {
    line-height:1.3;
}*/



.word-list {
	position:relative;
    line-height:0;
}

.word-list-item {
    align-items:center;
    text-align:center;
    page-break-inside: avoid;
    /*display:inline-block;*/
    border:2px dashed black;
    width:100px;
    line-height:0;
    display:inline-block;
    vertical-align:top;
    box-sizing:content-box;
}

.word-list-item-pair {
    width:233px; /* (100[div width] / 150[svg width]) = (x[div width] / 350[svg width]) => x = 100/150 * 350 = 233*/
}

.word-list-legend {
    text-align:left;
    line-height:normal;
    color:black;
    background-color:white;
}

.word-list-legend span {
    border-right:1px solid black;
    border-bottom:1px solid black;
    display:inline-block;
    padding:2px;
    font-size:100%;
}

.word-list-col {
    font-size:28px;
    margin-top:10px;
    margin-bottom:5px;
}