/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    /* slate */
    --theme: #eab308;
    --color-theme: #eab308;
	--color-theme-hover: #facc15;
	--color-dark: #1e293b;
	--color-dark-hover: #2563eb;
	--color-light: #f1f5f9;
	--color-light-hover: #f8fafc;
    --color-hicome-design: rgb(236, 240, 244);
}
*{
	font-family: sans-serif;
	box-sizing: border-box;
	text-decoration: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
	font-weight: 500;
	color: #475569;
}
.text-success{
    color: var(--color-theme) !important;
}
.bg-success-theme{
    background: var(--color-theme) !important;
}
.bg-opacity-theme{
    background: rgba(237, 252, 245, 0.7) !important;
}
input:read-only {
    background-color: #eee;
  }
.brand{
    font-family: 'Poppins', sans-serif;
}
::-webkit-input-placeholder { /* Edge */
	color: #ccc !important;
	font-size: 0.8rem !important;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #ccc !important;
	font-size: 0.8rem !important;
}

::placeholder {
	color: #ccc !important;
	font-size: 0.8rem !important;
}
body, label, header, main, footer{
	padding: 0;
	margin: 0;
}
b, h1, h2, h4, h5, h6, p{
	margin: 0;
	padding: 0;
}
h3{
	margin-bottom: 1rem;
}
ul {
    padding-left: 0;
}
a{
	text-decoration: none;
}
i.las{
	font-size: 1.1rem;
	display: inline-block;
	/* background: rgba(0, 0, 0, 0.02); */
	background: #fff2ca;
	color: #eab308;
	padding: 0.3rem;
	border-radius: 0.3rem;
}
i.x2{
	font-size: 1.5rem;
}
.mh-100{
    min-height: 90vh !important;
}
.smaller{
    font-size: 0.8rem !important;
}
.group{
    text-transform: uppercase;
    font-size: 0.6rem;
    margin-bottom: 0.5rem;
}
.very-small{
    font-size:small;
}
.theme-dark,
.theme-dark a {
    color: rgba(255, 255, 255, 0.7);
}

.theme-light,
.theme-light a {
    color: rgba(0, 0, 0, 0.7);
}
.bg-main{
	background: #f1f5f9;
}
.bg-theme-color {
    background: var(--theme);
}

.bg-primary-color {
    background: var(--theme);
}
.bg-light{
    background: #f9fafc !important;
    /* background: #f1f5f9 !important; */
}
.bg-dark{
	background: var(--theme) !important;
}
.text-dark{
	color: var(--theme) !important;
}
.btn-dark{
	background: var(--color-dark);
	border-color: var(--color-dark);
}
.btn-dark:hover{
	background: var(--color-dark-hover);
	border-color: var(--color-dark-hover);
}
.btn-light{
	background: var(--color-light);
	border-color: var(--color-light);
}
.btn-light:hover{
	background: var(--color-light-hover);
	border-color: var(--color-light-hover);
}
.btn-success{
	background: var(--color-theme);
	border-color: var(--color-theme);
}
.btn-success:hover{
	background: var(--color-theme-hover);
	border-color: var(--color-theme-hover);
}
.navbar{
    padding: 0;
}
.menu-side{
    font-size: 0.999rem;
}
.menu-side i{
    margin-right: 0.5rem;
}
/* .accordion{
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.accordion-button, .accordion-body {
    padding: 0.5rem;
} */

/* .menu-side a:hover{
    background:#f8f9fa;
    border-radius: 0.3rem;
} */
/* .actived{
    border-bottom: 3px solid var(--secondary);
} */
.active-menu{
    border-radius: 0.3rem;
    color: #eab308 !important;
    background: rgba(234, 179, 8, 0.1) !important;
}
.active-menu i{
    color: #eab308 !important;
	background: #fff2ca;
}

.help-block{
	color: red;
}
.form-control{
	border-radius: 0.2rem;
}
.control-label{
	font-weight: bold;
	margin-top: 0.5rem;
}
.alert{
	border-radius: 0.2rem;
}
.btn{
	border-radius: 0.2rem;
	padding: 0.375rem 1rem;
}

.breadcrumb{
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	padding-left: 1rem;
	border-bottom: 0px solid #eee;
	margin-bottom: 0;
	background: #fff;
	font-size: 0.5rem !important;
}
.breadcrumb, .breadcrumb a{
	color: #94a3b8;
}
.breadcrumb-item.active {
    color: var(--color-main) !important;
    background: transparent;
}
.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #94a3b8;
    content: "-";
}

/* gridview */
.grid-view table.table, 
.detail-view{
	background: #fff;
	color: #555;
	margin-top: 1rem;
}

/* .table-striped > tbody > tr:nth-of-type(odd) > * , */
.grid-view .table-striped > tbody > tr:nth-of-type(odd) > * {
    /* --bs-table-color-type: var(--bs-table-striped-color); */
    --bs-table-bg-type: rgba(244, 247, 252,0.7) !important;
}
.grid-view .table-bordered, 
.grid-view .table-bordered th, 
.grid-view .table-bordered td,
.detail-view th,
.detail-view td{
    border: 1px solid #eee;
	padding: 0.5rem;
}
.grid-view .filters{
	background: #fff;
	border-bottom: none;
}
.grid-view .filters td{
	padding-top: 0;
	border-top: none;
	border-bottom: none;
}

/* .grid-view .filters td .form-control:focus,
.grid-view .filters td .form-control:active{
	border-color: #25a89d;
	outline: 2;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
} */
.grid-view .filters td .form-control{
	/* padding: 0.3rem; */
	box-shadow: none;
	border-radius: 0.35rem;
	/* border: none; */
	/* border-bottom: 2px solid var(--color-main); */
	/* margin: 0 0 .3rem 0; */
	transition: 0.2s;
}
/* .grid-view .filters td .form-control:focus,
.grid-view .filters td .form-control:active{
	border-bottom: 2px solid var(--color-secondary);
} */
/* .grid-view .table thead th{
	border-top: none;
	border-bottom: none;
    vertical-align: bottom;
    border-bottom: 1px solid #fff;
	padding-top: .5rem;
	padding-bottom: 0;
} */
.grid-view .table thead th {
	padding-bottom: 0.5rem;
    border-top: none;
    vertical-align: bottom;
    border-bottom: 1px solid #fff;
}
.grid-view .table thead th,
.grid-view .table thead th a {
	font-weight: 600;
	color: #475569;	
}
.detail-view .custom-color,
.grid-view .custom-color{
	background: #64748b;	
}
.grid-view .table-striped > tbody > tr:nth-of-type(odd) > *{
	background-color: rgba(244, 247, 252,0.5) !important;
}
.grid-view .table > tbody > tr > td {
    vertical-align: middle;
}
.grid-view .table i.las{
	font-size: 1.2rem;
	vertical-align: middle;
}
.grid-view .table tbody tr td a{
	color: #777;
	background: transparent;
	display: inline-block;
	padding: 0.1rem;
	font-size: 0.8rem !important;
}
.grid-view .table tbody tr td a:hover{
	color: #333;
}
/* add sorting icons to gridview sort links */
.grid-view a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}
.grid-view a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}
.grid-view a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}
.table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
    background-color: var(--bs-table-bg);
    border-bottom-width: 0;
    box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.grid-view .status{
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
}
.grid-view svg path{
    color: #777;
}

.pagination{
    justify-content: center;
}
.pagination li {
    /*padding: 7px 15px;*/
    font-size: 0.9rem;
    padding: 4px 13px;
    background: transparent;
    /* border: 1px solid #ddd; */
}

.pagination .active {
    background: var(--color-theme);
    border: 1px solid var(--color-theme);
    border-radius: 0.3rem;
    /*color: #fff;*/
}

.pagination a {
    color: #555;
    text-decoration: none;
}

.pagination .active a {
    color: #fff;
}

/* JUI Datepicker */
.ui-widget-header {
    border: none;
    background: #fff;
    font-weight: normal;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button{
	text-align: center;
    border: none;
    background: #fff;
}
.ui-state-active,
.ui-widget-content .ui-state-active{
    color: #fff;
    font-weight: bold;
    background: var(--color-theme);
	border-radius: 0.125rem;
}
/* .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid var(--color-teal);
    background: var(--color-teal);
    color: #fff;
} */

.select2-container--krajee-bs3 .select2-selection {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #555555;
    font-size: 14px;
    outline: 0;
}
.select2-container--krajee-bs3 .select2-selection--single .select2-selection__arrow {
    border: none;
    border-left: 0px solid #dee2e6;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    position: absolute;
    height: 32px;
    top: 1px;
    right: 1px;
    width: 20px;
}
.select2-container--krajee-bs3 .select2-results__option--highlighted[aria-selected] {
    /* background-color: #10b981;
    color: #fff; */
    background-color: #f1f1f1;
    color: #000;
}
.select2-container--krajee-bs3 .select2-results__option.select2-results__option--selected, .select2-container--krajee-bs3 .select2-results__option[aria-selected=true] {
    color: var(--theme);
    background-color: #d1fae5;
}
.select2-container--krajee-bs3 .select2-dropdown {
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border-color: #dee2e6;
    overflow-x: hidden;
    margin-top: -1px;
}
.select2-container--krajee-bs3.select2-container--open .select2-selection, .select2-container--krajee-bs3 .select2-selection:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(0,0,0, 0.1);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px rgba(0,0,0, 0.1);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border-color: #fff;
}
.has-success .select2-container--open .select2-selection, .has-success .select2-container--krajee-bs3.select2-container--focus .select2-selection {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: none;
}
.has-success.select2-container--krajee-bs3 .select2-dropdown, .has-success .select2-container--krajee-bs3 .select2-selection {
    border-color: #dee2e6;
}
.has-success .select2-container--open .select2-selection, .has-success .select2-container--krajee-bs3.select2-container--focus .select2-selection {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
    border-color: #dee2e6;
}


.datepicker table tr td.today {
    color: #fff;
    background-color: var(--color-theme);
    border-color: var(--color-theme);
}
.datepicker table tr td.today:hover{
    background-color: #53bd9a;
    color: #fff;
}

.file-preview .fileinput-remove {
	border: none;
	padding: 0.5rem;
	background: #fff;
}

.tag100{
	width: 100px !important;
}


.grid-view .table-custom {
    width: 100%;
    /* border-collapse: separate !important;
    border-spacing: 0 10px !important; */
}
.grid-view .table-custom > thead > tr > th > a{
    color: #475569;
    font-weight: bold;
}
.grid-view .table-custom > thead > tr{
    border: 1px solid #e2e8f0;
}
.grid-view .table-custom > thead > tr > th{
    background: #f9fafc;
    /* border: 1px solid #e2e8f0; */
    padding: 8px;
    font-weight: bold;
}
.grid-view .table-custom > tbody > tr {
    border: 1px solid #e2e8f0;
}
.grid-view .table-custom > tbody > tr > td {
    padding: 9px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    color: #666;
}
/* .grid-view .table-custom > tbody > tr > td > a > svg{
    display: inline-block;
    font-size: inherit;
    height: 1rem;
    overflow: visible;
    vertical-align: -0.125em;
    border: 1px solid #ddd;
    width: 1rem;
    padding: 5px;
} */
/* .grid-view .table-custom > tbody > tr > td:first-child{
    border-radius: 0.3rem 0 0 0.3rem;
    border-left: 1px solid #e2e8f0;
}
.grid-view .table-custom > tbody > tr > td:last-child{
    border-radius: 0 0.3rem 0.3rem 0;
    border-right: 1px solid #e2e8f0;
} */
/* .grid-view .table-custom td:first-child, 
.grid-view .table-custom th:first-child
{
    background: #e5f3ee;
    position:sticky;
    left:0;
    z-index:1;
}
.grid-view .table-custom td:nth-child(2), 
.grid-view .table-custom th:nth-child(2)
{
    background: #e5f3ee;
    position:sticky;
    left:130px;
    z-index:1;
} */
.grid-view .table-custom i.las{
	font-size: 1rem;
	display: inline-block;
	/* background: rgba(0, 0, 0, 0.02); */
	background: #fff;
	color: #10b981;
	padding: 0.3rem;
	border-radius: 0.3rem;
}
.summary{
    margin: 0.5rem 0;
}
.nomor{
    width: 17px;
    height: 17px;
    font-size: 0.7rem;
    border: 1px solid var(--theme);
    color: var(--theme);
    margin: 0.1rem auto;
    border-radius: 50%;
}
.st-active, .st-inactive{
    width: 7px;
    height: 7px;
    margin-right: 0.3rem;
    border-radius: 50%;
    display: inline-block;
    background: var(--color-theme);
}
.st-inactive{
    background: rgb(228, 87, 87);
}
.form-label{
    font-weight: bold;
}
.bg-theme{
    /* background-color: var(--color-hicome); */
    background-image:
        linear-gradient(to top, rgba(255, 255, 255, 1), rgba(210, 210, 210, 0), rgba(255, 255, 255, 1)),
        linear-gradient(var(--color-hicome-design) 0.05rem, transparent 0.05rem),
        linear-gradient(90deg, var(--color-hicome-design) 0.05rem, transparent 0.05rem);
    background-size:
        100%,
        2rem 2rem,
        2rem 2rem;
    /* color: #fff; */
}
.btn-kecil{
    padding: 0.1rem 0.5rem !important;
    background: #fff;
    
}
.marking{
    background: #f1f1f1;
    display: inline-block;
    margin: 0;
    min-width: 30px;
    padding: 0.2rem;
    text-align: center;
    color: #000;
    cursor: pointer;
    font-size: 0.7rem;
    border-radius: 0.3rem;
    margin-bottom: 0.2rem;
    vertical-align: middle;
}
.marking-done{
    background: var(--color-theme);
    color: #fff;
}

.jadwal{
    overflow:auto;
    width:100%;
    height:200px;
}
.jadwal td,
.jadwal th {
    border: 1px solid #000;
    width: 100px;
}
.jadwal th {
    background-color:red;
}
  
.jadwal table {
    table-layout: fixed;
    width:100%;
}
.jadwal td:first-child, .jadwal th:first-child {
    position:sticky;
    left:0;
    z-index:1;
    background-color:grey;
}
.jadwal td:last-child, 
.jadwal th:last-child {
    position:sticky;
    right:0;
    z-index:1;
    background-color:blue;
}
.jadwal thead tr th {
    position:sticky;
    top:0;
}
.jadwal th:first-child, .jadwal th:last-child {z-index:2;background-color:red;}
.jp{
    border-bottom: 1px solid #ddd !important;
}
.jp:last-child{
    border: none !important;
}
.j-i i.las{
	font-size: 0.9rem !important;
	display: inline-block;
	/* background: rgba(0, 0, 0, 0.02); */
	background: transparent !important;
    color: inherit !important;
	padding: 0 !important;
	border-radius: 0;
}
/* .jp-input{
    width: 100%;
    background-color: red;
    display: block;
}
.jp-input input{
    float: left;
    width: 30% !important;
}
.jp-submit{
    float: left;
    background: red;
    width: 30% !important;
} */

.wall{
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    height: 100%;
}
.krajee-default .file-footer-buttons {
    float: right;
    display: none;
}
.note-popover .popover-content, .card-header.note-toolbar{
    background: #fff !important;
}