/* Common Loader CSS */
@keyframes hideLoader{
    0%{ width: 100%; height: 100%; }
    100%{ width: 0; height: 0; }
}
body > div.loader{
    position: fixed;
    text-align: center;
    width: 100%;
    height: 100%;
    z-index: 1200;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    display: none;
    overflow: hidden;
}


body > div.pageloader{
  text-align: center;
  z-index: 12000 !important;
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

body.loaded > div.loader{
    animation: hideLoader .5s linear .5s forwards;
}
.pageloader h5{
    border-radius: 50%;
    width: 16rem;
    position: inherit !important;
    display: inline-block;
    height: 4rem;
    top: 70vh;
    margin-left: -92px;
}

/* Square Animation */
#circle-loader,#page-circle-loader
{
    border-radius: 50%;
    width: 4rem;
    position: inherit !important;
    display: inline-block;
    height: 4rem;
    top:45vh
}
#page-circle-loader {
    margin: 2rem auto;
    position: relative;
    border-top: .3em solid rgba(0, 0, 0, 0.2);
    border-right: .3em solid rgba(0, 0, 0, 0.2);
    border-bottom: .3em solid rgba(0, 0, 0, 0.2);
    border-left: .3em solid #005cb9;
    animation: rotateCircleLoader 1.1s infinite linear;
}
#circle-loader{
    margin: 2rem auto;
    position: relative;
    border-top: .3em solid rgba(0, 0, 0, 0.2);
    border-right: .3em solid rgba(0, 0, 0, 0.2);
    border-bottom: .3em solid rgba(0, 0, 0, 0.2);
    border-left: .3em solid #333;
    animation: rotateCircleLoader 1.1s infinite linear;
}
@keyframes rotateCircleLoader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}