/* audience */
.iconToggleArea {
  width: 100%;
  display: flex;
}
.chooseIconToggle {
  width: 40px;
  display: inline-block;
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
  opacity: .8;
}
.chooseIconToggle img {
    width: 100%;
}
.chooseIconToggle.active {
    box-shadow: 0 0 0 4px #33b22d;
    opacity: 1;
}
.ansList.faceList {
	display: flex!important;
}
md-radio-button.faceContainer {
  margin-bottom: 0px;
}
md-radio-button.faceContainer > div.md-container {
display: none;
}
md-radio-button.faceContainer > div.md-label {
margin-left: 10px;
}

.iconToggleArea.audienceQuestion {
  margin-top: 20px;
  border: 1px solid #f4e5d4;
  padding: 10px;
  width: fit-content;
  border-radius: 25px;
  background-color: #fff6eb;
}
.iconToggleArea.audienceQuestion > .chooseIconToggle {
  width: unset;
}


/* progress bar for face */
@keyframes growProgressBar {
  0%, 33% { --pgPercentage: 0; }
  100% { --pgPercentage: var(--value); }
}

@property --pgPercentage {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

div[role="progressbar"] {
  /*--size: 12rem;*/
  --size: 10rem;
  --fg: #369;
  --bg: #def;
  --pgPercentage: var(--value);
  animation: growProgressBar 3s 1 forwards;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: 
    radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
    conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
    ;
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 5);
  color: var(--fg);
}

div[role="progressbar"]::before {
  counter-reset: percentage var(--value);
  /*content: counter(percentage) '%';*/
}

div[role="progressbar"].face1 {
  /*--fg: #ffd967;*/
  --fg: #535aa8;
}

div[role="progressbar"].face2 {
  /*--fg: #ffc95c;*/
  --fg: #feb721;
}

div[role="progressbar"].face3 {
  /*--fg: #ffbf73;*/
  --fg: #5ea7fb;
}

div[role="progressbar"].face4 {
  /*--fg: #ffab77;*/
  --fg: #8cc940;
}

div[role="progressbar"].face5 {
  /*--fg: #ff9b7c;*/
  --fg: #f03f2b;
}
/* end progress bar for face */

/*Audience Result*/
.audienceResultArea{
  text-align: center;
  color:#5C5A55;
  padding:30px 0px;
}
.audienceResultLine{
  width:90%;
  height:10px;
  border-radius: 15px;
  background-color: #E7D8C1;
  margin:15px auto;
}
.audienceResultProgressbar{
  margin: auto;
}
.audienceResultProgressbar img{
  width:81%;
}
.audienceResultArea h2{
  color:#E5B32B;
  font-weight: bold;
}
.audienceResultArea h4{
  line-height: 1.6rem;
}
.audienceResultArea h4.bold{
  font-weight: bold;
}
.audienceResultArea p{
  font-size: 0.9rem;
  margin-top:1rem;
  height:3.3rem;
  line-height: 1.1rem;
}
.faceDetail {
  border: 2px solid #ecf1f4;
  border-radius: 10px;
  padding: 10px;
  background-color: #ecf1f4;
}
.faceDetail ul {
  list-style: none;
  margin: 0px;
  padding: 4px;
  padding-left: 10px;
}
.face_loading > img {
  height: 150px;
  margin-top: 40vh;
}
@media screen and (max-width:480px) {
  .face_loading > img {
    width: 80%;
    height: unset;
  }
}
/* end audience */

/* audience map */
.iconToggleArea {
  width: 100%;
}
/*
.chooseIconToggle {
  width: 40px;
  display: inline-block;
  margin: 0 5px;
  border-radius: 50%;
  cursor: pointer;
  opacity: .8;
}
.chooseIconToggle img {
    width: 100%;
}
.chooseIconToggle.active {
    box-shadow: 0 0 0 4px #33b22d;
    opacity: 1;
}
*/
.ansList.faceList {
	display: flex!important;
}
md-radio-button.faceContainer {
    margin-bottom: 0px;
}
md-radio-button.faceContainer > div.md-container {
	display: none;
}
md-radio-button.faceContainer > div.md-label {
	margin-left: 10px;
}

.mapPinDetail.audience {
  padding: 5px;
  bottom: 0px;
}
.mapPinDetail.audience ul {
  padding: 5px 10px 5px 10px;
}
@media (max-width: 959px) and (min-width: 600px) {
  .mapPinDetail.audience {
    bottom: 60px;
  }
}
.btn_change_layer.switch-theme-layout.audience .md-button, .btn_change_layer.switch-theme-layout.audience .md-button:hover {
  background-color: #bb901a;
}
button.md-fab.btn_change_layer_audience, .md-button.md-fab.btn_change_layer_audience:not([disabled]):hover, .md-button.md-fab.btn_change_layer_audience:hover {
  background-color: rgb(21 55 96);
}
.detail_color_layer_area {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.tblLegend {
  background-color: #ffffffbd;
  padding: 5px;
  margin-bottom: 10px;
}
.tblLegend table > tbody > tr > td:nth-of-type(1) {
  width: 20px;
}
.legendLabel {
  padding-left: 10px;
}
.legendTitle {
  width: auto!important;
  font-weight: bold;
  padding: 5px 0px;
  text-align: left;
}
/* end audience map */
.personal-container {
  margin-right: 100px;
  margin-left: 100px;
  border: 2px solid #1b526f;
  padding: 10px 20px 20px 20px;
}
.select-audience {
  margin-top: 0px;
}
.select-audience > .md-select-value {
  border-bottom-style: none;
  padding: 0px;
  min-height: unset;
}
@media screen and (max-width:480px) {
  .audience-personal {
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 10px;
  }
  
  .personal-container {
    margin: unset;
  }
}
.thumbnail-area > .headline.audience {
  background-color: #1b526f;
}
.mt-5px {
  margin-top: 5px;
}
.pd-5px {
  padding: 5px;
}
.pd-8px {
  padding: 8px;
}
.mt-5 {
  margin-top: 5rem;
}
.pagination-tbl-audience-list {
  text-align: right;
}
.audienceDesc {
  white-space: pre-wrap;
}