/* Developer: Alex Sintawee Version: 2.0 */
/* Common */
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
strong { font-weight: bold; }
.body-lock-scroll { overflow: hidden; }
.table, .table-container { display: table; margin: auto; }
.table-row { display: table-row; }
.cell { display: table-cell; vertical-align: top; overflow-x: hidden; }
.control-sidebar { position: relative; right: 0; }
.content { padding-bottom: 0px; }
.nowrap { white-space: nowrap; }
.not-for-print { display: none !important; }

.align-right { text-align: right; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-middle { vertical-align: middle; }
.align-top { vertical-align: top; }
.align-bottom { vertical-align: bottom; }
.float-right { float: right; }
.float-left { float: left; }

.bx-flex { display: flex; }
.bx-flex-row { flex-direction: row; }
.bx-flex-column { flex-direction: column; }
.bx-flex.flex-start { justify-content: flex-start; }
.bx-flex.flex-end { justify-content: flex-end; }
.bx-flex.center { justify-content: center; }
.bx-flex.space-between { justify-content: space-between; }
.bx-flex.space-around { justify-content: space-around; }
.bx-flex.space-evenly { justify-content: space-evenly; }
.bx-flex.align-top { align-items: flex-start; }
.bx-flex.align-center { align-items: center; }
.bx-flex.align-bottom { align-items: flex-end; }
.bx-flex.flex-start { align-items: flex-start; }
.bx-flex.flex-wrap { flex-wrap: wrap; }
.bx-flex.flex-nowrap { flex-wrap: nowrap; }
.bx-flex.flex-wrap-reverse { flex-wrap: wrap-reverse; }

.bx-flex-container { display: flex; flex-direction: row; flex-wrap: wrap; }
.bx-flex-center { display: flex; justify-content: center; align-items: center; }

.box-shadow { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }
.drop-shadow { filter: drop-shadow(2px 2px 1px #333); }
.text-shadow { text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); }

.rcorner-3 { border-radius: 3px; }
.rcorner-5 { border-radius: 5px; }
.rcorner-6 { border-radius: 6px; }
.rcorner-10 { border-radius: 10px; }
.rcorner-20 { border-radius: 20px; }
.circle { border-radius: 50%; }

.noselect { 
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* Table */
.table { display: table; width: 100%; height: auto; }
.table.show { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }
/* End Table */

.bx-col-1 { width: 100%; }
.bx-col-2 { width: 50%; }
.bx-col-3 { width: 33.33%; }
.bx-col-4 { width: 25%; }
.bx-col-10 { width: 10%; }
.bx-col-20 { width: 20%; }
.bx-col-30 { width: 30%; }
.bx-col-40 { width: 40%; }
.bx-col-60 { width: 60%; }
.bx-col-70 { width: 70%; }
.bx-col-80 { width: 80%; }
.bx-col-90 { width: 90%; }

.margin-auto { margin: auto; }
.margin-0 { margin: 0px; }
.margin-5 { margin: 5px; }
.margin-10 { margin: 10px; }
.margin-15 { margin: 15px; }
.margin-20 { margin: 20px; }
.margin-40 { margin: 40px; }
.margin-50 { margin: 50px; }

.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-30 { margin-top: 30px; }
.margin-top-40 { margin-top: 40px; }
.margin-top-50 { margin-top: 50px; }
.margin-top-60 { margin-top: 60px; }

.margin-bottom-5 { margin-bottom: 5px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-30 { margin-bottom: 30px; }
.margin-bottom-40 { margin-bottom: 40px; }
.margin-bottom-50 { margin-bottom: 50px; }
.margin-bottom-60 { margin-bottom: 60px; }

.margin-left-5 { margin-left: 5px; }
.margin-left-10 { margin-left: 10px; }
.margin-left-15 { margin-left: 15px; }
.margin-left-20 { margin-left: 20px; }
.margin-left-30 { margin-left: 30px; }
.margin-left-40 { margin-left: 40px; }
.margin-left-50 { margin-left: 50px; }
.margin-left-60 { margin-left: 60px; }

.margin-right-5 { margin-right: 5px; }
.margin-right-10 { margin-right: 10px; }
.margin-right-15 { margin-right: 15px; }
.margin-right-20 { margin-right: 20px; }
.margin-right-30 { margin-right: 30px; }
.margin-right-40 { margin-right: 40px; }
.margin-right-50 { margin-right: 50px; }
.margin-right-60 { margin-right: 60px; }

.padding-5 { padding: 5px; }
.padding-10 { padding: 10px; }
.padding-20 { padding: 20px; }
.padding-30 { padding: 30px; }
.padding-40 { padding: 40px; }
.padding-50 { padding: 50px; }
.padding-60 { padding: 60px; }

.padding-left-5 { padding-left: 5px; }
.padding-left-10 { padding-left: 10px; }
.padding-left-15 { padding-left: 15px; }
.padding-left-20 { padding-left: 20px; }
.padding-left-30 { padding-left: 30px; }
.padding-left-40 { padding-left: 40px; }
.padding-left-50 { padding-left: 50px; }
.padding-left-60 { padding-left: 60px; }

.padding-right-5 { padding-right: 5px; }
.padding-right-10 { padding-right: 10px; }
.padding-right-15 { padding-right: 15px; }
.padding-right-20 { padding-right: 20px; }
.padding-right-30 { padding-right: 30px; }
.padding-right-40 { padding-right: 40px; }
.padding-right-50 { padding-right: 50px; }
.padding-right-60 { padding-right: 60px; }

.padding-top-5 { padding-top: 5px; }
.padding-top-10 { padding-top: 10px; }
.padding-top-15 { padding-top: 15px; }
.padding-top-20 { padding-top: 20px; }
.padding-top-30 { padding-top: 30px; }
.padding-top-40 { padding-top: 40px; }
.padding-top-50 { padding-top: 50px; }
.padding-top-60 { padding-top: 60px; }

.padding-bottom-5 { padding-bottom: 5px; }
.padding-bottom-10 { padding-bottom: 10px; }
.padding-bottom-15 { padding-bottom: 15px; }
.padding-bottom-20 { padding-bottom: 20px; }
.padding-bottom-30 { padding-bottom: 30px; }
.padding-bottom-40 { padding-bottom: 40px; }
.padding-bottom-50 { padding-bottom: 50px; }
.padding-bottom-60 { padding-bottom: 60px; }

.border-1 { border: 1px solid rgba(0, 0, 0, 0.2); }
.border-2 { border: 2px solid rgba(0, 0, 0, 0.2); }
.border-3 { border: 3px solid rgba(0, 0, 0, 0.2); }
.border-4 { border: 4px solid rgba(0, 0, 0, 0.2); }

.border-bottom-1 { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.border-bottom-2 { border-bottom: 2px solid rgba(0, 0, 0, 0.2); }
.border-bottom-3 { border-bottom: 3px solid rgba(0, 0, 0, 0.2); }
.border-bottom-4 { border-bottom: 4px solid rgba(0, 0, 0, 0.2); }

.border-top-1 { border-top: 1px solid rgba(0, 0, 0, 0.2); }
.border-top-2 { border-top: 2px solid rgba(0, 0, 0, 0.2); }
.border-top-3 { border-top: 3px solid rgba(0, 0, 0, 0.2); }
.border-top-4 { border-top: 4px solid rgba(0, 0, 0, 0.2); }

.border-grey { border-color: #f6f6f5; }
.border-blue { border-color: blue; }
.border-red { border-color: red; }
.border-pink { border-color: pink; }
.border-green { border-color: green; }
.border-blue { border-color: blue; }
.border-yellow { border-color: yellow; }
.border-green { border-color: green; }
.border-orange { border-color: orange; }
.border-white { border-color: #ffffff; }
.border-skyblue { border-color: skyblue; }

/* Text */
.grey { color: grey; }
.lightgrey { color: #f6f6f5; }
.darkgrey { color: #2D2E2C; }
.blue { color: blue; }
.red { color: red; }
.pink { color: pink; }
.green { color: green; }
.blue { color: blue; }
.yellow { color: yellow; }
.green { color: green; }
.orange { color: orange; }
.white { color: #ffffff; }
.skyblue { color: skyblue; }
.purple { color: purple; }
.burglary { color: #bd3d3d; }
.teal { color: #31b9ec; }
.turquoise { color: #42b5d4; }

.bg-white { background: #ffffff; }
.bg-red { background: red; }
.bg-pink { background: pink; }
.bg-green { background: green; }
.bg-blue { background: blue; }
.bg-yellow { background: yellow; }
.bg-green { background: green; }
.bg-orange { background: orange; }
.bg-skyblue { background: skyblue; }
.bg-redlight { background: rgba(255, 0, 0, 0.2); }
.bg-grey { background: grey; }
.bg-lightgrey { background: #f6f6f5; }
.bg-darkgrey { background: #2D2E2C; }
.bg-black { background: #000000; }
.bg-purple { background: purple; }
.bg-transparent { background: transparent; }
.bg-teal { background: #31b9ec; }
.bg-burglary { background: #bd3d3d; }
.bg-turquoise { background: turquoise; }
.bg-deeppink { background: deeppink; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.underline { text-decoration-line: underline; }
.word-break-all { word-break: break-all; }
.word-break-word { word-break: break-word; }

.font-normal { font-weight: normal; }
.font-light { font-weight: 300; }
.semibold { font-weight: 600; }
.italic { font-style:italic; }
.small { font-size: 12px; }

.disabled { pointer-events: none; }
.enabled { pointer-events: auto; }
/* End Text */

.item-absolute { position: absolute; }
.item-relative { position: relative; }
.item-fixed { position: fixed; }
.item-block { display: block; }
.item-inline-block { display: inline-block; }

.bg-image-cover { position: absolute; background: transparent; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; opacity: 0; }

figure.icon-arrow { background: url(/assets/shared/images/icons/icon-arrow-red.svg) center center no-repeat; width: 20px; height: 20px; background-size: contain; }
.active .icon-arrow, .icon-arrow.icon-arrow-down { transform: rotate(180deg); }
.fadein {
  -webkit-animation: fadein 1s linear;
  -moz-animation: fadein 1s linear;
  -ms-animation: fadein 1s linear;
  -o-animation: fadein 1s linear;
  animation: fadein 1s linear;
}
.fadeout.transitionOut {
  -webkit-animation: fadeout 1s linear;
  -moz-animation: fadeout 1s linear;
  -ms-animation: fadeout 1s linear;
  -o-animation: fadeout 1s linear;
  animation: fadeout 1s linear;
}

.animated {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.animated-linear {
    transition: all 0.1s linear;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
}

.loader { position: fixed; top: 50%; left: 50%; width: 100px; height: 100px; margin-left: -50px; margin-top: -50px; z-index: 5000; }
.loader .icon-loading { background: url("../images/icon-loading.svg") center center no-repeat; background-size: contain; width: 100px; height: 100px; }
.icon-loading {
  -webkit-animation: spinning 3s linear infinite;
  -moz-animation: spinning 3s linear infinite;
  -ms-animation: spinning 3s linear infinite;
  -o-animation: spinning 3s linear infinite;
  animation: spinning 3s linear infinite;
}
.loader.transitionOut { opacity: 0;
  -webkit-animation: fadeout 1s;
  -moz-animation: fadeout 1s;
  -ms-animation: fadeout 1s;
  -o-animation: fadeout 1s;
  animation: fadeout 1s;
}
/* Animated redcircle */
.animated-redcircle { width: 135px; height: 135px; }
.animated-redcircle .redcircle { border-radius: 50%; background: #EE3536; top: 50%; left: 50%; opacity: 0;
  -webkit-animation: redcircle 6s linear infinite;
  -moz-animation: redcircle 6s linear infinite;
  -ms-animation: redcircle 6s linear infinite;
  -o-animation: redcircle 6s linear infinite;
  animation: redcircle 6s linear infinite;
}
.animated-redcircle .data-text { width: 90%; height: 90%; margin-left: -45%; margin-top: -45%; top: 50%; left: 50%; }
.animated-redcircle .redcircle.redcircle-1 { width: 100%; height: 100%; margin-left: -50%; margin-top: -50%; }
.animated-redcircle .redcircle.redcircle-2 { width: 90%; height: 90%; margin-left: -45%; margin-top: -45%; animation-delay: 0.5s; }
.animated-redcircle .redcircle.redcircle-3 { width: 80%; height: 80%; margin-left: -40%; margin-top: -40%; animation-delay: 1s; }
/* End Animated redcircle */
.transtionIn {
  -webkit-animation: fadein 1s;
  -moz-animation: fadein 1s;
  -ms-animation: fadein 1s;
  -o-animation: fadein 1s;
  animation: fadein 1s;
}

.btn, .btn-pointer {cursor:pointer;}
.btn-primary { padding: 4px; display: inline-block; }
.hide { display: none; }

/* Z-Index */
.z-index--1 { z-index: -1; }
.z-index-1 { z-index: 1; }
.z-index-10 { z-index: 10; }
.z-index-100 { z-index: 100; }
.z-index-1000 { z-index: 1000; }
/* End Z-Index */

/* Modals */
.bg-background.dark { width: 0vw; height: 0vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); position: fixed; opacity: 0; 
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
}
.modal-container, .modal-container .modal-box, .modal-container .bg-background, .modal-container .data-content, .modal-container .bg-background { z-index: 100; }
.modal-container .bg-background { width: 100vw; height: 100vh; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); }
.modal-container .data-content { top: -150%; left: 50%; width: 50vw; height: 60vh; margin-left: -25vw; 
    transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
}
.modal-container .bg-background, .modal-container .data-content { opacity: 0; }
.modal-container .data-content .btn-container { top: 5px; right: 10px; }
.modal-container .data-content .data-content-box { padding: 20px; overflow: scroll; width: 90%; height: 85%; margin: auto; }
.modal-container.show .bg-background.bg-dark, .modal-container.show .data-content {  opacity: 1; }
.btn-data-close { z-index: 1000; }
.modal-container.show .data-content { top: 10%; }
/* End Modals */

/* Collapse */
.btn-collapse { cursor: pointer; }
.data-collapse { height: auto; overflow: hidden; 
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
}
.data-collapse.collapsed { height: auto; }
.data-collapse .content { margin-top: -600px; display: block; height: 200px; overflow: hidden;
	-webkit-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-moz-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	-ms-transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
	transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1.05);
}
.data-collapse.collapsed .content { margin-top: 0%; height: auto; }
/* End Collapse */

/* Chart */
.data-chart-container { margin: 20px auto; }
.chart-container { margin: auto; overflow: scroll; width: 90%; text-align: center; }
.chart-container .chart-body { fill: rgba(0, 0, 255, 0.58); stroke: pink; stroke-width: 5; fill-opacity: 0.1; stroke-opacity: 0.9; } 
.chart-container .line-data { stroke: #d01d3c; stroke-width: 2; } 
.chart-container .chart-dot { stroke: #FFF; stroke-width: 1; fill: #ff5fe8; } 
.chart-container .txt-chart { fill: green; } 
.chart-container .line-guide { stroke: purple; stroke-width: 1; } 
.chart-container.chart-size-large .txt-chart, .chart-container.chart-size-large .txt-chart-bg { font-size: 9px; }
.chart-container .txt-chart-bg { fill: #FFF; font-weight: bold; background: #fff; }
.chart-container .txt-x { fill: skyblue; font-size: 10px; }
.data-chart-container .table-chart-container { min-width: 300px; margin: auto; border: 1px solid #777; }
.data-chart-container .table-chart-container .table-chart.data-table-chart-container { margin: 0 auto; }
/* End chart */

/* Animation */
@keyframes spinning {
    from { transform: rotateZ(0deg); }
    to { transform: rotateZ(360deg); }
}
@keyframes rotating {
    0% { transform: rotateZ(0deg); }
    50% { transform: rotateZ(180deg); }
    100% { transform: rotateZ(360deg); }
}
@keyframes fadein {
    from { opacity: 0; }
    to{ opacity: 1; }
}
@keyframes fadeout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes redcircle {
    0% { opacity: 0; transform: scale(0.8, 0.8); }
    20% { opacity: 1; transform: scale(1, 1); }
    90% { opacity: 0; transform: scale(1.6, 1.6); }
    100% { opacity: 0; transform: scale(1.6, 1.6); }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
      -webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);
      animation-timing-function: cubic-bezier(.215,.61,.355,1);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
  }
  40%, 43% {
      -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
      animation-timing-function: cubic-bezier(.755,.05,.855,.06);
      -webkit-transform: translate3d(0,-30px,0);
      transform: translate3d(0,-30px,0);
  }
  70% {
      -webkit-animation-timing-function: cubic-bezier(.755,.05,.855,.06);
      animation-timing-function: cubic-bezier(.755,.05,.855,.06);
      -webkit-transform: translate3d(0,-15px,0);
      transform: translate3d(0,-15px,0);
  }
  90% {
      -webkit-transform: translate3d(0,-4px,0);
      transform: translate3d(0,-4px,0);
  }
}
@keyframes pulse {
  0% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
  }
  50% {
      -webkit-transform: scale3d(1.05,1.05,1.05);
      transform: scale3d(1.05,1.05,1.05);
  }
  100% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
  }
}
/* Customised Animated */
@keyframes moveup {
    0% { opacity: 0; top: 100%; }
    90% { opacity: 1; top: 69.5%; }
    100% { opacity: 1; top: 70%; }
}
@keyframes movedown {
    0% { opacity: 1; top: 70%; }
    100% { opacity: 0; top: 100%; }
}
/* End Customised Animated */
/* End Animation */

.viewport-desktop { display: block; }
.viewport-desktop.item-inline-block { display: inline-block; }
.viewport-desktop.bx-flex, .viewport-desktop.bx-flex-center { display: flex; }
.viewport-mobile, .viewport-mobile.item-inline-block, .viewport-mobile.bx-flex, .viewport-mobile.bx-flex-center { display: none; }

@media all and (max-width: 768px) {
.m-col-1 { width: 100%; }
.m-col-2 { width: 50%; }
.m-col-3 { width: 33.33%; }
.m-col-4 { width: 25%; }

.viewport-desktop, .viewport-desktop.item-inline-block, .viewport-desktop.bx-flex, .viewport-desktop.bx-flex-center { display: none; }
.viewport-mobile { display: block; }
.viewport-mobile.item-inline-block { display: inline-block; }
.viewport-mobile.bx-flex, .viewport-mobile.bx-flex-center { display: flex; }
}

.testbox { position: fixed; top: 10%; left:5px; background: #fff; padding: 10px; border: 1px solid #777; border-radius: 10px; z-index: 10000000000; overflow: scroll; height: 80vh; }