/**
Applied to all screen sizes if included in jade template. Media queries below to adjust styles.
To contain all shared utility classes, such as those for colors, sizes, spacing, buttons, etc.
**/
/* to disable font boosting */
html {
    font-size: 16px;  /* needed root size for rem calculations */
}
html * {
    max-height: 1000000px
}
body {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
}
/* NEW UTILITY CLASSES */
.ma-all--a {
    margin: auto;
}
.ma-all--n {
    margin: 0;
}
.ma-left--n {
    margin-left: 0;
}
.ma-top--n {
    margin-top: 0;
}
.ma-right--n {
    margin-right: 0;
}
.ma-bottom--n {
    margin-bottom: 0;
}
.ma-left--a {
    margin-left: auto;
}
.ma-right--a {
    margin-right: auto;
}
.ma-bottom--smallest {
    margin-bottom: 0.2rem;
}
.ma-all--t {
    margin: 0.4rem;
}
.ma-left--t {
    margin-left: 0.4rem;
}
.ma-top--smallest {
    margin-top: 0.2rem;
}
.ma-top--1qm {
    margin-top: 0.3rem;
}
.ma-top--t {
    margin-top: 0.4rem;
}
.ma-right--t {
    margin-right: 0.4rem;
}
.ma-bottom--t {
    margin-bottom: 0.4rem;
}
.ma-all--h {
    margin: 0.6rem;
}
.ma-left--h {
    margin-left: 0.6rem;
}
.ma-right--h {
    margin-right: 0.6rem;
}
.ma-top--h {
    margin-top: 0.6rem;
}
.ma-bottom--h {
    margin-bottom: 0.6rem;
}
.ma-all--3qm {
    margin: 0.9rem;
}
.ma-left--3qm {
    margin-left: 0.9rem;
}
.ma-top--3qm {
    margin-top: 0.9rem;
}
.ma-right--3qm {
    margin-right: 0.9rem;
}
.ma-bottom--3qm {
    margin-bottom: 0.9rem;
}
.ma-all--s {
    margin: 1rem;
}
.ma-top--s {
    margin-top: 1rem;
}
.ma-bottom--s {
    margin-bottom: 1rem;
}
.ma-all--m {
    margin: 1.2rem;
}
.ma-left--m {
    margin-left: 1.2rem;
}
.ma-right--m {
    margin-right: 1.2rem;
}
.ma-top--m {
    margin-top: 1.2rem;
}
.ma-bottom--m {
    margin-bottom: 1.2rem;
}
.ma-all--l {
    margin: 1.5rem;
}
.ma-left--l {
    margin-left: 1.5rem;
}
.ma-right--l {
    margin-right: 1.5rem;
}
.ma-top--l {
    margin-top: 1.5rem;
}
.ma-bottom--l {
    margin-bottom: 1.5rem;
}
.ma-all--xl {
    margin: 1.9rem;
}
.ma-left--xl {
    margin-left: 1.9rem;
}
.ma-right--xl {
    margin-right: 1.9rem;
}
.ma-top--xl {
    margin-top: 1.9rem;
}
.ma-bottom--xl {
    margin-bottom: 1.9rem;
}
.ma-left--2s {
    margin-left: 2rem;
}
.ma-top--2s {
    margin-top: 2rem;
}
.ma-right--2s {
    margin-right: 2rem;
}
.ma-bottom--2s {
    margin-bottom: 2rem;
}
.ma-bottom--top {
    margin-top: 4rem;
}
.ma-bottom--largest {
    margin-bottom: 4rem;
}
.ma-top--largest {
    margin-top: 4rem;
}
.pa-all--n {
    padding: 0;
}
.pa-top--n {
    padding-top: 0;
}
.pa-bottom--n {
    padding-bottom: 0;
}
.pa-all--smallest {
    padding: 0.2rem;
}
.pa-left--smallest {
    padding-left: 0.2rem;
}
.pa-right--smallest {
    padding-right: 0.2rem;
}
.pa-top--smallest {
    padding-top: 0.2rem;
}
.pa-bottom--smallest {
    padding-bottom: 0.2rem;
}
.pa-all--t {
    padding: 0.4rem;
}
.pa-left--t {
    padding-left: 0.4rem;
}
.pa-right--t {
    padding-right: 0.4rem;
}
.pa-top--t {
    padding-top: 0.4rem;
}
.pa-bottom--t {
    padding-bottom: 0.4rem;
}
.pa-all--h {
    padding: 0.6rem;
}
.pa-left--h {
    padding-left: 0.6rem;
}
.pa-right--h {
    padding-right: 0.6rem;
}
.pa-top--h {
    padding-top: 0.6rem;
}
.pa-bottom--h {
    padding-bottom: 0.6rem;
}
.pa-all--2t {
    padding: 0.8rem;
}
.pa-left--2t {
    padding-left: 0.8rem;
}
.pa-right--2t {
    padding-right: 0.8rem;
}
.pa-bottom--2t {
    padding-bottom: 0.8rem;
}
.pa-all--s {
    padding: 1rem;
}
.pa-left--s {
    padding-left: 1rem;
}
.pa-right--s {
    padding-right: 1rem;
}
.pa-top--s {
    padding-top: 1rem;
}
.pa-bottom--s {
    padding-bottom: 1rem;
}
.pa-all--m {
    padding: 1.2rem;
}
.pa-left--m {
    padding-left: 1.2rem;
}
.pa-right--m {
    padding-right: 1.2rem;
}
.pa-top--m {
    padding-top: 1.2rem;
}
.pa-bottom--m {
    padding-bottom: 1.2rem;
}
.pa-bottom--ml {
    padding-bottom: 1.3rem;
}
.pa-left--ml {
    padding-left: 1.3rem;
}
.pa-all--l {
    padding: 1.5rem;
}
.pa-left--l {
    padding-left: 1.5rem;
}
.pa-right--l {
    padding-right: 1.5rem;
}
.pa-top--l {
    padding-top: 1.5rem;
}
.pa-bottom--l {
    padding-bottom: 1.5rem;
}
.pa-all--xl {
    padding: 1.9rem;
}
.pa-left--xl {
    padding-left: 1.9rem;
}
.pa-right--xl {
    padding-right: 1.9rem;
}
.pa-top--xl {
    padding-top: 1.9rem;
}
.pa-bottom--xl {
    padding-bottom: 1.9rem;
}
.pa-all--2s {
    padding: 2rem;
}
.pa-left--2s {
    padding-left: 2rem;
}
.pa-right--2s {
    padding-right: 2rem;
}
.pa-top--2s {
    padding-top: 2rem;
}
.pa-bottom--2s {
    padding-bottom: 2rem;
}
.pa-all--2m {
    padding: 2.4rem;
}
.pa-left--2m {
    padding-left: 2.4rem;
}
.pa-right--2m {
    padding-right: 2.4rem;
}
.pa-top--2m {
    padding-top: 2.4rem;
}
.pa-bottom--2m {
    padding-bottom: 2.4rem;
}
.pa-left--largest {
    padding-left: 4rem;
}
.pa-top--largest {
    padding-top: 4rem;
}
.pa-right-largest {
    padding-right: 4rem;
}
.pa-bottom--largest {
    padding-bottom: 4rem;
}
/* NEW TEXT COLORS */
.kh--white {
    color: #FFFFFF;
}
/* Rebranding Start */
.kh--dk-blue {
   color: #203F83;
}

.kh--purple {
  color: #2B2351;
}
.kh--dk-teal {
    color: #00989E;
}

.kh-bg--dark-teal {
    background-color: #00989E;
}
.kh-bg--primary-dark-gray {
    background-color: #3D535E;
}
.kh-bg--primary-purple {
    background-color: #2B2351;
}

.kh-bg--dk-blue {
    background-color: #203F83;
}

.kh-panel--light-blue {
    background-color: rgba(0,142,188, .1);
    border: 1px solid #3C5CAA;
}

/* Rebranding End */
.kh--gray {
    color: #3C495A;
}
.kh--dark-red {
    color: #B50000;
}
.kh_red {
    color: #F05C49;
}
.kh--green {
    color: #00BC6F;
}
.kh--dark-green {
    color: #008040;
}
.kh--orange {
    color: #FF9E15;
}
.kh--plum {
    color: #990556;
}
.kh_blue {
    color: #00B1B5;
}
.kh--dark-blue {
    color: #007FAA;
}
.kh_inactive_gray {
    color: #B9BEC5;
}
.kh--mid-gray {
    color: #585858;
}
.kh--mid-light-gray {
    color: #e9e9e9;
}
.kh--mid-blue-gray {
    color: #DBDDE1;
}
.kh_expanded_gray {
    color: #EDF0F0;
}
.kh--dark-gray {
    color: #1A2636;
}
.kh--blue-gray {
    color:#636D7B;
}
.kh--blue {
    color:#00B1B5;
}
.kh--yellow {
    color: #FFD923
}
/* BACKGROUND COLORS */
.kh-bg--white {
    background-color: #FFFFFF;
}
.kh-bg--blue {
    background-color: #00B1B5;
}
.kh_bg_mid_blue {
    background-color: #E0E8EA;
}
.kh_bg_orange {
    background-color: #FF9E15;
}
.kh-bg--red {
    background-color:#F48577;
}
.kh-bg--light-red {
    background-color: #FFE5E2;
}
.kh_bg_green {
    background-color: #00BC6F;
}
.kh-bg--light-green {
    background-color: #BFEBD9;
}
.kh-bg--yellow {
    background-color: #FFD923;
}
.kh-bg--light-yellow {
    background-color: #FFF5EA;
}
.kh--bg-plum {
    background-color: #990556;
}
.kh_bg_light_plum {
    background-color: #CC82AA;
}
.kh_bg_dark_plum {
    background-color: #6A013A;
}
.kh_bg_light_blue {
    background-color: #C1ECEC;
}
.kh-bg--gray {
    background-color: #3C495A;
}
.kh-bg--dark-gray {
    background-color: #525E6E;
}
.kh_bg_inactive_gray {
    background-color: #B9BEC5;
}
.kh_bg_mid_blue_gray {
    background-color: #DBDDE1;
}
.kh_bg_mid_light_gray {
    background-color: #E9E9E9;
}
.kh-bg--light-gray {
    background-color: #F6F6F6;
}
/* NEW - BACKGROUND COLORS*/
.kh-bg--light-blue-gray {
    background-color: #EDF0F0;
}

/* BORDER COLORS */
.kh_border_red {
    border-color: #F05C49;
}
.kh_border_left_red {
    border-left: 8px solid #F05C49;
}
.kh_border_left_yellow {
    border-left: 8px solid #FFD923;
}
.kh-border--mid-yellow {
    border: 8px solid #E8DACC;
}
.kh-border--mid-red {
    border-color: #E8C9C5
}
.kh_border_mid_green {
    border-color: #A3D5C1;
}
.kh_border_dark_plum {
    border-color: #6A013A;
}
.kh_border_light_plum {
    border-color: #CC82AA;
}
.kh_border_mid_blue {
    border-color: #C5D0D2;
}
.kh_border_gray {
    border-color: #3C495A;
}
.kh_border_inactive_gray {
    border-color: #B9BEC5;
}
.kh_border_mid_gray {
    border-color: #BEBEBE;
}
.kh_border_mid_blue_gray {
    border-color: #DBDDE1;
}
.kh_border_mid_light_gray {
    border-color: #E9E9E9;
}
.kh-border-top-light-gray {
    border-top: 1px solid #E9E9E9;
}
.kh-border-bottom-light-gray {
    border-bottom: 1px solid #E9E9E9;
}
/* FONTS */
.font--xx-sm {
    font-size: 0.8rem;
}
.font--x-sm {
    font-size: 0.85rem;
}
.font--sm {
    font-size: 0.9rem;
}
.font--m {
    font-size: 1.0rem;
}
.font--large {
    font-size: 1.2rem;
}
.font--x-lg {
    font-size: 1.6rem;
}
.font--2x {
    font-size: 2.0rem;
}
.font--4x {
    font-size: 4.0rem;
}
.font--5x {
    font-size: 5.0rem;
}
.font--6x {
    font-size: 6.0rem;
}
/* WIDTHS */
.wAuto {
    width:auto!important;
}
.w5 {
    width: 5%;
}
.w10 {
    width: 10%;
}
.w14 {
    width: 14%;
}
.w15 {
    width: 15%;
}
.w20 {
    width: 20%;
}
.w25 {
    width: 25%;
}
.w30 {
    width: 30%;
}
.w33 {
    width: 33%;
}
.w34 {
    width: 34%;
}
.w35 {
    width: 35%;
}
.w40 {
    width: 40%;
}
.w50 {
    width: 50%;
}
.w51 {
    width: 51%;
}
.w52 {
    width: 52%;
}
.w53 {
    width: 53%;
}
.w54 {
    width: 54%;
}
.w55 {
    width: 55%;
}
.w56 {
    width: 56%;
}
.w57 {
    width: 57%;
}
.w58 {
    width: 58%;
}
.w59 {
    width: 59%;
}
.w60 {
    width:60%;
}
.w61 {
    width:61%;
}
.w62 {
    width:62%;
}
.w63 {
    width:63%;
}
.w64 {
    width:64%;
}
.w65 {
    width:65%;
}
.w66 {
    width:66%;
}
.w67 {
    width:67%;
}
.w68 {
    width:68%;
}
.w69 {
    width:69%;
}
.w70 {
    width:70%;
}
.w71 {
    width:71%;
}
.w72 {
    width:72%;
}
.w73 {
    width:73%;
}
.w74 {
    width:74%;
}
.w75 {
    width:75%;
}
.w76 {
    width:76%;
}
.w77 {
    width:77%;
}
.w78 {
    width:78%;
}
.w79 {
    width:79%;
}
.w80 {
    width:80%;
}
.w85 {
    width:85%;
}
.w90 {
    width:90%;
}
.w95 {
    width:95%;
}
.w75 {
    width:75%;
}
.w99 {
    width:99%;
}
.w100 {
    width:100%;
}
/* FLEX-BASIS WIDTHS*/
.fb--auto {
    flex-basis: auto;
}
.fb--w20 {
    flex-basis: 20%;
}
.fb--w30 {
    flex-basis: 30%;
}
.fb--w40 {
    flex-basis: 40%;
}
.fb--w50 {
    flex-basis: 50%;
}
.fb--w60 {
    flex-basis: 60%;
}
/* TEXT COLORS */
.koneksa_white {
    color:#FFF;
}
.koneksa_orange {
    color: #FF9E15;
}
.koneksa_gray {
    color:#3C495A;
}
.koneksa_mid_light_gray {
    color: #D3D3D3;
}
.koneksa_mid_gray {
    color: #585858;
}
.koneksa_red {
    color: #F05C49;
}
.koneksa_green {
    color: #00BC6F;
}
.koneksa_plum {
    color: #990556;
}
/* BORDER STYLE */
.koneksa_border_thin {
    border-style: solid !important;
    border-width: 1px !important;
}
/* BORDER COLORS */
.border_left_gray {
    border-left:1px solid #EEEEEE;
}
.border_top_gray {
    border-top:1px solid #EEEEEE;
}
.border_right_gray {
    border-right:1px solid #EEEEEE;
}
.border_bottom_gray {
    border-bottom:1px solid #EEEEEE;
}
.koneksa_border_light_gray {
    border-color: #DBDDE1;
}
.border_left_mid_light_gray {
    border-left:1px solid #D3D3D3;
}
.border_mid_light_gray {
    border:1px solid #B9BEC5;
}
.border_top_mid_light_gray {
    border-top:1px solid #D3D3D3;
}
.border_right_mid_light_gray {
    border-right:1px solid #D3D3D3;
}
.border_bottom_mid_light_gray {
    border-bottom:1px solid #D3D3D3;
}
.border_left_dark_gray {
    border-left: 1px solid #475161;
}
.border_top_dark_gray {
    border-top: 1px solid #475161;
}
.border_right_dark_gray {
    border-right: 1px solid #475161;
}
.border_bottom_dark_gray {
    border-bottom: 1px solid #475161;
}
.koneksa_border_plum {
    border-color: #7E0447;
}
/* BACKGROUND COLORS */
.koneksa_bg_white {
    background-color: #FFF;
}
.koneksa_bg_gray {
    background-color:#3c495a;
}
.kh-bg--gray {
    background-color:#3c495a;
}
.koneksa_bg_light_gray {
    background-color: #F6F6F6;
}
.koneksa_bg_mid_gray {
    background-color: #585858;
}
.koneksa_border_mid_light_gray {
    border-color:#DBDDE1;
}
.koneksa_bg_dark_gray {
    background-color: #525E6E;
}
.koneksa_bg_blue {
    background-color:#00B1B5;
}
.koneksa_bg_blue_25 {
    background-color: #C1ECEC;
}
.koneksa_bg_blue_gray_25 {
    background-color:#cbd3d7;
}
.koneksa_bg_plum {
    background-color: #990556;
}
.koneksa_bg_red {
    background-color:#F48577;
}
.koneksa_bg_red_pale {
    background-color: #FFE5E2;
}
.koneksa_bg_green_pale {
    background-color: #BFEBD9;
}
.koneksa_bg_green {
    background-color:#4CD09A;
}
.koneksa_bg_yellow {
    background-color: #FFD923;
}
.koneksa_bg_orange {
    background-color:#DB5E00;
}
/* BUTTONS */
/* main action button - large */
.button--lg {
    font-size: 0.9rem;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    line-height: 1.4rem;
    padding: 0.5rem 1.5rem 0.6rem 1.5rem;
    font-family: "Open Sans", "Arial", sans-serif;
    cursor: pointer;
    display: inline-block;
    height: auto;
}
/* main action button - small */
.button--sm {
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.2rem;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 0.2rem 1.2rem 0.3rem 1.2rem;
    font-family: "Open Sans", "Arial", sans-serif;
    cursor: pointer;
    display: inline-block;
}
/* main and secondary actions */
.main-action {
    color: #FFFFFF;
    border: 1px solid #203F83;
    background-color: #203F83;
}
.sec-action {
    color: #1A2636;
    border: 1px solid #B9BEC5;
    background: linear-gradient(#FFFFFF, #EDF0F0);
}
/* active */
.main-action:hover,
.main-action:active {
    background: #3C5CAA;
}
.sec-action:active, .sec-action:hover {
    background: #E9E9E9;
}
/* disabled */
.main-action.disabled {
    background: #282FA3;
    border: 1px solid #282FA3;
}
.sec-action.disabled {
    color: #585858;
    background: #FFFFFF;
}
/* Action links - start */
a.main-action-link {
    font-size: 1rem;
    line-height: 1.6rem;
    color: #203F83;
    font-family: "Open Sans", Arial, sans-serif;
}
a.sec-action-link {
    font-size: 1rem;
    line-height: 1.6rem;
    color: #1A2636;
    font-family: "Open Sans", Arial, sans-serif;
    text-decoration: underline;
}
a.main-action-link:hover {
    text-decoration: underline;
}
a.main-action-link:active {
    text-decoration: none;
}
/* Action links - end */
/* Table Links - start */
a.main-action-table-link {
    line-height: 1.2rem;
    color: #990556;
    font-family: Open Sans, Arial, sans-serif;
}
a.sec-action-table-link {
    line-height: 1.2rem;
    color: #1A2636;
    font-family: "Open Sans", Arial, sans-serif;
    text-decoration: underline;
}
a.main-action-table-link:hover {
    text-decoration: underline;
}
a.main-action-table-link:active {
    text-decoration: none;
}
/* Table Links - end */
/* In progress spinner - start */
.overlay {
    background: #FFFFFF;
    position: absolute;
    opacity: 0.6;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
.loader,
.loader:after {
    border-radius: 50%;
    width: 7rem;
    height: 7rem;
}
.loader {
    margin: auto;
    font-size: 10px;
    position: absolute;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(210, 238, 233, 0.2);
    border-right: 1.1em solid rgba(210, 238, 233, 0.2);
    border-bottom: 1.1em solid rgba(210, 238, 233, 0.2);
    border-left: 1.1em solid #00B1B5;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
    z-index: 2;
    left: 50%;
    top: 20%;
}
.main .loader {
    margin-top: 200px;
    top: 50%;
}
.centerBlock {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}
@-webkit-keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: translateX(-50%) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: translateX(-50%) rotate(360deg);
    }
}
/* In progress spinner - end */
.panel .surveyTopDetail H3 {
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-transform: none;
}
.panelSurveyChoices H3 {
    font-size: 1.2rem;
    line-height: 1.6rem;
    text-transform: none;
}
.multilang{
    display: inline-grid;
}

.surveys-dashboard-view {
    min-height: 500px;
}

.surveys-dashboard-view .loader {
    top: 50%;
}
/* ----------- Mobile ----------- */
@media only screen
and (max-device-width: 767px) {
    .button--lg {
        font-size: 1.2rem;
        line-height: 1.6rem;
        padding: 0.6rem 1rem 0.8rem 1rem;
        width: 100%;
    }
    .main-action{
        border: 1px solid #6A013A;
    }
    .sec-action {
        border: 1px solid #B9BEC5;
    }
    .panel .surveyTopDetail H3 {
        font-size: 1.2rem;
        line-height: 2rem;
        text-transform: none;
    }
    .panelSurveyChoices H3 {
        font-size: 1.2rem;
        line-height: 2rem;
        text-transform: none;
    }
}
/* ----------- Tablet ----------- */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
    .button--lg {
        font-size: 1.2rem;
        line-height: 1.6rem;
        padding: 0.6rem 1rem 0.8rem 1rem;
    }
    .main-action{
        border: 1px solid #6A013A;
    }
    .sec-action {
        border: 1px solid #B9BEC5;
    }
    .panel .surveyTopDetail H3 {
        font-size: 1.4rem;
        line-height: 2rem;
        text-transform: none;
    }
    /* Action links - start */
    .main-action-link {
        font-size: 1rem;
        line-height: 1.6rem;
    }
    .sec-action-link {
        font-size: 0.9rem;
        line-height: 1.2rem;
    }
    /* Action links - end */
}