*{
    box-sizing: border-box; /* Include padding in the width calculation */
}
html{ margin: 0 !important; }
body {
    font-family: Arial, sans-serif;
    margin: 0px;
    color: #fff;
}

/* Container */
.container {
    width: 100%;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
 padding: 30px;
 background: rgba(11,11,11,0.95);
    position: relative;
    z-index: 999;
}

/* Grid Row */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

/* Grid Columns */
[class*='col-'] {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;

}

/* Extra small devices (portrait phones, less than 576px) */
.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-sm-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-sm-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-sm-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-md-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-md-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-lg-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-lg-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .col-xl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .col-xl-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .col-xl-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .col-xl-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}



form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

label a{ font-size: 14px; color: #e93a3a; }

input {
    display: block;
    margin-bottom: 10px;
    padding: 5px;
    width: 200px;
}

button,.button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    text-decoration:none;
}

button:hover,.button:hover {
    background-color: #45a049;
}

#characterList {
    list-style-type: none;
    padding: 0;
}
#characterList h3{ margin: 0px; }

#characterList li {
    padding: 20px 30px;

    margin-bottom: 10px;
    border: 1px solid #ccc;
}

.circles-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    border-bottom: 1px dotted #222;
}

.circles-container label {
    flex: 1;
    margin-right: 10px;
}

.circles {
    display: flex;
    flex-wrap: wrap;
    max-width: 181px; /* 10 circles of 14px each + 9 margins of 5px each */
}

.circle {
    width: 14px;
    height: 14px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: inline-block;
    margin: 0 2px;
    cursor: pointer;
}

.squares .circle{ border-radius: 0; }

.circle.filled {
    background-color: #ffffff90;
}

.circle.freebie {
    background-color: #f35151; /* Light red color for freebie points */
}

.circle:nth-child(5n + 1) {
    margin-left: 5px; /* Adjust margin as needed for visual separation */
}

.circle:nth-child(10n + 1) {
    margin-left: 0; /* Remove margin for the first circle in each line */
}

.circles > .circle:nth-of-type(n + 11) {
    margin-top: 5px; /* Adjust margin-top as needed for visual separation between lines */
}

.editable .circle {
    cursor: pointer;
}

.editable .circle:hover {
    background-color: #666;
}

.general{ display: flex;justify-content: space-between;align-items: center; }
.general input, select{ height: 36px !important; width: 200px; padding: 0 10px !important; margin: 0 !important; background: #333; border: none; color: #fff; }

#notes input{ width: 100%; height: 36px !important; padding: 0 10px !important; background: #333; border: none; color: #fff; }
#notes textarea{ width: 100%; height: 150px; background: #333; border: none; color: #fff; padding: 10px; font-size: 14px;}
#otherNotes{ height: 300px !important; }

.select-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Adjust margin as needed */
}

.select-container select {
    flex-grow: 1;
    margin-right: 10px; /* Adjust margin as needed */
}

.select-container button {
    flex-shrink: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.section-header span{ font-weight:500; font-size: 24px; }

.sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    line-height: 32px;
}
.sheet-header h1{ margin: 0; }
.sheet-header small span{ font-size: 18px; display: inline-block; margin-right: 20px; }

.derived{ border: 1px solid #ccc;}

.removeFlaw,.removeMerit{ font-size: 12px; color: #e93a3a; float: right; margin-top: -15px; padding: 5px 0 5px; display: none; }
.removeFlaw:hover,.removeMerit:hover{ cursor: pointer; }
.merit:hover .removeMerit,.flaw:hover .removeFlaw{ display: inline-block;}
.merit,.flaw{ background: #ffffff10; padding: 15px; clear: both; margin-bottom: 5px; line-height: 2em; }
.merit h4,.flaw h4{ margin-top: 0px; }
.remove-ritual{ display: none; }
.ritual:hover .remove-ritual{ display: inline; }

.health-level .indicator{ width: 24px; height: 24px; background: #333; display: inline-block; text-align: center; line-height: 24px; }

.attack-table-container {
    width: 100%;
    margin-top: 20px;
}

.attack-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.attack-table th, .attack-table td {
    border: 1px solid #ddd;
    padding: 8px;
}

.attack-table th {
    background-color: #111;
    font-weight: bold;
}

.attack-table tr:nth-child(even) {
    background-color: #111;
}

.attack-table tr:hover {
    background-color: #222;
}

.attack-table select{ height: 22.5px !important; width: 120px; }

.attack-table th:first-child,
.attack-table td:first-child {
    white-space: nowrap;
}

.attack-table th:last-child,
.attack-table td:last-child {
    width: 100%;
}

.attack-notes{ font-size: 10px; }

.power{ background: #ffffff10; padding: 15px; margin-bottom: 15px; line-height: 2em; }
.power h4{ margin-top: 0px; }
.power p:last-child{ margin-bottom: 0px; }
.power p:empty{ display: none !important; }

.power table{ width: 100%;  }
.power table td, .power table th{ border-bottom: 1px solid #555; text-align: left; padding: 5px; }

.panel{
    border-left: 1px solid #fff;
    background: #111;
    width: 33%;
    height: 100%;
    position: fixed;
    top: 0; right: -33%;
    z-index: 998;
    transition: right 0.5s;
}

.panel.open{ right: 0; z-index: 999; }
.panel .handle{ z-index: 998; position: absolute; width: 64px; height: 64px; line-height: 64px; font-size: 24px; left: -64px; background: #111; text-align: center; border: 1px solid #ccc; border-right: none; }
.panel .handle:hover{ cursor: pointer; }
.panel-content{ height: 100%; padding: 30px; overflow-y: scroll; }

#powers .handle{ top: 15px; }
#ritualInfo .handle{ top: 78px; }
#notes .handle{ top: 141px; }

.tag{ display: inline-block; margin-right: 5px; font-size: 12px !important; padding: 3px 5px; border-radius: 3px; background: #e93a3a; color: #fff; line-height: 1em;}
.ritual h3{ margin: 0; }

body{ background: #111; background-size: cover !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-position: 50% !important; }
.Tremere{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/tremere.webp');  }
.Ventrue{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/ventrue.webp');  }
.Nosferatu{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/nosferatu.webp');  }
.Toreador{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/toreador.webp');  }
.Malkavian{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/malkavian.webp');  }
.Gangrel{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/gangrel.webp');  }
.Brujah{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/brujah.webp');  }
.damon{ background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/damon.webp');  }