@import "extlib.css";


.content-wrapper,
#crud-template-container,
section.content {
    position: relative;
}

.clickable {
    cursor: pointer;
}

#loaderBox {
    width: 200px !important;
    position: fixed;
    right: 10px;
    bottom: 10px;
    margin: 0px !important;
    text-overflow: ellipsis;
}

#loaderBox .overlay {
    background: rgba(255,255,255,0.3);
}

.page-form {
    display: none;
}

#loaderBox .overlay > .fa {
    left: auto !important;
    right: 5px !important;
    opacity: .7;
}

.main-header .business-name {
    transition: width .3s ease-in-out;
    display: block;
    float: left;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    text-align: left;
    color: #ffffff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0 15px;
    font-weight: 700;
    overflow: hidden;
}

.dataTables_filter {
    text-align: right;
}

.dataTables_filter input {
    margin-left: 10px;
}

.action-toolbars {

}

td.dt-body-right,
.align-right {
    text-align: right;
}

/*datatables buttons colvis button style*/
.dropdown-menu>li.buttons-columnVisibility a {
    padding: 10px;
}

.tab-pane > .content-header {
    display: none;
}

.custom-table-filter {
    text-align: left;
    margin-top: 15px;
}

.dataTables_empty {
    font-style: italic;
}

.sidebar-menu .treeview-menu {
    padding-left: 25px;
}

/*item bundling*/
.bundling-item-row {
    padding: 10px 0;
}

.bundling-item-row:nth-child(even){
    background-color: #f0f0f0;
}

.bundling-item-row.deleted-item > div {
    font-style: italic;
    text-decoration: line-through;
}

/*transactions*/
.trx-items.unsaved-item {
    border-left: solid 2px #d00;
}

.trx-items.deleted-item > td {
    font-style: italic;
    text-decoration: line-through;
}

/*Bill*/
.bill-frame {
    border: none;
    width: 100%;
    min-height:450px;
}

.select2-selection__rendered {
    line-height: 28px !important;
}

.dt-buttons .btn-custom {
    padding: 0px 15px;
    text-align: left;
}

.dt-buttons .btn-custom span.select2-selection {
    height: 32px;
}

.dt-buttons .btn-custom .select2-container {
    z-index: 1;
}

table.dataTable tr.selected td {
    border: solid 1px #08c;
}

.select2-results li.option.load-more {
    padding: 10px;
    background: #eee;
    font-style: italic;
}

@media xprint {
    @page {
        size: A4;
        margin: 0mm 0mm 1cm 0mm;
    }

    html {
        margin: 1cm;
    }

    body {
        border: solid 1px blue;
        margin: .5cm .5cm !important;
    }
}


.modal-content.loading {

}

.modal-content.loading::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #ccc;
    font-size: 42px;
    content: 'harap tunggu...';
    text-align: center;
    line-height: 300px;
    z-index: 999999;
}

.input-integer {
    text-align: right;
}

div.dataTables_wrapper div.dataTables_processing {
    z-index: 99 !important;
    opacity: .9;
    pointer-events: none;
}

.version-logo {
    vertical-align: bottom;
}

.version-logo img {
    height: 20px;
    width: auto;
}


.modal-dialog {
    /*transition: all .3s ease-out !important;*/
}

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

.nomouse {
    pointer-events: none !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    line-height: normal;
}

/*WebPage js Object*/
@keyframes mask-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes mask-bounce {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-5px);
    }
}

.mask-container {
    user-select: none;
    background: rgba(0,0,0,.4);
    /*position: absolute;*/
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    animation-name: mask-fade-in;
    animation-duration: .8s;
}

@keyframes mask-spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

.mask-content {
    position: absolute;
    width: 320px;
    height: auto;
    background: #f39c12;
    color: #fff;
    font-size: 16px;
    margin: auto;
    padding: 5px;
    text-align: center;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);

    /*animation: mask-bounce .6s infinite;*/
    /*animation-delay: .8s;*/
}

.mask-content:before {
    position: absolute;
    content: '';
    left: 5px;
    top: 50%;
    border: solid 2px transparent;
    border-right: solid 2px #fff;
    border-top: solid 2px #fff;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    animation: mask-spin .8s linear infinite;
    /*animation-delay: .8s;*/
}

@media print {
    .body,
    .container {
        width: 100%;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b,
    .not-printable {
        display: none !important;
    }

    .print-exclude {
        visibility: hidden;
    }

    .print-area {
        width: 100% !important;
        position: absolute;
        left: 0;
        top: 0;
    }

    .print-area, .print-area * {
        visibility: visible !important;
    }

    .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single,
    input, select, textarea {
        border-color: transparent !important;
    }

    ::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: transparent;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: transparent;
    }
    :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: transparent;
    }
}
/*end WebPage*/

#desktop-link {
    clear: both;
    display: none;
    text-align: center;
}

.capslock {
    text-transform: uppercase !important;
}

.selection-display-block .select2-selection__choice {
    display: block !important;
    float: none !important;
}

.sidebar-menu li.active i.pull-right {
    transform: rotate(90deg);
}

textarea.form-control {
    resize: vertical;
}

#error-content {
    font-size: 16px;
    font-weight: bold;
    padding: 15px;
}

#custom_app_actions {

}

#custom_app_actions a {
    padding: 15px;
}

.notifyjs-corner {
    top: 55px;
}