/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 23 2026 | 12:40:09 */
.loadingDiv, .loading {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 3000;
    padding-top: 23%;
	/*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	background: rgba(255,255,255,0.9) no-repeat fixed center;
}

.loadingDiv, .loading2 {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 3000;
    padding-top: 23%;
	/*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	background: rgba(255,255,255,0.9) no-repeat fixed center;
}

.loadingPrint, .loading {
    z-index: 3000;
    /*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	background: rgba(255,255,255,0.9) no-repeat fixed center;
}

.loadingPrint, .loading2 {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 3000;
	/*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	background: rgba(255,255,255,1) no-repeat fixed center;
	border:solid 1px #ccc;
}


/*------------------Loading print 2--------------------*/

.loadingDiv2, .loading {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 3000;
    padding-top: 23%;
	/*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	background: rgba(255,255,255,0.9) no-repeat fixed center;
}

.loadingDiv2, .loading2 {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 3000;
    padding-top: 23%;
	/*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	background: rgba(255,255,255,0.9) no-repeat fixed center;
}

.loadingPrint2, .loading {
    z-index: 3000;
    /*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	/*background: rgba(255,255,255,0.9) no-repeat fixed center;*/
}

.loadingPrint2, .loading2 {
    position: fixed;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 3000;
	/*background: rgba(0,0,0,0.7) url('<?php echo base_url();?>assets/images/loading.gif') no-repeat fixed center;*/
	background: rgba(255,255,255,0.5) no-repeat fixed center;
	border:solid 1px #ccc;
}

/*------------------Loading print 2--------------------*/

#logocontainer{
  display:block;
  position:absolute;
  top:50%;
  left:50%;
  width:22vh;
  height:22vh;
  margin-left:-11vh;
  margin-top:-11vh;
  overflow:hidden;
  transition:background-color 1900ms;
  cursor:pointer;
}

#pelogo{
  display: block;
  position: absolute;
  left: 1vh;
  top: 1vh;
  width: 20vh;
  height: 20vh;
  background: #fff;
  background-size: contain;
  font-family: Trebuchet MS, sans-serif;
  font-size: 12vh;
  font-weight: bold;
  color: #3ebffa;
  text-align: center;
  line-height: 20vh;
  border-right:solid 1px #0f9aee;
  border-bottom:solid 1px #0f9aee;
  border-left:solid 1px #000;
  border-top:solid 1px #000;
}

.loading{
	color: #555;
    font-size: 2vh;
    position: absolute;
    z-index: 999;
    left: 0px;
    text-align: center;
    right: 0px;
    background: transparent;
    line-height: 28vh;
}

.loader{
  display:block;
  position:absolute;
  background:#0f9aee;
}

.loader2{
  display:block;
  position:absolute;
  background:#000;
}

.effect1{
	left:1vh;
	top:0;
	height:1vh;
	width:0;
	animation:slide1 2s linear forwards infinite;
}

.effect2{
	right:0;
	top:1vh;
	width:1vh;
	height:0;
	animation:slide2 2s linear forwards infinite;
	animation-delay:1s
}

.effect3{
	right:1vh;
	bottom:0;
	height:1vh;
	width:0;
	animation:slide3 2s linear forwards infinite;
}

.effect4{
	left:0;
	bottom:1vh;
	width:1vh;
	height:0;
	animation:slide4 2s linear forwards infinite;
	animation-delay:1s
}

.color-blue{
	color:#0f9aee !important;
}

.color-black{
	color: #000!important;
	text-align:left;
}

/*Pretty complex animation, so each side needs its own @keyframes.*/

@keyframes slide1{
  50%{width:22vh; margin-left:0; }
  100%{margin-left:22vh;}  
}

@keyframes slide2{
  50%{height:22vh; margin-top:0; }
  100%{margin-top:22vh;}
}

@keyframes slide3{
  50%{width:22vh; margin-right:0;}
  100%{margin-right:22vh;}
}

@keyframes slide4{
  50%{height:22vh; margin-bottom:0; }
  100%{margin-bottom:22vh;}
}