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

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

.w3-modal{z-index:3;display:none;padding-top:0;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:0;outline:0;width:100%;height:100%}

.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:80px;}
.lds-facebook div {display:inline-block; position:absolute; left:8px; width:16px; background:blue; border:3px solid red; border-radius: 15px; animation:lds-facebook 1.2s cubic-bezier(0,0.5,0.5,1) infinite;}
.lds-facebook div:nth-child(1) {left:8px; animation-delay:-0.24s;}
.lds-facebook div:nth-child(2) {left:32px; animation-delay:-0.12s;}
.lds-facebook div:nth-child(3) {left:56px; animation-delay:0;}
@keyframes lds-facebook {0% {top:8px; height:64px;} 50%,100% {top:24px; height:32px;}}

.progres{ position: relative; height: 30px; width: 50%; border: 10px solid blue; border-radius: 15px; }
.progres .warna{ position: absolute; background-color: red; width: 0px; height: 10px; border-radius: 15px; animation: progres 1s 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);
}

@media only screen and (min-width: 600px) {
	.modal.left .modal-dialog { width: 400px; }
	.modal.right .modal-dialog { width: 800px; }
}

.modal.left .modal-content, .modal.right .modal-content { height: 100%; overflow-y: auto; background: rgb(240, 232, 248);}
.modal.left .modal-body, .modal.right .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; }

@keyframes fromLeft {
  0%   {left: -320px; top: 0px;}
  100%  {left: 0px; top: 0px;}
}

@keyframes fromRight {
  0%   {right: -1100px; top: 0px;}
  100%  {right: 0px; top: 0px;}
}