@import url('https://fonts.googleapis.com/css?family=Passion+One:wght@300&display=swap');

.collateral-damage {
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    min-width: 500px; /* TODO: Figure out if there is a better value for this */
}

.collateral-damage button[type=roll].stat-roll::before {
    background-image: none;
    font-family: dicefontd6;
    content: "F";
}

.collateral-damage button[type=roll] {
    color: #3f0f12;
}

.collateral-damage button[type=roll]:hover {
    color: #eeb8bb;
}


.collateral-damage a {
    color: #eeb8bb;
}

.collateral-damage a:hover {
    color: #3f0f12;
}

.collateral-damage .row-padding {
    padding-top:5px;
}

.collateral-damage select {
    width: 100%;
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.collateral-damage .section {
    padding: 5px;
}

.collateral-damage .randomize-button {
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: 18px;
    width: 50px;
    height: 15px;
    color: #3f0f12;
    background-color: #eeb8bb;
}

.collateral-damage .randomize-button:hover {
    color: #eeb8bb;
    background-color: #3f0f12;
}

.collateral-damage .section-act-heading {
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px;
    width: 100%;
    text-align: center;
    background-color: #eeb8bb;
    border-bottom:solid #3f0f12;
    border-width: 2px;
}

.collateral-damage .section-heading {
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px;
    width: 100%;
    text-align: center;
    background-color: #eeb8bb;
}

.collateral-damage .section-content {
    border-left: solid #3f0f12;
    border-top: solid #3f0f12;
    border-width: 2px;
    padding: 5px;
}

.collateral-damage .stat-content {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 45px;
}

.collateral-damage .input-label-header {
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    color: #3f0f12;
    border-top: solid #3f0f12;
    border-width: 1px;
    margin-top: 1px;
    text-align: left;
}

.collateral-damage .input-label {
    color: #3f0f12;
    border-top: solid #3f0f12;
    border-width: 1px;
    margin-top: 1px;
    text-align: left;
}

.collateral-damage .center-text {
    text-align: center;
}

/* Customizes the inputs to use bold font */
.collateral-damage input[type=text] {
    width: 100%;
    font-size: 14px;
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
}
.collateral-damage textarea {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 100%;
    resize: none;
    width: 100%;
    font-size: 14px;
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
}

/* Used to build out + or - in stat table */
.collateral-damage .stat-content label {
    text-align: center;
    font-size: 25px;
}
.collateral-damage .stat-content label span:before {
    content: "+";
    font-size: 25px;
    cursor: pointer;
}
.collateral-damage .stat-content label input[type=checkbox]:checked + span:before {
    content: "-";
    font-size: 25px;
    cursor: pointer;
}

.collateral-damage .stat-content label input[type=checkbox] + span:hover {
    color: #eeb8bb
}

/* Used to build the stat dice table */
.collateral-damage .stats-dice-header {
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 300;
    font-size: 16px;
    background-color: #3a0e13;
    text-align: center;
    color: white;
}
.collateral-damage table {
    width: 100%;
}
.collateral-damage td {
    text-align: center;
    border: 1px solid #3f0f12;
}

/* Used to build out the wound heart toggles */
.collateral-damage input[type=checkbox] {
    display: none;
}
.collateral-damage label span:before {
    content: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CDMG/heart.png");
    cursor: pointer;
}
.collateral-damage label input[type=checkbox]:checked + span:before {
    content: url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CDMG/heart-slash.png");
    cursor: pointer;
}
.collateral-damage ul {
    list-style-type: none;
    margin-bottom: 0px;
    margin-left: 13px;
}
.collateral-damage li {
    display: inline-block;
}
.collateral-damage li label {
    padding: 0px;
    display: inline-block;
}

/* Used to dynamically switch between the different class selections */
.fantasy-class-selector,
.horror-class-selector,
.western-class-selector,
.superhero-class-selector,
.scifi-class-selector {
    display: none;
}

.class-toggle[value="fantasy"] ~ div.fantasy-class-selector,
.class-toggle[value="horror"] ~ div.horror-class-selector,
.class-toggle[value="western"] ~ div.western-class-selector,
.class-toggle[value="superhero"] ~ div.superhero-class-selector,
.class-toggle[value="scifi"] ~ div.scifi-class-selector {
    display: block;
}

/* Popup content */
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 70px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 55%;
    position: relative;
    transition: all 5s ease-in-out;
    font-family: 'Passion One', Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    font-weight: 300;
    font-size: 16px;
}
.popup h2 {
    margin-top: 0;
    color: rgb(0, 0, 0);
}
.popup .close {
    position: absolute;
    top: 20px;
    right: 30px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: rgb(0, 0, 0);
}
.popup .content {
    max-height: 30%;
}

/* Using this to pre-load the heart-slash to avoid the flicker */
.collateral-damage::after{
    position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
    content:url("https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/CDMG/heart-slash.png")
}