.widget-kit-niadashboard {}

@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity:0.8;
  }
  45% {
    transform: scale(1.75);
    opacity:0;
  }
}
@keyframes stop-pulsate {
  from {
    opacity:0.4;
  }
  to {
    transform: scale(2);
    opacity:0;
  }
}

.widget-kit-niadashboard .niadashboard-header {font-family: 'DBHelvethaicaX Med'; margin-bottom: 15px;}
.widget-kit-niadashboard .niadashboard-header .niadashboard-title {color: #ff007a; font-size: 36px;}
.widget-kit-niadashboard .niadashboard-header .niadashboard-subtitle {font-size: 32px;}

.widget-kit-niadashboard .niadashboard-body {display: flex; column-gap: 15px;}
.widget-kit-niadashboard .niadashboard-body .niadashboard-map {flex: 2;}
.widget-kit-niadashboard .niadashboard-body .niadashboard-map img {width: 100%;}
.widget-kit-niadashboard .niadashboard-body .niadashboard-stat {flex: 3; display: flex; flex-direction: column; row-gap: 15px;}

.widget-kit-niadashboard .summary-box {font-family: 'DBHelvethaicaX Med';}
.widget-kit-niadashboard .summary-box .summary-title {text-align: center; font-size: 32px; padding:15px; }
.widget-kit-niadashboard .summary-box .summary-amount {text-align: center; font-size: 32px; padding:15px; background-color: #5a0e76; color: #fff; border-radius: 15px;}

.widget-kit-niadashboard .chart-box {display: flex; flex: 1;}
.widget-kit-niadashboard .chart-box .chart-item {flex:1; display: flex; flex-direction: column; row-gap: 5px; text-align: center;}
.widget-kit-niadashboard .chart-box .chart-item .chart-bar {flex: 1; display: flex; align-items: end; justify-content: center;}
.widget-kit-niadashboard .chart-box .chart-item .chart-amount {height: 30px; font-size: 26px; line-height: 30px; font-family: 'DBHelvethaicaX Med';}
.widget-kit-niadashboard .chart-box .chart-item .chart-icon {height: 60px;}
.widget-kit-niadashboard .chart-box .chart-item .chart-label {height: 60px; font-size: 26px; line-height: 30px;}

.widget-kit-niadashboard .chart-bar .chart-bar-bar {width: 45px; background-color: #ccc; border-radius: 5px;}

.widget-kit-niadashboard .icon {width: 60px; height: 60px; background-color: #ccc; border-radius: 50%; text-align: center; color: #fff; margin-left: auto; margin-right: auto;}
.widget-kit-niadashboard .icon em {line-height: 60px; font-size: 32px;}

.widget-kit-niadashboard .chart-item.chart-item-startup .chart-bar-bar {background-color: #326fd3;}
.widget-kit-niadashboard .chart-item.chart-item-startup .icon {background-color: #326fd3;}

.widget-kit-niadashboard .chart-item.chart-item-sme .chart-bar-bar {background-color: #fe8a4c;}
.widget-kit-niadashboard .chart-item.chart-item-sme .icon {background-color: #fe8a4c;}
.widget-kit-niadashboard .chart-item.chart-item-commu .chart-bar-bar {background-color: #d9167f;}
.widget-kit-niadashboard .chart-item.chart-item-commu .icon {background-color: #d9167f;}
.widget-kit-niadashboard .chart-item.chart-item-infra .chart-bar-bar {background-color: #d9167f;}
.widget-kit-niadashboard .chart-item.chart-item-infra .icon {background-color: #d9167f;}
.widget-kit-niadashboard .chart-item.chart-item-other .chart-bar-bar {background-color: #9f9f9f;}
.widget-kit-niadashboard .chart-item.chart-item-other .icon {background-color: #9f9f9f;}

@media (max-width: 991px) { /* min-width: 992px */
	.widget-kit-niadashboard .niadashboard-body .niadashboard-map {flex: 3;}
	.widget-kit-niadashboard .niadashboard-body .niadashboard-stat {flex: 4;}
}
@media (max-width: 767px) { /* min-width: 768px */
	.widget-kit-niadashboard .niadashboard-body {display: block;}
	.widget-kit-niadashboard .niadashboard-body .niadashboard-map {text-align: center;}
	.widget-kit-niadashboard .niadashboard-body .niadashboard-map img {max-width: 400px;}
	.widget-kit-niadashboard .niadashboard-body .niadashboard-stat {heigth: 600px;}
}



.widget-kit-niadashboard .mapnia {
  position: relative;
}
.widget-kit-niadashboard .map {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.widget-kit-niadashboard .mapnia a {color: #fff;}

.widget-kit-niadashboard .cir1,
.widget-kit-niadashboard .cir2,
.widget-kit-niadashboard .cir3,
.widget-kit-niadashboard .cir4,
.widget-kit-niadashboard .cir5,
.widget-kit-niadashboard .cir6
{
       position: absolute;
       opacity: 1;
       color: #fff;
       font-size: 17px;
       z-index: 1000;
       transition: transform .2s;
       display: inline-block;
}

.widget-kit-niadashboard .cir1 { top: 9%; left: 39%; }
.widget-kit-niadashboard .cir2 { top: 18%; left: 70%; }
.widget-kit-niadashboard .cir3 { top: 32%; left: 47%; }
.widget-kit-niadashboard .cir4 { top: 45%; left: 59%; }
.widget-kit-niadashboard .cir5 { top: 78%; left: 40%; }

.widget-kit-niadashboard .cir1 .tooltiptext,
.widget-kit-niadashboard .cir2 .tooltiptext,
.widget-kit-niadashboard .cir3 .tooltiptext,
.widget-kit-niadashboard .cir4 .tooltiptext,
.widget-kit-niadashboard .cir5 .tooltiptext
{
        width: 120px;
        background-color: #2976e7;
        color: #fff;
        text-align: center;
        border-radius: 0px;
        padding: 5px 0;
        position: absolute;
        z-index: 1000;
        margin-left: 28px;
        line-height: 26px;
        transition: opacity 1s;
        font-size: 25px;
        opacity: 1;
        visibility: initial;
        font-family: 'DBHelvethaicaX';
}
.widget-kit-niadashboard .cir1 .tooltiptext { bottom: 95%; left: 0%; }
.widget-kit-niadashboard .cir2 .tooltiptext { bottom: 92%; left: 9%; }
.widget-kit-niadashboard .cir3 .tooltiptext { bottom: 95%; left: 0%; }
.widget-kit-niadashboard .cir4 .tooltiptext { bottom: 92%; left: 0%; }
.widget-kit-niadashboard .cir5 .tooltiptext { bottom: 92%; left: 6%; }

.widget-kit-niadashboard .cir1 .tooltiptext,
.widget-kit-niadashboard .cir2 .tooltiptext,
.widget-kit-niadashboard .cir3 .tooltiptext,
.widget-kit-niadashboard .cir4 .tooltiptext,
.widget-kit-niadashboard .cir5 .tooltiptext  { opacity: 1; }

.widget-kit-niadashboard .cir1:hover .tooltiptext,
.widget-kit-niadashboard .cir2:hover .tooltiptext,
.widget-kit-niadashboard .cir3:hover .tooltiptext,
.widget-kit-niadashboard .cir4:hover .tooltiptext,
.widget-kit-niadashboard .cir5:hover .tooltiptext { visibility: visible; opacity: 1;}

.widget-kit-niadashboard .cir1 .linetool::before {content: "";position: absolute;top: 93%;left: 0%;margin-left: -5px;height: 14px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.widget-kit-niadashboard .cir1 .linetool::after {content: "";position: absolute;left: 95%;margin-left: -5px;height: 30px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(90deg);bottom: 69%;}
.widget-kit-niadashboard .cir1 .linetool2::after {content: "";position: absolute;left: 107%;margin-left: -5px;height: 25px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(0deg);bottom: 41%;}

.widget-kit-niadashboard .cir2 .linetool::before {content: "";position: absolute;top: 95%;left: 0%;margin-left: -5px;height: 14px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.widget-kit-niadashboard .cir2 .linetool::after {content: "";position: absolute;left: 95%;margin-left: -5px;height: 30px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(90deg);bottom: 82%;}
.widget-kit-niadashboard .cir2 .linetool2::after {content: "";position: absolute;left: 106%;margin-left: -5px;height: 25px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(0deg);bottom: 65%;}

.widget-kit-niadashboard .cir3 .linetool::before {content: "";position: absolute;top: 93%;left: 0%;margin-left: -5px;height: 14px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.widget-kit-niadashboard .cir3 .linetool::after {content: "";position: absolute;left: 94%;margin-left: -5px;height: 30px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(90deg);bottom: 66%;}
.widget-kit-niadashboard .cir3 .linetool2::after {content: "";position: absolute;left: 106%;margin-left: -5px;height: 25px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(0deg);bottom: 37%;}

.widget-kit-niadashboard .cir4 .linetool::before {content: "";position: absolute;top: 92%;left: 0%;margin-left: -5px;height: 14px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.widget-kit-niadashboard .cir4 .linetool::after {content: "";position: absolute;left: 94%;margin-left: -5px;height: 30px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(90deg);bottom: 66%;}
.widget-kit-niadashboard .cir4 .linetool2::after {content: "";position: absolute;left: 106%;margin-left: -6px;height: 25px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(0deg);bottom: 39%;}

.widget-kit-niadashboard .cir5 .linetool::before {content: "";position: absolute;top: 92%;left: 0%;margin-left: -5px;height: 14px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.widget-kit-niadashboard .cir5 .linetool::after {content: "";position: absolute;left: 95%;margin-left: -4px;height: 30px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(90deg);bottom: 69%;}
.widget-kit-niadashboard .cir5 .linetool2::after {content: "";position: absolute;left: 106%;margin-left: -5px;height: 25px;border-width: 1px;border-style: solid;border-color: #fff;transform: rotate(0deg);bottom: 39%;}

.widget-kit-niadashboard .ring {
	display: block;
    position: absolute;
    top: 43%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -1em auto auto -1em;
    transform-origin: 50% 50%;
    border-radius: 50%;
    border: 3px solid rgb(254 0 0);
    opacity: 0;
    animation: pulsate 2s ease-out infinite;
    margin-top: 9px;margin-left: -42px;
}