body {
    padding: 0px !important;
    margin: 0px !important;
    font-size: 12px !important;
    line-height: 1.2em !important;
    color: #555 !important;
}

body .ssc-hk {
    font-family: Tahoma, "Helvetica Neue",Helvetica,Arial,STHeiti,"Microsoft JhengHei",微軟正黑體,sans-serif;
}

a:link,
a:visited,
a:active {
    color: #467baf;
    text-decoration: underline;
    font-weight: normal;
}

.ui-dialog {
    z-index: 1060 !important;
}

.ssc-hk a:focus {
    outline: 1px dotted #66afe9;
    outline-offset: 2px;
}

.ssc-hk hr {
    margin-top: 12px;
    margin-bottom: 12px;
}

.ssc-hk .mandatory {
    color: #ff4545;
    font-weight: bold;
}

.ssc-hk input[type=text].decimal-input {
    text-align: right;
}

.ssc-hk .hidden-submit-button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    float: left;
}

.ssc-hk .dummy-submit-button {
    /* same style as hidden-submit-button but postback is disable by ssCommon.js */
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    float: left;
}

.ssc-hk .invisible {
    display: none;
}

.ssc-hk .align-left {
    text-align: left;
}

.ssc-hk .align-center {
    text-align: center;
}

.ssc-hk .align-right {
    text-align: right;
}

.ssc-hk .margin-bottom-x {
    margin-bottom: 5px;
}

.ssc-hk .margin-top-x {
    margin-top: 5px;
}

.ssc-hk .text-ellipsis {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* element should define appropriate <max-width> inline if its parent's <width> is undefined */
    max-width: 100%;
}

.ssc-hk span.preline-message {
    white-space: pre-line;
    word-wrap: break-word;
}

/* >>> override jQuery-UI >>> */
.ssc-hk .ui-widget {
    font-family: calibri, tahoma, arial, helvetica, sans-serif;
}

.ssc-hk .ui-widget input,
.ssc-hk .ui-widget select,
.ssc-hk .ui-widget textarea,
.ssc-hk .ui-widget button {
    font-family: calibri, tahoma, arial, helvetica, sans-serif;
}

.ssc-hk .ui-state-active,
.ssc-hk .ui-widget-content .ui-state-active,
.ssc-hk .ui-widget-header .ui-state-active,
.ssc-hk a.ui-button:active,
.ssc-hk .ui-button:active,
.ssc-hk .ui-button.ui-state-active:hover {
    border: none;
    background: #3C9490;
    font-weight: normal;
    color: #ffffff;
}

.ssc-hk .ui-state-default,
.ssc-hk .ui-state-hover,
.ssc-hk .ui-state-focus,
.ssc-hk .ui-widget-content,
.ssc-hk .ui-widget-content .ui-state-default,
.ssc-hk .ui-widget-content .ui-state-hover,
.ssc-hk .ui-widget-content .ui-state-focus,
.ssc-hk .ui-widget-header,
.ssc-hk .ui-widget-header .ui-state-default,
.ssc-hk .ui-widget-header .ui-state-hover,
.ssc-hk .ui-widget-header .ui-state-focus,
.ssc-hk .ui-button,
.ssc-hk .ui-button:hover,
.ssc-hk .ui-button:focus,
.ssc-hk .ui-button.ui-state-disabled:hover,
.ssc-hk .ui-button.ui-state-disabled:active {
    color: #555;
}

button.ui-multiselect > .ui-multiselect-label {
    padding-top: 3px;
    padding-bottom: 3px;
}
/* <<< override jQuery-UI <<< */

/* >>> override Bootstrap >>> */
.ssc-hk div.form-group {
    margin-bottom: 8px;
}

.ssc-hk div.form-group > * {
    padding-left: 7px;
    padding-right: 5px;
}

.ssc-hk label {
    font-weight: normal;
}

.ssc-hk .alert {
    padding-top: 5px;
    padding-bottom: 5px;
}

.ssc-hk a.close {
    text-decoration: none;
}

.ssc-hk .pagination > li > a:focus {
    outline-offset: 0px;
}

.ssc-hk .btn {
    font-size: 12px;
    line-height: 1.2em;
    height: 24px;
    padding: 2px 5px;
    color: #f8f8f8 !important;
    background-color: #3C9490 !important;
}

.ssc-hk .btn:focus {
    outline: 1px dotted #66afe9;
    outline-offset: -3px;
}

.ssc-hk .btn.form-button {
    margin-top: 4px;
    margin-bottom: 4px;
}

.ssc-hk .btn.btn-icon {
    min-width: 16px !important;
    padding: 2px 8px !important;
    position: absolute;
    pointer-events: none;
    right: 0px;
}

.ssc-hk .btn.btn-sm {
    min-width: 25px !important;
}

.ssc-hk :not(.input-group-btn) > .btn {
    min-width: 88px;
    padding: 3px 10px;
}

.ssc-hk .button-bar > .btn:not([type=button]):not([type=submit]) {
    margin-right: 4px;
}

.ssc-hk *:not(.file-uploader) > .button-bar > .btn {
    margin-bottom: 4px;
}

@media (max-width: 768px) {
    .ssc-hk [class*="col-"] {
        margin-top: 1px;
    }
    .ssc-hk div[class*="col-"].col-float-left > * {
        margin-bottom: 3px;
    }
    .ssc-hk div[class*="col-"].col-float-left > *:last-child {
        margin-bottom: 0px;
    }
}

@media (min-width: 768px) {
    .ssc-hk div[class*="col-"].col-float-left > * {
        float: left;
    }
    .ssc-hk div[class*="col-"].col-float-left > * {
        width: auto;
    }
    .ssc-hk div[class*="col-"].col-float-left > .decimal-input {
        width: 140px;
    }
    .ssc-hk div[class*="col-"].col-float-left > *:not(:last-child) {
        margin-right: 5px;
    }
}

.ssc-hk div[class*="col-"] > .control-label.control-label-inline {
    float: left;
}

.ssc-hk div[class*="col-"] > .control-label.control-label-inline:not(:last-child) {
    margin-right: 5px;
}

.ssc-hk div[class*="col-"] > div.form-group {
    margin-bottom: 8px;
}

.ssc-hk div[class*="col-"] > div.form-group:last-child {
    margin-bottom: 0px;
}

.ssc-hk .row:not(:last-child) {
    margin-bottom: 0px;
}

@media (max-width: 768px) {
    .ssc-hk div[class*="col-"] > div.form-group {
        margin-bottom: 8px;
    }

    .ssc-hk .row:not(:last-child) {
        margin-bottom: 0px;
    }
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        line-height: 1.2em;
        min-height: 24px;
        padding-top: 5px;
        padding-bottom: 3px;
        padding-left: 8px;
        text-align: left;
        border-top: 1px solid #d0d0d0;
        border-left: 1px solid #d0d0d0;
        border-top-left-radius: 8px;
    }
    .form-horizontal .control-label.borderless {
        border: none;
    }
}

.ssc-hk .form-control {
    font-size: 12px;
    line-height: 1.2em;
    height: 24px;
    padding: 2px 5px;
}

.ssc-hk .form-control[disabled] {
    cursor: default;
}

.ssc-hk select.form-control {
    padding: 2px 1px;
}

.ssc-hk .form-control.datetime-input-wrapper {
    padding: 0px !important;
    border: none !important;
}

.ssc-hk input[type=radio] {
    margin-left: 12px;
    margin-right: 2px;
}

.ssc-hk .form-control-as-label {
    color: #333;
    border: none;
    margin-bottom: 0px;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.ssc-hk .form-control-static {
    min-height: 24px;
    padding: 5px;
    margin-bottom: 0;
}

.ssc-hk .form-anchor {
    /* based on form-control for proper alignment */
    display: inline-block;
    width: auto;
    height: 24px;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.2;
}

.ssc-hk .input-group-addon {
    padding: 2px 5px;
    font-size: 12px;
}

.ssc-hk div.input-group-inline {
    width: 100%;
    max-width: 100%;
    display: table;
    position: relative;
}

.ssc-hk div.input-group-inline > * {
    display: table-cell;
    vertical-align: top;
}

.ssc-hk div.input-group-inline > label,
.ssc-hk div.input-group-inline > label.control-label,
.ssc-hk div.input-group-inline > span:not(.input-group-wrapper) {
    padding-left: 6px;
    padding-right: 6px;
}

.ssc-hk div.input-group-inline > .control-label {
    border: none !important;
}

.ssc-hk div.input-group-inline > span.input-group-inline-space {
    width: 10px;
}

.ssc-hk div.input-group-inline > label,
.ssc-hk div.input-group-inline > label.control-label,
.ssc-hk div.input-group-inline > span:not(.input-group-wrapper) {
    text-align: center;
}

.ssc-hk .form-control.multiline-3,
.ssc-hk .control-label.multiline-3 {
    /* based form-control line-height */
    height: calc(1.2em * 3 + 8px);
}

.ssc-hk .form-control.multiline-5,
.ssc-hk .control-label.multiline-5 {
    /* based form-control line-height */
    height: calc(1.2em * 5 + 8px);
}

.ssc-hk .form-control.multiline-10,
.ssc-hk .control-label.multiline-10 {
    /* based form-control line-height */
    height: calc(1.2em * 10 + 8px);
}

.ssc-hk .form-control.multiline-20,
.ssc-hk .control-label.multiline-20 {
    /* based form-control line-height */
    height: calc(1.2em * 20 + 8px);
}

.ssc-hk .form-control-as-label.form-control.multiline-3,
.ssc-hk .form-control-as-label.form-control.multiline-5,
.ssc-hk .form-control-as-label.form-control.multiline-10,
.ssc-hk .form-control-as-label.form-control.multiline-20 {
    width: 100%;
}

.ssc-hk ::-moz-placeholder,
.ssc-hk .form-control::-moz-placeholder {
    color: #bbb;
    opacity: 1;
}

.ssc-hk :-ms-input-placeholder,
.ssc-hk .form-control:-ms-input-placeholder {
    color: #bbb;
}

.ssc-hk ::-webkit-input-placeholder,
.ssc-hk .form-control::-webkit-input-placeholder {
    color: #bbb;
}

.ssc-hk .edit-panel.edit-panel-readonly .form-control::-moz-placeholder {
    color: transparent;
}

.ssc-hk .edit-panel.edit-panel-readonly .form-control:-ms-input-placeholder {
    color: transparent;
}

.ssc-hk .edit-panel.edit-panel-readonly .form-control::-webkit-input-placeholder {
    color: transparent;
}

.ssc-hk span.multiline-label {
    /* text will wrap when necessary, and on line breaks */
    display: block;
    white-space: pre-line;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0px;
}

.ssc-hk span.multiline-label.multiline-strict {
    /* text will only wrap on line breaks */
    white-space: pre;
}

.ssc-hk span.multiline-label.multiline-3 {
    /* based body line-height */
    max-height: calc(1.2 * 3);
    overflow-y: auto;
}

.ssc-hk span.multiline-label.multiline-5 {
    /* based body line-height */
    max-height: calc(1.2 * 5);
    overflow-y: auto;
}

.ssc-hk span.multiline-label.multiline-10 {
    /* based body line-height */
    max-height: calc(1.2 * 10);
    overflow-y: auto;
}

.ssc-hk span.multiline-label.multiline-20 {
    /* based body line-height */
    max-height: calc(1.2 * 20);
    overflow-y: auto;
}

.ssc-hk .modal {
    z-index: 2000;
    overflow: auto !important;
}

.ssc-hk .modal-header {
    padding: 5px 15px;
    background-color: #e5e5e5;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.ssc-hk .modal-header .modal-title {
    display: inline;
    padding: 0px;
    line-height: 22px;
}

.ssc-hk .modal-header .close {
    margin: 0px;
    padding: 0px;
}

.ssc-hk .modal-header .close:focus {
    outline: 1px dotted #66afe9;
}

.ssc-hk .modal-body {
    padding: 12px 22px 5px 22px;
}

.ssc-hk .modal-footer {
    padding: 5px 12px 12px 12px;
    text-align: left;
    border-top-style: none;
}

.ssc-hk .modal.loading-wait {
    z-index: 100000;
}

.ssc-hk .modal.loading-wait .modal-dialog {
    width: 124px;
    margin: auto;
    top: calc(50vh - 62px);
}

.ssc-hk .modal.loading-wait .modal-content {
    background: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.ssc-hk .modal.loading-wait .modal-body {
    padding: 0px;
}

.ssc-hk .modal.loading-wait .loading-image {
    width: 64px;
    height: 64px;
}

.ssc-hk ~ .modal-backdrop.in {
    filter: alpha(opacity=10);
    opacity: 0.1;
}

.ssc-hk .modal.popup-alert {
    z-index: 5000;
}

.ssc-hk .modal.popup-alert .modal-body > span {
    display: inline-block;
}
    
.ssc-hk .modal.popup-alert .modal-body > span.glyphicon {
    font-size: 32px;
    color: #999;
    vertical-align: top;
    margin-right: 16px;
}

.ssc-hk .modal.popup-alert .modal-body > span.glyphicon.glyphicon-alert {
    color: #cc9999;
}

.ssc-hk .modal.popup-alert .modal-body > span.preline-message {
    vertical-align: top;
    width: calc(100% - 50px);
}
/* <<< override Bootstrap <<< */

/* >>> screen title >>> */
.ssc-hk .screen-title-row {
    height: 30px;
}

.ssc-hk .screen-title {
    margin: 0px;
}

.ssc-hk .screen-title > span {
    color: #f8f8f8;
    background-color: #61c1bd;
    text-align: center;
    padding: 5px 15px 5px 15px;
    border-radius: 0px 0px 16px 16px;
    top: 1px;
    position: absolute;
}

.ssc-hk .screen-title-row-button-bar {
    padding-top: 2px;
    text-align: right;
    float: right;
}

@media (max-width: 400px) {
    .ssc-hk .screen-title-row-button-bar {
        display: none;
    }
}
/* <<< screen title <<< */

/* >>> search criteria >>> */
.ssc-hk div.search-criteria {
    margin-top: 5px;
}

.ssc-hk div.search-criteria div.panel {
    border: none;
    box-shadow: none;
}

.ssc-hk div.search-criteria div.panel-heading {
    padding: 0px;
    display: inline-block;
    background-color: #efefef;
    border-radius: 0px !important;
}

.ssc-hk div.search-criteria div.panel-heading > .panel-title {
    font-size: 14px;
}

.ssc-hk div.search-criteria div.panel-heading > .panel-title > a {
    padding: 5px 20px;
    text-decoration: none;
    color: #636363;
    display: block;
}

.ssc-hk div.search-criteria div.panel-body {
    padding: 8px 0px 8px 0px;
    border: none !important;
    border-top: 1px solid #61c1bd !important;
}

.ssc-hk div.search-criteria div.panel-body > .row {
    margin: 0px;
}

.ssc-hk div.search-criteria div.panel-footer {
    padding: 5px 10px;
    background-color: transparent;
    border-bottom: 1px solid #61c1bd !important;
}

.ssc-hk div.search-criteria div.panel-footer {
    padding: 5px 10px;
    background-color: transparent;
    text-align: center;
    border: none;
}

@media (max-width: 768px) {
    .ssc-hk div.search-criteria div.panel-body > .row > [class*="col-"]:not(:last-child) {
        margin-bottom: 8px;
    }
}

@media (min-width: 768px) {
    .ssc-hk .row.multi-col-spacing > [class*="col-"]:not(:first-child) {
        padding-left: 25px;
    }

    .ssc-hk .row.multi-col-spacing > [class*="col-"]:not(:last-child) {
        padding-right: 20px;
    }
}
/* <<< search criteria <<< */

/* >>> search result >>> */
.ssc-hk div.search-result {
    margin-top: 5px;
    margin-bottom: 20px;
}

.ssc-hk div.search-result-action-bar > div {
    white-space: nowrap;
    margin-bottom: 5px;
    overflow: hidden;
}

.ssc-hk div.search-result-pager > *,
.ssc-hk div.search-result-pager-wrapper > span > * {
    font-size: 12px;
    display: inline-block;
    margin: 0px 5px 0px 0px;
    vertical-align: middle;
}

.ssc-hk div.search-result-pager select {
    min-width: 60px;
    width: 60px;
    padding: 2px 2px 2px 5px;
    height: auto;
}

.ssc-hk div.search-result-pager-wrapper:not(:first-child) {
    margin-left: 20px;
}

.ssc-hk div.search-result-pager-wrapper .glyphicon-data-pager-field {
    cursor: pointer;
}

.ssc-hk div.search-result-pager-wrapper .glyphicon-data-pager-field[disabled=disabled] {
    cursor: default;
}

.ssc-hk div.search-result-pager-wrapper .glyphicon-data-pager-field[disabled=disabled] > span {
    color: #ddd;
}

.ssc-hk div.search-result-pager-wrapper .search-result-record-count {
    margin-left: 20px;
}

@media (max-width: 540px) {
    .ssc-hk div.search-result-pager-wrapper .search-result-record-count {
        margin-left: 0px;
        display: block;
    }
}
/* <<< search result <<< */

/* >>> edit panel >>> */
.ssc-hk div.edit-panel {
    margin-top: 5px;
    margin-bottom: 5px;
}

.ssc-hk div.edit-panel > .panel {
    background-color: #ececec;
    margin-top: 5px;
    margin-bottom: 5px;
    border-color: #ececec;
    border-radius: 5px;
    border-width: 5px;
    border-bottom-width: 1px;
}

.ssc-hk div.edit-panel .panel-body {
    background-color: #fff;
    padding: 5px 20px;
    border: 1px solid #fff;
}

.ssc-hk div.edit-panel .edit-panel-section-header {
    color: #f8f8f8;
    background-color: #336699;
    margin: 0px 0px 8px 0px;
    padding: 10px 15px;
    overflow: hidden;
}

.ssc-hk div.edit-panel .edit-panel-section-header:not(:first-child) {
    margin-top: 30px;
}

.ssc-hk div.edit-panel hr {
    margin: 12px -15px;
}

.ssc-hk div.edit-panel .panel-footer {
    background-color: #ececec;
    border-color: #ececec;
    height: 40px;
    padding: 5px;
}
    
.ssc-hk div.edit-panel .panel-footer .btn:not(:last-child) {
    margin-right: 5px;
}

@media (min-height: 320px) {
    .ssc-hk div.edit-panel .panel-body {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    .ssc-hk.no-navbar div.edit-panel .panel-body {
        max-height: calc(100vh - 80px);
    }
}
/* <<< edit panel <<< */

/* >>> datagrid >>> */
.ssc-hk .table-responsive {
    border: 1px solid #ddd;
}

.ssc-hk .datagrid {
    margin-bottom: 0px;
}

.ssc-hk .datagrid-hidden {
    display: none;
}

.ssc-hk .datagrid th,
.ssc-hk .datagrid td {
    padding: 2px 3px;
    white-space: nowrap;
    max-width: 40vw;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.ssc-hk .datagrid th.no-max-width,
.ssc-hk .datagrid td.no-max-width {
    max-width: none;
}

.ssc-hk .datagrid th > a,
.ssc-hk .datagrid td > a,
.ssc-hk .datagrid th > label,
.ssc-hk .datagrid td > label,
.ssc-hk .datagrid th > span,
.ssc-hk .datagrid td > span {
    overflow-x: hidden;
}

.ssc-hk .datagrid th > a,
.ssc-hk .datagrid td > a,
.ssc-hk .datagrid th > label,
.ssc-hk .datagrid td > label,
.ssc-hk .datagrid th > span:not(.multiline-label),
.ssc-hk .datagrid td > span:not(.multiline-label) {
    text-overflow: ellipsis;
}

.ssc-hk .datagrid th > span:not(.multiline-label),
.ssc-hk .datagrid td > span:not(.multiline-label) {
    display: block;
}

.ssc-hk .datagrid .datagrid-header {
    color: #f8f8f8;
    background-color: #61c1bd;
}

.ssc-hk .datagrid .datagrid-header * {
    text-decoration: none;
    color: #f8f8f8;
}

.ssc-hk .datagrid .datagrid-header input {
    color: #555;
    font-weight: normal;
}

@media (max-width: 175px) { /* 50 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-100 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-50 {
    min-width: 50px;
}

@media (max-width: 300px) { /* 100 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-100 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-100 {
    min-width: 100px;
}

@media (max-width: 425px) { /* 150 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-150 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-150 {
    min-width: 150px;
}

@media (max-width: 550px) { /* 200 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-200 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-200 {
    min-width: 200px;
}

@media (max-width: 675px) { /* 250 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-250 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-250 {
    min-width: 250px;
}

@media (max-width: 800px) { /* 300 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-300 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-300 {
    min-width: 300px;
}

@media (max-width: 1050px) { /* 400 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-400 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-400 {
    min-width: 400px;
}

@media (max-width: 1300px) { /* 500 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-500 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-500 {
    min-width: 500px;
}

@media (max-width: 1550px) { /* 600 / 40% + 50 */
    .ssc-hk .datagrid .datagrid-col-min-600 {
        max-width: none;
    }
}
.ssc-hk .datagrid .datagrid-col-min-600 {
    min-width: 600px;
}

.ssc-hk .table > thead > tr > th,
.ssc-hk .table > tbody > tr > td,
.ssc-hk .table > tfoot > tr > td {
    /* fix a issue vertical grid line */
    border-color: transparent;
}

.ssc-hk .table > thead > tr > th:not(:first-child),
.ssc-hk .table > tbody > tr > td:not(:first-child),
.ssc-hk .table > tfoot > tr > td:not(:first-child) {
    /* fix a issue vertical grid line (only happen in IE) */
    border-left-style: solid;
}

.ssc-hk .datagrid .datagrid-row-selected {
    background-color: #ffffe6;
    color: #636363;
}
/* <<< datagrid <<< */

/* >>> multi-select >>> */
.ssc-hk ul.token-input-list {
    overflow: hidden;
    cursor: text;
    list-style-type: none;
    float: left;
    height: 23px;
    border: 0px solid #494949;
    min-height: 1px;
    margin: 0;
    padding: 2px 2px 2px 0px;
    background-color: Transparent;
    color: #636363;
    vertical-align: middle;
}

.ssc-hk ul.token-input-list-show-all {
    height: auto !important;
    height: 23px;
    overflow-x: hidden;
    border: 0px solid #494949;
    cursor: text;
    min-height: 1px;
    margin: 0;
    padding: 2px 2px 2px 0px;
    background-color: Transparent;
    list-style-type: none;
    float: left;
    z-index: 999;
    height: 18px;
    color: #636363;
    font-weight: normal;
    vertical-align: middle;
}

.ssc-hk select.token-search-list {
    position: absolute;
    z-index: 999;
    margin: 0;
    padding: 2px;
    background-color: #ffffff;
    border-left: 1px solid #c3c3c3;
    border-right: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    color: #636363;
    font-weight: normal;
    vertical-align: middle;
}

.ssc-hk select.token-search-list-hide {
    display: none;
}

.ssc-hk li.token-input-token {
    background: none;
    height: auto !important;
    height: 1%;
    margin: 3px;
    padding: 1px 3px;
    background-color: #ebece4;
    white-space: nowrap;
    color: #636363;
    cursor: default;
    border: 1px solid #898989;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    float: left;
}

.ssc-hk li.token-input-token-hide {
    background: none;
    height: 22px;
    width: 0px;
    float: left;
    visibility: hidden;
}

.ssc-hk .show-lst-bttn {
    margin-top: 7px;
}

.ssc-hk .highlight {
    background-color: #d9ff8f;
}

.ssc-hk table tbody tr.highlight-selectable {
    background-color: #d9ff8f !important;
    cursor: pointer;
}

.ssc-hk .token-lbl {
    background-color: transparent;
    color: #636363;
    padding-left: 2px;
    padding-right: 2px;
    vertical-align: middle;
    text-decoration: none;
    overflow: visible;
    border: 0px;
}
/* <<< multi-select <<< */

/* >>> modal-with-iframe >>> */
.ssc-hk .modal-with-iframe .modal-body {
    padding: 5px 1px;
}
/* <<< modal-with-iframe <<< */

/* override boostrap styles (start) */
.ssc-hk .nav-tabs {
    margin-bottom: 2px;
}

.ssc-hk .nav-tabs > li > a {
    border-top: 2px solid transparent !important;
    padding: 6px 15px;
}

.ssc-hk .nav-tabs > li > a:focus {
    outline: 0px solid transparent;
}

.ssc-hk .nav-tabs > li.active > a,
.ssc-hk .nav-tabs > li.active > a:hover,
.ssc-hk .nav-tabs > li.active > a:focus {
    border-top-color: #61c1bd !important;
}
/* override boostrap styles (end) */

.ssc-hk .modal-body .form-group {
    margin-right: -10px;
    margin-left: -10px;
}

.ssc-hk .tab-content {
    margin-left: -15px;
}

/* Overlap a glyphicon button to a input box */
.ssc-hk .inner-addon {
    position: relative;
}
/* style icon */
.ssc-hk .inner-addon .glyphicon {
    position: absolute;
    padding: 5px 10px;
    cursor: pointer;
}
.ssc-hk .edit-panel-readonly .inner-addon .glyphicon {
    display: none;
}

/* align icon */
.ssc-hk .left-addon .glyphicon {
    left: 0px;
}
.ssc-hk .left-addon .glyphicon.icon2 {
    left: 20px;
}
.ssc-hk .right-addon .glyphicon {
    right: 0px;
}
.ssc-hk .right-addon .glyphicon.icon2 {
    right: 20px;
}
/* add padding  */
.ssc-hk .left-addon input {
    padding-left: 25px;
}
.ssc-hk .right-addon input {
    padding-right: 25px;
}

.ssc-hk .accordion {
    margin-right: -15px;
    margin-left: -15px;
}

.ssc-hk div.accordion .panel {
}

.ssc-hk div.accordion .panel-body {
    padding: 8px 22px;
}

.ssc-hk div.accordion .panel-heading {
    padding: 0px;
}

.ssc-hk div.accordion .panel-heading a {
    display: block;
    padding: 6px 6px 6px 30px;
    font-size: 12px;
    text-decoration: none;
}

.ssc-hk div.accordion .panel-heading input[type='checkbox'] {
    margin: 7px 10px 0px 10px;
    vertical-align: middle;
    float: left;
}

/* Icon when the collapsible content is shown */
.ssc-hk div.accordion a[data-toggle="collapse"][aria-expanded='true']:after {
    font-family: "Glyphicons Halflings";
    content: "\e114";
    float: right;
    margin-left: 15px;
}

/* Icon when the collapsible content is hidden */
.ssc-hk div.accordion a[data-toggle="collapse"][aria-expanded='false']:after {
    font-family: "Glyphicons Halflings";
    content: "\e080";
    float: right;
    margin-left: 15px;
}

/* override color picker styles */
.ssc-hk .color-picker-control,
.ssc-hk .color-picker-control:hover,
.ssc-hk .color-picker-container .sp-input {
    border: 1px solid #ccc;
}

.ssc-hk .color-picker-control .sp-preview {
    width: calc(100% - 16px);
    height: 100%;
}

.ssc-hk .color-picker-control.sp-active,
.ssc-hk .color-picker-container,
.ssc-hk .color-picker-container .sp-input:focus {
    border: 1px solid #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}

.ssc-hk .color-picker-container .sp-picker-container {
    width: 200px;
}

.ssc-hk .color-picker-container .sp-button-container {
    float: none;
}

.ssc-hk .color-picker-container .sp-button-container .btn:not(:last-child) {
    margin-right: 5px;
}