.custom-header td:first-child {
    border-radius: 10px 10px 0px 0px !important;
    padding: 16px !important;
    background: #f0f0f0 !important;
}

.custom-header.bordered th {
    border: 1px solid rgb(236, 236, 236) !important;
}

/* .custom-header td:last-child {
        border-radius: 0px 10px 0px 0px !important;
        padding: 10px !important;
        background: #f0f0f0 !important;
    } */

.custom-header th {
    padding: 8px !important;
    background: #385622 !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
}

.custom-header th[bordered],
.custom-header td[bordered] {
    border: 1px solid #e6e6e6 !important;
    border-radius: inherit !important;
}

.custom-header label,
.custom-header select>option,
.custom-header td,
.custom-header th
 {
    font-size: 13.5px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

.custom-table thead th,
.custom-table thead td {
    border: none !important;
    border-color: none;
}

.custom-table {
    border-collapse: collapse !important;
}


.custom-body td,
.custom-footer-display td {
    padding: 10px !important;
    font-size: 13px !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

.custom-body tr:last-child {
    border-right: none !important;
}

.custom-body tr:first-child {
    border-left: none !important;
}

.custom-body td[bordered] {
    border: 1px solid #e6e6e6 !important;
}

.custom-body tr:nth-child(odd) {
    background: #f0f0f0;
}

.custom-body[bordered] td {
    border: 1px solid #e6e6e6 !important;
}

custom [type=search] {
    border-radius: 4px 0px 0px 4px;
    border: 1px solid #c9c9c9;
    /* height: 33px; */
    border-right: none;
    text-decoration: none !important;
    outline: none !important;
    padding-left: 6px;
    height: 35px !important;
    width: 290px !important;
}

custom [type=button] {
    border-radius: 0px 4px 4px 0px;
    border: none;
    height: 35px;
    position: relative;
    top: -1.5px;
    /* border-left: none; */
}

custom [type=button].button_search {
    background: #385622 !important;
    height: 35px;
    color: white !important;
}

custom [type=button].icon_search {
    /* background: #385622 !important;
        color: white !important; */
    border: 1px solid #c9c9c9 !important;
    border-left: none !important;
    /* background: white !important; */
    content: "\25AE";
    /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    width: 40px;
    height: 35px;
    margin: auto;
}

custom_pagination {
    gap: 0;
    display: flex;
    flex-wrap: wrap;
}

custom_pagination [type=button] {
    border-radius: 0px;
    border: none;
    height: 30px;
    width: 65px;
    text-align: center;
    margin: 0;
    gap: 0px;
    cursor: pointer;
    background: #385622;
    border-left: 1px solid white;
    color: white;
}

[type=button][selected_num] {
    background: #385622 !important;
}

[num_page],
[num_prev_page],
[num_next_page] {
    width: 45px !important;
    background-color: #757575 !important;
    /* dfdfdf */
}

custom_pagination [type=button]:last-child {
    border-radius: 0px 6px 6px 0px !important;
    /* border-left: none !important; */
    border-right: none !important;
}

custom_pagination [type=button]:first-child {
    border-radius: 6px 0px 0px 6px !important;
    border-left: none !important;
    /* border-right: none !important; */
}

.custom_pagination .num button:first-child {
    margin: 0;
    text-align: center;
    border-radius: 4px 0 0 4px !important;
}

.custom_pagination .num button:last-child {
    margin: 0;
    text-align: center;
    border-radius: 0 4px 4px 0 !important;
}

.table-footer {
    border-top: 1px solid #e2e2e2 !important;
}

.table-footer td:first-child {
    border-radius: 0px 0px 10px 10px;
    padding: 12px;
    background: #f0f0f0;
}

.table-footer #page_entries {
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

.table-footer select {
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    width: auto !important;
}

.table-footer select>option {
    font-size: 13.5px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}


/* ------------------------------------------ */
.table-footer-2 td {
    border-radius: 10px 10px 10px 10px;
    padding: 12px;
    background: #f0f0f0 !important;
}

.table-footer-2 #page_entries {
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    margin-top: 5px !important;
}

.table-footer-2 select {
    font-size: 14px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    width: auto !important;
}

.table-footer-2 select>option {
    font-size: 13.5px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

.table-footer-2 #page_entries {}

.table-footer-2 [type=button][disabled] {
    border: 1px solid white !important;
}

.table-footer-2 [type=button]:last-child {
    border: 1px solid white !important;
}

.table-footer-2 [type=button]:first-child {
    border: 1px solid white !important;
}

.table-footer-2 [type=button] {
    border: 1px solid white !important;
}


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

.custom-filter {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13.5px;
}

.custom-btn-continue {
    color: #fff;
    background-color: #337AB7;
    border-color: #337AB7;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    /* font-size: 1rem; */
    line-height: 1.5;
    border-radius: .25rem;
}

.custom-btn-success {
    /* color: #fff;
    background-color: #28a745;
    border-color: #28a745;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    line-height: 1.5;
    border-radius: .25rem; */
    background-color: #008000 !important;
    height: 32px;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13.5px;
    padding: 3px 15px 3px 15px;
    border: 1px solid Transparent;
    border-radius: 3px;
    color: #fff;
}

[first_page][disabled],
[prev_page][disabled],
[next_page][disabled],
[last_page][disabled],
[num_page][disabled] {
    background: gray !important;
}

.custom-btn-danger {
    color: #fff;
    background-color: #b82a2d;
    border-color: #64121a;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    /* font-size: 1rem; */
    line-height: 1.5;
    border-radius: .25rem;
}

.custom-body a {
    color: #7B68EE !important;
    text-decoration: none !important;
    outline: none !important;
    cursor: pointer;
}

.table_footer td {
    border-radius: 0px 0px 10px 10px;
    padding: 8px;
    background: #f0f0f0;
}


[input_field2] [type=text].required_field,
[input_field2] [type=number].required_field,
[input_field2] [type=date].required_field,
[input_field2] [type=password].required_field,
[input_field2] textarea.required_field,
[input_field2] select.required_field {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #b82a2d !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}

[input_field2] [type=text],
[input_field2] [type=number],
[input_field2] [type=date],
[input_field2] [type=password],
[input_field2] textarea,
[input_field2] select {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #c9c9c9 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}

[input_field2][type=text],
[input_field2][type=number],
[input_field2][type=date],
[input_field2][type=password],
[input_field2]textarea,
[input_field2]select {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #c9c9c9 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}

[input_field2][type=text].required_field,
[input_field2][type=number].required_field,
[input_field2][type=date].required_field,
[input_field2][type=password].required_field,
[input_field2]textarea.required_field,
[input_field2]select.required_field {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #c9c9c9 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}


[input_field] [type=text],
[input_field] [type=number],
[input_field] [type=date],
[input_field] [type=password],
[input_field] textarea,
[input_field] select {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #006401 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}

[input_field] [type=text].required_field,
[input_field] [type=number].required_field,
[input_field] [type=date].required_field,
[input_field] [type=password].required_field,
[input_field] textarea.required_field,
[input_field] select.required_field {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #b82a2d !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}

[input_field][type=text],
[input_field][type=number],
[input_field][type=date],
[input_field][type=password],
[input_field]textarea,
[input_field]select {
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid #006401 !important;
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
    height: 35px !important;
}

[input_field] input[type=checkbox],
[input_field] input[type=radio] {
    height: 18px !important;
    width: 18px !important;
}

input[type=checkbox],
input[type=radio] {
    height: 18px !important;
    width: 18px !important;
}

select>option {
    font-family: Verdana, Geneva, Tahoma, sans-serif !important;
    font-size: 13px !important;
}

.tahoma13,
.tahoma13 td,
.tahoma13 span {
    font-size: 13.5px !important;
    font-family: Tahoma !important;
}

.btn {
    font-size: 13.5px !important;
    font-family: Tahoma !important;
    height: 38px !important;
    border-radius: 4px !important;
    position: relative !important;
    border: none !important;
    min-width: 50px !important;
}

.btn:hover {
    top: -1.75px;
    transition: 100ms !important;
}

.btn i {
    font-size: 15px !important;
    border-right: 0.5px solid white !important;
    padding-right: 12px;
    margin-right: 10px;
}

.btn-sv {
    /* border: 1px solid #385622 !important; */
    background: #385622 !important;
    background-color: #385622 !important;
    color: white !important;
}

.btn-sv i {
    border-right: 0.5px solid white !important;
}

.btn-sv-sec {
    background-color: white !important;
    border: 1.5px solid #385622 !important;
    background: transparent !important;
    color: #385622 !important;
}

.btn-sv-sec i {
    border-right: 0.5px solid #385622 !important;
}


.btn-cn {
    /* border: 1px solid #b82a2d !important; */
    background: #b82a2d !important;
    background-color: #b82a2d !important;
    color: white !important;
}

.btn-cn i {
    border-right: 0.5px solid white !important;
}

.btn-cn-sec {
    background-color: white !important;
    border: 1.5px solid #b82a2d !important;
    background: transparent !important;
    color: #b82a2d !important;
}

.btn-cn-sec i {
    border-right: 0.5px solid #b82a2d !important;
}

.mdl-title font {
    font-size: 20px !important;
    font-family: tahoma !important;
    font-weight: bold !important;
}

.mdl-title {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    position: absolute;
    display: flex;
    /* top: 0px; */
    border-radius: 3px;
    padding: 10px 20px;
    /* min-width: 99%; */
    margin-left: 35px;
    margin-right: 35px;
    left: 0;
    right: 0;
    background: #385622 !important;
    color: white !important
}

.tab-title {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    position: absolute;
    display: flex;
    /* top: 0px; */
    border-radius: 3px;
    padding: 10px 20px;
    /* min-width: 99%; */
    margin-left: 12px;
    margin-right: 12px;
    /* left: 0;
    right: 0; */
    background: #385622 !important;
    color: white !important
}

.mdl-content {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 35px 20px 10px 10px;
    border-radius: 10px;
    margin-top: 20px;
}


.tab-content {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    /* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
    /* box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */
    /* box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px; */
    /* box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; */
    /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; */
    padding: 25px 20px 10px 15px;
    border-radius: 10px;
    margin-top: 20px;
}

.tab-content td {
    padding: 5px;
    cursor: pointer;
    transition: .15s;
}

/* .tab-content td:hover::before {
    content: ">>";
    transition: .5s;
} */
.tab-content td:hover {
    padding-left: 15px;
    transition: .15s;
    background: #e4fad6;
    color:#385622;
    font-weight: bold;
}


.mdl-filter {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
    padding: 10px !important;
    border-radius: 6px !important;
}

.due-card {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px !important;
    padding: 10px !important;
    border-radius: 6px !important;
    margin-right: 17px !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    min-height: 180px !important;
}

.due-card:nth-child(4n+1),
.due-card:nth-child(4n+2) {
    background: #f5f5f6 !important;
}

.cstm-row {
    max-width: 100% !important;
    width: 100% !important;
    /* display: flex !important; */
    position: relative !important;
    /* padding:10px !important; */
    border-radius: 6px !important;
    /* display: grid; */
    grid-auto-flow: column;
    grid-column-gap: 10px;
}

.col-3 {
    width: 32.7% !important;
    float: left;
}

.col-2 {
    width: 49% !important;
    float: left;
}

.cstm-col {}

.cstm-note {
    padding: 10px 8px !important;
    border-radius: 3px !important;
    background: #fffafa;
    border: 1px dashed #757575;
    font-size: 12px !important;
}

.waring-note {
    color: rgb(184, 93, 93) !important;
}

[input_group] :first-child {
    float: left !important;
    height: 35px !important;
    border-radius: 4px 0px 0px 4px !important;
    border-right: none !important;
    /* width: 90% !important; */
    display: flex !important;
    /* border: none !important; */
}

[input_group] :last-child {
    float: left !important;
    height: 35px !important;
    border-radius: 0px 4px 4px 0px !important;
    border: 1px solid #c9c9c9 !important;
    border-left: none !important;
    width: 35px !important;
    padding: 8px !important;
    background-color: #f5f5f6 !important;
    background: #f5f5f6 !important;
    text-align: center !important;
}

/* toltep */
.tooltip-container {
    display: flex;
}

/* Container Tooltip */
.tooltiper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-right: 40px; */
    cursor: pointer;
}

.tooltipText.success {
    padding: 10px 15px;
    color: rgba(25, 135, 84, 0.5);
    border: 1px dashed rgba(130, 255, 197, 0.5) !important;
}

.tooltipText.error {
    padding: 10px 15px;
    color: white;
    background-color: #e63b35 !important;
    background: #e63b35 !important;
    border: 1px solid white !important;
}

.tooltipText.warning {
    padding: 10px 15px;
    color: rgb(255, 193, 7, 0.5);
    border: 1px solid rgba(253, 203, 51, 0.5) !important;
}

.tooltipText.info {
    padding: 10px 15px;
    color: white;
    background-color: #337ab7 !important;
    background: #337ab7 !important;
    border: 1px solid white !important;
}

.tooltipText.link {
    padding: 10px;
    color: #337ab7;
    background-color: white !important;
    background: white !important;
    /* border: 1px solid #337ab7 !important; */
    /* display: flex; */
}


/* Style text tooltip */
.tooltipText {
    background-color: #fff;
    position: absolute;
    top: 100%;
    /* padding: 10px 15px; */
    border-radius: 5px;
    font-size: 14px;
    opacity: 0;
    transition: all .5s;
    border: 1px dashed gray;
    min-width: 200px !important;
}


/*  Membuat dan style tip*/
.tooltipText::after {
    content: '';
    border-width: 5px;
    border-style: solid;
    border-color:  transparent transparent #000000 transparent;
    position: absolute;
    bottom: 100%;
    left: 40%;
    margin-left: 5%;
}

.tooltipText.success::after {
    content: '';
    border-width: 5px;
    border-style: solid;
    border-color:  transparent transparent rgba(25, 135, 84, 0.5) transparent;
    position: absolute;
    bottom: 100%;
    left: 40%;
    margin-left: 5%;
}


.tooltipText.error::after {
    content: '';
    border-width: 5px;
    border-style: solid;
    border-color:  transparent transparent #e63b35 transparent;
    position: absolute;
    bottom: 100%;
    left: 40%;
    margin-left: 5%;
}

.tooltipText.warning::after {
    content: '';
    border-width: 5px;
    border-style: solid;
    border-color:  transparent transparent rgb(255, 193, 7, 0.5) transparent;
    position: absolute;
    bottom: 100%;
    left: 40%;
    margin-left: 5%;
}

.tooltipText.info::after {
    content: '';
    border-width: 5px;
    border-style: solid;
    border-color:  transparent transparent #337ab7 transparent;
    position: absolute;
    bottom: 100%;
    left: 40%;
    margin-left: 5%;
}

/* Hover text tooltip */
.tooltiper:hover .tooltipText {
    opacity: 1;
    transform: translateY(6px);
}

.tooltipText label {
    margin-left : 8px;
    margin-right : 8px;
    position: relative;
    cursor: pointer;
}

.tooltipText item {
    /* display: flex; */
    /* margin: 2px; */
    /* position: relative; */
    cursor: pointer;
    width: 95%;
    float: left;
    padding : 6px;
}

.tooltipText item:hover {   
    background-color: #337ab7;
    background: #337ab7;
    color: white;
    border-radius: 4px;
}

/* normal table style*/
.modern-table {
    width: 100%;
    border-collapse: collapse !important;
}
.modern-table th, .modern-table tr:first-child td  {
    padding : 8px !important;
    font-size: 14px !important;
    border: 1px solid #e6e6e6 !important;
    background: #385622 !important;
    color : white !important;
}

.modern-table td {
    font-family: Tahoma !important;
    font-size: 13.5px !important;
    padding : 6px !important;
    border: 1px solid #e6e6e6 !important;
}

.modern-table tbody tr:nth-child(odd) {
    background: #f0f0f0 !important;
}