.form-register{
        max-width: 700px;
        margin: 0 auto;
    }
    .form-control-wrap{
        position: relative;
    }
    .alert{
        position: absolute;
    bottom: -12px;
    right: 15px;
    background: #fff;
    padding: 0px 15px;
    margin-bottom: 0;
    border: 1px solid var(--primary);
    border-radius: 5px;
    color: var(--primary);
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(15px);
    transition: 0.5s;
    }
    .alert.show{
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
    .form-control.error{
        border-color: var(--primary);
    }

.page-register{background: #f0f0f0}
	.page-reg-wrap{
		    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0px 0px 25px rgb(0 0 0 / 20%);
	}
	.single-title{
		    color: var(--primary);
    font-size: 30px;
    margin-bottom: 20px;
	}
	#register_btn{
		background: var(--primary);
    color: #fff;
    font-weight: bold;
	}

.dots-bars-4 {
  width: 40px;
  height: 20px;
  --c:radial-gradient(farthest-side,currentColor 93%,#0000);
  background:
    var(--c) 0    0,
    var(--c) 50%  0,
    var(--c) 100% 0;
  background-size:8px 8px;
  background-repeat: no-repeat;
  position: relative;
  animation: db4-0 1s linear infinite alternate;
	display: none;
	margin: 0 auto;
	margin-top: 30px;
}
.dots-bars-4.active{
	display: block
}
.dots-bars-4:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 12px;
  background:currentColor;
  left:0;
  top:0;
  animation: 
    db4-1 1s  linear infinite alternate,
    db4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes db4-0 {
  0%      {background-position: 0  100%,50% 0   ,100% 0}
  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
  50%     {background-position: 0  0   ,50% 100%,100% 0}
  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}

@keyframes db4-1 {
  100% {left:calc(100% - 8px)}
}

@keyframes db4-2 {
  100% {top:-0.1px}
}

.reg-rs-pending{
	display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--wp--preset--color--luminous-vivid-amber);
    border-radius: 7px;
}
.reg-rs-error{
	color: var(--wp--preset--color--luminous-vivid-orange);
}