@import "pt-sans-narrow.css";
/* @import "material-symbol.css"; */
@import "bootstrap-icons.css";

th {font-family:"PT Sans Narrow";}

.datagrid-title{font-size:.625rem;font-weight:bold;text-transform:uppercase;letter-spacing:.04em;line-height:1rem;color:gray;margin-top:.25rem}
.daftar-diskon-status{display:none}
.w3-modal{z-index:1099; display:none; position:fixed; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto; background-color:#fff; position:relative; padding:10px; outline:0; width:100%; height:100%}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield; -webkit-appearance: none; appearance: textfield;}
label {font-size:0.8rem}
.show-read-more .more-text{display: none;}
.badge {font-weight:normal}
.pointer {cursor: pointer;}

/* Jam Pasir */
.lds-facebook {display:inline-block; position:relative; width:80px; height:100px;}
.lds-facebook div {display:inline-block; position:absolute; left:8px; width:20px; background:#ff6878; border:3px solid #fff43a; border-radius: 15px; animation:lds-facebook 1.5s cubic-bezier(0,0.5,0.5,1) infinite;}
.lds-facebook div:nth-child(1) {left:8px; animation-delay:-0.30s;}
.lds-facebook div:nth-child(2) {left:32px; animation-delay:-0.15s;}
.lds-facebook div:nth-child(3) {left:56px; animation-delay:0;}
@keyframes lds-facebook {0% {top:8px; height:84px;} 50%,100% {top:32px; height:32px;}}

.progres{ position: relative; height: 30px; width: 50%; border: 10px solid #fff43a; border-radius: 15px; }
.progres .warna{ position: absolute; background-color: #ff6878; width: 0px; height: 15px; border-radius: 15px; animation: progres 1.5s infinite linear; }
@keyframes progres{ 0%{ width: 0%; } 25%{ width: 50%; } 50%{ width: 75%; } 75%{ width: 85%; } 100%{ width: 100%; } };

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
* Add "left" or "right" in modal parent div, after class="modal".
* Get free snippets on bootpen.com
*******************************/
.modal.left .modal-dialog {
	position: fixed;
	margin: auto;
	height: 100%;
	animation: fromLeft 0.5s ;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	height: 100%;
	animation: fromRight 1s ;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}
.modal.bottom .modal-dialog {
	position: fixed;
	margin: auto;
	height: 95vh;
	animation: fromBottom 1s ;
	-webkit-transform: translate3d(0%, 0, 0);
	    -ms-transform: translate3d(0%, 0, 0);
	     -o-transform: translate3d(0%, 0, 0);
	        transform: translate3d(0%, 0, 0);
}
@media only screen and (min-width: 600px) {
	.modal.left .modal-dialog { width: 400px; }
	.modal.right .modal-dialog { width: 1300px; }
	.modal.bottom .modal-dialog { height: 95vh; }
}
.modal.left .modal-content, .modal.right .modal-content, .modal.bottom .modal-content { height: 100%; overflow-y: auto; background: rgb(240, 232, 248);}
.modal.left .modal-body, .modal.right .modal-body, .modal.bottom .modal-body { padding: 5px; }
/*Left*/
.modal.left.fade .modal-dialog{
	left: 0px;
	-webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, left 0.3s ease-out;
	        transition: opacity 0.3s linear, left 0.3s ease-out;
}
.modal.left.fade.in .modal-dialog{ left: 0; }
/*Right*/
.modal.right.fade .modal-dialog {
	right: 0px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, right 0.3s ease-out;
	        transition: opacity 0.3s linear, right 0.3s ease-out;
}
.modal.right.fade.in .modal-dialog { right: 0; }
/*Bottom*/
.modal.bottom.fade .modal-dialog {
	bottom: 0px;
	-webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
	   -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
	     -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
	        transition: opacity 0.3s linear, bottom 0.3s ease-out;
}
.modal.bottom.fade.in .modal-dialog { bottom: 0; }

@keyframes fromLeft {
  0%   {left: -400px; top: 0px;}
  100%  {left: 0px; top: 0px;}
}
@keyframes fromRight {
  0%   {right: -1300px; top: 0px;}
  100%  {right: 0px; top: 0px;}
}
@keyframes fromBottom {
  0%   {bottom: -95vh;}
  100%  {bottom: 0px;}
}