@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
 .feedback {
	 --normal: #eceaf3;
	 --normal-shadow: #d9d8e3;
	 --normal-mouth: #9795a4;
	 --normal-eye: #595861;
	 --active: #f8da69;
	 --active-shadow: #f4b555;
	 --active-mouth: #f05136;
	 --active-eye: #313036;
	 --active-tear: #76b5e7;
	 --active-shadow-angry: #e94f1d;
	 margin: 0;
	 padding: 0;
	 list-style: none;
	 display: flex;
	 justify-content: center;
}
 .feedback li {
	 position: relative;
	 border-radius: 50%;
	 background: var(--sb, var(--normal));
	 box-shadow: inset 3px -3px 4px var(--sh, var(--normal-shadow));
	 transition: background 0.4s, box-shadow 0.4s, transform 0.3s;
	 -webkit-tap-highlight-color: transparent;
	     width: fit-content;
}
 .feedback li:not(:last-child) {
	 margin-right: 20px;
}
 .feedback li div {
	 width: 40px;
	 height: 40px;
	 position: relative;
	 transform: perspective(240px) translateZ(4px);
}
 .feedback li div svg, .feedback li div:before, .feedback li div:after {
	 display: block;
	 position: absolute;
	 left: var(--l, 9px);
	 top: var(--t, 13px);
	 width: var(--w, 8px);
	 height: var(--h, 2px);
	 transform: rotate(var(--r, 0deg)) scale(var(--sc, 1)) translateZ(0);
}
 .feedback li div svg {
	 fill: none;
	 stroke: var(--s);
	 stroke-width: 2px;
	 stroke-linecap: round;
	 stroke-linejoin: round;
	 transition: stroke 0.4s;
}
 .feedback li div svg.eye {
	 --s: var(--e, var(--normal-eye));
	 --t: 17px;
	 --w: 7px;
	 --h: 4px;
}
 .feedback li div svg.eye.right {
	 --l: 23px;
}
 .feedback li div svg.mouth {
	 --s: var(--m, var(--normal-mouth));
	 --l: 11px;
	 --t: 23px;
	 --w: 18px;
	 --h: 7px;
}
 .feedback li div:before, .feedback li div:after {
	 content: '';
	 z-index: var(--zi, 1);
	 border-radius: var(--br, 1px);
	 background: var(--b, var(--e, var(--normal-eye)));
	 transition: background 0.4s;
}
 .feedback li.angry {
	 --step-1-rx: -24deg;
	 --step-1-ry: 20deg;
	 --step-2-rx: -24deg;
	 --step-2-ry: -20deg;
}
 .feedback li.angry div:before {
	 --r: 20deg;
}
 .feedback li.angry div:after {
	 --l: 23px;
	 --r: -20deg;
}
 .feedback li.angry div svg.eye {
	 stroke-dasharray: 4.55;
	 stroke-dashoffset: 8.15;
}
 .feedback li.angry.active {
	 animation: angry 1s linear;
}
 .feedback li.angry.active div:before {
	 --middle-y: -2px;
	 --middle-r: 22deg;
	 animation: toggle 0.8s linear forwards;
}
 .feedback li.angry.active div:after {
	 --middle-y: 1px;
	 --middle-r: -18deg;
	 animation: toggle 0.8s linear forwards;
}
 .feedback li.sad {
	 --step-1-rx: 20deg;
	 --step-1-ry: -12deg;
	 --step-2-rx: -18deg;
	 --step-2-ry: 14deg;
}
 .feedback li.sad div:before, .feedback li.sad div:after {
	 --b: var(--active-tear);
	 --sc: 0;
	 --w: 5px;
	 --h: 5px;
	 --t: 15px;
	 --br: 50%;
}
 .feedback li.sad div:after {
	 --l: 25px;
}
 .feedback li.sad div svg.eye {
	 --t: 16px;
}
 .feedback li.sad div svg.mouth {
	 --t: 24px;
	 stroke-dasharray: 9.5;
	 stroke-dashoffset: 33.25;
}
 .feedback li.sad.active div:before, .feedback li.sad.active div:after {
	 animation: tear 0.6s linear forwards;
}
 .feedback li.ok {
	 --step-1-rx: 4deg;
	 --step-1-ry: -22deg;
	 --step-1-rz: 6deg;
	 --step-2-rx: 4deg;
	 --step-2-ry: 22deg;
	 --step-2-rz: -6deg;
}
 .feedback li.ok div:before {
	 --l: 12px;
	 --t: 17px;
	 --h: 4px;
	 --w: 4px;
	 --br: 50%;
	 box-shadow: 12px 0 0 var(--e, var(--normal-eye));
}
 .feedback li.ok div:after {
	 --l: 13px;
	 --t: 26px;
	 --w: 14px;
	 --h: 2px;
	 --br: 1px;
	 --b: var(--m, var(--normal-mouth));
}
 .feedback li.ok.active div:before {
	 --middle-s-y: 0.35;
	 animation: toggle 0.2s linear forwards;
}
 .feedback li.ok.active div:after {
	 --middle-s-x: 0.5;
	 animation: toggle 0.7s linear forwards;
}
 .feedback li.good {
	 --step-1-rx: -14deg;
	 --step-1-rz: 10deg;
	 --step-2-rx: 10deg;
	 --step-2-rz: -8deg;
}
 .feedback li.good div:before {
	 --b: var(--m, var(--normal-mouth));
	 --w: 5px;
	 --h: 5px;
	 --br: 50%;
	 --t: 22px;
	 --zi: 0;
	 opacity: 0.5;
	 box-shadow: 16px 0 0 var(--b);
	 filter: blur(2px);
}
 .feedback li.good div:after {
	 --sc: 0;
}
 .feedback li.good div svg.eye {
	 --t: 15px;
	 --sc: -1;
	 stroke-dasharray: 4.55;
	 stroke-dashoffset: 8.15;
}
 .feedback li.good div svg.mouth {
	 --t: 22px;
	 --sc: -1;
	 stroke-dasharray: 13.3;
	 stroke-dashoffset: 23.75;
}
 .feedback li.good.active div svg.mouth {
	 --middle-y: 1px;
	 --middle-s: -1;
	 animation: toggle 0.8s linear forwards;
}
 .feedback li.happy div {
	 --step-1-rx: 18deg;
	 --step-1-ry: 24deg;
	 --step-2-rx: 18deg;
	 --step-2-ry: -24deg;
}
 .feedback li.happy div:before {
	 --sc: 0;
}
 .feedback li.happy div:after {
    --b: aliceblue;
	 --l: 11px;
	 --t: 23px;
	 --w: 18px;
	 --h: 8px;
	 --br: 0 0 8px 8px;
}
 .feedback li.happy div svg.eye {
	 --t: 14px;
	 --sc: -1;
}
 .feedback li.happy.active div:after {
	 --middle-s-x: 0.95;
	 --middle-s-y: 0.75;
	 animation: toggle 0.8s linear forwards;
}
 .feedback li:not(.active) {
	 cursor: pointer;
}
 .feedback li:not(.active):active {
	 transform: scale(0.925);
}
 .feedback li.active {
	 --sb: var(--active);
	 --sh: var(--active-shadow);
	 --m: var(--active-mouth);
	 --e: var(--active-eye);
}
 .feedback li.active div {
	 animation: shake 0.8s linear forwards;
}
 @keyframes shake {
	 30% {
		 transform: perspective(240px) rotateX(var(--step-1-rx, 0deg)) rotateY(var(--step-1-ry, 0deg)) rotateZ(var(--step-1-rz, 0deg)) translateZ(10px);
	}
	 60% {
		 transform: perspective(240px) rotateX(var(--step-2-rx, 0deg)) rotateY(var(--step-2-ry, 0deg)) rotateZ(var(--step-2-rz, 0deg)) translateZ(10px);
	}
	 100% {
		 transform: perspective(240px) translateZ(4px);
	}
}
 @keyframes tear {
	 0% {
		 opacity: 0;
		 transform: translateY(-2px) scale(0) translateZ(0);
	}
	 50% {
		 transform: translateY(12px) scale(0.6, 1.2) translateZ(0);
	}
	 20%, 80% {
		 opacity: 1;
	}
	 100% {
		 opacity: 0;
		 transform: translateY(24px) translateX(4px) rotateZ(-30deg) scale(0.7, 1.1) translateZ(0);
	}
}
 @keyframes toggle {
	 50% {
		 transform: translateY(var(--middle-y, 0)) scale(var(--middle-s-x, var(--middle-s, 1)), var(--middle-s-y, var(--middle-s, 1))) rotate(var(--middle-r, 0deg));
	}
}
 @keyframes angry {
	 40% {
		 background: var(--active);
	}
	 45% {
		 box-shadow: inset 3px -3px 4px var(--active-shadow), inset 0 8px 10px var(--active-shadow-angry);
	}
}
 html {
	 box-sizing: border-box;
	 -webkit-font-smoothing: antialiased;
}
 * {
	 box-sizing: inherit;
}
 *:before, *:after {
	 box-sizing: inherit;
}
body {
    min-height: 100vh;
    /* display: flex; */
    font-family: 'Tajawal', sans-serif;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #f9f9fc;
}
 
 
 
 
 
 fieldset {
left: 0;
    right: 0;
    text-align-last: center;
}
 
.rating {
  --active: #FFED76;
  --active-pale: rgba(255, 237, 118, .36);
  --inactive: #121621;
  --face-active: #121621;
  --face-inactive: #1C212E;
  display: -webkit-box;
  display: flex;
  position: relative;
  direction: rtl;
  zoom: 1.2;
}
@media (min-width: 600px) {
  .rating {
    zoom: 2;
  }
    .feedback {
    zoom: 2;
  }
}
.rating ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -webkit-box;
  display: flex;
  color: #cdcfd5;
}
.rating ul li {
  --face: var(--face-inactive);
  cursor: pointer;
  position: relative;
    margin: 0 16px 0 0;
}
.rating ul li:before, .rating ul li:after {
  content: '';
  position: absolute;
  z-index: 2;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}
.rating ul li:before {
  --r: 0deg;
  width: 2px;
  height: 2px;
  border-radius: 1px;
  top: 15px;
  left: 13px;
  -webkit-transform: rotate(var(--r));
          transform: rotate(var(--r));
  -webkit-filter: drop-shadow(8px 0 0 var(--face));
          filter: drop-shadow(8px 0 0 var(--face));
}
.rating ul li span {
  width: 2px;
  height: 2px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  margin: -1px 0 0 -1px;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  opacity: 0;
  box-shadow: 16px -16px 0 var(--active-pale), -16px -16px 0 var(--active-pale), -21px 8px 0 var(--active-pale), 21px 8px 0 var(--active-pale), 0 22px 0 var(--active-pale);
}
.rating ul li:nth-child(1):after {
  width: 10px;
  height: 10px;
  top: 20px;
  left: 13px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--face);
}
.rating ul li:nth-child(3):after {
  width: 6px;
  left: 15px;
  top: 20px;
  height: 1px;
  background: var(--face);
}
.rating ul li:nth-child(4):after {
  width: 10px;
  height: 10px;
  top: 12px;
  left: 13px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-bottom-color: var(--face);
}
.rating ul li:nth-child(4).current {
  -webkit-animation: active-4 .4s ease;
          animation: active-4 .4s ease;
}
.rating ul li:nth-child(4).current span {
  -webkit-animation: active-span .32s ease;
          animation: active-span .32s ease;
}
.rating ul li:nth-child(5):after {
  width: 6px;
  height: 3px;
  left: 15px;
  top: 20px;
  border-radius: 0 0 3px 3px;
  background: var(--face);
}
.rating ul li:nth-child(5).current {
  -webkit-animation: active-5 .72s ease;
          animation: active-5 .72s ease;
}
.rating ul li:nth-child(5).current span {
  -webkit-animation: active-span .32s ease;
          animation: active-span .32s ease;
}
.rating ul li.current {
  --face: var(--face-active);
}
.rating ul li.current svg {
  color: var(--active);
  fill: rgba(0, 0, 0, 0.2);
}
.rating ul li:not(.current) svg {
  -webkit-transition: -webkit-transform .2s ease;
  transition: -webkit-transform .2s ease;
  transition: transform .2s ease;
  transition: transform .2s ease, -webkit-transform .2s ease;
}
.rating ul li:not(.current):active svg {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}
 
.rating ul li:not(:last-child):before {
  background: var(--face);
}
.rating ul li:not(:last-child).current:before {
  -webkit-animation: blink 3s linear infinite;
          animation: blink 3s linear infinite;
}
.rating ul li:last-child:before {
  --r: -45deg;
  width: 3px;
  height: 3px;
  border-top: 1px solid var(--face);
  border-right: 1px solid var(--face);
  border-radius: 0 1px 0 0;
  left: 12px;
  -webkit-filter: drop-shadow(6px 6px 0 var(--face));
          filter: drop-shadow(6px 6px 0 var(--face));
}
.rating svg {
  width: 36px;
  height: 34px;
  display: block;
  fill: rgba(0, 0, 0, 0.04);
}
.rating > div {
  left: 0;
  top: 0;
  position: absolute;
  display: none;
  -webkit-transform: translateX(var(--x));
          transform: translateX(var(--x));
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.1) 0.24s;
  transition: -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.1) 0.24s;
  transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.1) 0.24s;
  transition: transform 0.3s cubic-bezier(0, 0, 0.265, 1.1) 0.24s, -webkit-transform 0.3s cubic-bezier(0, 0, 0.265, 1.1) 0.24s;
}
.rating > div span {
  display: block;
}
.rating > div span svg {
  color: var(--active);
  fill: rgba(0, 0, 0, 0.2);
}
.rating.animate-left > div, .rating.animate-right > div {
  display: block;
}
.rating.animate-left > div span, .rating.animate-right > div span {
  -webkit-animation: scale .28s linear .24s;
          animation: scale .28s linear .24s;
}
.rating.animate-left li.move-to:before {
  -webkit-animation: move-to-left .31s ease .36s;
          animation: move-to-left .31s ease .36s;
}
.rating.animate-left li.move-from:before {
  -webkit-animation: move-to-right .28s ease;
          animation: move-to-right .28s ease;
}
.rating.animate-left > div {
  -webkit-animation: double-left .32s linear .24s;
          animation: double-left .32s linear .24s;
}
.rating.animate-left > div span svg {
  -webkit-animation: left .3s ease, right-end .4s ease .4s;
          animation: left .3s ease, right-end .4s ease .4s;
}
.rating.animate-right li.move-to:before {
  -webkit-animation: move-to-right .31s ease .36s;
          animation: move-to-right .31s ease .36s;
}
.rating.animate-right li.move-from:before {
  -webkit-animation: move-to-left .28s ease;
          animation: move-to-left .28s ease;
}
.rating.animate-right > div {
  -webkit-animation: double-right .32s linear .24s;
          animation: double-right .32s linear .24s;
}
.rating.animate-right > div span svg {
  -webkit-animation: right .3s ease, left-end .4s ease .4s;
          animation: right .3s ease, left-end .4s ease .4s;
}


.rating ul li.active {
    --face: #ffed76;
    color: #ffed76;
	
	}

@-webkit-keyframes active-4 {
  40% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
}

@keyframes active-4 {
  40% {
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
}
@-webkit-keyframes active-span {
  60% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.16);
            transform: scale(1.16);
    opacity: 0;
  }
}
@keyframes active-span {
  60% {
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.16);
            transform: scale(1.16);
    opacity: 0;
  }
}
@-webkit-keyframes active-5 {
  15% {
    -webkit-transform: rotate(180deg) scale(1.1);
            transform: rotate(180deg) scale(1.1);
  }
  30% {
    -webkit-transform: rotate(360deg) scale(1.2);
            transform: rotate(360deg) scale(1.2);
  }
  70% {
    -webkit-transform: rotate(360deg) translateY(14%) scaleY(0.72);
            transform: rotate(360deg) translateY(14%) scaleY(0.72);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes active-5 {
  15% {
    -webkit-transform: rotate(180deg) scale(1.1);
            transform: rotate(180deg) scale(1.1);
  }
  30% {
    -webkit-transform: rotate(360deg) scale(1.2);
            transform: rotate(360deg) scale(1.2);
  }
  70% {
    -webkit-transform: rotate(360deg) translateY(14%) scaleY(0.72);
            transform: rotate(360deg) translateY(14%) scaleY(0.72);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes double-right {
  60% {
    -webkit-filter: drop-shadow(-5px 0 1px var(--active-pale)) drop-shadow(4px 0 1px var(--active-pale));
            filter: drop-shadow(-5px 0 1px var(--active-pale)) drop-shadow(4px 0 1px var(--active-pale));
  }
}
@keyframes double-right {
  60% {
    -webkit-filter: drop-shadow(-5px 0 1px var(--active-pale)) drop-shadow(4px 0 1px var(--active-pale));
            filter: drop-shadow(-5px 0 1px var(--active-pale)) drop-shadow(4px 0 1px var(--active-pale));
  }
}
@-webkit-keyframes scale {
  60% {
    -webkit-transform: scaleX(1.32);
            transform: scaleX(1.32);
    -webkit-filter: blur(0.5px);
            filter: blur(0.5px);
  }
}
@keyframes scale {
  60% {
    -webkit-transform: scaleX(1.32);
            transform: scaleX(1.32);
    -webkit-filter: blur(0.5px);
            filter: blur(0.5px);
  }
}
@-webkit-keyframes blink {
  0%,
    5%,
    15%,
    100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
  }
}
@keyframes blink {
  0%,
    5%,
    15%,
    100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
  }
}
@-webkit-keyframes double-left {
  60% {
    -webkit-filter: drop-shadow(5px 0 1px var(--active-pale)) drop-shadow(-4px 0 1px var(--active-pale));
            filter: drop-shadow(5px 0 1px var(--active-pale)) drop-shadow(-4px 0 1px var(--active-pale));
  }
}
@keyframes double-left {
  60% {
    -webkit-filter: drop-shadow(5px 0 1px var(--active-pale)) drop-shadow(-4px 0 1px var(--active-pale));
            filter: drop-shadow(5px 0 1px var(--active-pale)) drop-shadow(-4px 0 1px var(--active-pale));
  }
}
@-webkit-keyframes right {
  0%,
    100% {
    -webkit-transform-origin: 17% 100%;
            transform-origin: 17% 100%;
  }
  50% {
    -webkit-transform: rotate(-12deg) skewX(12deg);
            transform: rotate(-12deg) skewX(12deg);
  }
}
@keyframes right {
  0%,
    100% {
    -webkit-transform-origin: 17% 100%;
            transform-origin: 17% 100%;
  }
  50% {
    -webkit-transform: rotate(-12deg) skewX(12deg);
            transform: rotate(-12deg) skewX(12deg);
  }
}
@-webkit-keyframes left {
  0%,
    100% {
    -webkit-transform-origin: 83% 100%;
            transform-origin: 83% 100%;
  }
  50% {
    -webkit-transform: rotate(12deg) skewX(-12deg);
            transform: rotate(12deg) skewX(-12deg);
  }
}
@keyframes left {
  0%,
    100% {
    -webkit-transform-origin: 83% 100%;
            transform-origin: 83% 100%;
  }
  50% {
    -webkit-transform: rotate(12deg) skewX(-12deg);
            transform: rotate(12deg) skewX(-12deg);
  }
}
@-webkit-keyframes right-end {
  0%,
    100% {
    -webkit-transform-origin: 17% 100%;
            transform-origin: 17% 100%;
  }
  40% {
    -webkit-transform: rotate(-6deg) skewX(4deg) scaleX(0.92);
            transform: rotate(-6deg) skewX(4deg) scaleX(0.92);
  }
  70% {
    -webkit-transform: rotate(1deg) skewX(-8deg) scaleX(1.04);
            transform: rotate(1deg) skewX(-8deg) scaleX(1.04);
  }
}
@keyframes right-end {
  0%,
    100% {
    -webkit-transform-origin: 17% 100%;
            transform-origin: 17% 100%;
  }
  40% {
    -webkit-transform: rotate(-6deg) skewX(4deg) scaleX(0.92);
            transform: rotate(-6deg) skewX(4deg) scaleX(0.92);
  }
  70% {
    -webkit-transform: rotate(1deg) skewX(-8deg) scaleX(1.04);
            transform: rotate(1deg) skewX(-8deg) scaleX(1.04);
  }
}
@-webkit-keyframes left-end {
  0%,
    100% {
    -webkit-transform-origin: 83% 100%;
            transform-origin: 83% 100%;
  }
  40% {
    -webkit-transform: rotate(6deg) skewX(-4deg) scaleX(0.92);
            transform: rotate(6deg) skewX(-4deg) scaleX(0.92);
  }
  70% {
    -webkit-transform: rotate(-1deg) skewX(8deg) scaleX(1.04);
            transform: rotate(-1deg) skewX(8deg) scaleX(1.04);
  }
}
@keyframes left-end {
  0%,
    100% {
    -webkit-transform-origin: 83% 100%;
            transform-origin: 83% 100%;
  }
  40% {
    -webkit-transform: rotate(6deg) skewX(-4deg) scaleX(0.92);
            transform: rotate(6deg) skewX(-4deg) scaleX(0.92);
  }
  70% {
    -webkit-transform: rotate(-1deg) skewX(8deg) scaleX(1.04);
            transform: rotate(-1deg) skewX(8deg) scaleX(1.04);
  }
}
@-webkit-keyframes move-to-right {
  40% {
    -webkit-transform: translateX(3px) rotate(var(--r));
            transform: translateX(3px) rotate(var(--r));
  }
}
@keyframes move-to-right {
  40% {
    -webkit-transform: translateX(3px) rotate(var(--r));
            transform: translateX(3px) rotate(var(--r));
  }
}
@-webkit-keyframes move-to-left {
  40% {
    -webkit-transform: translateX(-3px) rotate(var(--r));
            transform: translateX(-3px) rotate(var(--r));
  }
}
@keyframes move-to-left {
  40% {
    -webkit-transform: translateX(-3px) rotate(var(--r));
            transform: translateX(-3px) rotate(var(--r));
  }
}




 
 
 
.transition{
  transition: all .3s ease-out;
}
.heading{
  text-align: center;
  font-size:0.8em;
  
}
.center-align{
  width: 300px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 50%;
  display: table;
  margin-top: -40px;
  margin-left: -150px;
}

input[type="radio"]{
  visibility: hidden;
  height: 0;
  width: 0;
}

label {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  background-color: #454545;
  color: white;
  padding: 5px 10px;
  border-radius: 3px;
  .transition;
}
input[type="radio"]:checked + label{
  background-color: #58ba83;
}



@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}



 
 
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
	display: none;
}
 
/*buttons*/
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 50px;
	cursor: pointer;
	padding: 10px;
	margin: 10px 5px;
  text-decoration: none;
  font-size: 14px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
    font-size: 20px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
    text-align: center;
    margin-bottom: 24px;
    font-weight: bold;
	    direction: rtl;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	/*CSS counters to number the steps*/
	counter-reset: step;
}
#progressbar li {
    list-style-type: none;
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    width: auto;
    float: right;
    position: relative;
    height: 25px;
    width: 20%;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 12px;
    color: #333;
    background: #d7d0d0;
    border-radius: 3px;
    margin: 0 auto 5px auto;
    padding-left: 7px;
    font-weight: bolder;
}
/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: #d7d0d0;
	position: absolute;
	right: -50%;
	top: 9px;
	z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}