﻿.loader-body {
    cursor: pointer;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 1;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    overflow:hidden;
}

.loader-body > .hide{
    display: none;
}

.loader-body > .show{
    display: normal;
}

.loader-content{
    z-index: 9999;
    background-color: white;
    position:absolute;
    width: 40%;
    height: 100px; 
    top: 40%;
}

.loader-content > .left {
    background-image: url('../images/loader.gif');
    background-size:100% 80%;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 15%;
    max-height: 100%;
    left: 2%;
    top: 0;
}

.loader-content > .right {
    width: 100%;
    max-height: 100%;
    left: 0;
    top: 0;
    color: black;
}

.loader-content > .right > .line1 {
    width: inherit;
    height: 20%;
    text-align: center;
    position:absolute;
    top:15%;
}

.loader-content > .right > .line2 {
    width: inherit;
    height: 80%;
    text-align: center;
    position:absolute;
    top:35%;
}

/* 4k */
@media only screen and (min-width : 2560px) and (max-width: 5000px)  {
    .loader-content{
        width: 40%;
        left: 30%;
    }
    .loader-content > .right {
        font-size: 20px;
    }
}

/* Desktop and Laptop Large */
@media only screen and (min-width : 1440px) and (max-width: 2559px)  {
    .loader-content{
        width: 40%;
        left: 30%;
    }
    .loader-content > .right {
        font-size: 15px;
    }
}

/* Desktop and Laptop 1024 */
@media only screen and (min-width : 1024px) and (max-width: 1439px)  {
    .loader-content{
        width: 40%;
        left: 30%;
    }
    .loader-content > .right {
        font-size: 15px;
    }
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px){
    .loader-content{
        width: 60%;
        left: 20%;
    }
    .loader-content > .right {
        font-size: 12px;
    }
}
/* End of Tablet */

/* Mobile Large */
@media only screen and (min-width: 425px) and (max-width: 767px){
    .loader-content{
        width: 80%;
        left: 10%;
    }
    .loader-content > .right {
        font-size: 11px;
    }
}
/* End of Mobile Large */  

/* Mobile Medium*/
@media only screen and (min-width: 375px) and (max-width: 424px){
   .loader-content{
        width: 80%;
        left: 10%;
    }
    .loader-content > .right {
        font-size: 10px;
    }
}
/* End of Mobile Medium*/

/* Mobile Small*/
@media only screen and (min-width: 200px) and (max-width: 374px){
   .loader-content{
        width: 80%;
        left: 10%;
    }
    .loader-content > .right {
        font-size: 8px;
    }
}

/***********************************Verification with detail/additional info***********************************/

.verification-body {
    cursor: pointer;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 1;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    overflow:hidden;
}

.verification-body > .hide{
    display: none;
}

.verification-body > .show{
    display: normal;
}

.verification-content{
    z-index: 9999;
    background-color: white;
    position:absolute;
    width: 40%;
    top: 25%;
}

.verification-content > .left {
    background-image: url('../images/verification.gif');
    background-size:100% 80%;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 15%;
    max-height: 100%;
    left: 2%;
    top: 0;
}

.verification-content > .right {
    width: 100%;
    max-height: 100%;
    left: 0;
    top: 0;
    color: black;
}

.verification-content > .right > .line1 {
    width: inherit;
    height: 20%;
    text-align: center;
    position:absolute;
    top:15%;
}

.verification-content > .right > .line2 {
    width: inherit;
    height: 80%;
    text-align: center;
    position:absolute;
    top:35%;
}

/* 4k */
@media only screen and (min-width : 2560px) and (max-width: 5000px)  {
    .verification-content{
        width: 40%;
        left: 30%;
    }
    .verification-content > .right {
        font-size: 20px;
    }
}

/* Desktop and Laptop Large */
@media only screen and (min-width : 1440px) and (max-width: 2559px)  {
    .verification-content{
        width: 40%;
        left: 30%;
    }
    .verification-content > .right {
        font-size: 15px;
    }
}

/* Desktop and Laptop 1024 */
@media only screen and (min-width : 1024px) and (max-width: 1439px)  {
    .verification-content{
        width: 40%;
        left: 30%;
    }
    .verification-content > .right {
        font-size: 15px;
    }
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px){
    .verification-content{
        width: 60%;
        left: 20%;
    }
    .verification-content > .right {
        font-size: 12px;
    }
}
/* End of Tablet */

/* Mobile Large */
@media only screen and (min-width: 425px) and (max-width: 767px){
    .verification-content{
        width: 80%;
        left: 10%;
    }
    .verification-content > .right {
        font-size: 11px;
    }
}
/* End of Mobile Large */  

/* Mobile Medium*/
@media only screen and (min-width: 375px) and (max-width: 424px){
   .verification-content{
        width: 80%;
        left: 10%;
    }
    .verification-content > .right {
        font-size: 10px;
    }
}
/* End of Mobile Medium*/

/* Mobile Small*/
@media only screen and (min-width: 200px) and (max-width: 374px){
   .verification-content{
        width: 80%;
        left: 10%;
    }
    .verification-content > .right {
        font-size: 8px;
    }
}