.required{color:#ff0000}

.ton{position:relative;}
.ton:after{content:'تن';position:absolute;left:5px;top:5px;color:#444;font-size:10px}

.spinner-box div{position:absolute;width:40px;height:40px;border-radius:50%;transform:translate(80px,80px) scale(1);animation:spinner-box 1s infinite cubic-bezier(0,0.5,0.5,1)}
.spinner-box div:nth-child(1){background:#eb9405;transform:translate(148px,80px) scale(1);animation:spinner-box-r .25s infinite cubic-bezier(0,0.5,0.5,1),spinner-box-c 1s infinite step-start}
.spinner-box div:nth-child(2){animation-delay:-.25s;background:#a56d51}
.spinner-box div:nth-child(3){animation-delay:-.5s;background:#eb9405}
.spinner-box div:nth-child(4){animation-delay:-.75s;background:#eecc6e}
.spinner-box div:nth-child(5){animation-delay:-1s;background:#d6c9c4}
.loading-spinner{direction:ltr;margin:auto;width:200px;height:200px;display:block;overflow:hidden;direction:ltr;text-align:center}
.spinner-box{width:200px;height:100%;position:relative;transform:translateZ(0) scale(1);backface-visibility:hidden;transform-origin:0 0;margin:auto}
.spinner-box div{box-sizing:content-box}

@keyframes spinner {to {transform: rotate(360deg);}}
.spinner {width:15px;height:15px;display:inline-block;position: relative;vertical-align:middle;}
.spinner:before {content:'';box-sizing:border-box;position:absolute;top:-2px;left:2px;width:16px;height:16px;border-radius:50%;border:2px solid #ccc;border-top-color:#333;animation:spinner .6s linear infinite;}