.album-button {
    background-color: #f1f2f2;
    font-family: sans-serif;
    font-size: 16px;
    color: #060101;
    border-color: #060101;
    max-width: 250px;
}



.album-header {
    font-family: 'Benzin-Bold';
    font-size: 16px;
}

.album-message {
    font-family: "Benzin-Regular";
    font-size: 12px;
    color: #882314;
}

.album-message-big {
    font-family: "Benzin-Regular";
    font-size: 20px;
    color: #882314;
}

.album-header-section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.album-page {
    background-color: #f1f2f2;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.faq-page {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 15px;
}

.info .main-info .text {
    margin: 2%;
    font-family: Sans-Serif;
    font-size: 16px;
}

.album-page .main-info .text {
    margin: 5%;
    font-family: 'Benzin-Regular';
    font-size: 16px;
}

.album-page .section {
    background-color: #f1f2f2;
}

.album-page .section .info {
    display: flex;
    flex-direction: row;
    align-content: center;
}

.compare-albums {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.compare-album-info {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.or {
    margin: 4px;
}

.album-scroll {
    /* Home Album List Format */
    left: 0;
    max-width: 100%;
    color: black;
    text-align: left;
    position: sticky;
    top: 0;
    float: relative;
    overflow-y: hidden;
    overflow-x: scroll;
}

.base-bkgd {
    /* Overall background color */

    background: #f1f2f2;
    overflow-x: hidden;
}

.btn {
    /* Collection Album Hyperlink Format */
    text-decoration: none;
    border: none;
    background-color: inherit;
    padding: 10px 18px;
    /* font-size: calc(0.5vw + 10px); */
    cursor: pointer;
    display: inline-block;
  }

.btn-primary {
    /* Log in Submit Buttom */
    background-color: #f1f2f2;
    font-family: 'Benzin-Regular';
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
    border-radius: 7px;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 12px;
    color: #060101;
    margin: 5px;
}

.button-container {
    /* Collection Table Button Row Alignment */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    background-color: #882314;
}

.button-container button {
    /* Collection Table Button Sizing */
    font-family: inherit;
    font-size: inherit;
    color: #642121a1;
    align-items: center;
    justify-content: center;
    border: 0;
    margin: 0;
    outline: 0;
    min-height: 50px;
    transition: background-color 225ms ease-out;
  }

.spacing .primary {
    width:40px;
    background-color: gray;
}

.primary {
    background-color: #f1f2f2;
    padding: 3px;
    margin-bottom: 0px;
}

.primary:hover {
    background-color: #FFD0C9;
}

.button-container button.danger {
    /* Collection Table Delete Album Color */
    background-color: #b26157;
    width: 60px;
}

.button-container button.recalc {
    /* Collection Table Delete Album Color */
    background-color: #b26157;
    width: 60px;
}

.button-container button.extra {
    /* Populate settings/collection button */
    background-color: #b26157;
}
.button-container button.extra:hover {
    background-color: #eb3d24;
}
.button-container button.extra:active {
    background-color: #9fb99f;
}

.button-container button.danger:hover {
    /* Collection Table Delete Album Hover Color */
    background-color: #eb3d24;
}

.button-container button.recalc:hover {
    /* Collection Table Delete Album Hover Color */
    background-color: #eb3d24;
}

.button-container button.primary {
    /* Collection Table Add Album Color */
    background-color: #b26157;
    width: 60px;
  }

.button-container button.primary:hover {
    /* Collection Table Add Album Hover Color */
    background-color: #eb3d24;
  }

.btn-primary:hover {
    background-color: lightgray;
}

.button-container span {
    /* Collection Table Button Row Text */
    color: #8f8f8f;
    text-align: right;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    margin-right: 10px;
}

.button-container button svg {
    /* Collection Table Button Text Color */
    fill: #ffffff;
    vertical-align:middle;
    padding: 10;
    margin: 0;
    font-family: monospace;
}

.card {
    /* Collection Table Title Area Properties */
    background-color: #ffffff;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.checkbox {
    width: 20px;
    height: 20px;
    align-content: right;
}

.circle-number {
    /* rating number foirmat */
    width: 72px;
    line-height: 70px;
    border-radius: 50%;
    text-align: center;
    font-family: sans-serif;
    font-size: 32px;
    border: 3px solid #000;
    background: #f1f2f2;
}

.collapsible-content {
    /* Home Drop Down Sections -- Hiding Inner Content */
    max-height: 0px;
    transition: max-height 0.5s ease-in-out;
    overflow: auto;
}

.collapsible-content .content-inner {
    /* Home Drop Down Sections -- Inner Content Background and Border */

    padding: .5rem 1rem;
    display: flex;
    justify-content: center;
}

.collapsible-content .content-inner-reset {
    /* Home Drop Down Sections -- Inner Content Background and Border */

    padding: .5rem 1rem;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.collapsible-content .content-inner-column {
    /* Home Now playing Drop Down Sections -- Inner Content Background and Border */
    background: lightgray;
    border-bottom: 1px solid #060101;
    border-radius: 7px;

    padding: .5rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.collection-row .table-data {
    /* collection row sizing */
    min-width: 10vw;
    max-width: 10vw;
    margin-left: 1vw;
}

.default {
    font-family: "Times New Roman";
    padding: 0px 0px;
}

.descriptor .descriptor-hovertext {
    /* album scroll image hover text for album info in home -- formatting*/
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.438);
    color: #fff;
    position: absolute;
    padding: 5px 5px;
    width: 150px;
    font-family: sans-serif;
}

.descriptor:hover .descriptor-hovertext {
    /* album scroll image hover text for album info in home -- hover effect */
    visibility: visible;
}

.extramargin {
    margin-right: 4px;
}



.flash-message-success {
    padding: 3vh;
    width: 100%;
    background-color: #6BEE7D;
    color: #060101;
    margin-left: 15px;
    font-family: 'Benzin-Regular';
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.flash-message-danger {
    padding: 3vh;
    width: 100%;
    background-color: #DC77ED;
    color: #060101;
    margin-left: 15px;
    font-family: 'Benzin-Regular';
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.flexbox-container {
    /* Home Album List Format and Alignment */
    display: flex;
    overflow-x: scroll;
    flex-shrink: 1;
    border:black;
    align-items: flex-start;
}

.flexbox-container::after {
    content: '';
    display: table;
    clear: both;
}

.flexbox-item-album {
    /* Album Page Orientation */
    background-color: #e7dfa8;
    border-radius: 6px;
    border-color: black;
    border: solid 1px;
    max-width: 500px;
    margin: 20px;
    padding: 10px;

    font-family: monospace;
    font-size: 16px;
}

.flexbox-item-tags {
    background-color: #e7dfa8;
    border-radius: 6px;
    margin: 20px;
    padding: 10px;
    border-color: black;
    border: solid 1px;
    font-family: monospace;
    font-size: 16px;
}

.font-color-black {
    color: black;
    font-size: calc(1vw + 5px)
}

footer {
    /* Home Album List Format */
    left: 0;
    top: 10;
    max-width: 100%;
    color: black;
    text-align: left;
    position: relative;
    float: relative;
    overflow-y: hidden;
}

header {
    /* Menu Bar Background */
    padding-top: 5px;
    padding-bottom: 5px;


}

header::after {
    /* Menu Bar Background */
    content: '';
    display: table;
    clear: both;
}

.home-screen {
    /* Home Body Sizing and Orientation */
    width: 100%;
    overflow: hidden;
}

.home-page {
    overflow-x: hidden;
}

.home-shift {
    /* Shift home screen tables over for alignment */
    margin-left: 10px;
    margin-right: 10px;

}

.home-tab {
    /* home tab section formatting */
    margin-top: 5px;
    margin-bottom: 5px;
    height: 100%;
}

.home-tabs {
    /* home tab section formatting */
    position: sticky;
    top:200px;
}

.image {
    /* Home Image Sizing and Orientation */
    display: inline-flex;
    height: 200px;
    overflow: none;
}

.instruments {
    /* Album page instrument table */
    
}

.justify-right {
    display: flex;
    justify-content: flex-end;
    justify-self: flex-end;
}

.large-art {
    /* Full size art display */
    max-width: 100%;
}

.large-text {
    font-size: 20px;
}

.small-text {
    font-size: 12px;
    font-family: sans-serif;
}

.lbl-toggle {
    /* Home Drop Down Sections -- Unexpanded */
    display: block;
    align-content: flex-start;

    font-family: 'benzin-bold';
    font-size: 2rem;
    text-transform: uppercase;
    text-align: center;

    padding-top: 20px;
    padding-bottom: 20px;
    margin: 5px;

    color: #060101;
    background: #f1f2f2;
    /* background-image: linear-gradient(#f1f2f2, lightgray); */
    border: 2px solid #060101;

    cursor: pointer;

    border-radius: 7px;
    transition: all 0.3s ease-out;
}

.lbl-toggle:hover {
    /* Home Drop Down Sections -- Unexpanded Hover Effect */
    color: #b26157;
    /* background: #eb3d24; */
}

.listen-data {
    /* data in listen table */
    border-style: hidden;
    color: #060101;
    background-color: inherit;
    font-family: sans-serif;
    font-size: 16px;
    width: 100%;
}

.dict-data {
    /* data in listen table */
    border-style: none;
    background-color: inherit;
    font-family: sans-serif;
    font-size: 16px;
    overflow-wrap: break-word;
}

.dict-binary {
    color: #060101;
}

.dict-def {
    /* data in listen table */
    border-style: none;
    background-color: inherit;
    font-family: sans-serif;
    font-size: 16px;
    overflow-wrap: break-word;
}

.dict-inst {
    /* data in instrument table */
    border-style: none;
    background-color: inherit;
    font-family: sans-serif;
    font-size: 16px;
    overflow-wrap: break-word;
}

.category {
    /* data in listen table */
    border-style: none;
    background-color: inherit;
    font-family: sans-serif;
    font-size: 16px;
    overflow-wrap: break-word;
}

.subcategory {
    /* data in listen table */
    border-style: none;
    background-color: inherit;
    font-family: sans-serif;
    font-size: 16px;
    overflow-wrap: break-word;
}

nav li a {
    /* Menu Bar Text */
    text-decoration: none;
    text-transform: uppercase;
    /* font-weight: bold; */
    font-family: 'benzin-semibold';
    font-size: 16px;  
}

nav li a:hover {
    /* Menu Bar Text Hover Effect */
    color: #24D2EB
}

nav li a:hover::before {
    /* Menu Bar Text Hover Effect */
    width: 100%;
}



nav ul {
    /* Menu Bar Alignment And List Settings */
    padding: 0;
    list-style: none;
}

.no-circle {
    text-decoration: none;
    color: black;
}

.notes {
    background-color: #f1f2f2;
    font-family: sans-serif;
    width: 100%;
    height:100%;
}

.ratings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 5px;
    margin-bottom: 5px;
}

.ratings .spacing {
    padding: 5px;
    text-align: center;
}

.ratings .text {
    margin: 5%;
    font-family: sans-serif;
    font-size: 16px;
}

.reset {
    /* Home Descriptor Table Reset Button */
    padding: 5px;
    margin-bottom: 6px;
}

.scroll-lock {
}


/* toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #060101;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #147988;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;

  }
  
  .slider.round:before {
    border-radius: 50%;
  }


.tab {
    /* dictionary tab region */
    overflow: hidden;

}


.setting-tab .tab button {
    /* tab at top of dictionary */
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 12px;
    font-weight: normal;
    font-family: 'Benzin-Regular';
    width: 100px;
    border-top: #060101 1px solid;
    border-right: #060101 1px solid;
    border-left: #060101 1px solid;
}



.setting-tab .tab button.active {
    /* creates an active tab */
    background-color: #ccc
}

.setting-tab .tabcontent {
    /* style the tab content */
    display: none;
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-top: none;
}

.setting-tab .tablinks {
    /* style tabs on settings */
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
    color: #060101;
}



.table-concept {
    /* Descriptor and Collection Table Sizing */
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.table-concept table {
    /* Descriptor and Collection Table Separation Between Columns */
    background-color: #ffffff;
    font-size: 16px;
    border-collapse: collapse;
    display: none;
}

.table-concept table tbody tr {
    /* Descriptor and Collecion Table Highlight Transition */
    transition: background-color 150ms ease-out;
}

.table-concept table tbody tr:hover {
    /* Descriptor and Collection Table Highlight Color */
    background-color: #FFD0C9;
    transition: 200ms;
  }

.table-concept table tbody tr:nth-child(2n) {
    /* Descriptor and Collection Table Alternating Row Color */
    background-color: whitesmoke;
}

.table-concept table tbody tr:nth-child(2n):hover {
    /* Descriptor and Collection Table Alternating Row Color */
    background-color: #FFD0C9;
    transition: 200ms;
}

.table-concept table tr th {
    /* Descriptor and Collection Table Header Format */
    color: #060101;
    font-family: 'Benzin-Regular';
    background-color: #f1f2f2;
    border-bottom: solid 2px #d8d8d8;
    top: 0;
    text-decoration: none;
    font-size: 20px;
  }

.table-concept table tr td {
    /* Descriptor and Collection Table Border Format */
    border: solid 1px #d8d8d8;
    border-left: 0;
    border-right: 0;
    white-space: normal;
    font-family: sans-serif;
}

.table-concept table tr th,
.table-concept table tr td {
  /* Descriptor and Collection Row and Header Spacing */
  text-align: left;
  padding: 5px;
  box-sizing: border-box;
}

.table-concept .table-display {
    /* Descriptor Table Stripe At Top */
    background-color: #b26157;
    text-align: right;
    padding: 8px;
    display: none;
    position: sticky;
    left: 0;
  }

.table-concept .table-radio {
    /* Descriptor and Collection Table Checkbox Visibility At Top */
    display: none;
}

.table-concept .table-radio:checked+.table-display {
    /* Descriptor and Collection Table Stripe At Top */
    display: block;

}

.table-concept .table-radio:checked+.table-display+table {
    /* Descriptor and Collection Table Widths */
    width: 100%;
    display: table;
}

.table-title {
    /* Collection Table Title Format */
    color: #ffffff;
    background-color: #882314;
    padding: 15px;
    font-family: 'Benzin-Regular';
}

.user-name {
    font-family: 'Benzin-Medium';
    color: #ffffff;
    font-size: 18px;
    padding: 5px;
    margin-top: 8px;
}

.table-title h2 {
    /* Collection Table Title Width */
    margin: 0;

}

.title-text {
    color: #ffffff;
    background-color: #882314;
    font-family: 'Benzin-Regular';
    font-size: 35px;
    margin-right: 20px;
}

.toggle:checked+.lbl-toggle {
    color: #060101;
}

.toggle:checked+.lbl-toggle+.collapsible-content {
    /* Home Drop Down Sections -- Expanded Section Size*/
    max-height: 600px;
    overflow: scroll;
}

.toggle:checked+.home-tab {
    /* Home Drop Down Sections -- Expanded Section Size*/
    background-color: #000;
}

.toggler:checked+.lbl-toggle {
    color: #060101;
}

.toggle:checked+.lbl-toggle:hover {
    color: #b26157;
}

.toggler:checked+.lbl-toggle+.collapsible-content {
    /* Home Drop Down Sections -- Expanded Section Size*/
    max-height: 500px;
    overflow: scroll;
}

.toggler:checked+.home-tab {
    /* Home Drop Down Sections -- Expanded Section Size*/
    background-color: #000;
}


.tooltip .tooltiptext {
    /* Home Screen Album Footer Hover Text */
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.438);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 5px;
    overflow:hidden;
    font-family: sans-serif;

    /* Home Screen Album Footer Hover Text Position */
    position: absolute;
}
  
.tooltip:hover .tooltiptext {
    /* Home Screen Album Footer Hover Text Effect */
    visibility: visible;
}

.tooltip .titletooltiptext {
    /* Home Screen Album Footer Hover Text */
    visibility: hidden;
    background-color: #060101;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 5px;
    overflow:hidden;
    width: 300px;
    font-family: sans-serif;

    /* Home Screen Album Footer Hover Text Position */
    position: absolute;
    left: 50%;
}
  
.tooltip:hover .titletooltiptext {
    /* Home Screen Album Footer Hover Text Effect */
    visibility: visible;
}

ul.cloud {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    line-height: 2.5rem;
}





ul.cloud a {
    --size: 3;
    font-size: calc(var(--size) * 0.25rem + 0.5rem);

    color: var(--color);
    display: block;
    padding: 0.125rem 0.25rem;
    text-decoration: none;
    position: relative;
}

.energy-container {
    display: flex;
    width: 80vw;

  }

/* Slider formatting */
.range_container {
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  
  .sliders_control {
    position: relative;
    min-height: 50px;
  }
  
  .form_control {
    position: relative;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    color: #635a5a;
  }
  
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #C6C6C6;
    cursor: pointer;
  }
  
  input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #C6C6C6;
    cursor: pointer;  
  }
  
  input[type=range]::-webkit-slider-thumb:hover {
    background: #f7f7f7;
  }
  
  input[type=range]::-webkit-slider-thumb:active {
    box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
    -webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
  }
  
  input[type="number"] {
    width: 143px;

  }
  
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button {  
     opacity: 1;
  }
  
  input[type="range"] {
    -webkit-appearance: none; 
    appearance: none;
    height: 2px;
    width: 100%;
    position: absolute;
    background-color: #C6C6C6;
    pointer-events: none;
  }
  
  #fromSlider {
    height: 0;
    z-index: 1;
  }

  .form_control_container__time__input input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .form_control_container__time__input {
    cursor: pointer;
    background-color: inherit;
  }

  .form_control_container {
    display: flex;
    flex-direction: column;
  }

  .form_control_container-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: right;
  }

.home-album-container {
    /* album scroll container in home */
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    width: calc(100% + 200px);
    overflow-y: hidden;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #f1f2f2;
}

.home-image {
    /* album scroll image in home */
    height: 200px;
    width: 200px;
}

.tooltip .home-hovertext {
    /* album scroll image hover text for album info in home -- formatting*/
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.438);
    color: #fff;
    position: absolute;
    padding: 5px 5px;
    width: 150px;
    font-family: sans-serif;
}

.tooltip:hover .home-hovertext {
    /* album scroll image hover text for album info in home -- hover effect */
    visibility: visible;
}

.sticky-table {
    max-height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: scroll;
    border-collapse: separate;
    border-spacing: 0;
}

.sticky-table-headers th{
    
    position: sticky;
    top: 0px;
    z-index: 1;
    height: 10px;

    color: #060101;
    font-weight: normal;
    font-family: 'Benzin-Regular';
    background-color: #882314;
    border: solid 2px;

    top: 0;
    text-decoration: none;
    font-size: 20px;

}

.sticky-table-headers tr {
    color: #060101;
}

.sticky-table-headers th {
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-right: 2px solid;
    color: #f1f2f2;
}

.sticky-table-content {
    z-index: 0;
    overflow: auto;

    border: solid 1px #d8d8d8;
    border-left: 0;
    border-right: 0;
    white-space: normal;
    background-color: whitesmoke;
}

.info-table #category-row{
    /* Descriptor and Collection Table Alternating Row Color */
    background-color: #f1f2f2;
}

.info-table table tbody tr:nth-child(2n) {
    /* Descriptor and Collection Table Alternating Row Color */
    background-color: lightgray;
}

.info-table table tbody tr:hover {
    /* Descriptor and Collection Table Highlight Color */
    background-color: #FFD0C9;
    transition: 200ms;
  }

  .info-table table tbody tr:nth-child(2n):hover {
    /* Descriptor and Collection Table Alternating Row Color */
    background-color: #FFD0C9;
    transition: 200ms;
}

.info-table {
    border-collapse: collapse;
    width:100%;
    table-layout: auto;
    overflow: scroll;
}

.info-table th {
    border: 1px solid #060101;
    padding: 8px;
    color: #f1f2f2;
}

.info-table td {
    border: 1px solid #060101;
    padding: 8px;
    font-family: sans-serif;
    font-size: 17px;
}

.home-info-table #category-row{
    /* Descriptor and Collection Table Alternating Row Color */
    background-color: #f1f2f2;
}

.home-info-table table tbody tr:hover {
    /* Descriptor and Collection Table Highlight Color */
    background-color: #FFD0C9;
    transition: 200ms;
  }

.home-info-table {
    border-collapse: collapse;
    width:100%;
    table-layout: auto;
}

.home-info-table th {
    border: 1px solid #060101;
    padding: 8px;
    color: #f1f2f2;
    position: sticky;
    z-index: 1000;
}

.home-info-table td {
    border: 1px solid #060101;
    padding: 8px;
    font-family: sans-serif;
    font-size: 18px;
}

.table-category {
    font-family: 'Benzin-Regular';
    font-size: calc(0.5vw + 10px);
    margin-left: 10px;
    align-self: center;
    color:#060101;
}

.category-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content:left;
}

.category-row {
    background-color: #f1f2f2;
}

.topnav {
    overflow: hidden;
    padding: 0;
    list-style: none;
}

.rating-container {
    display: flex;
    flex-direction: row;
}

.sliders_control {
    width:70vw;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}

.rating-label {
    margin: 20px;
    font-family: 'Benzin-Regular';
    font-size: 16px;
}

.rating-slider {
    opacity: 100%
}

.rating-section {
    border-radius: 10px;
    border-color: #000;
    border-style: solid;
    flex-direction:column;
    background-color: #f1f2f2;
}

.energy-section {
    border-radius: 10px;
    border-color: #000;
    border-style: solid;
    max-width: 90%;
    min-width:min-content;
    flex-direction:column;
    background-color: #f1f2f2;
}

.form_control {
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 10px;
    font-family: 'Benzin-Regular';
    font-size: 16px;
}

.form_control_container__time__input {
    font-family: monospace;
    font-size: 16px;
    border: none;
}

.rating-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: lightgray;
}

.energy-group {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    width: 90%;
    gap: 10px;
}

th.gridjs-th-sort .gridjs-th-content {
    font-family: sans-serif;
    font-size: 8;
}

.auth-text {
    font-family: sans-serif;
    font-size: 10;
}

.auth-text-faded {
    font-family: sans-serif;
    font-size: 10;
    opacity: 50%;
}

.auth-text-small {
    font-family: sans-serif;
    font-size: 14px;
}

.recalc-text {
    font-family: sans-serif;
    font-size: 14px;
    color: #f1f2f2;
    align-items: center;
    margin-right: 10px;
}

.auth-header {
    font-family: 'Benzin-Regular';
    font-size: 12;
}

.suggestion {
    margin: 10px;
}

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Hide the browser's default checkbox */
  .container input {
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border: black 1px solid;
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: #b26157;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .center-check {
    text-align: center;
  }

.frequency {
    font-family: sans-serif;
}

.album-info-header {
    font-family: 'Benzin-Medium';
    margin-bottom: 2px;
    display:flex;
    flex-direction: row;
    max-width: 350px;
    font-size: 15px;
}

.album-info-text {
    font-family: 'Benzin-Regular';
    margin-bottom: 8px;
    max-width:300px;
    font-size: 15px;
}

.search-box {
    height: 30px;
    align-self: center;
    margin-right: 10px
}

@font-face {
    font-family: 'benzin-bold';
    src: url('./fonts/Benzin-Bold.ttf');
}

@font-face {
    font-family: 'benzin-extrabold';
    src: url('./fonts/Benzin-ExtraBold.ttf');
}

@font-face {
    font-family: 'benzin-medium';
    src: url('./fonts/Benzin-Medium.ttf');
}

@font-face {
    font-family: 'benzin-regular';
    src: url('./fonts/Benzin-Regular.ttf');
}

@font-face {
    font-family: 'benzin-semibold';
    src: url('./fonts/Benzin-Semibold.ttf');
}

.lock-border {
    border: 3px solid #6BEE7D;
}

.mia-border {
    border: 3px solid #DC77ED;
}

.lock {
    padding: 5px;
    cursor: grab;
}

.mark {
    margin-bottom: 10px;
}

.now-playing-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    overflow: hidden;
}

.now-playing-side-album {
    opacity: 50%;
    margin-left: 2rem;
    margin-right: 2rem;
}

.now-playing-side-album:hover {
    opacity: 100%;
}

.non-opaque {
    opacity: 100%;
}

.title-align-left {
    text-align: left;
}

.title-align-center {
    text-align: center;
}

.title-align-right {
    text-align: right;
}

.arrow {
    position: absolute;
    top: 150px;
    right: 20px;
    font-size: 30px;
    color: #DC77ED;
}

.table-header {
    text-align: center;
}

.footer-wrapper {
    display:flex;
    flex-direction: row;
    justify-content: space-around;
}

.footer-wrapper .small-text {
    font-size: calc(10px)
}

.faq {
    font-family: 'Benzin-Regular';
    font-size: 30px;
    padding: 15px;
}

.recalc-gif {
    align-self: center;
    margin-top:5px;
    margin-right:10px;
}

.years {
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.collection-name-text {
    position: absolute;
    color:#f1f2f2;
    font-family: 'Benzin-Bold';
    margin-left: 10px;
    line-height: 50px;;
}

.energybox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f1f2f2;
    margin-left: 10px;
    margin-right: 10px;
}

.energy-label {
    font-family: 'Benzin-Regular';
    font-size: 20px;
    margin-right: 10px;
    margin-left: 10px;
    display:grid;
    justify-content: center;
    margin-bottom: 3px;
}

.graph-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #f1f2f2;
    margin-left: 10px;
    margin-right: 10px;
}

.plus-circle {
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
}

.plus-circle-album {
    margin-left: 2px;
    margin-right: 2px;
}

/* For WebKit-based browsers (Chrome, Safari, Edge) */
.carousel::-webkit-scrollbar {
  width: 8px; /* Adjust the width of the scrollbar */
  height: 8px; /* Adjust the height of the horizontal scrollbar */
}

.carousel::-webkit-scrollbar-thumb {
  background: #b26157; /* Color of the scrollbar thumb */
  border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

.carousel::-webkit-scrollbar-thumb:hover {
  background: #b26157; /* Color when hovering over the scrollbar */
}

.carousel::-webkit-scrollbar-track {
  background: #f1f2f2; /* Background color of the scrollbar track */
}

/* For Firefox */
.carousel {
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: #b26157 #f1f2f2; /* Thumb color and track color */
}

/* For WebKit-based browsers (Chrome, Safari, Edge) */
.website::-webkit-scrollbar {
  width: 8px; /* Adjust the width of the scrollbar */
  height: 8px; /* Adjust the height of the horizontal scrollbar */
}

.website::-webkit-scrollbar-thumb {
  background: #b26157; /* Color of the scrollbar thumb */
  border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

.website::-webkit-scrollbar-thumb:hover {
  background: #b26157; /* Color when hovering over the scrollbar */
}

.website::-webkit-scrollbar-track {
  background: #f1f2f2; /* Background color of the scrollbar track */
}

/* For Firefox */
.website {
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: #b26157 #f1f2f2; /* Thumb color and track color */
}

/* For WebKit-based browsers (Chrome, Safari, Edge) */
.content-inner::-webkit-scrollbar {
  width: 8px; /* Adjust the width of the scrollbar */
  height: 8px; /* Adjust the height of the horizontal scrollbar */
}

.content-inner::-webkit-scrollbar-thumb {
  background: #b26157; /* Color of the scrollbar thumb */
  border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

.content-inner::-webkit-scrollbar-thumb:hover {
  background: #b26157; /* Color when hovering over the scrollbar */
}

.content-inner::-webkit-scrollbar-track {
  background: #f1f2f2; /* Background color of the scrollbar track */
}

/* For Firefox */
.content-inner {
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: #b26157 #f1f2f2; /* Thumb color and track color */
}

/* For WebKit-based browsers (Chrome, Safari, Edge) */
.album-page::-webkit-scrollbar {
  width: 8px; /* Adjust the width of the scrollbar */
  height: 8px; /* Adjust the height of the horizontal scrollbar */
}

.album-page::-webkit-scrollbar-thumb {
  background: #b26157; /* Color of the scrollbar thumb */
  border-radius: 4px; /* Rounded corners for the scrollbar thumb */
}

.album-page::-webkit-scrollbar-thumb:hover {
  background: #b26157; /* Color when hovering over the scrollbar */
}

.album-page::-webkit-scrollbar-track {
  background: #f1f2f2; /* Background color of the scrollbar track */
}

/* For Firefox */
.album-page {
  scrollbar-width: thin; /* Options: auto, thin, none */
  scrollbar-color: #b26157 #f1f2f2; /* Thumb color and track color */
}

.form-floating {
    margin-top: 3px;
    margin-bottom: 3px;
}