/**
* CSS generale app
*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
#view_canto {
  touch-action: pan-y !important;
}
#lista-lettere {
  position: fixed;
  top: 120px;
  bottom: 70px;
  float: right;
  width: 30px;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  right: 5px;
  z-index: 100;
  border-radius: 10px;
  font-size: small;
  font-weight: bold;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#lista-lettere::-webkit-scrollbar {
  display: none;
}
#lista-lettere ul {
  list-style: none;
  padding: 4px 0;
  justify-content: space-around;
  display: flex;
  flex-direction: column;
  margin: 0;
  height: 100%;
}
#lista-lettere ul li {
  padding: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-control-feedback {
  left: 10px;
  position: absolute;
  color: #489cab;
  padding-top: 9px;
  z-index: 10;
}
.container-search {
  padding-left: 5px;
  padding-right: 5px;
  position: fixed;
  width: 100%;
  z-index: 10;
  background: white;
  border-bottom: 1px solid #eee;
}
#app_cerca {
  padding-left: 30px;
}
.app-control {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important;
}
.app-control:focus {
  border-color: #ced4da !important;
  -webkit-box-shadow: unset !important;
  box-shadow: unset !important;
}
.app-text-dimension {
  display: block;
  float: left;
}
.app-gira-canto {
  display: block;
  float: right;
}
.app-trasposizione {
  display: block;
  float: center;
}
.app-text-dimension span {
  margin-right: 5px;
  padding: 7px;
}
.app-gira-canto span {
  margin-right: 5px;
  padding: 7px;
}
.app-trasposizione span {
  margin-right: 5px;
  padding: 7px;
}
@media only screen and (min-height: 400px) and (max-height: 599px) {
  #lista-lettere {
    font-size: x-small;
  }
}
@media only screen and (min-height: 600px) {
  #lista-lettere {
    font-size: small;
  }
}
.anchor {
  position: relative;
  padding-top: 110px;
}
.sidebar {
  background-color: #2C7683;
  width: 300px !important;
  padding-top: 55px;
}
.sidebar.toggled {
  overflow: visible;
  width: 0px !important;
}
.bg-dark {
  background-color: #489cab !important;
}
.btn-app {
  color: #fff;
  background-color: #489cab;
  border-color: #489cab;
}
.app-footer {
  background-color: #489cab !important;
  height: auto;
  min-height: 50px;
  padding: 0;
}
.app-content-padding {
  padding-top: 50px;
}
.app-content-padding-cerca {
  padding-top: 6px;
}
.btn-circle {
  width: 35px;
  height: 35px;
  padding: 5px 9px;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  line-height: 1.42857;
}
.btn-circle.btn-xl {
  width: 48px;
  height: 48px;
  padding: 10px 16px;
  border-radius: 35px;
  font-size: 24px;
  line-height: 1.33;
}
#myBtnB {
  /* position: fixed;
  bottom: 60px;
  right: 110px; */
  z-index: 99;
  font-size: 18px;
  margin: 2px;
}
#myBtn {
  /* position: fixed;
  bottom: 60px;
  right: 60px; */
  z-index: 99;
  font-size: 18px;
  margin: 1px;
}
#myBtnF {
  /* position: fixed;
  bottom: 60px;
  right: 10px; */
  z-index: 99;
  font-size: 18px;
  margin: 2px;
}
.lista-canti {
  border: none;
  border-bottom: 1px solid #eee;
  border-bottom-left-radius: 0rem !important;
  border-bottom-right-radius: 0rem !important;
  background-color: unset;
  padding: 0.45rem 0.65rem;
  display: block;
  float: left;
  width: 100%;
}
.list-title {
  background: rgba(0, 0, 0, 0.1);
  padding-top: unset;
  padding-bottom: unset;
  font-weight: bold;
}
.lista-left {
  display: block;
  float: left;
  position: relative;
  height: 100%;
  padding-top: 10px;
  color: #daa520;
}
.lista-center {
  display: block;
  position: relative;
  float: left;
}
.lista-right {
  display: block;
  position: relative;
  float: right;
}
.width-smartphone-left {
  width: 8%;
}
.width-smartphone-center {
  width: 82%;
}
.width-smartphone-right {
  width: 10%;
}
.width-tablet-left {
  width: 5%;
}
.width-tablet-center {
  width: 85%;
}
.width-tablet-right {
  width: 10%;
}
.width-desktop-left {
  width: 3%;
}
.width-desktop-center {
  width: 87%;
}
.width-desktop-right {
  width: 10%;
}
.width-select-smartphone-left {
  width: 17%;
}
.width-select-smartphone-center {
  width: 83%;
}
.width-select-tablet-left {
  width: 10%;
}
.width-select-tablet-center {
  width: 90%;
}
.width-select-desktop-left {
  width: 4%;
}
.width-select-desktop-center {
  width: 96%;
}
.lista-canti-first-child {
  border-top: 1px solid #ccc;
  border-top-left-radius: 0rem !important;
  border-top-right-radius: 0rem !important;
}
.canti-option {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ccc;
  border-radius: 0.25rem 0rem 0rem 0.25rem;
}
.canti-group {
  padding-bottom: 5px;
}
.canti-label {
  background-color: #fff !important;
}
.titolo {
  font-weight: bolder;
}
.libretto_titolo {
  color: #43b8cc;
  border-bottom: 1px solid #ccc;
}
.base-color {
  color: #43b8cc;
}
.btn-libretto-success {
  color: #fff !important;
  background-color: #43B8CC;
  border-color: #43B8CC;
}
.libretto-settings {
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.libretto-settings-section {
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.riempispazi {
  padding-bottom: 400px;
}
.libretto-autore {
  font-size: small;
  line-height: unset;
  color: #43b8cc;
}
.libretto-tag {
  font-size: x-small;
  line-height: unset;
  color: #daa520;
}
.badge-tag {
  color: #2C7683;
  background-color: #eee;
  margin-right: 2px;
}
.libretto-transpose {
  font-size: smaller;
  line-height: unset;
  color: #daa520;
}
.badge-transpose {
  color: #2C7683;
  background-color: #e9dbb8;
  margin-right: 2px;
}
.text-gold {
  color: #daa520 !important;
}
.li-anchor {
  padding-left: 5px;
  padding-right: 5px;
}
.libretto-position {
  margin-top: 100px;
}
#wrapper #content-wrapper {
  padding-bottom: 50px;
}
.col-lg-12,
.col-xs-12 {
  padding-left: 12px;
  padding-right: 12px;
}
.fa-border-icon {
  border-width: 1px;
  border-style: solid;
  border-color: #000;
  border-image: initial;
  border-radius: 50% 50% 50% 50%;
}
.app-badge-info {
  margin-top: 20px;
  padding: 10px;
  font-size: small;
  border: 1px solid #489cab;
  font-style: italic;
  text-align: justify;
}
#guitar_div {
  padding-top: 50px;
}
#guitar-tuner {
  border: 1px solid #489cab;
  padding: 4px;
  border-radius: 20px;
}
.btn-esecuzione {
  width: 130px;
  margin-right: 10px;
}
/**
* Inizio checkbox toggle
*/
.switch {
  position: absolute;
  display: inline-block;
  width: 55px;
  height: 27px;
  margin-left: 10px;
  right: 10px;
}
.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: 0.4s;
  transition: 0.4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #43b8cc;
}
input:focus + .slider {
  box-shadow: 0 0 1px #43b8cc;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/* Fine checkbox toggle */
/* Inizio letture messa */
.cci-liturgia-giorno-section-title {
  padding-top: 20px;
}
.cci-liturgia-giorno-ritornello-content {
  font-weight: bold;
}
.cci-liturgia-giorno-testo-rosso {
  color: red;
}
.cci-liturgia-giorno-salmo p {
  padding-top: 10px;
}
.cci-liturgia-giorno-acclamazione-al-vangelo p {
  padding-bottom: 10px;
}
.cci-toggle-dropdown.collapsed:after {
  content: '\f067' !important;
}
.cci-toggle-dropdown:after {
  content: '\f068';
  font-family: 'FontAwesome';
  right: 20px;
  font-size: 20px;
  line-height: 28px;
  cursor: pointer;
  bottom: 10px;
}
/* Fine letture messa */
#widget-auto-scroll {
  border: 1px solid #ccc;
  position: fixed;
  bottom: 60px;
  right: 18px;
  padding: 5px;
  background-color: #eee;
  border-radius: 10px;
}
.widget-title {
  text-align: center;
  font-variant: small-caps;
}
.libretto-form {
  padding-left: unset;
  padding-right: unset;
  padding-top: 5px;
  padding-bottom: 5px;
}
.canto-prevalidato {
  background-color: #fcf8e3;
}
.num-canti {
  padding-left: 0.2em;
  padding-right: 0.4em;
  margin-right: 2px;
  font-size: x-small;
}
.canticristiani_loading {
  font-size: x-large;
  text-align: center;
  color: #489cab;
}
.maiuscoletto {
  font-variant: small-caps;
  font-weight: bold;
}
.letter_spacing_normal {
  letter-spacing: normal !important;
}
.letter_spacing_1 {
  letter-spacing: 1px !important;
}
.letter_spacing_2 {
  letter-spacing: 2px !important;
}
.letter_spacing_3 {
  letter-spacing: 3px !important;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto-Regular'), local('Roboto-Regular'), url(Roboto-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Solway';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Solway Regular'), local('Solway-Regular'), url(Solway-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'SourceSansPro';
  font-style: normal;
  font-display: swap;
  src: local('SourceSansPro-Regular'), local('SourceSansPro-Regular'), url(SourceSansPro-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik-Filtered';
  font-style: normal;
  font-display: swap;
  src: local('RubikBubbles-Regular'), local('RubikBubbles-Regular'), url(RubikBubbles-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ComicNeue';
  font-style: normal;
  font-display: swap;
  src: local('ComicNeue-Regular'), local('ComicNeue-Regular'), url(ComicNeue-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/**
* CSS specifico di testo e accordi
*/
.font-rubik {
  font-family: 'Rubik-Filtered', sans-serif !important;
}
.font-comic {
  font-family: 'ComicNeue', sans-serif !important;
}
.font-impact {
  font-family: Impact, Charcoal, sans-serif !important;
}
.font-arial {
  font-family: "Arial Black", Gadget, sans-serif !important;
}
.font-verdana {
  font-family: Verdana, Geneva, sans-serif !important;
}
.font-roboto {
  font-family: "Roboto", sans-serif !important;
}
.font-solway {
  font-family: "Solway", sans-serif !important;
}
.font-source-sans-pro {
  font-family: "SourceSansPro", sans-serif !important;
}
body,
h1,
h2,
h4 {
  font-family: 'Open Sans', sans-serif;
}
.lyr {
  font-size: 12px;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 30px;
}
.color_black {
  color: #000;
}
.color_blue {
  color: #00f;
}
.color_white {
  color: #fff;
}
.lyr_bridge {
  font-size: 12px;
  font-style: italic;
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 30px;
}
.lyr_no_chr {
  font-size: 12px;
  text-align: left;
  padding-bottom: 10px;
}
.rit {
  font-size: 12px;
  color: #0000cc;
  text-align: left;
  font-weight: bolder;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
  line-height: 30px;
}
.text-line-height {
  line-height: 20px;
}
.rit-add-padding {
  padding-left: 35px;
}
.chr {
  font-family: "Courier New", Courier, mono;
  font-size: 10px;
  color: #CC0000;
  text-align: left;
  font-weight: bold;
  margin-top: -11px;
  position: absolute;
  letter-spacing: 0px;
}
div.song {
  margin-top: 30px;
  margin-bottom: 200px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 3px;
  width: auto;
}
.update-song {
  font-size: x-small;
  font-style: italic;
  font-variant: none;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 1px;
}
.container-fluid {
  padding-right: 10px;
  padding-left: 10px;
  background-color: #f3f4f66b;
}
p {
  margin-top: 0;
  margin-block-start: 0px;
  margin-block-end: 0px;
}
.accapo {
  word-wrap: break-word;
}
.nascondi {
  color: #fff;
}
.sup {
  position: relative;
  top: -0.3em;
  font-size: 75%;
}
.inf {
  position: relative;
  top: 0em;
  font-size: 75%;
}
.comment {
  line-height: 5px;
}
/* -------------- MODERNIZE UI -------------- */
:root {
  --primary-color: #0065c6;
  --bg-color: #f4f5f8;
  --card-bg: #ffffff;
  --text-main: #333333;
  --text-muted: #6c757d;
  --border-color: #e0e0e0;
}
.settings-container {
  margin: 0 auto;
  padding: 20px 15px;
  margin-top: 40px;
}
.settings-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 25px;
  margin-bottom: 10px;
  padding-left: 15px;
}
.list-title {
  background: rgba(0, 0, 0, 0.05);
  padding: 8px 16px;
  font-weight: 700;
  grid-column: 1 / -1;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 1.2rem;
  color: var(--primary-color);
}
.container-search {
  background: #ffffff !important;
  border-bottom: 2px solid #f0f0f0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  padding: 10px 5px !important;
  top: 50px !important;
}
.settings-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 25px;
  margin-bottom: 10px;
  padding-left: 15px;
}
.settings-group {
  background-color: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
}
.setting-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: transparent;
  text-decoration: none;
  color: var(--text-main);
  transition: background-color 0.2s;
}
.setting-item:last-child {
  border-bottom: none;
}
.setting-item.clickable:active,
.setting-item.clickable:hover {
  background-color: #f8f9fa;
  text-decoration: none;
  color: var(--text-main);
  cursor: pointer;
}
.setting-label {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.setting-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 0.9rem;
}
.bg-blue {
  background-color: var(--primary-color);
}
.bg-orange {
  background-color: #fd7e14;
}
.bg-purple {
  background-color: #6f42c1;
}
.bg-green {
  background-color: #28a745;
}
.bg-gray {
  background-color: #6c757d;
}
/* iOS style toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
input:checked + .slider {
  background-color: var(--primary-color);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
/* Chevron right for clickable items */
.fa-chevron-right {
  color: #bbb;
  font-size: 0.9rem;
}
.segmented-control {
  display: flex;
  background-color: #e9ecef;
  border-radius: 8px;
  padding: 3px;
  width: 100%;
  margin-top: 10px;
}
.segmented-control label {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  margin: 0;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.segmented-control input[type="radio"] {
  display: none;
}
.segmented-control input[type="radio"]:checked + label {
  background-color: white;
  color: var(--primary-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.setting-content {
  flex: 1;
}
.setting-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.color-picker-group {
  display: flex;
  gap: 15px;
  padding: 15px 20px;
  justify-content: center;
}
.color-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.color-circle:active {
  transform: scale(0.9);
}
.color-circle.active {
  border-color: var(--primary-color);
}
.color-circle i {
  color: var(--primary-color);
  font-size: 1.2rem;
  opacity: 0;
}
.color-circle.active i {
  opacity: 1;
}
.cc-white {
  background-color: #ffffff;
  border-color: #ddd;
}
.cc-light {
  background-color: #f5f5f5;
}
.cc-sepia {
  background-color: #ffebcf;
}
.cc-dark {
  background-color: #748898;
}
.cc-dark i {
  color: white !important;
}
/* Inizio checkbox modern checkbox */
.modern-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  margin-bottom: 0px !important;
}
.modern-checkbox-square {
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
input[type="checkbox"]:checked + .modern-checkbox-square {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
input[type="checkbox"]:checked + .modern-checkbox-square i {
  color: white;
  font-size: 0.8rem;
}
.modern-checkbox input {
  display: none;
}
/* --- AREA PRIVATA MODERN REDESIGN --- */
.modern-area-privata {
  margin-top: 40px;
  padding: 20px;
  /* Lighter modern background */
  font-family: 'Inter', 'Roboto', sans-serif;
}
.modern-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.03);
}
.modern-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333333;
  margin-bottom: 8px;
}
.modern-section-desc {
  font-size: 0.9rem;
  color: #666666;
  margin-bottom: 16px;
  line-height: 1.4;
}
.modern-input-group {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.modern-input-group i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #999999;
  z-index: 10;
}
.modern-input-group i + .modern-input {
  padding-left: 40px !important;
}
.modern-input {
  flex: 1;
  padding: 12px 14px !important;
  /* padding for icon */
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 1rem;
  background-color: #fcfcfc;
  transition: all 0.2s ease;
}
.modern-input:focus {
  outline: none;
  border-color: #0065c6;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 101, 198, 0.15);
}
.btn-modern-primary {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #0065c6 0%, #004d96 100%);
  color: white !important;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(0, 101, 198, 0.3);
  transition: all 0.2s ease;
  display: block;
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px;
  margin-top: 10px;
}
.btn-modern-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 101, 198, 0.3);
}
.modern-info-badge {
  background-color: #eaf3fb;
  border: 1px solid #bce0fd;
  border-radius: 10px;
  padding: 16px;
  color: #004d96;
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
}
.modern-info-badge i {
  font-size: 1.3rem;
  margin-right: 12px;
  margin-top: 2px;
  color: #0065c6;
}
.playlist-total {
  display: block;
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 800 !important;
}
.modern-update-badge {
  background-color: #eaf3fb;
  border: 1px solid #bce0fd;
  border-radius: 10px;
  padding: 16px;
  color: #004d96;
  display: flex;
  align-items: flex-start;
}
.modern-navbar {
  background: linear-gradient(135deg, #0065c6 0%, #004d96 100%) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  padding: 0.5rem 1rem !important;
  height: 56px;
  /* Specific style for top header icons */
}
.modern-navbar .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 1.25rem;
  color: #ffffff !important;
}
.modern-navbar #sidebarToggle {
  font-size: 1.2rem;
  padding: 0.5rem;
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.9) !important;
}
.modern-navbar #sidebarToggle:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}
.modern-navbar .navbar-nav {
  display: flex;
  align-items: center;
}
.modern-navbar .navbar-brand {
  padding: 0.5rem !important;
  margin: 0 2px !important;
  border-radius: 8px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.modern-navbar .navbar-brand:hover {
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
.modern-navbar .navbar-brand i {
  padding: 0 !important;
  /* Remove old inline paddings */
}
/* Sidebar modern touch */
.sidebar .nav-item .nav-link {
  padding: 12px 20px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s;
  display: flex;
  align-items: center;
}
.sidebar .nav-item .nav-link i {
  width: 24px;
  margin-right: 12px;
  font-size: 1.1rem;
  text-align: center;
}
.sidebar .nav-item .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff !important;
}
.sidebar .nav-item.active .nav-link {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-weight: 600;
}
/* --- MODERN SONG VIEW v6 (apriCanto) --- */
#view_canto {
  margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 80px;
}
.song-header-bar {
  background: #004d96;
  padding: 10px 14px;
  color: white;
  position: relative;
  overflow: hidden;
  margin-top: 45px;
  margin-left: -15px;
  margin-right: -15px;
}
.song-header-bar::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.song-title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.song-number-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  white-space: nowrap;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.9);
}
.song-title {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  margin: 0;
  border-bottom: none;
  padding: 0;
}
.song-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.song-author {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  border-bottom: none;
  padding: 0;
}
.mode-selector {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}
.mode-opt {
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}
.mode-opt.active {
  background: white;
  color: #004d96;
}
.song-tags-bar {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 9px 14px;
  margin-left: -15px;
  margin-right: -15px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.song-tags-bar::-webkit-scrollbar {
  display: none;
}
.song-tag {
  background: #e8f0fe;
  color: #0065c6;
  border: 1px solid rgba(0, 101, 198, 0.18);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.song-tag.alt {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.song-tag.neutral {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}
.fab-wrap {
  position: fixed;
  bottom: 62px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 14px 8px;
  pointer-events: none;
  z-index: 50;
}
.fab-pill {
  pointer-events: all;
  display: flex;
  align-items: stretch;
  background: white;
  border: 1.5px solid #e5e7eb;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.fab-pill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  background: none;
  border: none;
  color: #0065c6;
  font-size: 0.58rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fab-pill-btn i {
  font-size: 0.95rem;
}
.fab-pill-btn.primary {
  background: linear-gradient(135deg, #0065c6, #004d96);
  color: white;
  padding: 8px 20px;
}
.fab-pill-divider {
  width: 1px;
  background: #e5e7eb;
  flex-shrink: 0;
}
.fab-pill-divider.on-blue {
  background: rgba(255, 255, 255, 0.3);
}
.song-footer {
  position: sticky;
  bottom: 0;
  background: #004d96;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 10px 12px 14px;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
  z-index: 60;
}
.font-size-widget {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 3px 10px;
  gap: 4px;
}
.fs-btn {
  background: none;
  border: none;
  color: white;
  width: 28px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.68rem;
}
.fs-icon {
  color: rgba(255, 255, 255, 0.55);
  padding: 0 2px;
  font-size: 0.7rem;
}
.transpose-widget {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 3px 12px;
  gap: 8px;
}
.tp-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  width: 26px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tone-val {
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  font-size: 0.78rem;
  color: white;
}
.footer-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.56rem;
  font-weight: 500;
  cursor: pointer;
  padding: 3px 12px;
  border-radius: 8px;
  border: none;
  background: none;
}
.footer-share-btn i {
  font-size: 0.95rem;
  color: white;
}
#widget-auto-scroll {
  display: none;
}
.modern-transpose-badge {
  display: none;
}
/* Modern Info Cards */
.modern-info-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  /* Variants */
}
.modern-info-card .card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  background: transparent;
  padding: 0;
  border: none;
}
.modern-info-card .card-header i {
  font-size: 1.25rem;
  color: var(--primary-color);
  width: 24px;
  text-align: center;
}
.modern-info-card .card-header .card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin: 0;
}
.modern-info-card .card-body {
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.5;
}
.modern-info-card .card-body small {
  color: var(--text-muted);
  display: block;
  margin-top: 4px;
}
.modern-info-card .card-body ul {
  padding-left: 20px;
  margin-top: 8px;
}
.modern-info-card.card-primary {
  border-left: 4px solid var(--primary-color);
}
.modern-info-card.card-primary .card-header i {
  color: var(--primary-color);
}
.modern-info-card.card-info {
  border-left: 4px solid #17a2b8;
}
.modern-info-card.card-info .card-header i {
  color: #17a2b8;
}
.modern-info-card.card-secondary {
  border-left: 4px solid #6c757d;
}
.modern-info-card.card-secondary .card-header i {
  color: #6c757d;
}
.settings-group {
  background-color: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
}
.setting-item {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  background-color: transparent;
  text-decoration: none;
  color: var(--text-main);
  transition: background-color 0.2s;
}
.setting-item:last-child {
  border-bottom: none;
}
.setting-item.clickable:active,
.setting-item.clickable:hover {
  background-color: #f8f9fa;
  text-decoration: none;
  color: var(--text-main);
  cursor: pointer;
}
.setting-label {
  display: flex;
  align-items: center;
  font-size: 1rem;
}
.setting-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  color: white;
  font-size: 0.9rem;
}
.bg-blue {
  background-color: var(--primary-color);
}
.bg-orange {
  background-color: #fd7e14;
}
.bg-purple {
  background-color: #6f42c1;
}
.bg-green {
  background-color: #28a745;
}
.bg-gray {
  background-color: #6c757d;
}
/* iOS style toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
input:checked + .slider {
  background-color: var(--primary-color);
}
input:checked + .slider:before {
  transform: translateX(22px);
}
/* Chevron right for clickable items */
.fa-chevron-right {
  color: #bbb;
  font-size: 0.9rem;
}
.segmented-control {
  display: flex;
  background-color: #e9ecef;
  border-radius: 8px;
  padding: 3px;
  width: 100%;
  margin-top: 10px;
}
.segmented-control label {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  margin: 0;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.segmented-control input[type="radio"] {
  display: none;
}
.segmented-control input[type="radio"]:checked + label {
  background-color: white;
  color: var(--primary-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.setting-content {
  flex: 1;
}
.setting-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.color-picker-group {
  display: flex;
  gap: 15px;
  padding: 15px 20px;
  justify-content: center;
}
.color-circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
}
.color-circle:active {
  transform: scale(0.9);
}
.color-circle.active {
  border-color: var(--primary-color);
}
.color-circle i {
  color: var(--primary-color);
  font-size: 1.2rem;
  opacity: 0;
}
.color-circle.active i {
  opacity: 1;
}
.cc-white {
  background-color: #ffffff;
  border-color: #ddd;
}
.cc-light {
  background-color: #f5f5f5;
}
.cc-sepia {
  background-color: #ffebcf;
}
.cc-dark {
  background-color: #748898;
}
.cc-dark i {
  color: white !important;
}
/* Inizio checkbox modern checkbox */
.modern-checkbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  margin-bottom: 0px !important;
}
.modern-checkbox-square {
  width: 24px;
  height: 24px;
  border: 2px solid #ccc;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
input[type="checkbox"]:checked + .modern-checkbox-square {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
input[type="checkbox"]:checked + .modern-checkbox-square i {
  color: white;
  font-size: 0.8rem;
}
.modern-checkbox input {
  display: none;
}
/* Fine modern checkbox */
.modern-select {
  appearance: none;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 35px 10px 15px !important;
  font-size: 0.95rem;
  color: var(--text-main);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  width: 100%;
}
.modern-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 101, 198, 0.15);
}
/* --- SONG LIST MODERN REDESIGN --- */
#app_lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 8px 12px 100px;
  list-style: none;
  margin: 0;
  overflow-x: hidden;
  max-width: 100%;
}
@media (min-width: 768px) {
  #app_lista {
    grid-template-columns: 1fr 1fr;
    gap: 0 10px;
  }
}
#app_lista .letter-divider {
  grid-column: 1 / -1;
}
#app_lista .song-item {
  min-width: 0;
  overflow: hidden;
}
/* ── Filter Chips ── */
.filter-bar {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.filter-bar::-webkit-scrollbar {
  display: none;
}
.filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid #e5e7eb;
  background: white;
  color: #6b7280;
  transition: all 0.2s;
}
.filter-chip:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}
.filter-chip.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}
.filter-chip .chip-count {
  background: rgba(0, 0, 0, 0.1);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 700;
}
.filter-chip.active .chip-count {
  background: rgba(255, 255, 255, 0.25);
}
/* ── Letter Divider ── */
.letter-divider {
  padding: 8px 6px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  scroll-margin-top: 150px;
}
.letter-divider .letter-badge {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary-color);
  width: 28px;
  height: 28px;
  background: #e8f0fe;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.letter-divider .divider-line {
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}
/* ── Song Item (new list row) ── */
.song-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  gap: 14px;
  background: white;
  border-radius: 14px;
  margin-bottom: 6px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.song-item:hover {
  background: #f8f9fb;
  border-color: #e5e7eb;
}
.song-item:active {
  transform: scale(0.99);
  background: #e8f0fe;
}
.song-item .song-item-fav {
  color: #d4d4d4;
  font-size: 1.15rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  transition: all 0.2s;
}
.song-item .song-item-fav.active {
  color: #daa520;
}
.song-item .song-item-fav:hover {
  background: rgba(218, 165, 32, 0.1);
}
.song-item .song-item-info {
  flex: 1;
  min-width: 0;
}
.song-item .song-item-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-item .song-item-author {
  font-size: 0.78rem;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.song-item .song-item-tags {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.song-item .song-item-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f0f2f5;
  color: #6b7280;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.song-item .song-item-number {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--primary-color);
  background: #e8f0fe;
  padding: 4px 10px;
  border-radius: 8px;
  flex-shrink: 0;
  min-width: 36px;
  text-align: center;
}
.song-item .song-item-transpose {
  font-size: 0.68rem;
  font-weight: 700;
  color: #8b6914;
  background: #fdf6e3;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.song-item .song-item-chevron {
  color: #d0d0d0;
  font-size: 0.7rem;
  flex-shrink: 0;
}
.song-item.canto-prevalidato {
  border-left: 3px solid #daa520;
  background: #fffdf5;
}
/* ── Result Counter ── */
.result-counter {
  padding: 4px 16px 2px;
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 500;
}
/* ── Bottom Tab Bar ── */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #004d96;
  display: flex;
  padding: 10px 0 14px;
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
}
.bottom-tab-bar .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
}
.bottom-tab-bar .tab-item i {
  font-size: 1.1rem;
}
.bottom-tab-bar .tab-item.active {
  color: white;
}
.bottom-tab-bar .tab-item:hover {
  color: rgba(255, 255, 255, 0.85);
}
/* ── Selection Mode (song-item variant) ── */
.song-item.song-item-selection .song-item-info {
  gap: 16px;
}
.song-item-selection select.progressivo {
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fdfdfd;
  font-weight: bold;
  color: var(--primary-color);
}