.btn-sm-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.428571429;
    border-radius: 50%;
}

.bg-hl-yellow-100 {
    background-color: #ffff98 !important;
    border-radius: 25%;
    border: 1px solid #e9e97b;
    padding: 3px !important;
}

.side-icon {
    color: black !important;
}

.text-link {
    color: #1a1a7a !important;
    font-weight: 600 !important;
}

.text-table-header {
    color: #fff !important;
}

.btn-modal {
    padding: 10px 5px;
    width: calc(50% - 10px);
}

.btn-excel {
    background: #13bb6d;
    color: #fff;
}

.btn-excel:hover {
    background: #fff;
    color: #13bb6d;
}

.icon-excel {
    color: #fff;
}

.btn-excel:hover>.icon-excel {  
    color: #13bb6d;
}

.btn-reset {
    background: #a50202;
    color: #fff;
}

.btn-reset:hover {
    background: #fff;
    color: #a50202;
}

.icon-reset {
    color: #fff;
}

.btn-reset:hover>.icon-reset {  
    color: #a50202;
}

.btn-refresh {
    background: #720159;
    color: #fff;
}

.btn-refresh:hover {
    background: #fff;
    color: #720159;
}

.preview-file {
    height: 80vh;
}

.icon-refresh {
    color: #fff;
}

.btn-refresh:hover>.icon-reset {  
    color: #720159;
}

.btn-show {
    background: #1e73ac;
    color: #fff;
}

.btn-show:hover {
    background: #fff;
    color: #1e73ac;
}

.nav-link.active .icon .side-icon {
    color: white !important;
    opacity: 1;
}

.icon-master {
    opacity: 10!important;
}

.pencarian::placeholder {
    color: rgba(66,153,225,0.9);
}

.pencarian:-ms-input-placeholder {
    color: rgba(66,153,225,0.9);
}

.pencarian::-ms-input-placeholder {
    color: rgba(66,153,225,0.9);
}

svg.h-5.w-5.stroke-current {
    width: 20px!important;
}

.filter-wrap {
    overflow-wrap: anywhere;
}

input.w-full.pl-10.py-3.text-sm.leading-4.block.rounded-md.border-gray-300.shadow-sm.focus\:border-blue-300.focus\:ring.focus\:ring-blue-200.focus\:ring-opacity-50.focus\:outline-none {
    padding: 5px 15px;
}

button[class="flex items-center space-x-2 px-3 border border-green-400 rounded-md bg-white text-green-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 focus:outline-none"] {
    padding-right: 5px !important;
}

.master {
    color:black; 
    box-shadow: 0 .15rem 1.75rem 0 rgba(58, 59, 69, .15) !important;
    border-radius: 10px;
    text-align: center;
    background-color: white;
    -webkit-transition: 1s ease-out;
    -moz-transition: 1s ease-out;
    -o-transition: 1s ease-out;
    transition: 1s ease-out;
    font-size: 20px;
}
.master:hover {
    transition: 0.2s ease-in;
    border-radius: 12px;
}

.show-hide-option {
    margin-top: 0!important;
}

.filter {
    background-color: rgb(0, 60, 255) !important;
    padding: 2px 10px;
}

.filter:hover {
    background-color: rgb(255, 0, 0) !important;
}

.remove-filter {
    color: #e8e8e8 !important;
}

.text-breadcrumb {
    color: #fff !important;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}

.scroll::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
}

.scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: transparent;
}

.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                    left bottom,
                    left top,
                    color-stop(0.44, rgb(167, 28, 104)),
                    color-stop(0.72, rgb(143, 34, 66)),
                    color-stop(0.86, rgb(104, 8, 72)));
}

.scroll-table::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
}

.scroll-table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: transparent;
}

.scroll-table::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
                    left bottom,
                    left top,
                    color-stop(0.44, rgb(22, 10, 133)),
                    color-stop(0.72, rgb(45, 44, 143)),
                    color-stop(0.86, rgb(14, 34, 100)));
}

.focus\:outline-none:focus {
    outline: 4px solid #90e0ff63;
    outline-offset: 0px;
}

.filter-padding {
    padding: 3px 5px;
}

.btn-edit, .btn-delete, .btn-action {
    width: 35px !important;
    height: 35px !important;
    font-size: 16px;
}

.absolute.inset-y-0.right-0.pr-2.flex.items-center {
    background: #fff0;
}

select.mt-1.form-select.block.w-full.pl-3.pr-12.py-2.text-base.leading-6.border-gray-300.focus\:outline-none.focus\:shadow-outline-blue.focus\:border-blue-300.sm\:text-sm.sm\:leading-5 {
    padding-right: 30px;
}

.relative.flex.w-full.items-center.p-2.group .absolute.inset-y-0.right-0.pr-2.flex.items-center {
    background: transparent !important;
}


.clear-reset {
    color: #ed5a5ac4!important;
}

.btn-action {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    border-image: initial;
}

.search {
    margin-bottom: 20px;
}

.table-body {
    font-size: 12px!important;
}

#ui-datepicker-div {
    z-index: 1100!important;
}

ul.dropdown-menu.inner.show {
    margin-top: -31px!important;
    margin-bottom: 0px;
}

.must {
    color: #f00;
}

.back-link {
    color: #e4ff00;
}

.navbar-vertical.navbar-expand-xs:hover{
    overflow-y: auto;
    border-radius: 6px;
}

.navbar-vertical.navbar-expand-xs {
    overflow-y: hidden;
}

.alert-dismissible .btn-close {
    padding: 0.67rem 1rem !important;
}

span.relative.group.cursor-pointer {
    display: block;
    border-bottom: none;
    cursor: auto;
}

.bg-navbar {
    background-image: linear-gradient(310deg, #7928CA 0%, #7928CA 100%);
}

.nav-item .nav-link i.active {
    color: #FFF700;
}

.flow-card .master a:hover, .flow-card-2 .master a:hover, .flow-vertical .master a:hover, .last-flow .master a:hover {
    color: #1d9136;
}

.flow-card .master a, .flow-card-2 .master a, .flow-vertical .master a, .last-flow .master a {
    color: #508eff;
}

.btn-primary, .btn.bg-gradient-primary {
    color: #fff !important;
}

.btn-close {
    color: #000;
}

.btn-close:hover {
    color: rgb(88, 88, 88);
}

.tipe-radio {
    margin-left: -1.3rem!important;
}

.absolute.inset-y-0.right-0.pr-2.flex.items-center svg {
    color: #00000045;
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    overflow-x: hidden;
}

.filter-time::-webkit-inner-spin-button, .filter-time::-webkit-calendar-picker-indicator {
    background: none;
    display: none;
    -webkit-appearance: none;
}

.modal-header {
    padding-top: 5px;
    padding-bottom: 5px;
}

.btn-close {
    padding-top: 5px!important;
}

.filter-date::-webkit-inner-spin-button, .filter-date::-webkit-calendar-picker-indicator {
    display: none;
    appearance: none;
    -webkit-appearance: none;
}

.bold {
    font-weight: bold;
}

.accordion-header-sub {
    font-size: 11px !important;
    color: #0b620b !important;
}

.accordion-header-main {
    font-size: 13px !important;
    color: #000000 !important;
}

.form-check-input:checked[type="radio"] {
    background-image: linear-gradient(310deg, #082fff 0%, #ff6fde 100%);
}

.active.icon.icon-shape.icon-sm.shadow.border-radius-md.bg-white.text-center.me-2.d-flex.align-items-center.justify-content-center {
    background-image: linear-gradient(310deg,#cb0c9f 0%,#cb0c9f 100%);
}

.sidenav {
    border-right: 1px solid #7a787830 !important;
}

.nav-link .active .side-icon {
    color: #fff !important;
    opacity: 1;
}

.floating-button {
    position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
    font-size: 25px;
	box-shadow: 2px 2px 3px #999;
}

.flow-card {
    position: relative;
    padding-right: 0px !important;

}

.flow-card:after {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    top: calc(40% - 3px);
    width: 9px;
    height: 5px;
    border-style: solid;
    color: white; 
} 

.arrow-1 {
    right: 11px;
    width: 48px;
    height: 16px;
    display: flex;
    position: relative;
    top: 30px;
}  

.arrow-1:before {
    content: "";
    background: currentColor;
    width:30px;
    clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
}

.flow-card-2 {
    position: relative;
    padding-right: 0px !important;
}

.flow-card-2:before {
    content: " ";
    display: block;
    position: absolute;
    height: 5px;
    width: 13px;
    left: 100%;
    top: calc(50% - 2px);
}

.bg-header-table {
    background-image: linear-gradient(344deg, #3b4483 0%, #22358f 30%,#16197c 100%);
}

.bg-filter {
    background-color: #74819540;
}

.last-flow {
    padding-right: 0px !important;
}

.flow-vertical { 
    position: relative;
    padding-right: 0px !important;
}

.flow-vertical:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 24px;
    width: 5px;
    transform: translate(50%, 100%);

}


.side-dropdown {
    display: none !important;
}

.notify {
    position: fixed;
    z-index: 99999;
    top: 100px;
    right: 25px;
}

.toast {
    background: rgb(255,255,255);
    margin-bottom: 5px;
}

.success {
    color: #ffffff;
    background-color: rgb(8 197 101 / 85%)
}

.danger {
    color: #ffffff;
    background-color: rgba(255, 0, 0, 0.85)
}

.warning {
    color: #000000;
    background-color: rgba(255, 230, 9, 0.986)
}

.text-muted-success, .text-muted-danger {
    color: #fff
}

.text-muted-warning {
    color: #000;
}

a:hover {
    cursor: pointer;
}

.select2-container--default .select2-selection--single , .select2 .select2-container .select2-container--default .select2-container--below .select2-container--focus{
    height: 46px !important;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d2d6da;
    appearance: none;
    border-radius: 0.5rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 85% !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
}
.select2-container--default .select2-selection--single {
    border: 1px solid #CCC !important;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.ui-droppable-hover{
    border: 2px dashed #21cdfd
  }

  /* .select2-container .select2-selection--multiple {
    min-height: 100px;
  } */

  .form-control[readonly] {
    background-color:white;
  }

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

@media (max-width: 576px) {
    .flow-card:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 50px;
        width: 5px;
        transform: translate(50%, 100%);
    }

    .flow-card-2:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 50px;
        width: 5px;
        transform: translate(50%, 100%);
    }

    .flow-vertical:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 50px;
        width: 5px;
        transform: translate(50%, 100%);
    }

    .new-row:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 50px;
        width: 5px;
        background: rgb(173, 8, 8);
        transform: translate(50%, 100%);
    }

    .link-flow {
        position: relative;
    }

    .link-flow:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 50px;
        width: 5px;
        background: rgb(173, 8, 8);
        transform: translate(50%, 100%);
    }

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

@media (min-width: 576px) and (max-width:1199.99px) {
    .flow-vertical:after {
        display: none;
    }

    .flow-card:after {
        display: none;
    }

    .flow-card-2:before {
        display: none;
    }

    .new-row:after {
        display: none;
    }

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

    
    
}