/* 대시보드 */
.sub-dashboard-wrap {height: calc( 100% + 60px ); width: calc( 100% + 60px ); position: relative; overflow: auto; margin: -30px; padding: 30px 30px 2em; float: left; font-size: 16px; background: #c5dbe9;}
.dashboard-date {text-align: left; margin: -35px 0 25px; color: #30608c; font-size: 1rem;}
/* .dashboard-cont-wrap {font-size: 0; margin: -.9rem -.45rem 3rem; display: inline-block; width: calc( 100% + .9rem ); background: url(../../images/cmmn/logo2.png) no-repeat 1.1% 95%; background-size: 30% auto;} */
.dashboard-cont-wrap {font-size: 0; display: inline-block; width: 100%; background-size: 30% auto; background-color: #F6FBFF; border: 1px solid #dee7ec; box-sizing: border-box; padding: 8px;}
.dashboard-item {overflow: hidden; border: 1px solid #D9E3E9; border-radius: 5px; background: #fff; margin: .45rem; display: inline-block; vertical-align: top; width: calc( 33.3% - .9rem ); box-sizing: border-box; float: left; height: 29.6rem; font-size: 1.1rem; transition: all .3s ease;}
/*.dashboard-item:hover {background: rgba(255,255,255,.3); box-shadow: 0.3em 0.3em 0.5em rgb(0 0 0 / 15%);}*/
.dashboard-item.ht1-1 {height: 32.3rem;}
.dashboard-item.ht1-2 {height: 32.3rem;}
.dashboard-item.ht1-3 {height: 32.3rem;}
.dashboard-item.ht1-4 {height: 29.6rem;}
.dashboard-item.ht1-5 {height: 29.6rem;}
.dashboard-item.map {margin-bottom: .5rem;}

.dash-header {background: #919eae; padding: .5em 1em; font-size: 1rem; position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
.dash-header h3 {color: #fff; font-weight: 500; font-family: var(--fonttype-2); letter-spacing: 0; font-size: .9em; margin-bottom: 0; word-break: keep-all;}
.dash-header h3 small {font-size: .9em; font-weight: 300; opacity: .7; font-family: var(--fonttype-1); margin-left: 4px; display: inline-block;}
.header-item {}
.header-item .btn-dash-down {display: inline-block; background: #4a5269; color: #fff; height: 25px; line-height: 25px; font-size: .7em; padding: 0 .6em; border-radius: .3em; margin:0 0 0 8px; font-weight: 300; position: relative; right: auto; top: auto;}
.header-item > span {color: #fff; font-size: .8em;}
.dash-content {color: #30608c;font-size: .85em;padding: 1.2em 1em;clear: both;font-weight: 300;text-align: center;height: calc( 100% - 3em );position: relative; overflow: auto;}
.dash-content.full {height: 100% !important;}
.dash-content.inhead {height: calc( 98% - 2em) !important;}
.dash-map-wrap {height: 100%;}
.dash-map-wrap img, .dash-map-wrap svg {width: 100%; height: 100%; max-height: 100%;}
.btn-dash-down {display: inline-block; background: #4a5269; color: #fff; height: 25px; line-height: 25px; font-size: .7em; padding: 0 .6em; border-radius: .3em; margin:0 0 0 8px; font-weight: 300; position: relative; right: auto; top: auto;}
.dash-tit-wrap:after {content: ""; height: 0; display: block; visibility: hidden; clear: both;}
* html .dash-tit-wrap {height: 1%;}
.dash-tit-wrap {display: block; min-height: 1%; margin-bottom: .8em; position: relative; min-height: .7em;}
.dash-tit-wrap h4 {color: #30608c; font-weight: 500; font-size: .92rem; letter-spacing: -.08em; text-align: left;}
.dash-tit-wrap p {font-weight: 300; position: absolute; right: .1em; top: .2em; font-size: .8rem; letter-spacing: -.08em; text-align: right;}
.dash-chart-wrap {background: #f9f9f9; height: 10.6em; margin: 0 0 1.5em; display: flex; justify-content: center; align-items: center; width: 100%;}
.dash-chart-wrap.height2 {height: 13.8em;}
.dash-content .dash-chart-wrap:last-of-type {margin-bottom: 0;}
.dash-chart-wrap canvas {height: 100%; width: 100%; min-width: 100%;}

.dash-chart-wrap.chart2 {background: transparent; height: 20em; margin: 0 0 1.5em; display: flex; flex-flow: row wrap; gap: 1em;}
.dash-chart-wrap.chart2 div {height: 100%; background: #f9f9f9;}
.dash-chart-wrap.chart2 div:nth-child(1) {width: calc(70% - .5rem)}
.dash-chart-wrap.chart2 div:nth-child(2) {width: calc(30% - .5rem)}

.dash-chart-wrap.chart3 {background: transparent; height: 20em; margin: 0 0 1.5em; display: flex; flex-flow: row wrap; gap: 1em;}
.dash-chart-wrap.chart3 div {height: 100%; background: #f9f9f9; min-width: auto;}
.dash-chart-wrap.chart3 div:nth-child(1) {width: calc(25% - 1rem);}
.dash-chart-wrap.chart3 div:nth-child(2) {width: 50%;}
.dash-chart-wrap.chart3 div:nth-child(3) {width: calc(25% - 1rem);}

.dash-chart-wrap.chart4-1 {background: transparent; height: auto; margin: 0 0 1.5em; display: flex; flex-direction: row; align-items: center; gap: .5em; }

.dash-chart-wrap.chart4-1 > div {width: 100%; height: 400px; flex: 1 1 20em; background: #f9f9f9; min-width: auto; display: flex; gap: 1em;}

.dash-chart-wrap.chart4-1 > div > div {flex: 1 1 20em; border: 1px solid #ccc;}

.dash-chart-wrap.chart4-1 > div > div > div {width: 100%; height: 100%;}

.dash-chart-wrap.chart4-1 > p {font-size: 2em;}

.dash-chart-wrap.chart4-1 svg {width: 100%; height: 100%;}

.donut-txt {white-space: nowrap; color: #000; display: flex; align-items: center; justify-content: center;}

.sub-dashboard-wrap .satisfaction-wrap {background: rgba(255,255,255,.45); margin: 3em 0 0; padding: 1.5em; border: 1px solid #fff; box-sizing: border-box; border-radius: 5px;}
.dashboard-tab {border-bottom: 3px solid var(--indigo); box-sizing: content-box; margin-bottom: 2em; padding-right: 8em;}
.dashboard-tab ul {display: inline-block; height: 100%;}
.dashboard-tab ul li {display: inline-block; height: 100%; padding-top: .25em;}
.dashboard-tab ul li .ds-tab {display: inline-block; height: 100%; line-height: 2.2em; padding: 0 1.4em; color: var(--indigo);  background: #e9edf8; border-top-left-radius: 6px; border-top-right-radius: 6px; box-sizing: border-box;}
.dashboard-tab ul li .ds-tab.active {background: var(--indigo); color: #fff;}
.h100p {height: 100% !important;}

.dashboard-group2 {overflow: hidden; margin: 0 .45rem; display: inline-block; vertical-align: top; box-sizing: border-box; float: left; width: calc( 80% - .9rem );}

.dashboard-item.ht2-1 {height: 15rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-2 {height: 15rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-3 {height: 15rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-4 {height: 45.4rem; width: calc( 25% - .9rem ); float: right;}
.dashboard-item.ht2-5 {height: 29.6rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-6 {height: 29.6rem; width: calc( 25% - .9rem );}
.dashboard-item.ht2-7 {height: 29.6rem; width: calc( 25% - .9rem );}

.dashboard-item.ht3-1 {height: 25.7rem; width: calc( 50% - .9rem );}
.dashboard-item.ht3-2 {height: 25.7rem; width: calc( 50% - .9rem );}
.dashboard-item.ht3-3 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-4 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-5 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-6 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-7 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-8 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht3-9 {height: 21rem; width: calc( 50% - .9rem );}
.dashboard-item.ht3-10 {height: 21rem; width: calc( 50% - .9rem );}

.dashboard-item.ht4-1 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-2 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-3 {height: 15rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-4 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-5 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-6 {height: 20rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht4-7 {height: 20rem; width: calc( 25% - .9rem );}
.dashboard-item.ht4-8 {height: 20rem; width: calc( 25% - .9rem );}
.dashboard-item.ht4-9 {height: 20rem; width: calc( 25% - .9rem );}
.dashboard-item.ht4-10 {height: 20rem; width: calc( 25% - .9rem );}

.dashboard-item.ht5-1 {height: 10rem; width: calc( 20% - .9rem );}
.dashboard-item.ht5-2 {height: auto; width: calc( 50% - .9rem );}
.dashboard-item.ht5-2 .dash-chart-wrap {height: 20em;}

.dashboard-item.ht6-1 {height: 23rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-2 {height: 12rem; width: calc( 14.28% - .9rem );}
.dashboard-item.ht6-3 {height: 28.3rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-3 .dash-chart-wrap {height: 20em;}
.dashboard-item.ht6-4 {height: 57.5rem; width: calc( 33.3% - .9rem );}
.dashboard-item.ht6-5 {height: 32rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-5 .dash-chart-wrap {height: 15.7em;}
.dashboard-item.ht6-6 {height: 24.6rem; width: calc( 100% - .9rem );}
.dashboard-item.ht6-6 .dash-chart-wrap {height: 15.7em;}
.dashboard-item.ht6-7 {height: 8rem; width: calc( 20% - .9rem );}

.arrow2 {width: 1em;}
/*.dash-wordcloud-wrap {background: #fff; height: 100%; font-size: .4em; letter-spacing: -.5em; padding: .5em;}*/
.jqcloud-word {line-height: 1;}

.dash-cont-type2 {line-height: 1.5; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.dash-cont-type2 h4 {font-family: "S-Core";; font-size: 1.5em; line-height: 1.2; margin-bottom: .4em;}
.dash-cont-type2 h4 strong {font-size: 1.8em; font-weight: 600; display: inline-block; }
.dash-cont-type2 p {font-size: 1.3em; font-weight: 400;}
.dash-cont-type2 p.updown {font-weight: 600; font-family: "S-Core";; }
.dash-cont-type2 .arrow {margin-right: .4em; vertical-align: middle;}

.dash-cont-type3 {line-height: 1.5; width: 100%; font-size: .9em;}
.dash-cont-type3 h4 {font-family: "S-Core";; font-size: 1.3em; line-height: 1.2; margin-bottom: .4em;}
.dash-cont-type3 h4 strong {font-size: 1.8em; font-weight: 600; display: inline-block;}
.dash-cont-type3 p {font-size: 1.3em; font-weight: 400;}
.dash-cont-type3 p.updown {font-weight: 600; font-family: "S-Core";; }
.dash-cont-type3 .arrow {margin-right: .4em; vertical-align: middle;}
.dash-cont-type3 .ico {width: 1.8em;}

.dash-cont-type4 {line-height: 1.5; position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.dash-cont-type4 h4 {font-family: "S-Core";; font-size: 1.2em; line-height: 1.2; margin-bottom: .4em;}
.dash-cont-type4 h4 strong {font-size: 1.1em; font-weight: 600; display: inline-block;}
.dash-cont-type4 p {font-size: 1.1em; font-weight: 400;}
.dash-cont-type4 p.updown {font-weight: 600; font-family: "S-Core";; }
.dash-cont-type4 .arrow {margin-right: .4em; vertical-align: middle;}

.population-status {margin-bottom: 2em;}
.population-status .tbl-basic {min-width: auto;}
.population-status .tbl-basic th {background-color: #bed3e5; padding: .3em; color: #30608c; border-bottom: 1px solid #dce8f3;}
.population-status .tbl-basic td {padding: .3em; color: #30608c; border-bottom: 1px solid #cedfee;}

.alignm { position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%);}
.bor-dashed {border-right: 1px dashed;}
.ico-population {height: 100%; max-width: 85%;}
.ico-dash {width: 3em; margin: 3em 0 .5em;}
.ds-group1 {float: left; width: 33.3%;}
.ds-group2 {float: left; width: 33.3%;}

.tbl-typeC {border-collapse: collapse; border: 0; padding: 0; margin: 0 0 1em; width: 100%; font-size: 1em; border: 1px solid  #e2e3e5; border-top: 1px solid var(--indigo);}
.tbl-typeC th, .tbl-typeC td {white-space: nowrap; word-break: break-all;}
.tbl-typeC thead th {background: #edf2f8; color: var(--indigo); text-align: center; font-weight: 400; letter-spacing: -0.1em; vertical-align: middle; padding: .5em .37em; border-bottom: none;}
.tbl-typeC tbody th {background: #edf2f8 !important;}
.tbl-typeC td {color: #666; vertical-align: middle; text-align: center; padding: .37em; font-weight: 300;}
.tbl-typeC tr:nth-child(even) td {background: rgba(131,167,203,.1);}
.tbl-typeC tr:nth-child(odd) td {background: rgba(255,255,255,.05);}
.tbl-typeC th:last-child, .tbl-typeC td:last-child {border-right: none;}
.tbl-typeC .left {text-align: left;}

.map-con {border: 1px solid #ddd; margin: .45rem; background: #fff; padding: .85em; font-size: 1em;}
.img_move {width: 20px; display: block; margin: 0 auto;}
.sub-search-wrap3 {border: 1px solid #D9E3E9; border-radius: 5px; background: #fff; margin: .45rem; vertical-align: top; width: calc( 100% - .9rem ); box-sizing: border-box; font-size: 1rem; padding: 1em; color: #30608c; text-align: center;
display: flex; flex-flow:  row wrap; gap: 24px; align-items: center;}
.sub-search-wrap3 .group {display: flex;flex-flow: row; gap: 8px; align-items: center;}
.sub-search-wrap3 input[type=text], .sub-search-wrap3 select {min-width: 120px;}


@media screen and (max-width: 1600px) {
  .dashboard-item.ht6-2 {height: 8rem; width: calc( 20% - .9rem ); font-size: .9em;}
/*   .dashboard-item.ht6-1 {height: 22.6rem;} */
}
@media screen and (max-width: 1200px) {
  .dashboard-item.ht2-1, .dashboard-item.ht2-2, .dashboard-item.ht2-3 {width: calc( 33.3% - .9rem );}
  .dashboard-item.ht2-4, .dashboard-item.ht2-5, .dashboard-item.ht2-6, .dashboard-item.ht2-7 {width: calc( 50% - .9rem ); height: 20rem;}
  .dash-cont-type2 {font-size: .8em;}
  .dashboard-item.ht4-4, .dashboard-item.ht4-5, .dashboard-item.ht4-6, .dashboard-item.ht4-7, .dashboard-item.ht4-8, .dashboard-item.ht4-9, .dashboard-item.ht4-10 {width: calc( 50% - .9rem );}
  .dashboard-item.ht5-1 {width: calc( 25% - .9rem ); font-size: .85rem;}
  .dashboard-item.ht6-2 {width: calc( 25% - .9rem ); font-size: .8em;}
}
@media screen and (max-width: 1400px) {
  .population-status .f-left {display: none;}
  .population-status .f-right {width: 100% !important;}
  .ds-group1 {width: 50%;}
  .ds-group2 {width: 100%;}
/*   .dashboard-item.ht6-4 {float: left; height: 40.9rem; width: calc( 50% - .9rem );} */
  .dashboard-item.ht6-4 {float: left; height: 57.5rem; width: calc( 50% - .9rem );}
/*   .dashboard-item.ht6-3 {height: 20rem;} */
  .dashboard-item.ht6-3 .dash-chart-wrap {height: 11.2em;}
  .dashboard-item.ht6-5 {width: calc( 50% - .9rem ); height: 28.9em;}
  .dashboard-item.ht6-6 {width: calc( 50% - .9rem ); height: 28.9em;}
  .dashboard-item.ht6-6 .dash-chart-wrap {height: 23.9em;}

  .dash-chart-wrap.chart4-1 {flex-direction: column;}
}

@media screen and (max-width: 1000px) {
  .dashboard-item.ht3-6, .dashboard-item.ht3-7, .dashboard-item.ht3-8, .dashboard-item.ht3-9, .dashboard-item.ht3-10 {width: calc( 100% - .9rem ) !important;}
  .dashboard-item.ht5-1 {width: calc( 33.3% - .9rem );}
  .dashboard-item.ht6-4 {width: calc( 100% - .9rem );margin: -87.1rem .45rem 0;height: 24.3em;}
  .ds-group1 {float: right; margin: 28rem 0 0 0; width: 100%;}
  .dashboard-item.ht6-3 {height: 29rem;}
  .dashboard-item.ht6-3 .dash-chart-wrap {height: 15.6em;}
  .dashboard-item.ht6-5 {width: calc( 100% - .9rem ); height: 30em;}
  .dashboard-item.ht6-6 {width: calc( 100% - .9rem ); height: 22.8em;}
  .dashboard-item.ht6-6 .dash-chart-wrap {height: 15.7em;}
  
  .sub-search-wrap3 {flex-flow: column; align-items: flex-start; gap: 8px;}
  .sub-search-wrap3 input[type=text], .sub-search-wrap3 select {width: 8em;}
  .dash-chart-wrap.chart2 {height: auto; flex-flow: column wrap; gap: 1em;}
  .dash-chart-wrap.chart2 div {height: 45vw;}
  .dash-chart-wrap.chart2 div:nth-child(1) {width: 100%; }
  .dash-chart-wrap.chart2 div:nth-child(2) {width: 100%;  }

  .dash-chart-wrap.chart3 {height: auto;flex-flow: column wrap; gap: 1em;}
  .dash-chart-wrap.chart3 div {height: 45vw;}
  .dash-chart-wrap.chart3 div:nth-child(1) {width: 100%;  }
  .dash-chart-wrap.chart3 div:nth-child(2) {width: 100%; }
  .dash-chart-wrap.chart3 div:nth-child(3) {width: 100%;  }
}

@media screen and (max-width: 780px) {

.dash-chart-wrap.chart4-1 > div {flex-direction: column;}

}

@media screen and (max-width: 680px) {
  .dashboard-item.ht2-1, .dashboard-item.ht2-2, .dashboard-item.ht2-3 {height: 10rem !important;}
  .dashboard-item.ht2-4, .dashboard-item.ht2-5, .dashboard-item.ht2-6, .dashboard-item.ht2-7 {width: calc( 100% - .9rem ) !important; height: 20rem !important;}
  .dash-cont-type2, .dash-cont-type3 {font-size: .6em !important;}
  .dashboard-item.ht3-1, .dashboard-item.ht3-2 {height: 17.6rem !important; width: calc( 100% - .9rem ) !important;}
  .dashboard-item.ht3-3, .dashboard-item.ht3-4, .dashboard-item.ht3-5 {height: 10rem !important;}
  .dashboard-item.ht3-6, .dashboard-item.ht3-7, .dashboard-item.ht3-8, .dashboard-item.ht3-9, .dashboard-item.ht3-10 {height: 16.4rem !important;}
  .dashboard-item.ht4-4, .dashboard-item.ht4-5, .dashboard-item.ht4-6, .dashboard-item.ht4-7, .dashboard-item.ht4-8, .dashboard-item.ht4-9, .dashboard-item.ht4-10 {width: calc( 100% - .9rem ); height: 16.4rem !important;}
  .dashboard-item.ht4-1, .dashboard-item.ht4-2, .dashboard-item.ht4-3, .dashboard-item.ht4-7 {height: 10rem !important;}
  .dashboard-item.ht5-1 {width: calc( 50% - .9rem ); height: 8em !important;}
  .dashboard-item.ht5-2 {width: calc( 100% - .9rem );}
  .dashboard-item.ht6-2 {width: calc( 25% - 4px ); font-size: .7em; margin: 2px; height: 10em !important;}
  .dashboard-item.ht6-4 {height: 29em !important;margin: -83rem .45rem 0 !important;}
  .dashboard-item.ht6-4 .dash-content {height: calc( 100% - 3em );}
  .ds-group1 {margin: 26.6rem 0 0 0;}
  .dashboard-item.ht6-3 {height: 27.8rem !important;}
  .dashboard-item.ht6-3 .dash-chart-wrap {height: 18.8em;}
  .dashboard-item.ht6-5 .dash-chart-wrap {height: 19.4em;}
  .dashboard-item.ht6-6 .dash-chart-wrap {height: 19.4em;}
  .dashboard-item.ht6-5 {height: 28.6rem !important;}
  .dashboard-item.ht6-6 {height: 22.6rem !important;}
  .dashboard-item {width: calc( 100% - .9rem );}
  .dash-chart-wrap {height: 45vw; margin: 0 0 5vw;}
  .dash-chart-wrap.height2 {height: 45vw;}
  .dashboard-item.ht1-2 {height: auto;}
  .dashboard-item.ht1-3 {height: auto;}
  .dashboard-item.ht1-4 {height: auto;}
  .dashboard-item.ht1-5 {height: auto;}
  .dash-content {height: auto;}
  .dash-tit-wrap h4 {float: left;}
  .dash-tit-wrap p {margin-top: 1px; float: right;}
  .dashboard-tab {margin-top: 0;}
  .dashboard-item {font-size: .85rem;}
  .dashboard-tab {padding-right: 0; margin-bottom: 1em;}
  .dash-header select {height: 24px; line-height: 24px; margin: 3px 0 0;}
  
  .sub-search-wrap3 .group {width: calc(100% - 30px);  align-items: flex-start;}
  .sub-search-wrap3 input[type=text], .sub-search-wrap3 select {width: 100%; margin: 2px 0;}
  .sub-search-wrap3 .group label {line-height: 36px;}
  .sub-search-wrap3 .group .item {width: calc(100% - 30px);}
  .sub-search-wrap3 .group .item span {display: none;} 
  .dashboard-cont-wrap {padding: 8px 4px;}
  .dash-header  {align-items: start; flex-flow: column wrap; justify-content: flex-start; padding: .2em .5em;}
  .dash-header h3 {margin-top: 3px; line-height: 1.2; font-size: .8em;}
  .dashboard-item.ht3-6 .dash-content.inhead, .dashboard-item.ht3-7 .dash-content.inhead, .dashboard-item.ht3-8 .dash-content.inhead, .dashboard-item.ht3-9 .dash-content.inhead, .dashboard-item.ht3-10 .dash-content.inhead, .dashboard-item.ht2-5 .dash-content.inhead, .dashboard-item.ht2-7 .dash-content.inhead {    height: calc(98% - 5em) !important;}
  .btn-dash-down {height: 20px; line-height: 20px; margin: .4em 0 0 0;}
  .header-item .btn-dash-down {height: 20px; line-height: 20px; margin:  0 0 0 2px;}


}

.legend-box {display: inline-block; padding: .5em; background: #fff; border: 1px solid #afc5db; position: absolute; bottom: .5em; right: .5em; z-index: 2; font-size: .6em;}
.legend-box h4 {text-align: center; font-size: 1.1em; font-weight: 500; padding: .3em .3em .8em; display: block;}
.legend-box ul {display: block; text-align: left;}
.legend-box ul li {display: block; padding: 0 .3em .3em; color: #666; font-size: 1em;}
.legend-box .i-circle {display: inline-block; border-right: 1em; width: 1em; height: 1em; background: #afc5db; vertical-align: middle; margin-right: .5em;}
.step1 {background: #ace267 !important;}
.step2 {background: #74df40 !important;}
.step3 {background: #12d9b6 !important;}
.step4 {background: #00c09b !important;}
.step5 {background: #01b8da !important;}
.step6 {background: #008ec3 !important;}
.step7 {background: #006cde !important;}
.step8 {background: #0046bd !important;}
.step9 {background: #033381 !important;}
.step10 {background: #00135e !important;}
.step11 {background: #000700 !important;}