/* HTML elements */
body {
    background-color: #152130;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-image: url('img/background_1.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center 65px;
}

/* Background Colors for Each Protocol */
.apathy {
    background-color: hsl(0, 0%, 66%) !important;
    --shadow-color: hsl(0, 0%, 46%);
}

.assimilation{
    background-color: hsl(0, 0%, 50%) !important;
    --shadow-color: hsl(0, 0%, 30%);
}

.chaos {
    background-color: hsl(241, 73%, 19%) !important;
    --shadow-color: hsl(0, 0%, 20%);
}

.clarity {
    background-color: hsl(273, 68%, 38%) !important;
    --shadow-color: hsl(204, 100%, 16%);
}

.corruption {
    background-color: hsl(75, 100%, 27%) !important;
    --shadow-color: hsl(75, 100%, 7%);
}

.courage {
    background-color: hsl(34, 62%, 50%) !important;
    --shadow-color: hsl(0, 0%, 60%);
}

.darkness {
    background-color: hsl(54, 4%, 47%) !important;
    --shadow-color: hsl(54, 4%, 27%);
}

.death {
    background-color: hsl(229, 7%, 30%) !important;
    --shadow-color: hsl(229, 7%, 10%);
}

.diversity {
    background-color: hsl(56, 50%, 42%) !important;
    --shadow-color: hsl(0, 0%, 30%);

}

.fear{
    background-color: hsl(0, 78%, 45%) !important;
    --shadow-color: hsl(0, 0%, 30%);
}

.fire {
    background-color: hsl(30, 53%, 69%) !important;
    --shadow-color: hsl(30, 53%, 49%);
}

.gravity {
    background-color: hsl(325, 22%, 46%) !important;
    --shadow-color: hsl(325, 22%, 26%);
}

.hate {
    background-color: hsl(1, 42%, 46%) !important;
    --shadow-color: hsl(1, 42%, 26%);
}

.ice{
    background-color: hsl(200, 100%, 50%) !important;
    --shadow-color: hsl(200, 100%, 30%);
}

.life {
    background-color: hsl(58, 17%, 60%) !important;
    --shadow-color: hsl(58, 17%, 40%);
}

.light {
    background-color: hsl(35, 17%, 67%) !important;
    --shadow-color: hsl(35, 17%, 47%);
}

.love {
    background-color: hsl(352, 36%, 62%) !important;
    --shadow-color: hsl(352, 36%, 42%);
}

.luck{
    background-color: hsl(39, 77%, 41%) !important;
    --shadow-color: hsl(14, 85%, 29%);
}

.metal {
    background-color: hsl(18, 6%, 45%) !important;
    --shadow-color: hsl(18, 6%, 25%);
}

.mirror{
    background-color: hsl(276, 48%, 44%) !important;
    --shadow-color: hsl(0, 0%, 30%);
}

.peace{
    background-color: hsl(120, 57%, 39%) !important;
    --shadow-color: hsl(120, 100%, 55%);
}

.plague {
    background-color: hsl(95, 19%, 43%) !important;
    --shadow-color: hsl(95, 19%, 23%);
}

.psychic {
    background-color: hsl(266, 9%, 48%) !important;
    --shadow-color: hsl(266, 9%, 28%);
}

.smoke{
    background-color: hsl(0, 0%, 30%) !important;
    --shadow-color: hsl(0, 0%, 10%);
}

.speed {
    background-color: hsl(216, 14%, 62%) !important;
    --shadow-color: hsl(216, 14%, 42%);
}

.spirit {
    background-color: hsl(189, 26%, 36%) !important;    
    --shadow-color: hsl(189, 26%, 16%);
}

.time{
    background-color: hsl(0, 85%, 28%) !important;
    --shadow-color: hsl(0, 0%, 30%);
}

.unity {
    background-color: hsl(268, 61%, 49%) !important;
    --shadow-color: hsl(0, 0%, 30%);
}

.war{
    background-color: hsl(348, 81%, 25%) !important;
    --shadow-color: hsl(348, 83%, 27%);
}

.water {
    background-color: hsl(180, 8%, 66%) !important;
    --shadow-color: hsl(180, 8%, 46%);
}

/* Card Sections */
.card-section {
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-sizing: border-box;
    flex: 1;
    margin-bottom: 3px;
    min-height: 33%;
    max-height: 33%;
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
    width: 100%;
    font-size: 1.3em;
}

.card-section:not(:last-child) {
    border-bottom: 1px solid #e0e0e0;
}

/* Custom Card Title for Displaying Protocol and Value */
.custom-card-title {
    align-items: flex-start;
    color: white;
    display: flex;
}

.custom-card-title .protocol {
    background-color: rgb(21, 33, 48, 0.6);;
    border-radius: 5px;
    font-size: 1.15em;
    margin-right: 10px;
    padding-bottom: 7px;
    padding-left: 5px;
    padding-top: 7px;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    width: 155px;
    border: 2px solid white;
}

.custom-card-title .value {
    align-items: center;
    background-color: rgb(21, 33, 48, 0.6);
    border-radius: 5px;
    display: flex;
    font-size: 2.75em;
    justify-content: center;
    padding: 13px;
    text-align: center;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid white;
}

/* Emphasis Text */
.emphasis {
    font-weight: bold;
    text-decoration: underline;
}

/* Fixed Height Card */
.fixed-height-card {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    max-height: 600px;
    min-height: 600px;
    height: 600px;
    width: 415px;
    min-width: 415px;
    filter: drop-shadow(
      4.01px 8.0px 8.0px var(--shadow-color)
    );
}

.fixed-height-card .card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 0;
}

.blank-section {
    background-color: rgba(255, 255, 255, 0.1);
}

.has-background {
    background-color: rgb(21, 33, 48, 0.6);
    color: white;
}

/* Header */
.header {
    background-color: #9154ab;
    color: #ffffff;
    padding-left: 10px;
    font-size: 1.75em;
    font-weight: bold;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    min-width: 900px !important;
    margin-bottom: 20px !important;
}

.header img {
    margin-top: 16px;
    margin-right: 10px;
    float: left;
}

.modal-header {
    background-color: #9154ab !important;
    padding: 5px;
    color: #ffffff;
    font-size: 1.75em;
    font-weight: bold;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}

#filter-form{
    justify-content: center !important;
}

#filter-form label {
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5em;
    padding: 3px;
}

.filter-options {
    width: 100%;
    border: 1px solid #ffffff;
    border-radius: 15px;
}

.filter-group {
    margin-bottom: 20px;
    border: 1px solid #9154ab;
    padding: 10px;
    border-radius: 5px;
    float: left;
}

.filter-group>div {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-group legend {
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 5px;
}

#active-filters-count {
    font-size: .5em !important;
    top: 5px;
    margin-left: 165px;
    position: absolute;
}

.checkbox-wrapper {
    display: flex;
    /* flex: 1 1 25%; */
    align-items: center;
    margin-bottom: 5px;
    background-color: #ddd;
    border: 1px solid #484a53;
    border-radius: 5px;
    padding: 5px;    
    filter: drop-shadow(2px 2px);
}

.checkbox-wrapper input[type="checkbox"] {
    margin-right: 10px;
    padding: 3px;
}

.checkbox-wrapper label:hover {
    cursor: pointer;
    color: #9154ab;
}

/* Default label color */
.checkbox-wrapper label {
    color: #000;
    transition: color 0.3s;
}

/* Change label color when checkbox is checked */
.checkbox-wrapper input[type="checkbox"]:checked+label {
    color: #9154ab;
}

/* Protocol Header */
.protocol-header {
    color: #ffffff;
    font-size: 1.45em;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 3px;
    min-height: 100px;
}
.protocol-header-bottom{
    font-size: .7em;
    margin-top: 60px;
    position: absolute;
    margin-left: 30px;
}

/* Section Wrapper */
.section-wrapper {
    box-sizing: border-box;
    flex: 1;
    padding: 10px;
    width: 100%;
}

.set-text {
    position: absolute;
    right: 10px;
    bottom: 5px;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
}


/* Overrides */

.badge {
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff !important;
    font-size: 1.25em !important;
}

.btn {
    background-color: #152130 !important;
}

.card {
    border-radius: 15px !important;
    border: 2px solid #ffffff !important;
}

.collapsible-header {
    border: 2px solid #ffffff;
    border-bottom-color: #ffffff !important;
    border-radius: 15px !important;
}

.collapsible-body {
    margin-top: 5px;
    background-color: hsla(282, 15%, 17%, 0.2);
    --shadow-color: hsla(282, 15%, 7%);
    border: 2px solid #9154ab;
    border-bottom-color: #9154ab !important;
    border-radius: 15px !important;    
    filter: drop-shadow(
      4.01px 8.0px 8.0px var(--shadow-color)
    );
}

.container {
    width: 90% !important;
    max-width: none !important;
}

.input-field {
    max-width: 90% !important;
    margin-left: 25px !important;
    margin-top: 10px !important;
}

.modal {
    width: 650px !important;

    .modal-fixed-header {
        padding: 0;
        height: 70%;

        .modal-header {
            position: absolute;
            top: 0;
        }

        .modal-header {
            border-radius: 0 0 2px 2px;
            padding: 4px 6px;
            height: 56px;
            width: 100%;
        }
    }
}

.modal-content {
    height: calc(100% - 75px) !important;
}

#protocolList li{
    margin-bottom: 5px !important;
}

.row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
}

.select-wrapper {
    margin-bottom: 20px !important;
}

.select-dropdown {
    padding-top: 15px !important;
    font-family: "Orbitron", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
}