.loader {
    background-color: rgba(0, 0, 0, 0.60);
    position: fixed;
    top:0px;
    bottom:0px;
    height: 100%;
    width: 100%;
    z-index: 9999;
    margin-top: 0px;
}

.loader--open {
    animation-name: loading--open;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
}

.loader--close {
    animation-name: loading--close;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}

.loader--btn{
    /*background-color: rgba(0, 0, 0, 1);*/
    position: fixed;
    /*top: 30px;*/
    right: 0px;
    width: 80px;
    height: 80px;
}

.loader--btn--close {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: none;
    outline: none;
    border: none;
    /*transform: scale(2.5);*/
    font-size: 40px;
    color: #aaaaaa;
    transition: color 0.15s;
}

.loader--btn--close:hover {
    color: #ff0000;
    cursor: pointer;
}

@keyframes loading--open {
    0%{ opacity: 0;}
    30%{ opacity: 0.8;}
    100%{ opacity: 1 ;}
}
@keyframes loading--close {
    0%{ opacity: 1;}
    100%{  opacity: 0;}
}

.loader-centered {
    /*background-color: rgba(255, 0, 0, 0.50);*/
    position: relative;
    top: 35%;
    /*left: 40%;*/
    height: 230px;
    width: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.loader-centered-eq {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 200px;
    width: 200px;
    margin-top: -100px;
    margin-left: -100px;
    text-align: center;
}


.object-circle{
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #20b426; /* green */
    /*border-bottom: 16px solid #20b426; !* green *!*/
    border-radius: 50%;
    margin-right: auto;
    margin-left: auto;
    width: 120px;
    height: 120px;
    animation: spin 1.2s linear infinite;
}

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

.textLoaderCircle::before{
    position: relative;
    content: "ระบบกำลังประมวลผล...";
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    animation: animateText 2.0s infinite  alternate;
}

.group--text--loader{
    display: block;
}

.group--text--loader span{
    font-size: 20px;
    color: #FFC764;
    font-weight: 400;
    text-align: center;
}

.group--text--loader h2{
    font-size: 20px;
    color: #FFC764;
    font-weight: 900;
    text-align: center;
    animation: animate--blink 1.6s infinite;
}

@keyframes animate--blink {
    0%,100%{
        opacity: 1.0;
    }
    50%{
        opacity: 0.0;
    }
}

.group--text--loader span:nth-child(1)::before{
    content: "ระบบกำลังประมวลผล...";
    animation: animateText 2.0s infinite  alternate;
}



.textLoader::before{
    content: "ระบบกำลังประมวลผล...";
    font-size: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 900;
    /*text-align: center;*/
    animation: animateText 2.0s infinite  alternate;
    /*padding-left: 10px;*/
}

@keyframes animateText {
    0% {
        content: "ร";
    }
    10% {
        content: "ระ";
    }
    16% {
        content: "ระบ";
    }
    19% {
        content: "ระบบ";
    }
    22% {
        content: "ระบบก";
    }
    25% {
        content: "ระบบกำ";
    }
    28% {
        content: "ระบบกำล";
    }
    31% {
        content: "ระบบกำลั";
    }
    34% {
        content: "ระบบกำลัง";
    }
    37% {
        content: "ระบบกำลังป";
    }
    40% {
        content: "ระบบกำลังปร";
    }
    43% {
        content: "ระบบกำลังประ";
    }
    46% {
        content: "ระบบกำลังประม";
    }
    49% {
        content: "ระบบกำลังประมว";
    }
    52% {
        content: "ระบบกำลังประมวล";
    }
    55% {
        content: "ระบบกำลังประมวลผ";
    }
    58% {
        content: "ระบบกำลังประมวลผล";
    }
    61%,85% {
        content: "ระบบกำลังประมวลผล.";
    }
    69%,93% {
        content: "ระบบกำลังประมวลผล..";
    }
    77%,100%  {
        content: "ระบบกำลังประมวลผล...";
    }
}

.middle {
    /*top: 50%;*/
    /*left: 50%;*/
    margin-right: auto;
    margin-left: auto;
    /*width: 120px;*/
    /*height: 120px;*/
    /*transform: translate(-50%, -50%);*/
    /*position: absolute;*/
}

.text--loader--center{
    position: relative;
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    color:rgba(255,255,255,0.8);
    font-weight: 600;
    font-size: 18px;
}

.bar {
    width: 15px;
    height: 100px;
    /*background: rgba(255, 255, 255, 0.00);*/
    display: inline-block;
    transform-origin: bottom center;
    /*border-top-right-radius: 20px;*/
    /*border-top-left-radius: 20px;*/
    /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
    /*animation: loader 0.7s linear infinite;*/
}


.circle--load{
    /*;*/
    margin-right: auto;
    margin-left: auto;
}

.circle--load span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*border: 2px solid rgba(255, 255, 255, 0.8);*/
    animation: animate--circle--load 3s linear infinite
}

.circle--load span:nth-child(1){
    border: 3px solid #CDFFFC;
    border-radius:  30% 70% 70% 30% / 30% 30% 70% 70%;
}
.circle--load span:nth-child(2){
    border: 3px solid #FF884B;
    border-radius:  30% 70% 70% 30% / 30% 30% 70% 70%;
    animation-direction: reverse;
}
.circle--load span:nth-child(3){
    border: 3px solid #FF577F;
    border-radius:  46% 34% 17% 52% / 59% 48% 17% 29% ;
    animation-duration: 5s;
}

@keyframes animate--circle--load {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.bar:nth-child(1) {
    animation: loader1 0.8s linear infinite;
    animation-delay: 0.1s;
}
.bar:nth-child(2) {
    animation: loader2 0.8s linear infinite;
    animation-delay: 0.2s;
}
.bar:nth-child(3) {
    animation: loader3 0.8s linear infinite;
    animation-delay: 0.3s;
}
.bar:nth-child(4) {
    animation: loader4 0.8s linear infinite;
    animation-delay: 0.4s;
}
.bar:nth-child(5) {
    animation: loader5 0.8s linear infinite;
    animation-delay: 0.5s;
}
.bar:nth-child(6) {
    animation: loader1 0.8s linear infinite;
    animation-delay: 0.6s;
}
.bar:nth-child(7) {
    animation: loader2 0.8s linear infinite;
    animation-delay: 0.7s;
}
.bar:nth-child(8) {
    animation: loader3 0.8s linear infinite;
    animation-delay: 0.8s;
}
.bar:nth-child(9) {
    animation: loader4 0.8s linear infinite;
    animation-delay: 0.9s;
}
.bar:nth-child(10) {
    animation: loader5 0.8s linear infinite;
    animation-delay: 1.0s;
}
.bar:nth-child(11) {
    animation: loader1 0.8s linear infinite;
    animation-delay: 1.1s;
}

@keyframes loader1 {
    0% {
        transform: scaleY(0.1);
        background: #e15b64;
    }
    30% {
        transform: scaleY(0.4);
        background: #e15b64;
    }
    50% {
        transform: scaleY(1);
        background: #e15b64 ;
    }
    70% {
        transform: scaleY(0.4);
        background: #e15b64;
    }

    100% {
        transform: scaleY(0.1);
        background: #e15b64 ;
    }
}

@keyframes loader2 {
    0% {
        transform: scaleY(0.1);
        background: #f47e60;
    }
    30% {
        transform: scaleY(0.4);
        background: #f47e60;
    }
    50% {
        transform: scaleY(1);
        background: #f47e60 ;
    }
    75% {
        transform: scaleY(0.4);
        background: #f47e60;
    }
    100% {
        transform: scaleY(0.1);
        background: #f47e60 ;
    }
}

@keyframes loader3 {
    0% {
        transform: scaleY(0.1);
        background: #f8b26a;
    }
    30% {
        transform: scaleY(0.4);
        background: #f8b26a;
    }
    50% {
        transform: scaleY(1);
        background: #f8b26a;
    }
    75% {
        transform: scaleY(0.4);
        background: #f8b26a;
    }
    100% {
        transform: scaleY(0.1);
        background: #f8b26a;
    }
}

@keyframes loader4 {
    0% {
        transform: scaleY(0.1);
        background: #abbd81;
    }
    30% {
        transform: scaleY(0.4);
        background: #abbd81;
    }
    50% {
        transform: scaleY(1);
        background: #abbd81 ;
    }
    75% {
        transform: scaleY(0.4);
        background: #abbd81;
    }
    100% {
        transform: scaleY(0.1);
        background: #abbd81 ;
    }
}

@keyframes loader5 {
    0% {
        transform: scaleY(0.1);
        background: #849b87;
    }
    30% {
        transform: scaleY(0.4);
        background: #849b87;
    }
    50% {
        transform: scaleY(1);
        background: #849b87 ;
    }
    75% {
        transform: scaleY(0.4);
        background: #849b87;
    }
    100% {
        transform: scaleY(0.1);
        background: #849b87 ;
    }
}





/*@keyframes pulse-loading-1 {*/
/*    0% { top: 20px; height: 160px }*/
/*    50% { top: 60px; height: 80px }*/
/*    100% { top: 60px; height: 80px }*/
/*}*/
/*@keyframes pulse-loading-2 {*/
/*    0% { top: 30px; height: 140px }*/
/*    50% { top: 60px; height: 80px }*/
/*    100% { top: 60px; height: 80px }*/
/*}*/
/*@keyframes pulse-loading-3 {*/
/*    0% { top: 40px; height: 120px }*/
/*    50% { top: 60px; height: 80px }*/
/*    100% { top: 60px; height: 80px }*/
/*}*/
/*.pulse-loading div { position: absolute; width: 30px }.pulse-loading div:nth-child(1) {*/
/*                                                          left: 35px;*/
/*                                                          background: #dd0459;*/
/*                                                          animation: pulse-loading-1 0.6666666666666666s cubic-bezier(0,0.5,0.5,1) infinite;*/
/*                                                          animation-delay: -0.13333333333333333s*/
/*                                                      }*/
/*.pulse-loading div:nth-child(2) {*/
/*    left: 85px;*/
/*    background: #fd99a7;*/
/*    animation: pulse-loading-2 0.6666666666666666s cubic-bezier(0,0.5,0.5,1) infinite;*/
/*    animation-delay: -0.06666666666666667s*/
/*}*/
/*.pulse-loading div:nth-child(3) {*/
/*    left: 135px;*/
/*    background: #eb6896;*/
/*    animation: pulse-loading-3 0.6666666666666666s cubic-bezier(0,0.5,0.5,1) infinite;*/
/*    animation-delay: 'undefineds';*/
/*}*/

/*.loading-spinner-pulse {*/
/*    width: 200px;*/
/*    height: 150px;*/
/*    display: inline-block;*/
/*    overflow: hidden;*/
/*    background: none;*/
/*}*/
/*.pulse-loading {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    position: relative;*/
/*    transform: translateZ(0) scale(1);*/
/*    backface-visibility: hidden;*/
/*    transform-origin: 0 0; !* see note above *!*/
/*}*/
/*.pulse-loading div { box-sizing: content-box; }*/


/*.rectangleAlert-success{*/
/*    height: 40px;*/
/*    width: 100%;*/
/*    background: #18ba9b !important;*/
/*    position: relative;*/
/*    border-radius: 1% 1% 1% 1%;*/
/*    !*animation: moveRect 10s linear;*!*/
/*    animation: moveRect 5s infinite;*/
/*    animation-delay: 0s;*/
/*    !*content: '1111111111111';*!*/
/*}*/

/*.rectangleAlert-success:before {*/
/*    font-family: "Font Awesome 5 Brands";*/
/*    width:100%;*/
/*    position: absolute;*/
/*    content: '\f1ea กำลังประมวลผล';*/
/*    padding  : 10px;*/
/*    font-size: 20px;*/
/*    color: white;*/
/*    font-weight: 300;*/
/*    top:0px;*/
/*}*/

/*@keyframes moveRect {*/
/*    0%{*/
/*        height: 0px;*/
/*        width: 0px;*/
/*    }*/
/*    5%{*/
/*        height: 60px;*/
/*        width: 100%;*/
/*    }*/
/*    50% {*/
/*        top: 0;*/
/*        left: 0;*/
/*        height: 60px;*/
/*        width: 100%;*/
/*    }*/
/*    80%   {*/
/*        top: 0px;*/
/*        left: 80%;*/
/*        height: 60px;*/
/*        width: 50%;*/
/*        opacity: 1;*/
/*    }*/
/*    95% {*/
/*        top: 0px;*/
/*        left: 80%;*/
/*        height: 0px;*/
/*        width: 0px;*/
/*        opacity: 0.5*/
/*    }*/
/*    100% {*/
/*        top: 0px;*/
/*        left: 100%;*/
/*        height: 0px;*/
/*        width: 0px;*/
/*        opacity: 0*/
/*    }*/
/*}*/

.blink_me {
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}