body {background: linear-gradient(45deg, #0004ce, #00053f);overflow-y: hidden;}
.width-100{width: 100%;}
.height-100{height: 100dvh;}
.height-100-p{height: 100%;}
.overflow-x-hid{overflow-x: hidden;}
.overflow-y-scr{overflow-y: scroll}
.display-flex{display: flex;}
.justify-align-content{justify-content: center;align-items: center;}
.border-box{box-sizing: border-box;}
.wrap{flex-wrap: wrap;}
.en{direction: ltr;text-align: left;}
.text-center{text-align: center;}
#top-box{display: none;background-color: #00000024;backdrop-filter: blur(20px);z-index: 1000;position: absolute;top: 0;left: 0;right: 0;bottom: 0;color: #fff;}
#loading{width: 100%;max-width: 400px;height: 80px;background-color: #0000004a;border-radius: 2px;box-shadow: 0 0 0 7px #0000006b;}
.font-09{font-size: 0.9rem;}
.font-08{font-size: 0.8rem;}
.pos-rel{position: relative;}
.text-nowrap{text-wrap: nowrap;}

loading-animation{width: 100%;height: 100%;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;column-gap: 5px;padding: 5px;direction: rtl;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.188);}
.loading-animation-line {height: 1%;max-height: 30px!important;width: 3px;background-color: #ffffffc4;border-radius: 5px;}
.loading-animation-line.loading-line-0{animation: loading-line-animation 750ms 000ms linear infinite alternate;}
.loading-animation-line.loading-line-1{animation: loading-line-animation 750ms 100ms linear infinite alternate;}
.loading-animation-line.loading-line-2{animation: loading-line-animation 750ms 200ms linear infinite alternate;}
.loading-animation-line.loading-line-3{animation: loading-line-animation 750ms 300ms linear infinite alternate;}
.loading-animation-line.loading-line-4{animation: loading-line-animation 750ms 400ms linear infinite alternate;}
.loading-animation-line.loading-line-5{animation: loading-line-animation 750ms 500ms linear infinite alternate;}
.loading-animation-line.loading-line-6{animation: loading-line-animation 750ms 600ms linear infinite alternate;}
.loading-animation-line-box{display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;column-gap: 5px;height: 100%;max-height: 80px!important;direction: ltr;}
@keyframes loading-line-animation {from{height: 1%;}to{height: 100%;}}

#message-box-box{position: fixed;top: 0;right: 0;z-index: 102;display: grid;row-gap: 10px;width: 100%;}
.message-box{width: 100%;max-width: 400px;min-height: 70px;background-color: #00021f;border-radius: 5px 0px 0px 5px;box-shadow: 0px 5px 20px 0 #0023ff85;padding: 3px 3px 3px 5px;display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;position: relative;overflow: hidden;cursor: default;animation: message 300ms linear;color: #fff;font-family: 'baloo';direction: rtl;flex-direction: row-reverse;}
.message-img{width: 50px;height: 50px;background-size: cover;}
.success-img{background-image: url('./message-img/tick.svg');}
.error-img{background-image: url('./message-img/error-X.svg');}
.warn-img{background-image: url('./message-img/error.svg');}
.message-text{padding-right: 5px;}
.message-text span{font-weight: 600;}
.message-text p{font-size: 0.8rem;max-width: 500px;line-height: 18px;padding-top: 10px;}
.message-progress-box{width: 100%;position: absolute;bottom: 0;right: 0;height: 3px;background-color: #d2d2d2;}
.message-progress{content: "";width: 4%;height: 3px;background-color: black;display: block;}
@keyframes progress {0%{width: 0%;}100%{width: 100%;}}
@keyframes openMessage{0%{transform: translateX(100%);}100%{transform: translateX(0%);}}
@keyframes closeMessage{0%{transform: translateX(0%);}100%{transform: translateX(100%);}}