/**
* CSS generale app
*/
#view_canto {
  touch-action: pan-x pan-y !important;
}
#lista-lettere {
  position: fixed;
  top: 120px;
  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;
}
#lista-lettere ul {
  list-style: none;
  padding: unset;
  justify-content: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  margin-top: 10px;
}
#lista-lettere ul li {
  padding-bottom: 1px;
}
.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: 499px) {
  #lista-lettere {
    font-size: x-small;
    top: 115px;
  }
  #lista-lettere ul li {
    padding-bottom: unset;
  }
}
@media only screen and (min-height: 500px) and (max-height: 599px) {
  #lista-lettere {
    font-size: x-small;
    /* top: 115px; */
  }
  #lista-lettere ul li {
    padding-bottom: unset;
  }
}
@media only screen and (min-height: 600px) and (max-height: 699px) {
  #lista-lettere {
    font-size: small;
  }
  #lista-lettere ul li {
    padding-bottom: 1px;
  }
}
@media only screen and (min-height: 700px) and (max-height: 799px) {
  #lista-lettere {
    font-size: unset;
  }
  #lista-lettere ul li {
    padding-bottom: unset;
  }
}
@media only screen and (min-height: 800px) and (max-height: 899px) {
  #lista-lettere {
    font-size: unset;
  }
  #lista-lettere ul li {
    padding-bottom: 3px;
  }
}
@media only screen and (min-height: 900px) and (max-height: 999px) {
  #lista-lettere {
    font-size: unset;
  }
  #lista-lettere ul li {
    padding-bottom: 8px;
  }
}
@media only screen and (min-height: 1000px) {
  #lista-lettere {
    font-size: unset;
  }
  #lista-lettere ul li {
    padding-bottom: 12px;
  }
}
.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: 50px;
}
.app-content-padding {
  padding-top: 50px;
}
.app-content-padding-cerca {
  padding-top: 50px;
  padding-bottom: 10px;
}
.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: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/opensans/v40/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@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: 130px;
  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;
}
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;
}