@import url('https://fonts.googleapis.com/css?family=Lato');
@font-face {
    font-family: 'sifont';
    src: url('../Content/FontIcon/sifont.woff') format('woff'), /* Pretty Modern Browsers */
    url('../Content/FontIcon/sifont.woff2') format('woff2'), url('../Content/FontIcon/sifont.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../Content/FontIcon/sifont.svg') format('svg');
}

.sicon {
    font-family: sifont;
    font-style: normal;
    font-size: 20px;
    position: relative;
    display: inline-block;
}

    .sicon.sicon-checked:before {
        color: inherit;
    }

.sicon-earphone:before {
    content: '\E8D5';
}

.sicon-bell:before {
    content: '\E824';
}

.sicon-alerts:before {
    content: '\E829';
}

.sicon-show-name:before {
    content: '\E8D3';
}

.sicon-sort-alpha:before {
    content: '\E8D2';
}

.sicon-sort-select:before {
    content: '\E8D4';
}

.sicon-film:before {
    content: '\E8C2';
}

.sicon-move:before {
    content: '\E8CC';
}

.sicon-arrow-up:before {
    content: '\E8CF';
}

.sicon-arrow-down:before {
    content: '\E8CE';
}

.sicon-question-sign:before {
    content: '\E8CD';
}

.sicon-cog:before {
    content: '\E8A7';
}

.sicon-trash:before {
    content: '\E8AD';
}

.sicon-warning:before {
    content: '\E829';
}

.sicon-transfer:before {
    content: '\E8C7';
}

.sicon-reset:before {
    content: '\E8A6';
}

.sicon-globe:before {
    content: '\E8A5';
}

.sicon-back:before {
    content: '\E8A9';
}

.sicon-save:before {
    content: '\E8A4';
}

.sicon-logout:before {
    content: '\E8A2';
}

.sicon-btn:before,
.sicon-arrow-right:before {
    content: '\E8A1';
}

.sicon-arrow-left:before {
    content: '\E8B3';
}

.sicon-edit:before {
    content: '\E8A0';
}

.sicon-deactivate:before {
    content: '\E8A3';
}

.sicon-activate:before {
    content: '\E8AA';
}

.sicon-play:before {
    content: '\E8B7';
}

.sicon-pause:before {
    content: '\E8B8';
}

.sicon-next:before {
    content: '\E8B0';
}

.sicon-previous:before {
    content: '\E8B2';
}

.sicon-backward:before {
    content: '\E8B1';
}

.sicon-forward:before {
    content: '\E8AF';
}

.sicon-email:before {
    content: '\E89F';
}

.sicon-plus:before {
    content: '\E8CB';
}

.sicon-user:before {
    content: '\E8B6';
}

.sicon-password:before {
    content: '\E89E';
}

.sicon-show-all:before {
    content: '\E8D1';
}
.sicon-search:before {
    content: 'E';
}

.sicon-random-password:before {
    content: '\E8B9';
}

.sicon-phone:before {
    content: '\E8B5';
}

.sicon-volume:before {
    content: '\E8AE';
}

.sicon-volumn-muted:before {
    content: '\E8BB';
}

.sicon-player-stop:before {
    content: '\E8BC';
}

.sicon-finger-print:before {
    content: '\E8BD';
}

.sicon-cancel-save:before {
    content: '\E8BE';
}

.sicon-default:before {
    content: '\E8BA';
}

.sicon-eye-open:before {
    content: '\E8C4';
}

.sicon-eye-close:before {
    content: '\E8C5';
}

.sicon-search:before {
    content: '\E8BF';
}

.sicon-close-circle:before {
    content: '\E8A3';
}

.icon-exchange:before {
    content: '\F0EC';
}

.form-chk-input + input + .form-chk .sicon-toggle:before,
.sicon-unchecked:before,
.list-item-checkbox .item-checkbox:before {
    /*Checkbox OFF*/
    content: '\e8b4';
}

.form-chk-input:checked + input + .form-chk .sicon-toggle:before,
.sicon-checked:before,
.list-item-checkbox .item-checkbox:checked:before {
    /*Checkbox ON*/
    content: '\e8aa';
    color: #23c7b8;
}

input[type=checkbox][disabled] + input + .form-chk {
    background-color: #f0f0f0;
}

/*add css item*/
.item-image-css {
    float: right;
    width: 35px;
    height: 35px;
    margin-right: 10px;
    margin-top: -7px;
}

.form-chk-input + .form-chk .sicon-toggle:before,
.form-chk-input + input + .form-chk .sicon-toggle:before,
.sicon-unchecked:before, input[value=false] + .sicon-check:before, input[value='0'] + .sicon-check:before,
input[value='False'] + .sicon-check:before {
    /*Checkbox OFF*/
    content: '\E80E';
    color: red;
}

.form-chk-input:checked + .form-chk .sicon-toggle:before,
.form-chk-input:checked + input + .form-chk .sicon-toggle:before,
.sicon-checked:before, input[value=true] + .sicon-check:before, input[value='1'] + .sicon-check:before,
input[value='True'] + .sicon-check:before {
    /*Checkbox ON*/
    content: '\e8aa';
    color: #23c7b8;
}

.check-input {
    position: absolute;
    top: -5px;
    right: 20px;
}

/*menu bar css*/

.menu-bar-left {
    width: calc(100vw - 470px);
    position: absolute;
    left: 0;
    overflow-y: auto;
}

.navbar-customize .menu-bar-left {
    width: calc(100vw - 575px);
}

.menu-bar-right {
    position: absolute;
    width: 470px;
    right: 0;
}

.menu-bar-right.customize-mode {
    position: absolute;
    width: 575px;
    right: 0;
}

.nav-item-menubar a {
    margin: 0px !important;
}

.nav-item-menubar i {
    margin: 0px 5px 0px 5px !important;
}

.nav-show,
.nav-hide {
    color: inherit;
    font-weight: normal;
}

    .nav-show *,
    .nav-hide * {
        float: left;
    }

nav {
    position: fixed;
    top: 0;
    height: 60px; /*64*/
    background-color: #000;
    width: 100%;
    z-index: 101;
    color: #fff;
}

    nav *, nav .nav-fixed .glyphicon {
        line-height: 60px; /*64*/
        top: 0;
    }

#nav-visibility {
    width: 1px;
    height: 1px;
    position: absolute;
    top: -10000px;
}

.nav-item-menubar a:hover {
    color: #A6A6A6;
}

#nav-visibility ~ .menu-bar-right .nav-fixed .nav-hide,
#nav-visibility:checked ~ .menu-bar-right .nav-fixed .nav-show {
    display: block;
}

#nav-visibility ~ .menu-bar-right .nav-fixed .nav-show,
#nav-visibility:checked ~ .menu-bar-right .nav-fixed .nav-hide {
    display: none;
}

#nav-visibility:checked + .menu-bar-left .nav-dynamic {
    visibility: hidden;
    opacity: 1;
    width: 70%;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: hidden;
    /*margin-left:40px;*/
}

.nav-fixed {
    float: right;
    position: absolute;
    right: 0;
}

.nav-dynamic {
    padding-left: 0px;
    margin-bottom: 0px;
}

.nav-fixed .nav-item-menubar,
.nav-fixed .nav-item-menubar a {
    float: right;
}

.nav-item-menubar, .nav-item-menubar a {
    height: 60px;
    line-height: inherit;
    /*float: inherit;*/
    display: inline-block;
    list-style-type: none;
    border: none;
    background-color: transparent;
    color: inherit;
    text-decoration: none;
}

.nav-fixed .nav-item-menubar span {
    display: inline-block;
    cursor: pointer;
}

.nav-fixed .nav-item-menubar .item-text.cancel {
    display: none;
}
/*avatar*/
.profile-image {
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    margin-bottom: 1px;
}

body {
    background-color: #EFEEEF;
    color: #333;
    margin: 0;
    padding: 0;
}

.color {
    background-color: #fff;
    color: #0a000a;
}

a.btn {
    outline: 0;
}

a:hover, a:active, a:focus {
    outline: 0;
}

.btn {
    color: #000;
}

    .btn.btn-select {
        background-color: #fff;
    }

    .btn.button-select:hover {
        color: #000;
        background-color: rgba(0, 0, 0, 0.05);
    }

    .btn .glyphicon {
        margin-top: 6px;
    }

    .btn:hover {
        color: #ededed;
    }

    .btn.btn-select .selection-icon {
        color: #606060;
        margin-top: 4px;
        margin-right: -5px;
    }

header {
    background-color: #000;
    height: 50px;
}

header, footer, hgroup,
nav, section {
    display: block;
}

.icon-left {
    float: left;
    margin-top: 2px;
}

label, span {
    display: block;
    /*font-weight: 600;*/
}

.customize-mode .edit-lang-able {
    cursor: pointer;
}

.customize-mode .header-text {
    cursor: pointer;
}

    .customize-mode .header-text:hover {
        background-color: #B9B9B9;
    }

.edit-lang-able:not(td) {
    /*min-height: 25px;*/
    display: block;
}

.edit-lang-message-able {
    min-height: 25px;
    display: block;
    cursor: pointer;
}

    .edit-lang-message-able:hover {
    }

textarea {
    background-color: transparent;
    font-family: inherit;
    width: 574px;
    color: #000;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

input[type="checkbox"] {
    background: transparent;
    border: inherit;
    width: auto;
}

input[type="file"] {
    color: #000;
}

input[type="submit"],
input[type="button"],
button {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
    outline: none;
}

input.form-control, select.form-control {
    color: black;
    min-height: 35px;
}

i {
    cursor: pointer;
}

select {
    color: black;
}

/********************
*   Customize design   *
********************/
#body {
    background-color: #efeeef;
    clear: both;
}

.form-1-col {
    width: 300px;
}

    .form-1-col div.header-places span {
        width: 250px;
    }

.form-1-col-large {
    width: 420px;
}

    .form-1-col-large div.header-places span {
        width: 250px;
    }

.form-350 {
    width: 370px;
}

.form-2-col {
    border-radius: 10px;
    width: 600px;
}

    .form-2-col div.header-places span {
        width: 450px;
    }

.form-3-col {
    width: 830px;
}

    .form-3-col div.header-places span {
        width: 750px;
    }

.wrap-default-extralarge {
    max-width: 100%;
}
    .wrap-default-extralarge div.header-places span {
        width: 700px;
    }

.form-4-col {
    width: 1100px;
}

    .form-4-col div.header-places span {
        width: 700px;
    }

.form-5-col {
    width: 1400px;
}

.wrap-default-extralarge .action-item{
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 10px;
    width: 15%;
}

.wrap-default-extralarge .action-item.span-2-item{
    width: 30%;
}
    
.form-full-col {
    max-width: 100%;
    padding: 0 !important;
}

.form-250 {
    width: 250px;
}

.form-500 {
    width: 500px;
}

.form-750 {
    width: 750px;
}


.form-1000 {
    width: 1000px;
}

.form-600 {
    width: 600px;
}

.form-700 {
    width: 700px;
}

@media (max-width: 800px) {
    .form-600 {
        width: 100%;
    }
}


/*old - will detele after Loi check*/
/*.form-400 {
    width: 400px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}*/

/*new*/
.form-400 {
    width: 300px;
}

.modal .form-400 {
    width: 500px;
}

.form-400 div.header-places span {
    width: 250px;
}


.modal-footer :first-child {
    width: 48%;
    float: left;
    text-align: left;
    line-height: 2;
    background-color: transparent;
    color: #000000;
}

.modal-footer :last-child {
    width: 48%;
    float: right;
    text-align: left;
    line-height: 2;
    color: #ffffff;
    border-radius: 21px;
    background-color: #5887F5;
}

.no-border {
    border: none !important;
}

.margin-top-logon {
    margin-top: 20px;
}

.margin-top-logon-button {
    margin-top: 10px;
}


.form-header {
    width: 100%;
    padding-top: 5px;
    color: white;
    background-color: #5887F5;
    border-radius: 10px 10px 0 0;
    min-height: 35px;
    text-align: center;
    position: relative;
    font-size: 18px;
}

    .form-header i {
        font-size: 24px;
    }

    .form-header .left-icons {
        position: absolute;
        left: 4px;
        top: 4px;
        width: 50%;
    }

        .form-header .left-icons .left-icon {
            float: left;
            padding-right: 2px;
        }

    .form-header .right-icons {
        position: absolute;
        right: 4px;
        top: 4px;
        width: 50%;
    }

        .form-header .right-icons .right-icon {
            float: right;
            padding-right: 10px;
        }

    .form-header .second-left-icon {
        position: absolute;
        left: 34px;
        top: 4px;
    }

    .form-header .third-left-icon {
        position: absolute;
        left: 64px;
        top: 4px;
    }

    .form-header .first-right-icon {
        position: absolute;
        right: 4px;
        top: 4px;
    }

    .form-header .second-right-icon {
        position: absolute;
        right: 34px;
        top: 4px;
    }



div.header-places span {
    margin: 0 auto;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

.form-header label {
    font-weight: bold;
    width: 100%;
    float: left;
}


    .form-header label .left-icon {
        float: left;
        margin-top: -5px;
        margin-left: 5px;
    }

    .form-header label .right-icon {
        float: right;
        margin-top: -5px;
        margin-right: 5px;
    }

/*.menu-icon {
    background: url('../Images/icon-lang-setting.png') no-repeat center;
    -ms-background-size: 25px 25px;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
}*/

/*.menu-icon:hover {
        background: url('../Images/icon-lang-setting_hover.png') no-repeat center;
        -ms-background-size: 30px 30px;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.select-down-icon {
    /*background: url('../Images/select-icon.png') no-repeat center;
    -ms-background-size: 25px 25px;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;*/
}

/*.select-down-icon:hover {
        background: url('../Images/select-icon-hover.png') no-repeat center;
        -ms-background-size: 30px 30px;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.icon-setting {
    background: url('../Images/icon-setting.png') no-repeat center;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.loading-picture-div {
    background: url('../Images/loading-image.gif') no-repeat center;
    background-size: 80px 80px;
    width: 80px;
    height: 80px;
}

/*.icon-setting:hover {
        background: url('../Images/icon-setting-hover.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.close-icon-white {
    background: url('../Images/close-icon-white.png') no-repeat center;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
}

/*.close-icon-white:hover {
        background: url('../Images/close-icon.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.move-icon {
    /*background: url('../Images/icon-menu-morden.png') no-repeat center;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;*/
}


/*.move-icon:hover {
        background: url('../Images/icon-menu-morden-hover.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.enter-icon {
    font-family: sifont;
    font-style: normal;
    font-size: 20px;
    position: relative;
    display: inline-block;
    color: gray;
    font-size: 18px;
}

    .enter-icon:before {
        content: '\E8A1';
    }

.edit-icon {
    min-width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 20px;
    float: right;
}

.sync-icon {
    font-family: sifont;
    font-style: normal;
    font-size: 20px;
    position: relative;
    display: inline-block;
    color: gray;
    font-size: 18px;
    float: right;
}

.sync-icon:before {
    content: '\E832';
}

/*.edit-icon:hover {
        background: url('../Images/icon-edit-small.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.delete-icon {
    background: url('../Images/icon-trash-white-small.png') no-repeat center;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

/*.delete-icon:hover {
        background: url('../Images/icon-trash-small.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.add-icon {
    background: url('../Images/icon-plus-white-small.png') no-repeat center;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

/*.add-icon:hover {
        background: url('../Images/icon-plus-small.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
    }*/

.login-icon {
    background: url('../Images/icon-login.png') no-repeat center;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}

    .login-icon:hover {
        background: url('../Images/icon-login-hover.png') no-repeat center;
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }

.bio-icon {
    background: url('../Images/icon-b.png') no-repeat center;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}

    .bio-icon:hover {
        background: url('../Images/icon-b-hover.png') no-repeat center;
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }

.r-icon {
    background: url('../Images/icon-r.png') no-repeat center;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}

    .r-icon:hover {
        background: url('../Images/icon-r-hover.png') no-repeat center;
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }

.lang-icon {
    background: url('../Images/icon-l.png') no-repeat center;
    background-size: 50px 50px;
    width: 50px;
    height: 50px;
}


    .lang-icon:hover {
        background: url('../Images/icon-l-hover.png') no-repeat center;
        background-size: 50px 50px;
        width: 50px;
        height: 50px;
    }

.none-icon,
.active-icon, .deactive-icon {
    font-family: sifont;
    font-size: 18px;
    margin-right: 5px;
    font-style: normal;
    line-height: 1;
}

    .active-icon:before {
        content: '\E8AA';
    }

    .none-icon:before {
        content: '\E80E';
    }

    .deactive-icon:before {
        content: '\E8A3';
    }

.icon-cutomize-mode {
    background: url("../Images/icon-setting-white-small.png") no-repeat scroll center center / 25px 25px rgba(0, 0, 0, 0);
    height: 25px;
    width: 25px;
}

.copllase-icon {
    background: url('../Images/icon-collapse.gif') no-repeat center;
    background-size: 15px 15px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.expand-icon {
    background: url('../Images/icon-expand.gif') no-repeat center;
    background-size: 15px 15px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.selected-icon {
    background: url('../Images/icon-check-small.png') no-repeat center;
    background-size: 15px 15px;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.up-arrow-icon {
    background: url('../Images/icon-arrows-up.png') no-repeat center;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
}

/*.up-arrow-icon:hover {
        background: url('../Images/icon-arrows-up-hover.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }*/

.icon-set-default {
    background: url('../Images/icon-restore.png') no-repeat center;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;
}

/*.icon-set-default:hover {
        background: url('../Images/icon-restore-hover.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }*/

.icon-lang-setting {
    background: url('../Images/icon-lang-setting.png') no-repeat center;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}

.icon-question {
    background: url('../Images/questions-icon.png') no-repeat center;
    background-size: 19px 19px;
    width: 19px;
    height: 19px;
    margin-right: 5px;
}

/*.icon-lang-setting:hover {
        background: url('../Images/icon-lang-setting_hover.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }*/

.down-arrow-icon {
    /*background: url('../Images/icon-arrows-down.png') no-repeat center;
    background-size: 25px 25px;
    width: 25px;
    height: 25px;*/
}

/*.down-arrow-icon:hover {
        background: url('../Images/icon-arrows-down-hover.png') no-repeat center;
        background-size: 30px 30px;
        width: 30px;
        height: 30px;
        margin-right: 5px;
    }*/

.arrow-right-icon {
    background: url('../Images/icon-arrow-right-small.png') no-repeat center;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.arrow-left-icon {
    background: url('../Images/icon-arrow-left-small.png') no-repeat center;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-add-on {
    background: url('../Images/icon-plus-white-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-add-off {
    background: url('../Images/icon-plus-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-edit-on {
    background: url('../Images/icon-edit-white-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-edit-off {
    background: url('../Images/icon-edit-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-remove-on {
    background: url('../Images/icon-trash-white-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-remove-off {
    background: url('../Images/icon-trash-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-view-on {
    background: url('../Images/icon-view-on.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-view-off {
    background: url('../Images/icon-view-off.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-arrow-right {
    background: url('../Images/icon-arrow-right-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-menu-index {
    background: url('../Images/icon-menu-small.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 25px 25px;
    width: 20px;
    height: 20px;
}

.icon-trash {
    background: url('../Images/trash.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-trash-deactivate {
    background: url('../Images/trash_deactive.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-select-remove {
    background: url('../Images/select-remove.png') no-repeat center;
    -ms-background-size: 30px 30px;
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
}

.icon-restrict {
    background: url('../Images/icon-restrict.png') no-repeat center;
    -ms-background-size: 20px 20px;
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
}

.col-xs-1 .icon-restrict {
    background: url('../Images/icon-restrict.png') no-repeat center;
    -ms-background-size: 20px 20px;
    background-size: 23px 23px;
    width: 23px;
    height: 23px;
    bottom: 1px;
}

.parent-name .icon-restrict {
    background: url('../Images/icon-restrict.png') no-repeat center;
    -ms-background-size: 20px 20px;
    background-size: 23px 23px;
    width: 23px;
    height: 23px;
    bottom: 1.5px;
}

.action-item-boostrap {
    width: 100% !important;
    margin-left: 0 !important;
}

.width-70-percent {
    width: 70% !important;
}

.width-50-percent {
    width: 50% !important;
}

.width-60-percent {
    width: 60% !important;
}

.width-80-percent {
    width: 80% !important;
}

.width-45-percent {
    width: 45% !important;
}

.width-40-percent {
    width: 40% !important;
}

.width-33-percent {
    width: 33.33% !important;
}

.width-30-percent {
    width: 30% !important;
}

.width-25-percent {
    width: 25% !important;
}

.width-20-percent {
    width: 20% !important;
}

.width-100-percent {
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
}

.width-15-percent {
    width: 15% !important;
}

.margin-top-30px {
    margin-top: 30px !important;
}

.width-75-percent {
    width: 75% !important;
}

.clear-both {
    clear: both;
    padding-bottom: 15px;
}


.form-details {
    width: 100%;
    border-radius: 0px 0px 10px 10px;
    /*padding-bottom: 10px;*/
}

.action-item span:first-child {
    /*display: block;
    white-space: nowrap;*/
    /*width: auto;*/
    /*width: 100%;*/
    /*overflow: hidden;
    text-overflow: ellipsis;*/
}

.form-list-item.content-frame {
    margin: 0px 15px 0px 15px;
}

.margin-10-side {
    position: relative;
    margin: 0px 15px 0px 15px;
}

.action-item .form-list-item .name i {
    margin-right: 5px;
}

.row {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}


/*re-design popup*/
.pop-up-header {
    height: 52px;
}

.popup-content {
    margin-bottom: 15px;
}

.header-line-height {
    margin-top: 7px;
}

.popup-modify.form-2-col {
    width: 500px;
}

.action-item.popup-2-items a {
    font-size: 16px;
    font-family: Arial Narrow;
}

.action-item.form-save-items a {
    font-size: 16px;
    font-family: Arial Narrow;
}


.text-btn-style {
    text-align: inherit;
    line-height: 28px;
}

.right .right-icon-popup-btn {
    position: absolute;
    right: 30px;
    line-height: 30px;
    top: 7px;
}

.right .mt-minus-29 {
    margin-top: -29px;
}

.left .left-icon-popup-btn {
    position: absolute;
    right: 30px;
    line-height: 30px;
    top: 7px;
}

.left .mt-minus-29 {
    margin-top: -29px;
}

.left.alert-icon-button .left-icon-popup-btn {
    position: absolute;
    left: 250px;
    line-height: 30px;
    margin-top: -28px;
}


.text-btn-style.left {
    border: 1px solid #bababa;
    color: #000;
    background: #fff;
}

.text-btn-style.right {
    background: #5887F5;
    color: #ededed;
}

.text-btn-style.right:hover {
    background-color: #2D9FF7;
    color: #ededed;
}

a:not([href]):not([tabindex]).text-btn-style.right {
    background: #5887F5;
    color: #ededed;
}


/*----------------------------------*/

.action-item span.field-validation-valid {
    min-height: 0px;
}

.action-item .checkbox-font-size {
    font-size: 16px;
}

.detail-form-plus-in {
    border-radius: 10px;
}

.btn {
    border-radius: 0px;
    /*border: 2px solid white;*/
    min-height: 35px;
    background-color: #88abdf;
}

a.color-picker:hover {
    text-decoration: none;
}

a.color-picker {
    font-family: Trebuchet MS;
    font-size: 14px;
    min-height: 35px;
    line-height: 17px;
}

.color-picker[readonly] {
    cursor: pointer !important;
}

.left {
    float: left;
}

.right {
    float: right !important;
}

.middle {
    margin: 0 auto;
    float: none;
    clear: both;
}

input.form-control, select.form-control, a.color-picker, .select {
    border: 1px solid #bababa;
    border-radius: 21px;
    padding: 0 21px;
    height: 41px;
    font-size: 16px;
}

.select {
    padding: 0;
}

.white {
    color: #fff;
}

.black {
    color: #000;
}

.width-20-percent .action-item {
    margin-top: 10px;
}

.width-25-percent .action-item {
    margin-top: 10px;
}

.form-4-col .form-2-col .action-item {
    float: left;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 10px;
    width: 42%;
}

.form-4-col .form-details .down-line:nth-child(4n+1) {
    clear: both;
}

.form-2-col .form-details .down-line:nth-child(2n+1) {
    clear: both;
}


.action-item {
    font-size: 16px;
}

    .action-item span:first-child {
        min-height: 19px;
    }



.action-item.form-save-items {
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 10px;
    width: 50%;
    margin-bottom: 15px;
}

.form-2-col .action-item-button-properties {
    float: left;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 10px;
    width: 42%;
    height: 60px;
}

.action-item .btn {
    width: 100%;
}

    .action-item .btn label {
        margin-top: 3px;
        margin-left: 2px;
    }

.modal-body {
    /*padding: 0px !important;*/
    padding: 15px;
}

    .modal-body p {
        /*padding: 20px !important;*/
        /*padding:5% 5% 0 5%;*/
    }

.action-item .btn:not(.button-select) {
    width: 100%;
    padding: 6px 12px;
}


.action-item .btn i.enter-icon {
    float: right;
}


/* action-item crazy */
.action-item {
    /* Keep duplicated as this class is so common */
    /* float: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px; */
}
.form-3-col .action-item:not(.ignore-form-col) {
    width: 33.33%;
}

.form-3-col .action-item {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}

.form-2-col .action-item:not(.ignore-form-col) {
    width: 50%;
}

.form-2-col .action-item {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}

.form-1-col .action-item:not(.ignore-form-col) {
    width: 100%;
}

.form-1-col .action-item {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}

.form-3-col .col-md-6.action-item {
    width: 50%;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}

.form-4-col .action-item:not(.ignore-form-col) {
}

.form-4-col .action-item {
    width: 25%;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
}

@media (min-width: 800px) {
    .form-4-col .action-item.span-2-item {
        width: 44%;
    }
}

.imageSelect {
    height: 270px;
    background-color: transparent;
}

@media (min-width: 800px) {
    .form-4-col .width-quarter-form-4-col {
        /*margin-left: 4%;*/
        width: 20%;
        float: left;
    }

        .form-4-col .width-quarter-form-4-col.right {
            /*margin-right: 4%;*/
            width: 25%;
            /*float: right;*/
        }

        .form-4-col .width-quarter-form-4-col .action-item {
            margin-left: 0;
            width: 100% !important;
        }

    .form-4-col .width-2-quarter-form-4-col {
        width: 50%;
        float: left;
    }

        .form-4-col .width-2-quarter-form-4-col .action-item {
            width: 50%;
        }

    .form-4-col .width-3-quarter-form-4-col {
        width: 75%;
        float: left;
    }

        .form-4-col .width-3-quarter-form-4-col .action-item {
            width: 33.333%;
            /*margin-left: 5.55%;*/
            /*float: left;*/
        }

            .form-4-col .width-3-quarter-form-4-col .action-item.span-2-item {
                width: 66.667%;
                float: left;
            }

    .form-3-col .width-2-input-3-col.action-item {
        margin-left: 4%;
        width: 60%;
        float: left;
    }
}



.form-3-col .action-item-tab {
    width: 44%;
    float: left;
    margin-left: 4%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-4-col .action-item-tab {
    width: 44%;
    float: left;
    margin-left: 4%;
    margin-top: 10px;
    min-height: 60px;
    margin-bottom: 10px;
}

.form-1-col .action-item {
    width: 100%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 10px;
}

.form-1-col-large .action-item {
    width: 98%;
    float: left;
    margin-left: 5%;
    margin-top: 10px;
}

.form-350 .action-item {
    width: 98%;
    float: left;
    margin-left: 5%;
    margin-top: 10px;
}

.setup-button-link {
    width: 80%;
}

#toSecurityAccessSetup {
    margin-left: 4px;
    width: 91%;
    display: block;
}

    #toSecurityAccessSetup .btn i-icon {
        margin-right: 4px;
        float: right;
    }

.form-message-content {
    font-size: 18px;
    min-height: 100px;
    padding: 10px;
    text-align: left;
}

    .form-message-content .form-message-action {
        float: right;
    }


.form-details .navbar-inverse {
    background-color: #386942;
}

/********************
*   Template list item form   *
********************/
.form-list-item .content {
    margin-top: 0px;
    display: block;
    border: 1px solid #bababa;
    border-radius: 10px;
    width: 100%;
}

.form-list-item p {
    margin: 10px 0px 0px 0px;
    font-size: 16px;
    color: #333;
}

.form-item {
}

.margin-bottom-25 {
    margin-bottom: 25px;
}

.form-item p {
    margin: 10px 0px 10px 0px;
    /*font-size: 120%;*/
}

div[class='left-icons'] i, div[class='left-icons'] a {
    margin-right: 5px;
}

div[class='right-icons'] i, div[class='right-icons'] a {
    margin-left: 5px;
}

.form-list-item input {
    /*width: 98%;
    margin: 1%;*/
}

.form-list-item .btn.tool-header {
    width: 98%;
    margin: 1%;
}

.form-list-item .list {
    overflow-y: auto;
    height: 340px;
    /*background-color: #b9cbb8;*/
    /*Just for demo at Singapore*/
    background-color: #fff;
}

    .form-list-item .list.second-list {
        /*background-color: #D8E4BC;*/
        /*just for demo at singapore*/
        background-color: #ccc;
    }

.form-list-item .list-no-action {
    overflow-y: auto;
    height: 340px;
    /*background-color: #b9cbb8;*/
    /*just for demo at singapore*/
    background-color: #fff;
}

.form-list-item .content .name, .form-list-item .content .item-select {
    width: 100%;
    min-height: 40px;
    padding: 10px 10px 0 10px;
    font-size: 16px;
}

.form-list-item .content .item-select {
    cursor: pointer;
}

    .form-list-item .content .item-select i {
        line-height: 1;
    }

.form-list-item .content.second-list .name {
    background-color: #D8E4BC;
}


.form-list-item .content .name_deactivate {
    width: 100%;
    min-height: 40px;
    padding: 10px 0 0 10px;
}

.group .selected,
.data-content .item.selected,
.form-list-item .content .selected,
.data-table table tr.selected {
    background: #6699FF;
    color: #fff;
}

.group li a:hover,
.data-content .item:hover,
.form-list-item .content .name:hover {
    color: #fff;
    background-color: #3377ff;
}

.form-list-item .content .other_hide {
    background: #b9cbb8 !important;
    color: #000000 !important;
}

.modal-dialog {
    margin: 72px auto;
}

.modal-margin-top {
    margin-top: 284px !important;
}

@media only screen and (max-width: 1280px) {
    .modal-dialog {
        width: 70%;
    }
}

.form-list-item .content.second-list .selected {
    background: #386942;
    color: white;
}

.form-list-item .content .action {
    min-height: 40px;
    margin-left: 1%;
    padding-top: 10px;
    width: 98%;
}

    .form-list-item .content .action:first-child {
        margin-top: 3px;
    }

.form-list-item .content a {
    margin-bottom: 3px;
    text-decoration: none;
    font-weight: 600;
}

.form-list-item {
}

    .form-list-item .action-link {
        margin-bottom: 5px;
        margin-left: 2%;
        width: 89%;
    }

    .form-list-item .action-button {
        margin-bottom: 5px;
        margin-left: 2%;
        width: 96%;
        border-radius: 0px;
        border: 2px solid white;
    }


.form-3-col .form-details .span2-item {
    width: 21%;
    margin-top: 5px;
}



.form-1-col-large .action-item {
    width: 92%;
    float: left;
    margin-left: 4%;
    margin-top: 10px;
}

.form-350 .action-item {
    width: 92%;
    float: left;
    margin-left: 4%;
    margin-top: 10px;
}

.span2-popup-item {
    float: left;
    margin-left: 26px;
    margin-top: 5px;
    width: 21%;
}

    .span2-popup-item a {
        height: 35px;
    }

    .span2-popup-item i {
        margin-top: 3px;
    }

.div-check {
    cursor: pointer;
}

.modal-footer {
    padding: 15px 15px;
    margin-top: 0px;
}

    .modal-footer input[type=submit] {
        border: none;
        font-size: inherit;
        font-weight: inherit;
    }

.modal-body p {
    font-size: 18px;
    margin-bottom: 5px;
}

.modal-dialog .modal-content {
    width: 100%;
    border-radius: 10px;
}

.padding-none {
    padding: 0 !important;
}

.padding-right-none {
    padding-right: 0 !important;
}

.padding-left-none {
    padding-left: 0 !important;
}

/********************
*   Mobile Styles   *
********************/
@media (max-width: 800px) {
    #body {
        width: 100%;
    }

    .form-2-col, .form-1-col, .form-1-col-large, .form-350 .father-form, .form-400, .form-3-col, .form-4-col {
        width: 100%;
    }

        .form-3-col .span3-item {
            width: 97%;
            margin-left: 2%;
        }

    .form-3-col {
        width: 100% !important;
    }

        .form-3-col .form-details .span2-item {
            float: left;
            margin-left: 12px;
            margin-top: 5px;
            width: 45%;
        }

    .span2-popup-item {
        float: left;
        margin-left: 27px;
        margin-top: 5px;
        width: 40%;
    }


    .form-2-col .action-item, .form-3-col .action-item {
        width: 92%;
        float: left;
        margin-left: 4%;
        margin-top: 10px;
        min-height: 0px;
    }

    .form-4-col .action-item {
        width: 47%;
        float: left;
        margin-left: 2%;
        margin-top: 10px;
        min-height: 0px;
        /*font-size: 150%;*/
    }

    .action-item span {
        /*width: 92%;
        margin-left: 4%;*/
        margin-top: 10px;
        font-size: 150%;
    }

    .action-item.mms-btn span {
        font-size: 100%;
    }

    .form-1-col .action-item {
        width: 92%;
        float: left;
        margin-left: 4%;
        margin-top: 10px;
    }

    .form-1-col-large .action-item {
        width: 92%;
        float: left;
        margin-left: 4%;
        margin-top: 10px;
    }

    .form-350 .action-item {
        width: 92%;
        float: left;
        margin-left: 4%;
        margin-top: 10px;
    }

    .action-item .btn {
        width: 100%;
        padding: 3px;
    }


    input, select {
        width: 100%;
    }

    .detail-form-plus-in {
        margin-left: 0px;
        margin-top: 5px;
    }

    .setup-button-link {
        width: 90%;
    }

    .modal-dialog {
        width: 96%;
        margin: 0 auto;
        margin-top: 30px;
    }

    .form-2-col .action-item-button-properties {
        width: 92%;
    }

    div[class^='form'] .header-places span {
        width: 55%;
    }
}

@media (max-width: 620px) {
    .form-4-col .action-item {
        width: 92%;
        float: left;
        margin-left: 4%;
        margin-top: 10px;
        min-height: 0px;
    }
}


@media (max-width: 400px) {
    div[class^='form'] .header-places span {
        width: 55%;
    }
}

.assigned {
    font-size: 20px;
    color: chartreuse;
}

.assigned-other {
    font-size: 20px;
    color: gold;
}

.un-assigned {
    font-size: 20px;
    color: orangered;
}

.form-table {
    width: 100%;
}

.error {
    border: 1px solid #cf0707 !important;
}

.confirm-form {
    border-radius: 10px 10px 0px 0px;
}

.popup-father {
    position: relative;
}

.popup-details {
    position: absolute;
    display: none;
}

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.9em !important;
}

.group-details {
}

    .group-details .btn {
        width: 100px;
    }

    .group-details .span {
        min-width: 150px;
        margin-top: 10px;
    }

.group li {
    background-color: transparent;
    color: white;
    width: 200px;
    position: relative;
    list-style-type: none;
}

    .group li a:hover {
        border: 1px solid #8094B1;
    }

    .group li a {
        text-decoration: none;
    }

        .group li a label {
            display: inline;
        }

.group ul {
    list-style-type: none;
    left: 100%;
    top: 0;
    margin: 0;
    margin-left: 20%;
}

    .group ul li ul {
        list-style-type: none;
        left: 100%;
        top: 0;
        margin-left: 20%;
    }



.group-tree-details {
    float: left;
    width: 19%;
    height: 100%;
    border-right: 1px solid #696969;
}

    .group-tree-details a {
        font-size: 18px;
        font-weight: 600;
        margin-right: 0;
        display: block;
        min-height: 30px;
        text-decoration: none;
        color: #F1F1F1;
        text-align: left;
    }

.group li a {
    width: 100%;
    min-height: 35px;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 4%;
}

.field-validation-error {
    color: lightcoral;
}

table .selected-row {
    /*   background-color: #386942;*/
    /*Just demo at singapore*/
    background-color: #2D9FF7;
    color: white;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
}

form .btn, form input.form-control, form select.form-control, .name {
    min-height: 35px;
    margin-top: 0px;
}

.overflow-width {
    overflow-x: auto;
    display: inline-block;
    width: 100%;
}

    .overflow-width .father-div {
        width: 150%;
    }

        .overflow-width .father-div .action-item {
            display: block;
            float: left;
            margin-left: 1%;
            margin-top: 10px;
            min-height: 100px;
            width: 11.4%;
        }

            .overflow-width .father-div .action-item div .sub-menu {
                width: 80px;
                position: absolute;
                right: 0px;
                display: none;
            }

            .overflow-width .father-div .action-item .father-div {
                width: 100%;
                position: relative;
                display: block;
            }

.father-div .popup-details {
    width: 175px;
    position: absolute;
}

.menu-search-index {
    background-color: white;
    display: none;
    right: 2px;
    position: absolute;
    top: 30px;
    width: 150px;
}

    .menu-search-index a {
        overflow: hidden;
        text-overflow: ellipsis;
    }



.details-info {
    float: left;
    display: block;
}

.sub-select {
    display: none;
    width: 150px !important;
    position: absolute;
    left: 80px;
    top: 35px;
    padding-top: 5px;
}

    .sub-select .btn {
        width: 150px !important;
    }


.pick-language {
    display: none;
    width: 150px !important;
    position: absolute;
    left: 5px;
    top: 35px;
    padding-top: 5px;
}

    .pick-language .language-item {
        width: 150px !important;
        background-color: #8094b1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE 8 */
        filter: alpha(opacity=80); /* IE 5-7 */
        -moz-opacity: 0.8; /* Netscape */
        -khtml-opacity: 0.8; /* Safari 1.x */
        opacity: 0.8; /* Good browsers */
    }

        .pick-language .language-item:hover {
            width: 150px !important;
            background: #808080 !important;
            border: 1px solid #ffffff !important;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
            filter: alpha(opacity=100); /* IE 5-7 */
            -moz-opacity: 1; /* Netscape */
            -khtml-opacity: 1; /* Safari 1.x */
            opacity: 1; /* Good browsers */
        }


.colorpicker {
    z-index: 9999;
}


.customize-mode {
}

    .customize-mode .action-item input,
    .customize-mode .action-item .btn,
    .customize-mode .action-item a,
    .customize-mode .action-item select {
        cursor: pointer;
    }
        .customize-mode .action-item a.btn {
            pointer-events:none;
        }
    .customize-mode .popup-content .action-item a.btn {
        pointer-events:auto;
    }
    .customize-mode .action-item {
        cursor: pointer;
    }

        .customize-mode .action-item:hover {
            background-color: #B9B9B9;
        }



.search-div p {
    width: 95%;
    margin-left: 2.5%;
    /*height: 420px;
    overflow: auto;*/
}

.search-div input {
    /*width: 95%;
    margin-left: 2.5%;*/
    /*height: 420px;
    overflow: auto;*/
}

.search-result {
    margin-left: 2.5%;
}

.details-div {
    /*margin-right: 2.5%;*/
    /*height: 420px;
    overflow: auto;*/
}

.padding-10 {
    padding: 10px;
}

.overlaySecond {
    background: transparent url('../Images/overlay.png') repeat top left;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 10001;
}

.max-width-form {
    width: 92% !important;
}

.edit-text-tag {
    cursor: pointer;
}

    .edit-text-tag:hover {
        text-decoration: underline;
    }

.icon-menu-index {
    margin: 0px;
}

.error-message .saving-exist-choice {
    cursor: pointer;
}

#fileVersionShowingDiv .glyphicon-trash {
    font-size: 18px;
}

.processor-interface .glyphicon-trash {
    font-size: 16px;
}

.setting-lang .edit-lang-able {
    cursor: pointer;
}

.form-header .sub-menu {
    display: none;
    position: absolute;
    top: 31px;
    right: 38px;
    min-width: 100px;
    z-index: 3;
}

.menu-icon {
    background: none;
}

.form-header .sub-menu a {
    /*display: none;*/
    width: 100%;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15) inset;
    border: none;
    min-height: 31px;
    padding: 6px 0;
    display: block;
}

::-webkit-input-placeholder {
    color: red;
}

:-moz-placeholder { /* Firefox 18- */
    color: red;
}

::-moz-placeholder { /* Firefox 19+ */
    color: red;
}

:-ms-input-placeholder {
    color: red;
}

.data-required select[val='0'] {
    color: red;
    background-color: #E6B8B8;
}

.margin-none {
    margin: 0 !important;
}

.sub-action .btn {
}

.colorDetails {
    width: 90%;
    position: absolute;
    display: none;
    z-index: 999;
    background-color: white;
}

#colorDetails .color-item {
    float: left;
    width: 18%;
    height: 35px;
    margin-left: 1px;
    margin-top: 1px;
    cursor: pointer;
}

.colorDetails .button-group-color-picker {
}

    .colorDetails .button-group-color-picker .btn {
        float: right;
        border-radius: 10px;
        height: 30px;
    }

.colorDetails a {
    cursor: pointer;
}

#colorDetails .color-item.selected {
    border: 2px solid #b9b9b9;
}

.margin-left-span-header {
    margin-left: 10px;
}

.margin-left-span-group-header {
    margin-left: 50px;
}

.height-250 {
    height: 250px !important;
    overflow: auto;
}

.header-input-group hr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image: -o-linear-gradient(left, #ccc, #333, #ccc);
    margin: 0;
}

.overflow-hidden {
    overflow-y: hidden;
}

.overflow-auto {
    overflow: auto;
}

table {
    table-layout: fixed;
}

.border-radius-0 {
    border-radius: 0px !important;
}

.eft-sale-report {
    padding: 0 4px;
    border: 2px solid #fff;
    color: #fff;
    background: #404040;
    margin: 10px;
}

    .eft-sale-report .hourly-report-item > * {
        display: inline-block;
        float: left;
    }

    .eft-sale-report .hourly-report-total {
        padding-top: 25px;
        text-transform: uppercase;
        font-weight: bold;
    }

        .eft-sale-report .hourly-report-total > * {
            width: 50%;
            float: left;
        }

        .eft-sale-report .hourly-report-total .number {
            text-align: right;
        }

    .eft-sale-report .hourly-report-item .time {
        width: 50%;
        text-align: right;
        padding-right: 30%;
    }

    .eft-sale-report .hourly-report-item .quantity {
        width: 10%;
        text-align: right;
    }

    .eft-sale-report .hourly-report-item .price {
        width: 40%;
        text-align: right;
    }

    .eft-sale-report .report-section {
        margin-bottom: 25px;
    }

        .eft-sale-report .report-section .sub-header {
            font-weight: bold;
            text-transform: uppercase;
        }

        .eft-sale-report .report-section .report-item > * {
            display: inline-block;
            float: left;
        }

        .eft-sale-report .report-section .report-item .name {
            width: 50%;
            text-align: left;
        }

        .eft-sale-report .report-section .report-item .quantity {
            width: 10%;
            text-align: right;
        }

        .eft-sale-report .report-section .report-item .price {
            width: 40%;
            text-align: right;
        }

        .eft-sale-report .report-section .sub-total > * {
            display: inline-block;
        }

        .eft-sale-report .report-section .sub-total .text {
            font-weight: bold;
            width: 50%;
            text-transform: uppercase;
            text-align: left;
        }

        .eft-sale-report .report-section .sub-total .number {
            width: 50%;
            text-align: right;
        }

    .eft-sale-report .report-summary {
        text-transform: uppercase;
        font-weight: bold;
    }

        .eft-sale-report .report-summary .summary-item > * {
            display: inline-block;
            float: left;
        }

        .eft-sale-report .report-summary .summary-item .name {
            width: 50%;
        }

        .eft-sale-report .report-summary .summary-item .quantity {
            width: 10%;
            text-align: right;
        }

        .eft-sale-report .report-summary .summary-item .price {
            width: 40%;
            text-align: right;
        }

        .eft-sale-report .report-summary .summary-total > * {
            display: inline-block;
            float: left;
        }

        .eft-sale-report .report-summary .summary-total > .text {
            width: 50%;
        }

        .eft-sale-report .report-summary .summary-total > .number {
            width: 50%;
            text-align: right;
        }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 111111110;
    background-color: rgba(0,0,0,0.5);
    display: none;
}

.loading-icon {
    /*background: url('../Images/loading-image.gif') no-repeat center;*/
    margin: 0 auto;
    margin-top: 80px;
    height: 100px;
}

.text-error-message {
    color: maroon;
}



@import url("http://fonts.googleapis.com/css?family=Lato");

body {
    font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
    /*color: #fff;
    padding: 20px;
    background-color: #e74c3c;*/
}

h1 {
    font-weight: normal;
    font-size: 40px;
    font-weight: normal;
    text-transform: uppercase;
}

    h1 span {
        font-size: 13px;
        display: block;
        padding-left: 4px;
    }

p {
    /*margin-top: 200px;*/
}

    p a {
        text-transform: uppercase;
        text-decoration: none;
        display: inline-block;
        color: #fff;
        padding: 5px 10px;
        margin: 0 5px;
        background-color: #b83729;
        -moz-transition: all 0.2s ease-in;
        -o-transition: all 0.2s ease-in;
        -webkit-transition: all 0.2s ease-in;
        transition: all 0.2s ease-in;
    }

        p a:hover {
            background-color: #ab3326;
        }

.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    /*color: #fff;*/
    width: 100%;
    min-height: 35px;
    border: 1px solid #cccccc;
    background-color: white;
}

.select-styled {
    min-height: 35px;
    position: relative;
    height: 100%;
    margin-bottom: -4px;
    white-space: nowrap;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    /*background-color: #c0392b;*/
    /*padding: 10px 0px;*/
    padding: 10px 21px;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

    .select-styled:after {
        content: "";
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-color: black transparent transparent transparent;
        position: absolute;
        top: 18px;
        /*right: 0px;*/
        right: 21px;
    }

    .select-styled:hover {
        /*background-color: #b83729;*/
    }

    .select-styled:active, .select-styled.active {
        /*background-color: #ab3326;*/
    }

        .select-styled:active:after, .select-styled.active:after {
            top: 9px;
            border-color: transparent transparent black transparent;
        }

.select-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin-left: -1px;
    margin-right: -1px;
    margin-bottom: 0px;
    margin-top: 0px;
    padding: 0;
    list-style: none;
    background-color: white;
}

    .select-options li {
        margin: 0;
        padding: 12px 0;
        text-indent: 15px;
        border-top: 1px solid rgba(204, 204, 204, 0.54);
        -moz-transition: all 0.15s ease-in;
        -o-transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in;
        -ms-transition: all 0.15s ease-in;
        transition: all 0.15s ease-in;
    }

        .select-options li.odd {
            background-color: #e9ebee;
        }

        .select-options li:hover {
            color: white;
            background: #5D85F8;
        }

        .select-options li[rel="hide"] {
            display: none;
        }


#languageLabel {
    margin-top: 12px;
    width: 72px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.edit-item-container {
    background: #fff;
    max-width: 250px;
    display: none;
    z-index: 100;
    cursor: pointer;
    font-weight: bold;
    /*update sony design*/
    border: 1px solid #bababa;
    border-radius: 10px;
}

    .edit-item-container a:first-child {
        border-color: transparent;
        border-radius: 10px 10px 0px 0px;
    }

    .edit-item-container a:last-child {
        border-color: transparent;
        border-radius: 0px 0px 10px 10px;
    }

    .edit-item-container a:only-child {
        border-color: transparent;
        border-radius: 10px;
    }

    .edit-item-container > * {
        width: inherit;
        -moz-min-width: 150px;
        -webkit-min-width: 150px;
        min-width: 150px;
        opacity: 0.9;
        color: #fff;
        background-color: #383838;
        /*border-top: 1px inset #adadad;*/
        font-weight: lighter;
        font-size: 0.8em;
        line-height: 35px;
        overflow: hidden;
        -moz-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 7px 0 7px;
    }

        .edit-item-container > *:not(form) {
            height: 35px;
            display: block;
        }

        .edit-item-container > *:first-child {
            border-top: none;
        }
        /*menu odd even*/
        .edit-item-container > *:nth-child(odd) {
            background-color: transparent;
        }

        .edit-item-container > *:nth-child(even) {
            background-color: transparent;
        }

    .edit-item-container > a {
        font-size: 15px;
        text-decoration: none;
        color: #333;
    }

    .edit-item-container a:hover {
        background: #ebebe6;
        width: 100%;
    }

.menu-description-content .edit-icon {
    color: gray;
}

.menu-description-content .edit-item-container .remove-item {
    margin-top: 35px;
}

.menu-description-content.alpha-sort .item-select-sort,
.menu-description-content .item-alpha-sort {
    display: block;
}

.menu-description-content.alpha-sort .item-alpha-sort,
.menu-description-content .item-select-sort {
    display: none;
}

/* for login screen */
.login-screen {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    width: 350px;
}

.content > .name {
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.margin-10 {
    margin: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.padding-5 {
    padding: 5px;
}

/*For search popup*/
/*.search-input {
    margin-right:5%;
    margin-left: 5%;
    padding-left:5px;
    padding-right:5px;
    width: 90%;
}*/

/*For show message*/
.error-message {
    padding-top: 5px;
    font-size: 16px;
    color: red;
}

.margin-top-10 {
    margin-top: 10px;
}

.row .form-list-item.padding-form {
    padding: 5px 15px 0px 15px;
}

.padding-form {
    padding: 5px 15px 15px 15px;
}

    .padding-form .form-list-item:not(.last) {
        padding-right: 15px;
    }

.width-100-percent-no-padding {
    width: 100% !important;
}

.menu-bar {
    height: 64px;
}

.description {
    font-size: 16px;
    padding-top: 10px;
}

.passcode-description {
    background-color: lightgray;
    border-radius: 10px;
    padding-top: 10px;
}

.form-3-col-fix {
    width: 900px;
}

@media(max-width: 800px) {
    .form-3-col-fix {
        width: 100%;
    }
}

.menu-description-content {
    position: relative;
}

    .menu-description-content .edit-item-container {
        background: #fff;
        max-width: 250px;
        display: none;
        z-index: 100;
        cursor: pointer;
        font-weight: bold;
        font-size: 1em;
    }


        .menu-description-content .edit-item-container.space-right {
            right: 15px;
        }

.no-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.list-contact {
    overflow-y: auto;
    height: 150px;
}

.list-full-heght {
    height: 514px;
    overflow-y: auto;
}

ul.select-options {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ababab;
    border-radius: 12px;
}

.ic-add-address {
    width: 20px;
    height: 20px;
    background-image: url("../Images/ic_add.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
}

.input-redirect {
    border: 1px solid #bababa;
    border-radius: 21px;
    padding: 0 21px;
    background-color: #f0f0f0;
    text-align: left;
    color: black;
    height: 42px;
}

    .input-redirect:hover {
        color: black;
        background-color: lightgray;
    }

.terminal-name-area .form-control[disabled], 
.terminal-name-area .form-control[readonly] {
    cursor: default;
    opacity: 0.5;
}

.form-control[disabled], .form-control[readonly] {
    background-color: #f0f0f0;
    cursor: default;
    opacity: 1;
}

.position-relative {
    position: relative;
}

img.image-area[src='/Images/icon-no-image.png'] {
    visibility: hidden;
}

.image-area {
    max-height: 100%;
    max-width: 100%;
    padding: 5px;
}

.label-image {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 264px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #ababab;
}

@media (max-width: 800px) {
    .imageSelect {
        height: 200px;
        margin-top: 41px;
        background-color: transparent;
    }
}

.header-fixed.form-header {
    color: #000;
    width: 100%;
    padding-top: 5px;
    min-height: 35px;
    text-align: center;
    font-size: 18px;
    height: 92px;
    text-align: center;
    background-color: white;
    top: 60px;
    width: 100%;
    z-index: 1000;
    position: fixed;
    left: 0px;
    border-radius: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
}

.header-fixed h3 {
    text-align: left;
    margin: 0px;
    font-size: 26px;
}

.bs-example {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1000;
}

.normal-content-action, .normal-content-action.normal-layout-header-action, .customize-mode {
    margin-top: 200px;
}

    .normal-layout-header-action, .menu-bar.customize-mode, .normal-content-action.normal-layout-header-action.menu-bar {
        margin-top: 0px;
    }

.list-button-header {
    display: table;
    height: inherit;
    line-height: inherit;
}

.header-item {
    display: inline-block;
    font-size: 16px;
    margin-right: 28px;
    height: 50px;
    vertical-align: middle;
    line-height: 50px;
    padding: 0 20px;
    border-radius: 25px;
    border: none;
    margin-top: 23px;
    cursor: pointer;
}

    .header-item i {
        font-size: 20px;
        /*top: 5px;*/
        width: 24px;
        height: 24px;
        line-height: 24px;
    }

    .header-item span {
        display: inline-block;
    }

.button-set-as-default, .SelectorButtonFilter, .noneSavePopupOnClose, .button-filter, .button-save-data, .button-send-email, .button-change-confirm, .button-delete, .button-logout, .save-on-close, .none-save-on-close, .save-on-close-menu-bar, .none-save-on-close-menu-bar, .button-select, .button-search, .button-remove, .button-active, .button-deactive,
.button-cancel, .button-save, .button-ok-confirm, .saveConfirmTemplate, .savePopupOnClose, .button-add-terminal, .saveConfirmRequired, .saveToRedirection, .nonSave, .ter-save-on-close, .ter-none-save-on-close {
    display: block;
    height: 42px;
    border-radius: 21px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #bababa;
}

.button-select {
    padding-top: 8px;
    padding-right: 10px;
    background-color: #fff;
}



.action-item .form-chk {
    position: relative;
    width: 100%;
    border: 1px solid #bababa;
    height: 42px;
    line-height: 42px;
    background-color: #fff;
    border-radius: 21px;
    padding: 0 21px;
    text-align: inherit;
}

.form-chk .form-chk-status {
    display: block;
    position: absolute;
    right: 10px;
    font-size: 20px;
    color: #bababa;
    font-weight: normal;
}

.form-chk .form-chk-custom {
    display: initial;
    position: absolute;
    right: 10px;
    font-size: 20px;
    color: #bababa;
    font-weight: normal;
    margin-top: -42px;
}

.action-item .form-chk-input {
    display: none;
}

.form-4-col, .form-3-col, .form-2-col, .form-1-col, .form-400, .form-600, .border-form {
    border-radius: 10px;
    margin-bottom: 15px;
}

/*MyTerminal haven't back button*/
.ScreenKeyMyTerminal .header-item.confirm {
    display: none;
}

.btn-customize {
    transition: background-color 0.3s linear;
}

.customize-mode .divtoBlink .btn-customize {
    /*background-color: #5887F5;*/
    color: #fff;
}

    .customize-mode .divtoBlink .btn-customize .item-text.cancel,
    .normal-content-action .btn-customize .item-text.customize {
        display: inline-block;
    }

    .normal-content-action .btn-customize .item-text.cancel,
    .customize-mode .divtoBlink .btn-customize .item-text.customize {
        display: none;
    }

    .customize-mode .divtoBlink .btn-customize .item-text.cancel {
        display: inline-block;
    }

    .customize-mode .divtoBlink .btn-customize .item-icon {
        animation: rolling-cog 3s linear infinite;
        color: #fff;
    }

@keyframes rolling-cog {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.button-boolean-off {
    background-color: transparent;
}

.button-cancel:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

textarea.form-control {
    font-size: 16px;
    width: 100%;
    outline: none;
    border-radius: 21px;
    padding-left: 13px;
    padding-top: 8px;
}

.terminal-first-name {
    min-width: 120px;
    float: left;
    margin-right: 10px;
}

.button-togle {
    background-color: transparent;
    border: 1px solid gray;
    border-radius: 21px;
}

    .button-togle i.sicon-unchecked {
        color: red;
    }

#form-logon-setup .margin-top-logon input.form-control {
    padding: 0 10px;
    border-radius: 10px;
}


/* TODO DUNGPHAM scroll same CS
.form-list-item .content::-webkit-scrollbar-track:vertical {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px 10px 10px 0px;
    background-color: #F5F5F5;
}

.form-list-item .content::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #F5F5F5;
    border-radius: 0px 10px 10px 0px;
}

.form-list-item .content::-webkit-scrollbar-thumb:vertical {
    border-radius: 0px 10px 10px 0px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
    background-color: rgba(0, 0, 0, 0.05);
}

.form-list-item .content::-webkit-scrollbar-track :horizontal {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px 0px 10px 10px !important;
    background-color: #F5F5F5;
}

.form-list-item .content::-webkit-scrollbar:horizontal {
    width: 12px;
    height: 12px;
    background-color: #F5F5F5;
    border-radius: 0px 0px 10px 10px;
}

.form-list-item .content::-webkit-scrollbar-thumb:horizontal {
    border-radius: 0px 0px 10px 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
    background-color: rgba(0, 0, 0, 0.05);
}*/

ul.select-options::-webkit-scrollbar-track:vertical {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px 12px 12px 0px;
    background-color: #F5F5F5;
}

ul.select-options::-webkit-scrollbar {
    width: 12px;
    height: 12px;
    background-color: #F5F5F5;
    border-radius: 0px 12px 12px 0px;
}

ul.select-options::-webkit-scrollbar-thumb:vertical {
    border-radius: 0px 12px 12px 0px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
    background-color: rgba(0, 0, 0, 0.05);
}

ul.select-options::-webkit-scrollbar-track :horizontal {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 0px 0px 12px 12px !important;
    background-color: #F5F5F5;
}

ul.select-options::-webkit-scrollbar:horizontal {
    width: 12px;
    height: 12px;
    background-color: #F5F5F5;
    border-radius: 0px 0px 12px 12px;
}

ul.select-options::-webkit-scrollbar-thumb:horizontal {
    border-radius: 0px 0px 12px 12px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.1);
    background-color: rgba(0, 0, 0, 0.05);
}

input[type=file] {
    padding-top: 8px;
}

.button-select-item, .button-remove-item, .button-remove-all {
    width: 100%;
    display: block;
    height: 42px;
    border-radius: 21px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #bababa;
}

.button-remove-item, .button-remove-all {
    background-color: #e3627c;
}

.button-select-item {
    background-color: #3377ff;
}

select[disabled] ~ .select-styled {
    background-color: #f0f0f0;
    border-radius: 21px;
    border-color: #bababa;
    pointer-events: none;
}

select[disabled] ~ ul.select-options {
    display: none !important;
}

.button-select-item {
    background-color: #3377ff;
}

.menu-description-content .edit-icon {
    /* line-height: 1em; */
    position: absolute;
    right: 0px;
}

.menu-description-content .edit-icon.input-upload {
    top: 0px;
    right: 15px;
    font-size: 16px;
}

.menu-description-content .edit-icon.open-image-options {
    line-height: 1.5em;
}

.popup-2-items {
    position: relative;
}

.reset-style {
    display: none;
}

.customize-mode .reset-style {
    display: inline-block;
}


.pop-up-image-option {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 22px;
    right: 15px;
    width: 150px;
    min-height: 50px;
    display: block;
    transition: visibility 0.4s linear, opacity 0.3s linear;
}

    .pop-up-image-option.opening {
        visibility: visible;
        opacity: 1;
    }

.img-menu {
    line-height: 1;
}

.selected-image-file {
    position: relative;
}

.image-select {
    height: 275px;
}

.open-image-options {
    position: absolute;
    top: -4px;
    right: 15px;
}

@media (max-width: 800px) {

    .image-select {
        height: 200px;
        margin-top: 41px;
    }
}

.action-item label {
    margin-bottom: 0px;
}

.col-md-6 .action-item {
    width: 100%;
    padding: 0px;
    margin-top: 10px;
}

.col-md-4 .action-item {
    width: 100%;
    padding: 0px;
    margin-top: 10px;
}

/*CKEDITOR*/
.cke_chrome {
    border-radius: 21px;
}

.cke_inner {
    border-radius: 21px;
}

.cke_top {
    border-radius: 21px 21px 0px 0px;
}

.cke_bottom {
    border-radius: 0px 0px 21px 21px;
}

.pagging-table {
    text-align: center;
}

    .pagging-table .pagination {
        margin: 0px;
    }

    .pagging-table select {
        position: relative;
        top: -12px;
        padding: 6px 12px;
        border-color: #ddd;
        width:65px;
    }

.data-table {
    margin: 15px;
    border-radius: 10px;
    border: 1px solid #bababa;
}

    .data-table table {
        border-collapse: collapse;
        overflow: hidden;
        margin-bottom: 0px;
        border-radius: 10px;
    }

.modal-body .action-item {
    margin-top: 10px;
}
/*CKEDITOR*/

/*Search Box*/
.search-box {
    width: 99%;
}

.frm-search-scope .search-box {
    display: none;
}

.frm-search-scope.searching .index-list.searching {
    position: relative;
    padding-top: 42px;
}

.frm-search-scope.searching .frm-search-btn,
.frm-search-scope .frm-searching {
    display: none;
}

.frm-search-scope.searching .frm-searching {
    display: block;
}

.frm-search-scope.searching .search-box {
    display: block;
    position: absolute;
    top: 0;
    border-bottom: 1px solid #dadada;
}

    .list .local-search-box .search-text,
    .frm-search-scope.searching .search-box .search-text {
        border-top: none;
        border-right: none;
        border-left: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        /*border-color: #ebebe6;*/
        /*border-radius: 10px;*/
        height: 43px;
        border: none;
        padding: 0 21px;
        width: 100%;
        line-height: 42px;
        outline: none;
        font-size:16px;
    }

.local-search-box {
    -moz-box-shadow: 3px 3px 6px #777;
    -webkit-box-shadow: 3px 3px 6px #777;
    box-shadow: 3px 3px 6px #777;
}

.search-box .search-box-btn {
    position: absolute;
    right: 7px;
    top: -2px;
    line-height: 42px;
    /*padding: 0 15px;*/
}

/*End Search Box*/

.save-icon {
    display: none;
}

.myterminal_payment_devices_title .save-icon {
    display: inline-block;
}

/*.myterminal_index .close-icon {
    display: none;
}*/

.split-textbox span:first-child{
    margin-top:10px;
    font-size:16px;
    height:23px;
}
.split-textbox .action-item {
    float: left;
    margin-top: 0px;
    width:37%;
}
.split-textbox .action-item~.action-item {
    float: right;
    margin-top: 0px;
    width: 57%;
}


.custom-switch > input[type="checkbox"] {
    display: none;
}

.custom-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

    .custom-switch > label::before {
        background: rgb(0, 0, 0);
        box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
        border-radius: 8px;
        content: '';
        height: 16px;
        margin-top: -8px;
        position: absolute;
        opacity: 0.3;
        transition: all 0.4s ease-in-out;
        width: 40px;
    }

    .custom-switch > label::after {
        background: rgb(255, 255, 255);
        border-radius: 16px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
        content: '';
        height: 24px;
        left: -4px;
        margin-top: -8px;
        position: absolute;
        top: -4px;
        transition: all 0.3s ease-in-out;
        width: 24px;
    }

.custom-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    background-color: #7C0000;
    opacity: 0.5;
}

.custom-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    background-color: #FE2A31;
    left: 20px;
}

.terminal-switch {
    position:relative;
}
    .terminal-switch div {
        float: right;
        border: none;
        border-radius: 8px;
        height: 50px;
        line-height: 38px;
    }

    .terminal-switch div span {
        float: left;
        margin-left: 15px;
    }

.action-item .switch {
    width: 100%;
}


div.switch {
    outline: 0;
}

.btn-switch {
    padding-top: 8px;
    padding-right: 10px;
    background-color: #fff;
}

.custom-switch {
    margin-top: 18px;
}

.description-text-default.split-first-col, .description-text-default.split-second-col {
    display:initial;
}

.description-text-default.split-second-col {
    margin-left: 20%;
}

.form-control.split-first-col, .form-control.split-second-col {
    width: 48%;
    display: initial;
}

.form-2-col .action-item.no-left-right-padding {
    padding-right: 0px;
    padding-left: 0px;
    width: 100%;
}

    .form-2-col .action-item.no-left-right-padding:first-child {
        margin-top: 0px;
    }

    .form-2-col .action-item.no-left-right-padding:not(:first-child) {
        margin-top: 6px;
    }

    .form-2-col .action-item.no-left-right-padding .timepick {
        height: 20px;
    }

.form-list-item .list.list-day-of-week {
    height: 284px;
}

.form-list-item .list.hidden-search {
    display: none;
}

.mt-0 {
    margin-top: 0px !important;
}

.m-t-10 {
    margin-top: -10px !important;
}

.radio label, .checkbox label {
    display: inline-block;
    font-weight: normal;
    cursor: pointer;
}

.modal-scroll {
    max-height: 450px;
}

.modal-body-scroll {
    max-height: 360px;
    overflow-y: auto;
}

.payment-list {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-gap: 10px 10px;
    margin-bottom: 10px;
}

.terminal-list .payment-list .payment-item {
    background-color: #efeeef;
    border-radius: 8px;
    height: 140px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.terminal-list .payment-list .payment-item.enable {
    background-color: white;
}
    .payment-item .payment-btn {
    width: 40px;
    height: 40px;
    background-color: #F3F3F3;
    border-radius: 8px;
    margin-right: 10px;
    display: inline-block;
    line-height: 40px;
    margin-left: auto;
}

.payment-item.eft-function .payment-btn {
    width: 35px;
    height: 35px;
    background-color: #F3F3F3;
    border-radius: 4px;
    margin-right: 10px;
    display: inline-block;
    line-height: 40px;
    margin-left: auto;
}

.payment-item .payment-text {
    margin-left: 10px;
    margin-top: 10px;
    flex: 0 1 100%;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 85px;
    height: 40px;
}

.payment-item .payment-text.EFT-payment {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.payment-item .payment-image {
    height: 65px;
    width: 65px;
    margin-left: 10px;
    border-radius: 5px;
}

.payment-item.eft-function .payment-image {
    height: 55px;
    width: 55px;
    margin-left: 10px;
    margin-top: 25px;
    border-radius: 5px;
}

.payment-item .payment-btn i {
    margin-left: 9px;
}

.menu-hidden{
    display:none;
}

.terminal-name-area div .input-time{
    width:100%;
}

.bottom-screen {
    position: absolute;
    width: 100%;
    bottom: 35px;
}

.button-full-screen {
    background-color: #4bce51;
    border: none;
    color: white;
    padding: 17px 123px;
}


/*css item image - text - icon (switch btn, mms-boolean-square) */
.item-image-text-icon {
    height: 75px;
    background-color: white;
    border-radius: 7px;
    margin-bottom: 10px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.item-image-text-icon .image {
    height: 100%;
    width: 35px;
    margin-right: 10px;
    float: left;
    border-radius: 5px;
}
.item-image-text-icon .text {
    width: 159px;
    float: left;
    font-size: 17px;
    position: relative;
    height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6em;
    white-space: nowrap;
}

.item-image-text-icon .text p {
    white-space: pre-wrap;
    max-height: 80px;
    height: 55px;
    display: flex;
    align-items: center;
}
.item-image-text-icon .icon {
    margin-top: 8px;
    float: right;
    position: relative;
}

.item-image-text-icon .icon .image-icon {
    margin: 3px;
    width: 35px;
    cursor: pointer;
}


#heathcheck .item-image-text-icon .image {
    width: 55px;
    padding: 0;
}

.contain-list-item {
    background-color: white;
    overflow-y: scroll;
}

.contain-list-item .row-terminal-item{
    border-radius:0;
}

.contain-list-item .row-terminal-item .display-value{
    float: right;
    width: 50%;
}

.form-1-col-terminal .two-input .action-item {
    width: 48%;
}

.form-1-col-terminal .two-input .action-item:not(:first-child){
    margin-left: 10px;
}

.display-none-item{
    display: none;
}
.contain-list-item .item-click .display-name {
    width: 65%;
}

.contain-list-item .item-click .display-value {
    width: 25%;
    text-align: right;
    margin-right:5px;
}

.title_add {
    display: flex;
    margin-bottom:5px;
}

.title_add span{
    width: 90%;
}

.title_add img{
    height:20px;
    cursor: pointer;
}

.form-1-col-terminal .two-input .row-terminal-item {
    width: 48%;
    float: left;
    margin-top: 10px;
}

.form-1-col-terminal .two-input .row-terminal-item:not(:first-child) {
    margin-left: 10px;
}

.list-item-select-edit{
    display:flex;
}
.list-item-select-edit:hover {
    background-color: #E8E9EE;
}

.list-item-select-edit .btn-select {
    position: absolute;
    right: 2px;
}

.list-item-select-edit .btn-select .sicon-toggle.square{
    top:0px;
}

.list-item-select-edit .btn-icon{
    top:5px;
}

.list-item-select-edit .btn-select .btn-icon .icon{
    line-height: 35px;
}

#terminal-select-modal .list-item-select-edit {
    height: 47px;
    margin: 0;
    padding: 5px;
}

.list-item-select-edit .btn-select .form-chk{
    height: 0px;
}

.list-item-select-edit .item-text {
    width: 70%;
}

.list-item-select-edit .item-text span {
    width: 100%;
}

.list-item-select-edit.row.row-terminal-item{
    border-radius: 0;
}

.terminal-modal .form-header .header-places.header-line-height {
    font-size: 20px;
}

.mutiple-select-modal .form-list-item input {
    display: none;
}
.disable-select {
    pointer-events: none;
    opacity: 0.4;
}
.contain-list-item .image-icon.item-alert {
    position: absolute;
    top: 8px;
    right: 55px;
    height: 34px;
}

/*
    CSS from Cloud Setup
*/

.selected-location-name {
    width: auto;
    text-align: left;
    display: inline-block;
    font-weight: bold;
    /* text-decoration: underline; */
}

.selected-location {
    font-size: 1.2em;
    cursor: default;
}

.slide-to-top {
    cursor: pointer;
    border: 1px solid #222;
    display: inline-block;
    padding: 2px 6px;
    text-decoration: none;
    /*Node background and text color*/
    background-color: #383838;
    color: white;
    margin-bottom: 5px;
}

.slider-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    /* height:480px; */
    padding-bottom: 5px;
}

    .slider-wrap .slide-item-wrap {
        position: relative;
        top: 0;
        left: 0;
        display: inline-flex;
    }

    .slider-wrap .slide-item {
        /*position: absolute !important;*/
        width: 250px;
        color: #000;
        font-size: 15px;
        margin-right: 5px;
        height: auto;
    }

.slide-item.double-width {
    width: 400px;
}

.slide-item.triple-width {
    width: 600px;
}

.slider-wrap .slide-item-wrap .slide-item .slide-back {
    -moz-min-width: 20px;
    -webkit-min-width: 20px;
    min-width: 20px;
    height: 20px;
    cursor: pointer;
    font-size: 20px;
    float: right;
}

.horz-transform-keyname {
    -webkit-transform: rotateZ(90deg) translateX(-50%);
    -moz-transform: rotateZ(90deg) translateX(-50%);
    transform: rotateZ(90deg) translateX(-50%);
}

.sliding {
    background-color: #157637;
}

.slider-wrap.show-selected-only .slide-item {
    visibility: hidden;
    display: none;
}

    .slider-wrap.show-selected-only .slide-item.can-hide-others {
        visibility: visible;
        display: block;
    }

.slide-item > .sub-title {
    -webkit-transition: background-color 0.4s linear;
    -moz-transition: background-color 0.4s linear;
    transition: background-color 0.4s linear;
}

.slide-item ~ .slide-item > .sub-title.sliding > .slide-back {
    display: block !important;
    visibility: visible !important;
}

.slide-item > .sub-title > .slide-back {
    display: none;
    visibility: hidden;
}

.slide-item.double-width.sub-window .sub-title,
.slide-item.double-width.sub-window .list {
    width: 99.5%;
}

.slide-item .sub-title {
    background-color: #e6e6e6;
    color: inherit;
    font-weight: 600;
}

.productgroup-header > *, .productgroup-header2 > * {
    line-height: 35px;
}

.slider-wrap .menu-description-content .edit-icon {
    color: black;
    right: 4px;
}

.table.normal .slider-wrap .menu-description-content.form-list-item .edit-icon.menu-icon-form-list {
    padding-right: 0;
    top: 5px
}

.productgroup-header .edit-icon, .productgroup-header2 .edit-icon {
    color: inherit;
    top: 0px;
    line-height: 35px;
}

.menu-description-content.form-list-item .edit-icon {
    color: gray;
}

[class*="col-md-"] .menu-description-content.form-list-item .edit-icon.menu-icon-form-list {
    padding-right: 0px;
}

.menu-description-content.form-list-item .edit-icon.menu-icon-form-list {
    padding-right: 13px
}

.menu-description-content .edit-icon, p .edit-icon {
    color: gray;
    padding-left: 2px;
    /* font-size: inherit; */
}

.normal-content-action .sub-title + .list {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.sub-title ~ .list {
    width: 99%;
}

#regionToStreetTree .form-list-item .content.form-list,
#locationLevelTree .form-list-item .content.form-list {
    border-radius: 0 0 10px 10px;
}

.mms-label.description-text-default {
    font-size:16px;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

.list .list-item {
    padding: 0 0 0 5px;
    cursor: pointer;
    float: left;
    -moz-min-width: 100%;
    -webkit-min-width: 100%;
    min-width: 100%;
    color: black;
    min-height: 42px;
    font-size: 1em;
    clear: both;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
}

    .list .list-item.hidden-search {
        display: none;
    }

    .list .list-item .list-item-red-text {
        color: red;
    }

.list-item .content {
    min-width: 92%;
}

    .list-item .content,
    .list-item .content * {
        float: left;
    }

.list.image-first .list-item {
    padding-left: 0;
}

.list .list-item .image-box {
    width: 35px;
    height: 35px;
    padding: 5px;
}

    .list .list-item .image-box img {
        vertical-align: initial;
    }

.list .list-item img {
    width: 100%;
    height: 100%;
    padding-right: 0;
}

.list-item.list-image {
    min-width: 33.33333%;
    padding-right: 5px;
    padding-bottom: 5px;
    clear: none;
}

    .list-item.list-image img {
        height: 100%;
        width: calc(100-5px);
        object-fit: cover;
    }

    .list-item.list-image .image-container {
        height: auto;
        max-height: 100%;
    }

.list .list-item .list-item-center {
    width: 50%;
    float: right;
}

.list .list-item > * {
    float: left;
    padding: 0 5px 0 0;
    flex: 49 45;
}

.list .list-item .sicon {
    flex: 0 0 1%;
}

.list .list-item .row {
    margin-right: 0;
    float: none;
}

.list .list-item.normal-icon > * {
    float: none;
}

.list .list-item.list-item-selected {
    background-color: #6699FF;
    color: #fff;
}

.list-item .sicon.deactive-icon {
    margin-right: 0px;
}

.list.form-list[data-multiselect] .list-item.list-item-selected {
    background-color: unset;
    color: unset;
}

.list a.list-item:hover {
    text-decoration: none;
    color: #fff;
    background-color: #3377ff;
}

.list[data-selectable="False"]  a.list-item:hover {
    color: inherit;
    background-color: unset;
}

.list a.list-item span.item-right {
    position: relative;
    text-align: right;
}

.list.form-list[data-multiselect] a.list-item:hover {
    color: unset;
    background-color: unset;
}

.list[data-selectable=false]:hover .list-item:hover {
    background: transparent;
    color: #000;
}

.form-list {
    position: relative;

}

.form-list.list {
    border: 1px solid #bababa;
    border-radius: 10px;
    width: 100%;
}

.list-auto-scale-height .form-list.list {
    height: calc(100% - 35px) !important;
    min-height: 150px;
    max-height: 424px;
}

.form-list[data-multiselect] .list-item.list-item-selected::after {
    display: block;
}

.form-list[data-multiselect] .list-item::after {
    font-family: sifont;
    display: none;
    float: right;
    right: 5pt;
    position: absolute;
}

.form-chk-input:checked + input + .form-chk .sicon-toggle:before, .sicon-checked:before, .form-list[data-multiselect] .list-item::after, .list-item-checkbox .item-checkbox:checked:before {
    content: '\e8aa';
    color: #23c7b8;
}

.form-list a.list-item {
    font-weight: normal;
    align-items: center;
    font-size: 15px;
}

.select-menu .edit-icon {
    padding-right:15px;
}

div.action-item.notified > div, div.notified > div {
    border-color: #f00;
}

input[type=text].notified,
input[type=datetime].notified,
select + .dropdown-list-button.notified,
.list.notified, textarea.notified,
.select.notified, .entry-text-default.notified {
    border-color: #f00;
}

.normal-content-action .table.restrict {
    display: none;
}

.terminal-button .checklist-GUI-required-highlight {
    border: 1px solid red;
}

.normal-content-action .table.normal .selected-location {
    padding-left: 0px;
}

.float-right {
    float:right !important;
}

.form-list .search-box .search-box-btn {
    position: absolute;
    right: 20px;
    line-height: 42px;
    top: unset;
}

.GuiDefaultSelectAllRightButton, .GuiDefaultSelectRightButton {
    color: green !important;
    border-color: green !important;
}

.GuiDefaultRemoveLeftButton, .GuiDefaultRemoveAllLeftButton {
    color: red !important;
    border-color: red !important;
}

a.button {
    width: 100%;
    display: block;
    height: 42px;
    border-radius: 21px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #bababa;
    position: relative;
}

.body .normal-content-action a.button.GuiDefaultSelectRightButton,
.body .normal-content-action a.button.GuiDefaultSelectAllRightButton,
.body .normal-content-action a.button.GuiDefaultRemoveLeftButton,
.body .normal-content-action a.button.GuiDefaultRemoveAllLeftButton {
    text-align: center;
    background-color: transparent;
}

.body .normal-content-action a.button.btn-selectOne.GuiDefaultSelectRightButton,
.body .normal-content-action a.button.btn-selectOne.GuiDefaultSelectRightButton .button-icon {
    border-color: green;
    color: green;
}

.body .normal-content-action a.button.btn-removeOne.GuiDefaultRemoveLeftButton,
.body .normal-content-action a.button.btn-removeOne.GuiDefaultRemoveLeftButton .button-icon {
    border-color: red;
    color: red;
}

.body .normal-content-action a.button.selectRightAllClass.GuiDefaultSelectAllRightButton,
.body .normal-content-action a.button.selectRightAllClass.GuiDefaultSelectAllRightButton .button-icon {
    border-color: green;
    color: green;
}

.body .normal-content-action a.button.removeLeftAllClass.GuiDefaultRemoveAllLeftButton,
.body .normal-content-action a.button.removeLeftAllClass.GuiDefaultRemoveAllLeftButton .button-icon {
    border-color: red;
    color: red;
}

.circle-plus-icon {
    font-size: 15px;
    line-height: 13px;
    color: black;
    /*border: 1px solid;*/
    border-radius: 50%;
    padding-left: 4px;
    padding-bottom: 4px;
    padding-top: 5px;
    padding-right: 3px;
    width: 20px;
    height: 20px;
    text-align: center;
}

.icon-right {
    float: right;
    right: 5px;
}

label:not(.css-label) {
    /* width: 100%; */
    /* height: 100%; */
}

#locationLevelTree input[type=checkbox] ~ label:not(.check):first-of-type:before {
    content: "\E8B4";
    font-family: sifont;
    width: 25px;
    display: inline-block;
    line-height: 15px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
    color: #ff0000;
    font-weight: normal;
}

#locationLevelTree input[type=checkbox]:checked ~ label:not(.check):first-of-type:before {
    content: '\E8AA';
    background-position: 0 -22px;
    font-family: sifont;
    color: #23c7b8;
    font-weight: normal;
}

.show-location {
    display:none;
}

.mms-btn .button-select {
    display: block;
    height: 41px;
    border-radius: 21px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #bababa;
}

.action-item .mms-select-styled{
    height: 38px;
}

.action-item .mms-chk.form-chk {
    height: 41px;
    line-height: 41px;
}

.float-left {
    float:left !important;
}

.btn-inline-text {
    display: inline-block;
}

.button-select .btn-inline-text {
    display: inline-block;
    padding-left: 9px;
    font-size: 16px;
}

/*
    END - CSS from Cloud Setup
*/
.sicon.page:before {
    content: '\E804';
}
.btn.btn-page {
    width: 44%;
    height: 55px;
    border-radius: 5px;

    color: white;
    font-weight: bold;
}
.btn.btn-page:hover,.btn.btn-page:focus{
    outline: none;
}

.btn.btn-page.btn-down{
   background-color: #494F56;
}

.btn.btn-page.btn-up{
   background-color: #4bce51;
}

.terminal-list-item .terminal-button-icon.select-sublevel {
    margin-top: 25px;
    margin-right: 12px;
}

.terminal-list-item.payment-item .terminal-button-icon.select-sublevel {
    margin-right: 15px;
    margin-top: 0px;
}

.wrap-modal {
    border-radius: 10px;
    max-width: 498px;
    padding: 0 !important;
    background-color: #fff;
}

.form-wrap #titlePopup {
    height: 52px;
    width: 100%;
    text-align: center;
    position: relative;
    background-color: #5887F5;
    border-radius: 10px 10px 0 0;
}

.form-wrap .confirm-content {
    font-size: 20px !important;
}

.form-wrap .table {
    width: 100%;
    height: auto;
    padding: 7px 15px;
    color: #222;
    border-spacing: 5px;
    border-collapse: separate;
    margin-bottom: 0;
}

.form-btn {
    width: 100%;
    height: 42px;
    line-height: 42px;
    background-color: #fff;
    border-radius: 21px;
    padding: 0 21px;
    text-align: inherit;
    color: black;
    border: 1px solid #bababa;
}

.form-btn .icon {
    /* color: #fff; */
    position: absolute;
    right: 27px;
    font-size: 24px;
}

.form-wrap #titlePopup .menu-icon-right:before {
    float: right;
    cursor: pointer;
    padding-top: 14px;
    padding-right: 8px;
    padding-left: 10px;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'sifont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 23px;
    color: white;
    z-index: 1;
}

.form-wrap #titlePopup span {
    text-align: center;
    margin: auto;
    padding: 5px 0 2px 0;
    width: 70%;
    margin-left: 15%;
    text-transform: capitalize;
    line-height: 44px;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    color: white;
    font-size: 20px;
}

.form-wrap #titlePopup {
    height: 52px;
    width: 100%;
    text-align: center;
    position: relative;
    background-color: #5887F5;
    border-radius: 10px 10px 0 0;
}


.form-wrap #titlePopup .customize-icon:before {
    content: "\E8A7";
}

.form-wrap #titlePopup .reset-default-to-default:before {
    content: "\e030";
}

.form-wrap #titlePopup .reset-all-to-default-icon:before {
    content: "\e031";
}


.form-wrap #titlePopup .multilanguage-icon:before {
    /*content: "\e135-English";*/
    content: '\E8A5';
    /*padding-right: 0 !important;
        padding-left: 0 !important;*/
}

.form-wrap #titlePopup .menu-icon-left.multilanguage-icon:after {
    content: attr(data-language-name);
    /*top: -2px;*/
    Font-Family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: bold;
}


.form-wrap #titlePopup .close-icon:before {
    /*content:  "\e088";*/
    content: '\E8A3';
}

.form-wrap #titlePopup .plus-icon:before {
    content: "\e081";
}


.form-wrap #titlePopup .pencil-icon:before {
    content: "\270f";
}

.form-wrap #titlePopup .record-icon:before {
    content: "\e165";
}

.form-wrap #titlePopup .reset-screen-icon:before {
    content: '\E8A6';
}

.form-wrap #titlePopup .menu-icon-right:before {
    float: right;
    cursor: pointer;
    padding-top: 14px;
    padding-right: 8px;
    padding-left: 10px;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'sifont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 23px;
    color: white;
    z-index: 1;
}

.form-wrap #titlePopup .menu- -left:before, .form-wrap #titlePopup .menu-icon-left:after {
    float: left;
    cursor: pointer;
    padding-top: 6px;
    padding-right: 10px;
    padding-left: 4px;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'sifont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 21px;
    color: white;
    z-index: 1;
}

.form-wrap #titlePopup .menu-icon-left:before, .form-wrap #titlePopup .menu-icon-left:after {
    float: left;
    cursor: pointer;
    padding-top: 14px;
    padding-right: 10px;
    padding-left: 7px;
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'sifont';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 21px;
    color: white;
    z-index: 1;
}

.form-wrap #titlePopup .asterisk-icon:before {
    content: "\2a";
}

.css-btn-inline-text .btn.button-select, .css-btn-inline-text .btn.button-select:hover {
    color: black;
}

.row.item-not-seleted {
    width: 100%;
    min-height: 40px;
    font-size: 16px;
    padding-top: 10px;
}

.sicon.icon-healthcheck-status{
    padding-left: 10px;
}

.icon-healthcheck-status.enabled::before {
    content: '\e8aa';
    color: #23c7b8;
}

.icon-healthcheck-status::before {
    content: '\e8aa';
    color: red;
}

/* Hide arrow from input type of number */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
    text-align: right;
}


/* css popup */
.wrap-modal.mms-modal  {
    max-width: 500px;
    padding: 0 !important;
    background-color: #e8e7e7;
    box-shadow: 2px 2px 2px #888888;
    min-width: 300px;
    margin-top: 230px;
}

.wrap-modal.mms-modal .modal-content {
    background-color: #e8e7e7;
    position:  relative;
}

.wrap-modal.mms-modal h3 {
    text-align: center;
    margin: auto;
    padding: 5px 0 2px 0;
    width: 70%;
    margin-left: 15%;
    text-transform: capitalize;
    line-height: 44px;
    letter-spacing: 2px;
    font-weight: bold;
    -moz-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    color: white;
    font-size: 20px;
}

.wrap-modal.mms-modal .header-places{
    padding-top:0px;
}

.wrap-modal.mms-modal .header-places h3 {
   line-height: 30px;  
}

.wrap-modal.mms-modal h4 {
    font-size:22px  
}

.wrap-modal.mms-modal .modal-body {
    padding: 0;
}

.wrap-modal.mms-modal .table{
    border-spacing: 0px
}

.wrap-modal.mms-modal .popup-content {
    margin-bottom: 5px;
}

.wrap-modal.mms-modal .row-modal {
    display: flex; 
    flex-wrap: wrap; 
    margin-right: -15px; 
    margin-left: -15px;
}

.wrap-modal.mms-modal a{
    font-size: 16px;
}

.wrap-modal.mms-modal .btn-cloud-blue{
    background-color: #5887f5;
    border-color: #5887f5;
    color: white;
}
.normal-content-action .mms-data-form .row > * {
    /* padding-left: 5px; */
    /* padding-right: 5px; */
}

.normal-content-action .mms-data-form .action-item {
    margin-top:5px;
}

.normal-content-action .mms-data-form .row:before {
    content: '';
    height: 3px;
    width: 100%;
    display: block;
}

.normal-content-action .mms-data-form::after {
    content: '';
    display: block;
    height: 15px;
}

.mms-data-form .col-xs-1,
.mms-data-form .col-sm-1,
.mms-data-form .col-md-1,
.mms-data-form .col-lg-1,
.mms-data-form .col-xs-2,
.mms-data-form .col-sm-2,
.mms-data-form .col-md-2,
.mms-data-form .col-lg-2,
.mms-data-form .col-xs-3,
.mms-data-form .col-sm-3,
.mms-data-form .col-md-3,
.mms-data-form .col-lg-3,
.mms-data-form .col-xs-4,
.mms-data-form .col-sm-4,
.mms-data-form .col-md-4,
.mms-data-form .col-lg-4,
.mms-data-form .col-xs-5,
.mms-data-form .col-sm-5,
.mms-data-form .col-md-5,
.mms-data-form .col-lg-5,
.mms-data-form .col-xs-6,
.mms-data-form .col-sm-6,
.mms-data-form .col-md-6,
.mms-data-form .col-lg-6,
.mms-data-form .col-xs-7,
.mms-data-form .col-sm-7,
.mms-data-form .col-md-7,
.mms-data-form .col-lg-7,
.mms-data-form .col-xs-8,
.mms-data-form .col-sm-8,
.mms-data-form .col-md-8,
.mms-data-form .col-lg-8,
.mms-data-form .col-xs-9,
.mms-data-form .col-sm-9,
.mms-data-form .col-md-9,
.mms-data-form .col-lg-9,
.mms-data-form .col-xs-10,
.mms-data-form .col-sm-10,
.mms-data-form .col-md-10,
.mms-data-form .col-lg-10,
.mms-data-form .col-xs-11,
.mms-data-form .col-sm-11,
.mms-data-form .col-md-11,
.mms-data-form .col-lg-11,
.mms-data-form .col-xs-12,
.mms-data-form .col-sm-12,
.mms-data-form .col-md-12,
.mms-data-form .col-lg-12 {
    position: relative;
    min-height: 1px;
    /* padding-right: 5px; */
    /* padding-left: 5px; */
}

.select-form .mms-row {
    
padding-left: 5px;
    
padding-right: 5px;
}

.form-list-item .edit-icon {
    min-width: 16px;
    height: 16px;
    cursor: pointer;
    font-size: 16px;
    float: right;
}

.form-list-item .expand-column{
    font-size: 16px;
    padding-left: 5px;
}


.normal-content-action .mms-data-form .slider-wrap .row:before {
    display: none;
}

.form-4-col .slider-wrap .slide-item{
    width: 270px;
}

.form-4-col .slider-wrap .slide-item.expanded{
    width: 350px;
}

.expanded .sicon-arrow-right:before {
    content: '\E8B3';
}

.custom-location-iot-device-title{
    background-color: #efeeef;
    width:100%;
    height: 50px;
    margin: auto;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 7px;
    align-items: center;
    display: flex;
}

.edit-item-container.position-menu{
    position: absolute;
    top: 22px;
    right: 0px;
}

.action-item.line-menu-container .edit-item-container.position-mms-menu {
    position: absolute;
    top: 22px;
    right: 0px;
}

.edit-item-container.position-mms-menu{
    position: absolute;
    right: 15px;
}

.table.normal .slide-item-wrap .edit-item-container.position-mms-menu{
    top: 35px;
    right: 1px;
}
.col-md-6 .edit-item-container.position-mms-menu, .col-md-3 .menu-description-content .edit-item-container.position-mms-menu {
    position: absolute;
    top: 23px;
    right: 0px;
}

.col-md-3.menu-description-content .edit-item-container.position-mms-menu {
    position: absolute;
    right: 15px;
}

.select.mms-select-readonly{
    background-color: #f0f0f0;
    pointer-events: none;
}

.custom-location-iot-device-title{
    background-color: #efeeef;
    width:100%;
    height: 50px;
    margin: auto;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 7px;
    align-items: center;
    display: flex;
}


.action-item-full-width-wrapper .action-item {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}

.header-fixed h3 {
    position: absolute;
}

.list-button-header.form-layout-header {
    position: absolute;
    right: -10px;
}


@media (max-width: 820px) {
    .header-item .item-text {
        display: none !important;
    }

    .header-item {
        padding: 0;
    }
}

.expand-column-icon{
    position: absolute;
    z-index: 10;
    /* float: right; */
    top: 1px;
    right: 26px;
}

.width-500-px {
    width: 500px !important;
}

.mms-btn[disabled]{
    pointer-events: none;
}

.mms-btn[disabled] a{
    pointer-events: none;
    background-color: #f0f0f0;
}


.alert-icon-button.left.button-ok-confirm p span
{
    float:left;
}

.alert-icon-button.left.button-ok-confirm p i.left-icon-popup-btn
{
    float: right;
    position: initial;
    left: 0;
    line-height: inherit;
    margin-top: 0;
}

.action-item.form-list-item{
    width: 274px;
}

.action-item.form-list-item.expanded{
    width: 350px;
}

.modal.fade.in {
    overflow-y: initial;
}

.partner-row-item {
    display: inline-flex;
    margin-bottom: 20px;
}

.flex-column-start {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.disable-button-background-color {
    background-color: #f0f0f0;
}

.schedule-upgrade-task {
    background-color: #f0f0f0;
    height: 75px;
}

.task-data-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.task-data-item {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 0px !important;
}

.schedule-in-progress-status-color {
    color: #4257f5;
}

.schedule-completed-status-color {
    color: #0ba313;
}

.schedule-pending-status-color {
    color: #dec407;
}

.schedule-failed-status-color {
    color: #f54242;
}