:root {
    --nav-height: 4rem;
    --sidebar-width: 78px;
    --padding-maincontent: 14px;
    --border-radius: 12px;
    --border-radius-input: 4px;
}

* { font-family: 'Poppins', sans-serif; }

body {
    /* background-color: #F0F0F0; */
    background-color: #F5F7FA;
    /* background-color: #F8f7f2; */
    height: 100%;
    width: 100%;
    overflow: scroll;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }

footer {
    /* background-color : #D9D9D9;
    border-top : 4px solid #FF0000; */
    background-color: #e1daca;
    border-top: 4px solid #997d52;
    width: 100%;
    /* position: fixed; */
    bottom: 0;
}

.container-footer{
    padding : 50px 0px;
}

.maincontent{
    height: calc(100% - var(--nav-height));
    width: 100%;
    overflow: scroll;
    display: flex;
    position: relative;
}

.content-gocit{
    position: absolute;
    top: 0;
    left: 118px;
    width: calc(100% - 118px);
    height: 100%;
    transition: all 0.5s ease;
    z-index: 2;
    padding: 20px;
    padding-bottom: 24px;
}

.content-gocit-customer{
    width: 1200px;
    top: 0;
    height: 100%;
    transition: all 0.5s ease;
    z-index: 2;
    padding: 40px 0px;
    padding-bottom:0px;
}

.content-gocit-header{
    height: 5%;
}
.content-gocit-body{
    height: 100%;
    margin-bottom: 40px;
    /* padding-bottom: 8px !important; */
    /* overflow: hidden; */
}

.body-content-filter{
    height: 5%;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px !important;
}
.body-content-table{
    height: 95%;
}

.wrapper-transaksi,
.wrapper-produksi{
    height: 100%;
    overflow: hidden;
}

.detail-transaksi-header{
    height: 20%;
}

.detail-produksi-header{
    height: 15%;
}

.detail-transaksi-body{
    display: block;
    height: 80%;
    overflow: auto;
}

.detail-produksi-body{
    height: 85%;
    overflow: auto;
}

.content-title{
    color: var(--red-gocit);
}

.btn-flat .material-icons-outlined{
    line-height: 36px;
}

.color-blue {
    background-color: var(--blue);
}

.color-green{
    background-color: var(--green);
}

.bordered{
    border: 1px solid #000;
}

.rounded-4px{
    border-radius: 4px;
}

.rounded-8px{
    border-radius: 8px;
}

.rounded-12px{
    border-radius: 12px;
}

.rounded-16px{
    border-radius: 16px;
}

p {
    padding: 0;
    margin: 0;
}

button, input, optgroup, select, textarea { font-family: 'Poppins', sans-serif; }

.nom { margin: 0 !important; }
.nomb { margin-bottom: 0 !important; }
.mt-10px { margin-top: 10px !important; }
.mb-4px { margin-bottom: 4px !important; }
.mb-8px { margin-bottom: 8px !important; }
.mt-16px { margin-top: 16px !important; }
.mb-12px { margin-bottom: 12px !important; }
.mb-16px { margin-bottom: 16px !important; }
.mb-32px { margin-bottom: 32px !important; }
.mr-4px { margin-right: 4px !important; }
.noml { margin-left: 0 !important; }
.nop { padding: 0 !important; }
.nomp { margin: 0; padding: 0 !important; }
.no-rp { padding-right: 0 !important; }
.p-4px{ padding: 4px !important }
.p-8px{ padding: 8px !important }
.p-12px{ padding: 12px !important; }
.p-10px{ padding: 10px !important; }
.p-tb-8px { padding-top: 8px !important; padding-bottom: 8px !important; }
.pr-4px{ padding-right: 4px !important; }
.pr-8px{ padding-right: 8px !important; }
.pr-10px{ padding-right: 8px !important; }
.no-pl{ padding-left: 0 !important; }
.pl-4px{ padding-left: 4px !important; }
.pl-8px{ padding-left: 8px !important; }
.plr-8px{ padding-left: 8px !important; padding-right: 8px !important; }
.mx-auto{ margin: auto; }

.mb-small { margin-bottom: 8px; }

.w-100 { width: 100%; }
.w-50 { width: 50%; }
.h-100 { height: 100%; }

.h-fill-container { display: flex; flex-direction: column; }
.h-fill { flex: 1 1 ; }
.w-fill-container { display: flex; flex-direction: row; }
.w-fill { flex: 1 ; }

strong, .bold { font-weight: 600; }
.semi-bold { font-weight: 400; }
.smaller-text { font-size: .8rem !important; }
.bigger-text { font-size: 1.2rem; }
.biggest-text { font-size: 1.8rem; }
.font-14px { font-size: 14px; }

.badge-text{ font-size : 1.5rem; }
.ultra-bold { font-weight: 700; }
.semi-bold { font-weight: 400; }

.clickable { cursor: pointer; }
.hidden { display: none; }
.opacity-0 { opacity: 0; }

.scroll-y:not(.show-scrollbar)::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
.scroll-y {
    overflow-y: auto;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

.scroll-x-disabled { overflow-x: hidden; }

.center-div {
    align-items: center;
    justify-content: center;
    display: flex;
}

.d-block{
    display: block;
}

.d-none{
    display: none;
}

.p-relative{
    position: relative;
}

div.main-content {
    padding: 8px var(--padding-maincontent);
    min-height: 100vh;
}
.body-content.h-auto {
    min-height: calc(100vh - var(--height-contentheader) - var(--height-contentfooter) + 8px - 1px); /* 8px adalah padding paling atas, 1px adalah border */
    padding-bottom: var(--padding-maincontent);
}
.d-grid {
    display: grid;
}

textarea.browser-default,
input.browser-default {
    border: 1px solid #aaaaaa;
    border-radius: var(--border-radius-input);
}

input.browser-default.h-button {
    height: 36px;
}
textarea.browser-default {
    padding-top: 1rem;
    padding-bottom: 1rem;
    height: 7rem;
}
textarea.browser-default,
input[type=text].browser-default,
input[type=number].browser-default,
input[type=email].browser-default,
input[type=password].browser-default,
input[type=date].browser-default,
select.browser-default {
    padding-left: 1rem;
    padding-right: 1rem;
    height: 36px;
    border: 2px solid #aaaaaa !important;
}
input[type=text].readonly,
input[type=email].readonly{
    background-color: #DFDFDF;
}
input[type=text].browser-default.with-icon.right-icon,
input[type=email].browser-default.with-icon.right-icon {
    padding-right: 2.4rem;
}
.icon-text.right-icon {
    position: absolute;
    right: .5rem;
    top: .4rem
}
input[type=text].browser-default.with-icon.left-icon,
input[type=email].browser-default.with-icon.left-icon {
    padding-left: 2.4rem;
}
input[type=date].browser-default{
    padding-left: 1rem;
    padding-right: 1rem;
    height: 36px;
    border: 2px solid #aaaaaa !important;
}
.icon-text.left-icon {
    position: absolute;
    left: 8px;
    top: 7px;
}
.input-with-icon {
    position: relative;
}
textarea.browser-default.disabled,
input.browser-default.disabled,
select.browser-default.disabled {
    background-color: #D9D9D9;
    border: 0;
    pointer-events: none;
}
textarea.browser-default.disabled:focus,
input.browser-default.disabled:focus {
    outline: none !important;
    border-radius: var(--border-radius);
    border: 0;
    box-shadow: 0;
}
input[type="checkbox"].notext+span:not(.lever) { padding-left: 1rem; }
label.valign-checkbox { margin-top: .75rem; }
input[type="checkbox"].filled-in:not(:checked)+span:not(.lever):after { border: 2px solid var(--green); }
input[type="checkbox"].filled-in:checked+span:not(.lever):after { background-color: inherit; border: 2px solid var(--green); }
input[type="checkbox"].filled-in:checked+span:not(.lever):before { border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); }
select.browser-default {
	border: 1px solid #aaaaaa;
	border-radius: 4px;
    height: 36px;
	width: 100%;
}

.btn-status{
    border-radius: var(--border-radius);
    padding: 8px;
    width: 100%;
    font-size: 10px;
}

.btn-status.success{
    border: 1px solid var(--green);
    background-color: #C8FACE;
    color: var(--green);
}

.btn-status.process{
    border: 1px solid var(--orange);
    background-color: #FDE8C8;
    color: var(--orange);
}

.btn-status.cancel{
    border: 1px solid var(--red);
    background-color: #ffc3c8;
    color: var(--red);
}

.btn-status.grey{
    border: 1px solid #424242;
    background-color: #9e9e9e;
    color: #424242;
}

.box-upload-photo{
    width: 150px;
    height: 150px;
    border-radius: var(--border-radius);
    border: 2px solid #aaa;
    overflow: hidden;
}
.box-upload-photo .camera-icon{
    font-size: 64px;
    color: #aaa;
}
.preview-upload{
    height: 150px;
    width: 150px;
    object-fit: cover;
}

.preview-upload-rect{
    height: 150px;
    width: 250px;
    object-fit: cover;
}

.hidden{
    display: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	padding: 0.5rem 1rem;
	border: 1px solid #eee;
	width: 100%;
}

.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 150px !important;
}

.btn.btn-custom,
.btn-small.btn-custom {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
#btn-simpan{
    width: 50%;
}
.container.w-100 {
    max-width: none;
}

body.swal2-height-auto {
    height: 100vh !important
}

.swal2-styled.swal2-confirm {
    background-color: #4caf50 !important;
}
.swal2-popup .swal2-styled:focus {
    box-shadow: none !important;
}

.color-total { background-color: #4ddbdb; }

.color-green { background-color: var(--green) !important; }
.color-light-green { background-color: var(--light-green) !important; }
.color-darker-green-text { color: var(--darker-green) !important; }
.color-darkest-green-text { color: var(--darkest-green) !important; }
.color-blue { background-color: var(--blue) !important; }
.color-red { background-color: var(--red) !important; }

.color-cancel { background-color: var(--cancel) !important; }

.modal {
    border-radius: var(--border-radius) !important;
    max-height: 80vh !important;
    overflow: auto;
}
.modal-30{
    width: 30% !important;
}
.modal-40{
    width: 40% !important;
}
.modal-header{
    height: 5%;
}
.modal-close{
    text-decoration: none;
    color: #000;
}
.modal-content {
    padding-top: 12px !important;
    height: 90% !important;
    overflow: auto;
}
.modal-title{
    font-size: 20px;
}
.modal-footer {
    height: 5% !important;
    border-bottom-left-radius: var(--border-radius) !important;
    border-bottom-right-radius: var(--border-radius) !important;
}

/*Loading Animation*/
.loader{
    font-size: 14px !important;
    animation: rotation 1s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
/*End Loading Animation*/

/* Table Style */
.table-container{
    height: 90%;
    overflow: auto;
}
.table-gocit{
    font-size: 14px;
}

.table-gocit thead{
    position: sticky;
    position: -webkit-sticky;
    z-index: 1000;
    top: 0;
}

table.table-gocit{
    font-size: 14px;
    border-collapse: separate;
}

.table-gocit th{
    padding: 8px;
    color: #fff;
    font-weight: normal;
    background-color: #464E2E;
    border-radius: 0;
}

table.table-gocit th{
    border: 1px solid #DFDFDF;
    /* box-shadow: 1px 1px 1px 1px #DFDFDF; */
}

table.table-gocit tbody td{
    border-bottom: 1px solid #DFDFDF;
    padding: 4px;
}

table.table-gocit tbody td:first-child{
    border-left: 1px solid #DFDFDF;
}

table.table-gocit tbody td:last-child{
    border-right: 1px solid #DFDFDF;
}

table.table-gocit tbody tr:nth-child(odd){
    background-color: #FFF;
}

table.table-gocit tfoot tr{
    border: 0;
}

table.table-gocit tfoot td{
    padding: 4px;
}

#img_bukti_bayar{
    width: 100%;
}

.btn-custom-navi{
    background-color: white;
    border: 1px solid #C0BCBC;
    color: black;
    border-radius: 4px;
}
.btn-custom-navi:hover{
    background-color: #11954D;
    color: white;
}
.btn-custom-navi.active{
    background-color: #11954D;
    color: white;
}
/* End Table Style */

#filter-div{
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    width: 320px;
    overflow: hidden;
    scrollbar-width: thin;
}

.td-with-dropdown{
    position: relative;
}

.btn-dropdown-aksi{
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.dropdown-aksi-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.dropdown-aksi-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-aksi-list:hover{
    background-color: #F0F0F0;
    cursor: pointer;
}

nav.customer-navbar ul a.btn,
nav.customer-navbar ul a.btn-large,
nav.customer-navbar ul a.btn-small,
nav.customer-navbar ul a.btn-large,
nav.customer-navbar ul a.btn-flat,
nav.customer-navbar ul a.btn-floating {
    margin-left: 4px;
    margin-right: 4px;
}
nav.customer-navbar .dropdown-content li>a, nav.customer-navbar .dropdown-content li>span {
    font-size: 12px;
}
.dropdown-content li>a.icon-wallet {
    line-height: normal;
    padding: normal;
    line-height: 36px;
    padding: 0 16px;
}

nav {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

/* .tabs {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    width: 100%;
    background-color: #F0F0F0;
    margin: 0 auto;
    white-space: nowrap;
}

.tabs .tab {
    display: inline-block;
    text-align: center;
    line-height: auto;
    height: auto;
    padding: 0;
    margin: 0;
    text-transform: uppercase;
}

.tabs .tab a {
    color: var(--red-gocit);
}

.tabs .tab a:hover, .tabs .tab a.active{
    background-color: var(--red-gocit);
    color: #fff;
}

.tabs .tab a:focus, .tabs .tab a:focus.active{
    background-color: var(--red-gocit);
    color: #fff;
}

.tabs .indicator{
    background-color: #fff;
} */



/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 992px) {
    .table-gocit{
        margin-bottom: 24px;
    }

    .content-gocit{
        left: 0;
        width: 100%;
        height: calc(100% - 64px);
        padding-bottom: 24px;
    }
    .content-gocit-header{
        height: 5%;
        margin-bottom: 12px;
    }
    .content-gocit-body{
        height: 95%;
        overflow-y: auto;
    }
    .mobo-order-2{
        order: 2;
    }
    .mobo-order-1{
        order: 1;
        margin-bottom: 8px !important;
    }
    .modal-30, .modal-40{
        width: 80% !important;
    }
    .body-content-filter{
        height: 15% !important;
    }
    .body-content-table{
        height: 85% !important;
    }
    .table-container{
        height: auto;
        overflow: hidden;
        overflow-x: auto;
    }
    .wrapper-transaksi{
        display: block;
        min-height: 100%;
        overflow: auto;
    }
    .detail-transaksi-header{
        display: block;
        height: 80%;
    }
    .detail-transaksi-body{
        height: auto;
        overflow: hidden;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {

}

/* mobile devices  */
@media only screen and (min-width: 320px) and (max-width:767px) {
    .content-gocit-customer{
        width: 100%;
        top: 0;
        height: 100%;
        transition: all 0.5s ease;
        z-index: 2;
        padding: 15px 0px;
        padding-bottom:0px;
    }
}