/* Ubah warna tema */
/* Warna di bawah ini adalah default, silakan diubah nilai warnanya sesuai selera */

[data-theme=custom] {
  --primary-color: #155e75;
  --secondary-color: #0891b2;
  --accent-color: #ca8a04;
}

[data-theme=custom1] {
  --primary-color: #525FE1;
  --secondary-color: #F86F03;
  --accent-color: #FFA41B;
}

[data-theme=emerald-green] {
  --primary-color: #064635;
  --secondary-color: #519259;
  --accent-color: #E2C18B;
}

[data-theme=blue-sky] {
  --primary-color: #0369a1;
  --secondary-color: #0ea5e9;
  --accent-color: #d97706;
}

[data-theme=spirit-red] {
    --primary-color: #8c1c13;
    --secondary-color: #bf4342;
    --accent-color: #bb8588;
}

[data-theme=teal-wise] {
  --primary-color: #264653;
  --secondary-color: #2a9d8f;
  --accent-color: #e76f51;
}

[data-theme=pale-indigo] {
  --primary-color: #231942;
  --secondary-color: #825ab8;
  --accent-color: #db222a;
}

[data-theme=fruity-orange] {
  --primary-color: #942a00;
  --secondary-color: #07B1BC;
  --accent-color: #FD9319;
}

[data-theme=dark-brown] {
  --primary-color: #250902;
  --secondary-color: #735751;
  --accent-color: #ad2831;
}

[data-theme=midnight-green] {
  --primary-color: #22223b;
  --secondary-color: #656d4a;
  --accent-color: #936639;
}

:root {
  --primary-color: #002447;
  --secondary-color: #20639B;
  --accent-color: #FEA700;
  --fourth-color: #1f2937;
  --fifth-color: #2d3748;
  --sixth-color: #1a202c;
}

/* :root {
  --primary-color: #064635;
  --secondary-color: #519259;
  --accent-color: #F35588;
  --fourth-color: #1f2937;
  --fifth-color: #2d3748;
  --sixth-color: #1a202c;
} */
#loading {
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	margin: 0px;
	width: 100%;
	height: 100%;
	z-index: 1000;
	background: center no-repeat darkgrey;
	/*opacity: 95%;*/
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.no-js #loader { display: none;	}
.js #loader { display: block; position: absolute; left: 100px; top: 0; }

.loading-img {
	/*position: fixed;*/
	/*left: 47%;*/
	/*top: 30%;*/
	/*right: 0px;*/
	/*bottom: 0px;*/
	/*margin: 0px;*/
  margin-top: 15%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  max-width: 1275px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-left: .75rem;
  padding-right: .75rem;	
}

.loader {
	border: 2px solid #f3f3f3;
	border-radius: 50%;
	border-top: 10px solid var(--secondary-color);
	border-bottom: 10px solid var(--accent-color);
	border-right: 10px solid #ccc;
	border-left: 10px solid #ccc;
	/*border-top: 10px solid #3498db;*/
	/*border-bottom: 10px solid #FFC107;*/
    width: 50px;
	height: 50px;
	margin-top: 3.5%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    /*max-width: 1275px;*/
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-left: .75rem;
    padding-right: .75rem;

	-webkit-animation: spin 2s linear infinite;
	/*position: fixed;*/
	animation: spin 2s linear infinite;
}

.textLoader{
	/*position: fixed;*/
	/*top: 55%;*/
	/*left: 47%;*/
	
	margin-top: 1.2%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    max-width: 1275px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-left: .25rem;
    padding-right: .25rem;
	color: var(--sixth-color);
}

.pre-loader {
    background: inherit;
	  background-position-x: 0%;
	  background-position-y: 0%;
	  background-size: auto;
    background-position: center center;
    background-size: 13%;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 12345;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
.pre-loader .loader-logo {
  padding-bottom: 15px;
}

.pre-loader .loader-progress {
  height: 8px;
  border-radius: 15px;
  max-width: 200px;
  margin: 0 auto;
  display: block;
  background: #898a8a;
  overflow: hidden;
}

.pre-loader .bar {
  width: 0%;
  height: 8px;
  display: block;
  background: var(--secondary-color);
}

.pre-loader .percent {
  padding-top: 15px;
  text-align: center;
  font-size: 24px;

}

.pre-loader .loading-text {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}