/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
    */
    
    body {
     flex-direction: column; /* article, then footer */
     display: flex; /* flex, to extend the content to full size */
     padding: 0 !important;
  }
  
  h1 {
      margin-bottom: 0 !important;
      margin-top: 0.5rem !important;
  }
    
    #main-col {
     margin: 0 !important;
  }
    
    #navigator-container {
     margin: 0 !important;
  }
    
    .group-title {
     margin: 0 !important;
  }
    
    #welcome-container,
    .mainContent {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     /*height: 100%;*/
     min-height: 50vh;
     /*height: 100svh;*/
     max-height: 100svh;
     padding-bottom: 5px !important; /* no bottom padding, footer should be bottom aligned */
     padding-top: 5px !important;/* now is redefine in JS to fit any title length */
     margin: 0 !important;
  }
  
    
    @media (max-height: 799px), (max-width: 726px) {
                          .mainContent {
                          height: 100svh;
                          min-height: 100svh;
                          max-height: 100svh;
                        }
  
  }
    
    .btn-xl {
     border-radius: .3rem;
     font-size: 1.75rem;
     padding: 1rem 6rem;
     text-transform: uppercase;
     font-weight: 600;
  }
    
    .welcome_page {
     text-align: center;
     display: flex;
     flex-direction: column;
     max-height: 100vh;
  }
    
    #welcome-container h1 {
     font-weight: 600;
     font-size: 3rem;
     margin-bottom: 0;
     margin-top: 0;
  }
    
    .instruction {
     /*margin-top: 60px;*/
     text-align: center;
     margin: 24px 0;
  }
    
    .instruction h2 {
     font-weight: 600;
     font-size: 2.25rem;
     margin: 0 0 0.5rem 0;
  }
    
    .instruction p {
     font-size: 2.25rem;
     margin: 0 0;
  }
    
    .instruction-small h2 {
     font-size: 1.5rem;
  }
    
    .instruction-small p {
     font-size: 1.25rem;
  }
    
    
    .example {
     margin-top: 0;
  }
    
    .example p {
     font-size: 1.5rem;
     margin: 0 !important;
  }
    
    .example h2 {
     font-weight: 600;
     font-size: 1.75rem;
     margin: 0 0 !important;
  }
    
    .answer-container {
     padding: 0 !important;
  }
    
    .question {
     margin-top: 0px;
  }
    
    .question h2 {
     font-weight: 600;
     font-size: 1.75rem;
     margin: 6px 0 !important;
  }
    
    .question p {
     font-size: 1.5rem;
     font-weight: 400;
  }
    
    #welcome-container .noanswer-item {
     display: none !important;
  }
    
    @media (max-height: 799px), (max-width: 726px) {
                          .emoji-hint {
                          font-size: 1.15rem !important;
                        }
  }
    
    .emoji-hint {
     font-size: 1.25rem !important;
     padding: 0 10px;
     font-weight: 500 !important;
     margin-top: 0;
     padding: 0 5px;
  }
    
    .speech svg {
     width: 50px;
     height: 50px;
     fill: black;
     stroke-width: 0.1 !important;
  }
    
    .question-container {
     border: none !important;
     box-shadow: none !important;
     margin-top: 3rem !important;
  }
    
    .text-question .speech {
     margin-left: 10px;
  }
    
    .five-point-emoji-list {
     margin: 1rem !important;
  }
    
    @media (max-height: 799px), (max-width: 726px) {
                          .five-point-emoji-list {
                          margin: 0.5rem !important;
                          width: calc(100% - 1rem) !important;
                        }
  }
    
    .five-point-emoji-list .emoji-item label {
     padding: 0 0 !important;
     font-size: 1.25rem !important;
     color: #000;
     text-align: center;
  }
    
    .five-point-emoji-list .emoji-item label .answer-label {
     min-height: 79px;
     padding: 0 3px;
  }
    
    .five-point-emoji-list .emoji-item label::before {
     font-size: 85px !important;
  }
    
    @media (max-height: 799px), (max-width: 726px) {
                          .five-point-emoji-list .emoji-item label::before {
                          font-size: 70px !important;
                        }
  }
    
    @media (max-height: 799px), (max-width: 600px) {
                          .five-point-emoji-list .emoji-item label::before {
                          font-size: 55px !important;
                        }
                          
                          .emoji-hint,
                          .five-point-emoji-list .emoji-item label .answer-label {
                          font-size: 16px !important;
                        }
  }
    
  /*  #welcome-container .five-point-emoji-list .emoji-item-5 label, .five-point-emoji-list .emoji-item.noanswer-item label {*/
  /*   border-right: none !important;*/
  /*}*/
    
    .answer-item.radio-item.emoji-item.emoji-item-1 label::before {
     content: "\1F61E";
  }
    
    .question-topbar {
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     width: 100%;
     background-color: rgb(54 114 178);
     color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 6px 12px;
  }
    
    .topbar-number {
     font-size: 2rem;
  }
    
    .speech {
     -webkit-appearance: none;
     background-color: transparent;
     border: none;
     color: white;
     box-shadow: none;
  }
    
    /*.slider-grab-container {*/
     /*display: none;*/
    /*}*/
    
    /*.ls-emojislider.slider-wrapper {*/
     /*width: 100% !important;*/
    /*}*/
    
    /*.slider-labels {*/
     /*    display: flex;*/
     /*    justify-content: space-between;*/
    /*}*/
    
    /*.slider-labels .slider-label {*/
     /*width: auto !important;*/
    /*}*/
    
    /*.slider-labels .slider-label .emoji {*/
     /*    font-size: 0;*/
     /*    line-height: 0;*/
     /*    color: transparent;*/
     
     /*    background-size: contain;*/
     /*    background-repeat: no-repeat;*/
     /*    background-position: center;*/
     
     /*    width: 100%; */
     /*    height: 60px;*/
       /*padding: 20px;*/
     /*    display: inline-block;*/
    /*}*/
    
    /*.slider-label-1 .emoji {*/
     /*    background-image: url('./../files/zawiedziona_buzia.png');*/
    /*}*/
    
    /*.slider-label-2 .emoji {*/
     /*    background-image: url('./../files/smutna_buzia.png');*/
    /*}*/
    
    /*.slider-label-3 .emoji {*/
     /*    background-image: url('./../files/neutralna_buzia.png');*/
    /*}*/
    
    /*.slider-label-4 .emoji {*/
     /*    background-image: url('./../files/usmiechnieta_buzia.png');*/
    /*}*/
    
    /*.slider-label-5 .emoji {*/
     /*    background-image: url('./../files/szczesliwa_buzia.png');*/
    /*}*/
    
    /*.dummy-emoji,*/
    /*.slider-label-6 {*/
     /*    display: none !important;*/
     /*    visibility: hidden !important;*/
     /*    width: 0 !important;*/
     /*    height: 0 !important;*/
     /*    pointer-events: none !important;*/
    /*}*/
    
    /*.emoji-color {*/
     /*    border: 2px solid blue;*/
    /*}*/
    
    
    
    
    
    
    
    
    
    
    @font-face {
     font-family: fivePointColorEmojis;
     src: url(../fonts/NotoColorEmoji.ttf);
  }
    
    /*****
    Styles for the 5 Point Emoji question theme
    Copyright (C) 2019 - Tony Partner (http://partnersurveys.com)
    Licensed MIT, GPL
    Version - 1.0
    Create date - 28/03/2018
    *****/
    
    /** EMOJIS QUESTION **/
    
    .five-point-emoji-list {
     width: 100%;
     /*max-width: 395px;*/
     max-width: unset !important;
     padding: 0;
     margin: 0 0 10px 0;
  }
    
    .five-point-emoji-list .emoji-item {
     display: block;
     clear: none;
     float: left;
     width: 18%;
     width: 20%;
     padding: 0;
     margin: 0  0 10px 0;
  }
    
    .five-point-emoji-list .emoji-item.noanswer-item {
     clear: both;
     float: none;
     margin-right: auto;
     margin-left: auto;
  }
    
    .five-point-emoji-list .emoji-item label {
     position: relative;
     display: block;
     /*border: 1px solid #DBDBDB;*/
     border-right: 0 none;
     height: auto;
     margin: 0;
     padding: 0;
     background: transparent 0 0 no-repeat;
     font-size: 0;
  }
    
    .five-point-emoji-list .emoji-item-5 label,
    .five-point-emoji-list .emoji-item.noanswer-item label {
     border-right:  1px solid #DBDBDB;
  }
    
    /*.five-point-emoji-list .emoji-item label:hover {*/
     /*	background: #BADEB8;*/
     /*	opacity: 0.65;*/
    /*}*/
    
    /*.five-point-emoji-list .emoji-item input[type="radio"]:checked + label {*/
     /*	background: #BADEB8;*/
     /*	opacity: 1;*/
    /*}*/
    
    .five-point-emoji-list .emoji-item label::before {
     position: relative;
     left: auto;
     top: auto;
     display: block;
     width: auto;
     height: auto;
     margin: 5px;
     padding: 0;
     border: 0 none;
     border-radius: 0;
     background: transparent none;
     background-size: cover;
     filter: alpha(opacity=50);
     text-align: center;
     font-size: 48px;
     font-family: fivePointColorEmojis;
     font-weight: 400 !important;
     font-style: normal !important;
  }
    
    @media only screen and (max-width: 480px) {
       .five-point-emoji-list .emoji-item label::before {
       font-size: 36px;
     }
  }
    
    .five-point-emoji-list .emoji-item-1 label::before { content:"\1F61E"; }
    .five-point-emoji-list .emoji-item-2 label::before { content:"\1F641"; }
    .five-point-emoji-list .emoji-item-3 label::before { content:"\1F610"; }
    .five-point-emoji-list .emoji-item-4 label::before { content:"\1F642"; }
    .five-point-emoji-list .emoji-item-5 label::before { content:"\1F600"; }
    .five-point-emoji-list .emoji-item.noanswer-item label::before { content:"\1F636"; }
    
    .five-point-emoji-list .emoji-item input[type="radio"]:focus + label::before {
     outline: none;
  }
    
    .five-point-emoji-list .emoji-item  label::after {
     display: none !important;
  }
  
  
  @font-face {
	font-family: fivePointColorEmojis;
	src: url(../fonts/NotoColorEmoji.ttf);
}

/***** 
    Styles for the 5 Point Emoji question theme
    Copyright (C) 2019 - Tony Partner (http://partnersurveys.com)
    Licensed MIT, GPL
    Version - 1.0
    Create date - 28/03/2018
*****/

/** EMOJIS QUESTION **/

.choice-5-pt-radio .five-point-emoji-list {
	width: 100%;
	max-width: 395px;
	padding: 0;
	margin: 0 0 10px 0;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item {
	display: block;
	clear: none;
	float: left;
	width: 18%;
	width: 20%;
	padding: 0;
	margin: 0  0 10px 0;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item.noanswer-item {
	clear: both;
	float: none;
	margin-right: auto;
	margin-left: auto;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item label {
	position: relative;
	display: block;
	border: 1px solid #DBDBDB;
	border-right: 0 none;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent 0 0 no-repeat;
	font-size: 0;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item-5 label,
.choice-5-pt-radio .five-point-emoji-list .emoji-item.noanswer-item label {
	border-right:  1px solid #DBDBDB;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item label:hover {
	background: #BADEB8;
	opacity: 0.65;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item input[type="radio"]:checked + label {
	background: #BADEB8;
	opacity: 1;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item label::before {
	position: relative;
	left: auto;
	top: auto;
	display: block;
	width: auto;
	height: auto;
	margin: 5px;
	padding: 0;
	border: 0 none;
	border-radius: 0;
	background: transparent none;
	background-size: cover;
	filter: alpha(opacity=50);
	text-align: center; 
	font-size: 48px;
	font-family: fivePointColorEmojis;
	font-weight: 400 !important;
	font-style: normal !important;
}

@media only screen and (max-width: 480px) {
	.choice-5-pt-radio .five-point-emoji-list .emoji-item label::before {
		font-size: 36px;
	}
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item-1 label::before { content:"\1F622"; }
.choice-5-pt-radio .five-point-emoji-list .emoji-item-2 label::before { content:"\1F641"; }
.choice-5-pt-radio .five-point-emoji-list .emoji-item-3 label::before { content:"\1F610"; }
.choice-5-pt-radio .five-point-emoji-list .emoji-item-4 label::before { content:"\1F642"; }
.choice-5-pt-radio .five-point-emoji-list .emoji-item-5 label::before { content:"\1F600"; }
.choice-5-pt-radio .five-point-emoji-list .emoji-item.noanswer-item label::before { content:"\1F636"; }

.choice-5-pt-radio .five-point-emoji-list .emoji-item input[type="radio"]:focus + label::before {
	outline: none;
}

.choice-5-pt-radio .five-point-emoji-list .emoji-item  label::after {
	display: none !important;
}