/** Ionic CSS Variables **/
:root {
  --ion-background-color: $bgColor;
  --ion-color: white;
  --ion-text-color: white;
  --ion-tab-bar-color: rgb(255, 255, 255);
  --ion-tab-bar-color-activated: rgb(197, 225, 252);
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
  /** secondary **/
  --ion-color-secondary: #65b4f9;
  --ion-color-secondary-rgb: 101, 180, 249;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #3171e0;
  --ion-color-secondary-tint: #4c8dff;
  /** tertiary **/
  --ion-color-tertiary: #ffffff;
  --ion-color-tertiary-rgb: 255,255, 255;
  --ion-color-tertiary-contrast: #65b4f9;
  --ion-color-tertiary-contrast-rgb: 101, 180, 249;
  --ion-color-tertiary-shade: #d7d8da;
  --ion-color-tertiary-tint: #f5f6f9;
  /** success **/
  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;
  /** warning **/
  --ion-color-warning: #ffce00;
  --ion-color-warning-rgb: 255, 206, 0;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #e0b500;
  --ion-color-warning-tint: #ffd31a;
  /** danger **/
  --ion-color-danger: #f04141;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d33939;
  --ion-color-danger-tint: #f25454;
  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
  /** medium **/
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;
  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9; }

/** Ionic CSS Variables **/
:root {
  --ion-background-color: $bgColor;
  --ion-color: white;
  --ion-text-color: white;
  --ion-tab-bar-color: rgb(255, 255, 255);
  --ion-tab-bar-color-activated: rgb(197, 225, 252);
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
  /** secondary **/
  --ion-color-secondary: #65b4f9;
  --ion-color-secondary-rgb: 101, 180, 249;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #3171e0;
  --ion-color-secondary-tint: #4c8dff;
  /** tertiary **/
  --ion-color-tertiary: #ffffff;
  --ion-color-tertiary-rgb: 255,255, 255;
  --ion-color-tertiary-contrast: #65b4f9;
  --ion-color-tertiary-contrast-rgb: 101, 180, 249;
  --ion-color-tertiary-shade: #d7d8da;
  --ion-color-tertiary-tint: #f5f6f9;
  /** success **/
  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;
  /** warning **/
  --ion-color-warning: #ffce00;
  --ion-color-warning-rgb: 255, 206, 0;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #e0b500;
  --ion-color-warning-tint: #ffd31a;
  /** danger **/
  --ion-color-danger: #f04141;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d33939;
  --ion-color-danger-tint: #f25454;
  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;
  /** medium **/
  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;
  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9; }

.container {
  display: inline-flex;
  align-content: stretch;
  align-items: stretch ;
  height: 100%;
  width: 100%; }

.contentWrp {
  max-width: 760px;
  flex-grow: 1;
  text-align: center;
  margin: auto; }

.contentas {
  max-width: 760px;
  margin: auto; }

.soniniai {
  flex-grow: 1;
  min-width: 160px;
  width: 160px;
  min-height: 600px;
 }
  .soniniai.kairys {
    text-align: right;
    margin-right: 32px; }
  .soniniai.desinys {
    text-align: left;
    margin-left: 32px; }

@media (max-width: 1200px) {
  .soniniai {
    display: none; } }

.viduriniai {
  margin-top: 5px;
  min-width: 200px;
  width: 100%;
  min-height: 80px;
  max-height: 200px; }

.footer {
  margin: auto;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px; }

#mainHeader {
  width: 100%;
  -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3); }

.topNav {
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 10px;
  margin: auto;
  width: 100%; }
  .topNav .topNavButton {
    display: inline-block;
    text-decoration: none;
    height: 60px;
    width: 100%;
    color: white;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    justify-content: center; }
    .topNav .topNavButton:hover {
      background: rgba(0, 0, 0, 0.025); }
    .topNav .topNavButton div {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center; }
      .topNav .topNavButton div ion-icon {
        font-size: 30px; }
      .topNav .topNavButton div span {
        font-size: 14px;
        text-transform: none; }

.topNav.desktop {
  max-width: 600px; }

body {
  overflow: initial;
  position: initial;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: initial;
  margin: 0;
  padding: 0; }

.viduriniai {
  margin-top: 5px;
  min-width: 200px;
  width: 100%;
  min-height: 80px;
  max-height: 200px; }

#topLogo, #topLogo a, #topLogo a:hover, #topLogo a:visited {
  /*width:300px;*/
  /*height:40px;*/
  /*margin: 10px auto 15px auto;*/
  font-size: 1.5em;
  text-align: center;
  color: white;
  display: inline-block;
  font-family: 'Catamaran', sans-serif;
  /*text-transform: uppercase;*/
  /*padding-left: 120px;*/
  padding-top: 5px;
  /*background: url('/images/favicon.png') repeat;*/
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: 5px auto; }

#topLogo .dotcom {
  color: #d1d1d1; }

#topLogo img {
  max-height: 40px; }

.buttonCont {
  max-width: 900px;
  margin: auto;
  margin-top: 15px; }

.headLogo, .headLogo a, .headLogo a:hover, .headLogo a:visited {
  /*width:800px;*/
  /*height:40px;*/
  /*margin: 10px auto 15px auto;*/
  font-size: 1.8em;
  text-align: left;
  color: white;
  float: left;
  display: block;
  /*margin-left: 5%;*/
  margin-left: 10px;
  margin-top: 10px;
  /*height: 200px;*/
  /*padding-top: 20px;*/
  /*margin-bottom: -350px;*/
  text-decoration: none;
  text-transform: uppercase;
  /*text-shadow: 2px 2px 6px #000000;*/
  /*filter: dropshadow(color=#000000, offx=2, offy=2);*/
  font-family: 'Roboto', sans-serif; }

.headLogo .upperHead {
  /*margin-bottom: -15px;*/
  font-weight: 300;
  /*text-shadow: 2px 2px rgba(0,0,0,0.3);*/
  font-family: 'Merriweather Sans', sans-serif;
  font-size: 1.05em;
  /*font-style: italic;*/ }

.headLogo .lowerHead {
  /*background-color: #64b5f6;*/
  /*padding: 0 5px 0 5px;*/
  /*line-height: 1em;*/
  font-size: 1.5em;
  line-height: 0.7em;
  font-weight: 700;
  font-family: 'Merriweather Sans', sans-serif;
  /*font-style: italic;*/
  /*text-shadow: 2px 2px rgba(0,0,0,0.2);*/ }

#yesbtn {
  background-image: url("/assets/images/1.png");
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  max-width: 600px;
  max-height: 270px;
  width: 100%;
  height: 270px;
  height: 45vw;
  margin: auto;
  padding: 0 0 0 0;
  display: block; }

#yesbtn:hover {
  background-image: url("/assets/images/2.png"); }

.nobtn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white !important;
  text-decoration: none; }

#dilemma {
  /*padding-right: 10%;*/
  /*padding-left: 10%;*/
  /*padding-top: 10px;*/
  margin-top: 15px;
  margin-bottom: 15px; }

.rect {
  min-height: 60px;
  height: auto;
  padding: 10px;
  color: #ffffff;
  font-size: 1.15em;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  font-family: 'Merriweather Sans', sans-serif;
  border-radius: 12px;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */ }

@media only screen and (max-width: 800px) {
  .rect {
    min-height: 10px; } }

@media only screen and (max-width: 800px) {
  .headLogo {
    font-size: 1.6em;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: -15px;*/
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
    float: none; } }

#but {
  width: auto;
  height: 80px;
  line-height: 80px;
  /*width: 50px;*/
  color: #FFFFFF;
  margin: 0 30px 0 30px;
  /*padding-top: 10px;*/
  text-align: center;
  vertical-align: center;
  font-size: 1.75em;
  text-transform: lowercase;
  font-family: 'Merriweather Sans', sans-serif;
  font-weight: 300;
  /*font-style: italic;*/
  /*text-shadow: 2px 2px rgba(0,0,0,0.3);*/ }

#socialCont {
  width: 600px;
  margin: 0;
  height: 100px;
  text-align: center; }

.social {
  margin: 5px;
  float: left;
  width: 100px;
  height: 40px; }

.newMode .showNextDilemma, .nobtn, .showNextDilemma a, .newMode .nobtn a, .ybt {
  width: 45%;
  min-height: 40px;
  line-height: 40px;
  font-size: 1.4em;
  text-align: center;
  text-decoration: none;
  /*color:white;*/
  vertical-align: middle;
  /*background-color: #e63232;*/
  color: #65B4F9 !important;
  background-color: white;
  /*background: rgb(235, 19, 19);*/
  /*margin: auto;*/
  margin-top: 25px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  /*text-shadow: 2px 2px rgba(0,0,0,0.3);*/
  margin-bottom: 30px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid white; }

.newMode .nobtn img {
  height: 25px;
  margin-right: 15px; }

.newMode .nobtn, #ybt {
  float: left; }

#ybt {
  margin-left: 10%; }

.newMode #ybt img {
  height: 25px;
  margin-left: 15px;
  margin-right: 0;
  margin-bottom: -5px; }

.newMode .headLogo {
  font-size: 1.6em;
  margin-left: auto;
  margin-right: auto;
  /*margin-top: -15px;*/
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  float: none; }

.headLogo.webMode {
  float: left !important;
  text-align: left !important;
  width: auto !important; }

.headStats, .headStats a, .headStats a:hover, .headStats a:visited {
  display: block;
  /*padding-top: 20px;*/
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5em;
  text-align: center;
  float: none;
  display: block;
  margin-left: 0;
  /*padding-top: -15px;*/
  margin: auto;
  max-width: 600px; }

.headStats .upperHead {
  font-size: inherit; }

.comments {
  background-color: white; }

.unconfirmedNotice {
  margin-bottom: 25px; }

.unconfirmedWeb {
  max-width: 300px;
  margin: auto;
  margin-bottom: 25px; }

.dilStats {
  width: 100%;
  text-align: center; }
  @media only screen and (max-width: 800px) {
    .dilStats .headLogo, .dilStats .headLogo a, .dilStats .headLogo a:hover, .dilStats .headLogo a:visited {
      font-size: 1.1em; }
    .dilStats .headLogo .lowerHead {
      /*font-size: 1.2em;*/
      /*padding: 5px;*/ } }
  .dilStats .buttonCont {
    max-width: 900px;
    margin: auto;
    margin-top: 15px; }
  .dilStats .headLogo, .dilStats .headLogo a, .dilStats .headLogo a:hover, .dilStats .headLogo a:visited {
    float: none;
    text-align: center;
    font-size: 1.8em;
    color: white;
    display: block;
    margin: auto;
    margin-left: 10px;
    margin-top: 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif; }
  .dilStats .headLogo .upperHead {
    font-weight: 300;
    font-family: 'Merriweather Sans', sans-serif;
    font-size: 0.95em; }
  .dilStats .headLogo .lowerHead {
    font-size: 1.5em;
    line-height: 0.7em;
    font-weight: 700;
    font-family: 'Merriweather Sans', sans-serif; }
  .dilStats .statsBar {
    width: 100%;
    max-width: 310px;
    color: white;
    margin: auto;
    text-align: center;
    margin-bottom: 30px; }
  .dilStats .statsBar .statsBarinfoText {
    max-width: 310px;
    margin: auto; }
  .dilStats .statsBarinfoText .statsBarLeft {
    float: left; }
  .dilStats .statsBarinfoText .statsBarRight {
    float: right; }
  .dilStats .percentBar {
    width: 100%;
    background-color: #dc1414;
    /*width: 100%;*/
    height: 5px;
    max-height: 20px;
    max-width: 100%;
    /*margin-left: 10vw;*/
    margin: auto;
    margin-bottom: 10px; }
  .dilStats .yesBar {
    background-color: #40E892;
    width: 0%;
    height: 5px;
    max-width: 100%;
    max-height: 5px;
    /*margin-left: 0vw;*/ }
  .dilStats .peoplePressed {
    color: #40E892; }
  .dilStats .peopleDidntpress {
    color: #dc1414; }
  .dilStats .headStats, .dilStats .headStats, .dilStats .headStats:hover, .dilStats .headStats {
    display: block;
    /*padding-top: 20px;*/
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-size: 1.5em;
    text-align: center;
    float: none;
    display: block;
    margin-left: 0;
    /*padding-top: -15px;*/
    margin: auto;
    max-width: 600px; }
  .dilStats .headStats .upperHead {
    font-size: inherit; }

.showNextDilemma, .nobtn, .showNextDilemma a, .nobtn a {
  width: 170px;
  min-height: 40px;
  line-height: 40px;
  font-size: 1.45em;
  text-align: center;
  text-decoration: none;
  /*color:white;*/
  vertical-align: middle;
  /*background-color: #e63232;*/
  color: #65B4F9 !important;
  background-color: white;
  /*background: rgb(235, 19, 19);*/
  margin: auto;
  margin-top: 25px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  /*text-shadow: 2px 2px rgba(0,0,0,0.3);*/
  margin-bottom: 30px;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid white; }

.showNextDilemma:hover, .nobtn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white !important;
  text-decoration: none; }

.crhead {
  font-size: 2.0em;
  padding: 5px 15px 5px 15px;
  color: white;
  margin: auto;
  text-align: center;
  margin-bottom: 15px; }

#statsBox {
  /*background: rgba(13, 71, 161, 0.5); !*topbar color *!*/
  background: #3882C3;
  padding: 5px;
  border-radius: 12px;
  max-width: 550px;
  margin: auto;
  color: white;
  font-size: 1.0em;
  font-family: 'Merriweather Sans', sans-serif;
  text-align: center; }

.statsPart {
  background: #65B4F9;
  padding: 15px;
  border-radius: 12px;
  margin: 20px; }

.statsBig {
  font-size: 1.5em; }

.favs {
  background: white;
  color: black; }
  .favs .favListItem {
    width: 100%;
    border-bottom: 1px solid #aaaaaa;
    overflow: hidden;
    display: flex;
    flex-direction: row; }
    .favs .favListItem a {
      text-decoration: none;
      overflow: hidden;
      display: block;
      padding: 16px;
      text-align: left;
      color: black;
      flex-grow: 1; }
      .favs .favListItem a:hover {
        background: rgba(0, 0, 0, 0.05); }
    .favs .favListItem .favListTrashWrp {
      height: auto;
      margin-right: 8px;
      display: flex;
      justify-content: center;
      align-items: center; }
      .favs .favListItem .favListTrashWrp .favListTrash {
        cursor: pointer;
        border-radius: 8px;
        vertical-align: middle;
        padding: 8px;
        padding-left: 10px;
        padding-right: 10px;
        background: rgba(245, 61, 61, 0.5);
        color: white;
        font-size: 18px; }
        .favs .favListItem .favListTrashWrp .favListTrash:hover {
          background: #f53d3d; }
    .favs .favListItem .clearfix {
      clear: both; }

#createForm {
  margin: auto;
  text-align: center;
  max-width: 400px; }
  #createForm textarea {
    color: black;
    width: 300px; }
  #createForm .but {
    color: white;
    font-size: 2em; }

.createError {
  color: #f35151; }

.comments {
  background-color: white;
  border-radius: 16px; }

ion-content, .content-md, .ion-page > ion-content {
  background-color: #65B4F9;
  color: white; }

body {
  background-color: #65B4F9;
  font-family: 'Roboto', sans-serif; }

.scroll-content {
  max-width: 760px;
  margin: auto; }

.clickable :hover {
  cursor: pointer; }

.clearfix {
  clear: both; }

.loading,
.loading:after {
  border-radius: 50%;
  width: 10em;
  height: 10em; }

.loading {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear; }

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.popoverMsg .popover-content {
  width: auto;
  padding: 10px;
  text-align: center;
  background-color: white;
  color: #4b4b4b; }

.popoverMsg .popover-arrow::after {
  background-color: white; }

.appAlert {
  background-color: rgba(0, 0, 0, 0.5); }
  .appAlert .alert-wrapper {
    background-color: var(--ion-color-primary-contrast); }
  .appAlert .alert-head {
    color: var(--ion-color-primary); }
    .appAlert .alert-head .alert-title {
      color: var(--ion-color-primary); }



#appContentCol {
  padding-bottom: 84px !important; }

.btn {
  font-family: Roboto, "Helvetica Neue", sans-serif;
  display: block;
  position: relative;
  margin: 4px 2px;
  font-weight: 500;
  letter-spacing: 0.06em;
  contain: layout style;
  cursor: pointer;
  background: var(--ion-color-primary);
  overflow: hidden;
  display: inline-block;
  width: auto;
  color: var(--ion-color);
  font-family: var(--ion-font-family, inherit);
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  pointer-events: auto;
  font-kerning: none;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 15ms linear, color 15ms linear;
  margin: 4px 2px;
  padding-top: 0.25em;
  padding-left: 0.9em;
  padding-right: 0.9em;
  padding-bottom: 0.25em;
  height: 2.1em;
  font-size: 14px; }
  .btn:hover {
    background: rgba(56, 129, 255, 0.8); }
  .btn.disabled {
    opacity: 0.5; }
  .btn ion-icon {
    font-size: 16px; }