RateuS

<style>


@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@800&display=swap');





* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	height: 100vh;
	background-color: #0d234b;
	color: #fff;
	font-size: 24px;
	display: flex;
	justify-content: center;
	align-items: center;
}




* {
    font-family: 'Almarai', sans-serif;
    text-align:right;
}




.frm-head{
    font-family: 'Almarai', sans-serif;
    font-size : 1.25em;
   padding-bottom :7%;
}

.RBtns{


    	display: flex !important;
}


.RD{margin-left:1% }

.frm_head{
    background-image:url(bg.png);
}
.logo{width:100%;
      align-content:center;
      text-align :center;
}
.logo img {width:70%;}

.content {
  text-align: center;
}
.content h1 {
  font-family: 'Sansita', sans-serif;
  letter-spacing: 1px;
  font-size: 50px;
  color: #282828;
  margin-bottom: 10px;
}
.content  i {
  color: #FFC107;
}
.content span {
  position: relative;
  display: inline-block;
}
.content  span:before, .content  span:after {
  position: absolute;
  content: "";
  background-color: #282828;
  width: 40px;
  height: 2px;
  top: 40%;
}
.content  span:before {
  left: -45px;
}
.content  span:after {
  right: -45px;
}
.content p {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
}
.wrapper {
  position: relative;
  display: inline-block;
  border: none;
  font-size: 14px;
  margin: 50px auto;
  left: 50%;
  transform: translateX(-50%);
}

.wrapper input {
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: 0;
}

.wrapper label {
  position: relative;
  float: right;
  color: #C8C8C8;
}

.wrapper label:before {
  margin: 5px;
  content: "\f005";
  font-family: FontAwesome;
  display: inline-block;
  font-size: 1.5em;
  color: #ccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.wrapper input:checked ~ label:before {
  color: #FFC107;
}

.wrapper label:hover ~ label:before {
  color: #ffdb70;
}

.wrapper label:hover:before {
  color: #FFC107;
}





        h1 {
            letter-spacing: -1px;
        }

        a {
            color: #5469d4;
            text-decoration: unset;
        }

        

        





  .Frmflex-flex {
            display: flex;
        }

        .align-center {
            align-items: center;
        }

        .center-center {
            align-items: center;
            justify-content: center;
        }

        .box-root {
            box-sizing: border-box;
        }

        .flex-direction--column {
            -ms-flex-direction: column;
            flex-direction: column;
        }


        .login-root {
            /*background: #fff;*/
            display: flex;
            width: 100%;
            min-height: 100vh;
            overflow: hidden;
        }
        


        .loginbackground {
            min-height: 692px;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            z-index: 0;
            overflow: hidden;
        }

        
      

        .loginbackground-gridContainer {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: [start] 1fr [left-gutter] (86.6px)[16] [left-gutter] 1fr [end];
            grid-template-columns: [start] 1fr [left-gutter] repeat(16, 86.6px) [left-gutter] 1fr [end];
            -ms-grid-rows: [top] 1fr [top-gutter] (64px)[8] [bottom-gutter] 1fr [bottom];
            grid-template-rows: [top] 1fr [top-gutter] repeat(8, 64px) [bottom-gutter] 1fr [bottom];
            justify-content: center;
            margin: 0 -2%;
            transform: rotate(-12deg) skew(-12deg);
        }
        
        .box-divider--light-all-2 {
            box-shadow: inset 0 0 0 2px #e3e8ee;
        }

        .box-background--blue {
            background-color: #5469d4;
        }

        .box-background--white {
            background-color: #ffffff;
        }

        .box-background--blue800 {
            background-color: #212d63;
        }

        .box-background--gray100 {
            background-color: #e3e8ee;
        }

        .box-background--cyan200 {
            background-color: #7fd3ed;
        }

        .padding-top--64 {
            padding-top: 64px;
        }

        .padding-top--24 {
            padding-top: 24px;
        }

        .padding-top--48 {
            padding-top: 48px;
        }

        .padding-bottom--24 {
            padding-bottom: 24px;
        }

        .padding-horizontal--48 {
            padding: 48px;
        }

        .padding-bottom--15 {
            padding-bottom: 15px;
        }


        .flex-justifyContent--center {
            -ms-flex-pack: center;
            justify-content: center;
        }

                .formbg {
            margin: 0px auto;
            width: 100%;
            max-width: 448px;
            background: white;
            border-radius: 4px;
            box-shadow: rgba(60, 66, 87, 0.12) 0px 7px 14px 0px, rgba(0, 0, 0, 0.12) 0px 3px 6px 0px;
        }


        .spanFrms {
            display: block;
            font-size: 20px;
            line-height: 28px;
            color: #1a1f36;
        }

        label {
            margin-bottom: 10px;
        }

        .reset-pass a,
        label {
            font-size: 14px;
            font-weight: 600;
            display: block;
        }

        .reset-pass>a {
            text-align: right;
            margin-bottom: 10px;
        }

        .grid--50-50 {
            display: grid;
            grid-template-columns: 50% 50%;
            align-items: center;
        }

        .field input {
            font-size: 16px;
            line-height: 28px;
            padding: 8px 16px;
            width: 100%;
            min-height: 44px;
            border: unset;
            border-radius: 4px;
            outline-color: rgb(84 105 212 / 0.5);
            background-color: rgb(255, 255, 255);
            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px;
        }


        
        .dateDiv {
            display: flex;
            justify-content: space-between;
        }

        .sizeDate {
            width: 45%;
        }

        .TimeDiv {

            display: flex;
            justify-content: space-around;
        }

        .sizeTime {
            width: 20%;
        }

        input[type="submit"] {
            background-color: rgb(84, 105, 212);
            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
                rgb(84, 105, 212) 0px 0px 0px 1px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
        }

        .Btn_div {
            display: flex;
            justify-content: space-around;
        }

        .btns {
            width: 46%;
            padding:10%;
            text-align:center !important;
        }

        .field-checkbox input {
            width: 20px;
            height: 15px;
            margin-right: 5px;
            box-shadow: unset;
            min-height: unset;
        }
        .div_txt{text-align :right !important;

              width:100%;
        }

#Txt_area {
  margin-top: 6% !important;
  margin-bottom: 9%;
  width: 100%;

}


        .field-checkbox label {
            display: flex;
            align-items: center;
            margin: 0;
        }

        a.ssolink {
            display: block;
            text-align: center;
            font-weight: 600;
        }

        .footer-link spanFrms {
            font-size: 14px;
            text-align: center;
        }

        .listing a {
            color: #697386;
            font-weight: 600;
            margin: 0 10px;
        }

        
        .animationRightLeft {
            animation: animationRightLeft 2s ease-in-out infinite;
        }

        .animationLeftRight {
            animation: animationLeftRight 2s ease-in-out infinite;
        }

        .tans3s {
            animation: animationLeftRight 3s ease-in-out infinite;
        }

        .tans4s {
            animation: animationLeftRight 4s ease-in-out infinite;
        }
        
        @keyframes animationLeftRight {
            0% {
                transform: translateX(0px);
            }

            50% {
                transform: translateX(1000px);
            }

            100% {
                transform: translateX(0px);
            }
        }

        @keyframes animationRightLeft {
            0% {
                transform: translateX(0px);
            }

            50% {
                transform: translateX(-1000px);
            }

            100% {
                transform: translateX(0px);
            }
        }






.thx{

    text-align :center ;
    padding:2%
}

</style> 
<div class="login-root">
            <div class="box-root Frmflex-flex flex-direction--column" style="min-height: 100vh;flex-grow: 1;">
                <div class="loginbackground box-background--white padding-top--64">
                    <div class="loginbackground-gridContainer">
                        <div class="box-root Frmflex-flex" style="grid-area: top / start / 8 / end;">
                            <div class="box-root"
                                style="background-image: linear-gradient(white 0%, rgb(247, 250, 252) 33%); flex-grow: 1;">
                            </div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 4 / 2 / auto / 5;">
                            <div class="box-root box-divider--light-all-2 animationLeftRight tans3s"
                                style="flex-grow: 1;"></div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 6 / start / auto / 2;">
                            <div class="box-root box-background--blue800" style="flex-grow: 1;"></div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 7 / start / auto / 4;">
                            <div class="box-root box-background--blue animationLeftRight" style="flex-grow: 1;"></div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 8 / 4 / auto / 6;">
                            <div class="box-root box-background--gray100 animationLeftRight tans3s"
                                style="flex-grow: 1;"></div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 2 / 15 / auto / end;">
                            <div class="box-root box-background--cyan200 animationRightLeft tans4s"
                                style="flex-grow: 1;"></div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 3 / 14 / auto / end;">
                            <div class="box-root box-background--blue animationRightLeft" style="flex-grow: 1;"></div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 4 / 17 / auto / 20;">
                            <div class="box-root box-background--gray100 animationRightLeft tans4s"
                                style="flex-grow: 1;"></div>
                        </div>
                        <div class="box-root Frmflex-flex" style="grid-area: 5 / 14 / auto / 17;">
                            <div class="box-root box-divider--light-all-2 animationRightLeft tans3s"
                                style="flex-grow: 1;"></div>
                        </div>
                    </div>
                </div>
                <div class="box-root padding-top--24 Frmflex-flex flex-direction--column"
                    style="flex-grow: 1; z-index: 9;">
               
                    <div class="formbg-outer">
                        <div class="formbg">

                            <header class="frm_head">
<div class="logo"><img src="https://alzahragh.com/wp-content/uploads/2023/08/Logo.png" /></div>
                            
                            </header>



                            <div class="formbg-inner padding-horizontal--48">

                                <h2 class="frm-head">تقييم ممثل خدمة العملاء</h2>
                             
                                <div id="stripe-login">
                                    <div class="field padding-bottom--2" ">
                                        <label for="email">لباقة ممثل خدمة العملاء</label>
  <div class="RBtns">
    <asp:RadioButton CssClass="RD" ID="Arate_1" runat="server" GroupName="A"  />
    <asp:RadioButton CssClass="RD" ID="Arate_2" runat="server" GroupName="A"/>
    <asp:RadioButton CssClass="RD" ID="Arate_3" runat="server" GroupName="A"/>
    <asp:RadioButton CssClass="RD" ID="Arate_4" runat="server" GroupName="A"/>
    <asp:RadioButton CssClass="RD" ID="Arate_5" runat="server" GroupName="A"/>
        </div>                          <asp:TextBox ID="Txt_A" runat="server" Visible="False"></asp:TextBox>
                                    </div>

                                                  <div class="field padding-bottom--1">
                                        <label for="email">الانتباه</label>
                                                      <div class="RBtns">
    <asp:RadioButton  CssClass="RD" ID="Brate_1" runat="server"  GroupName="B"/>
    <asp:RadioButton  CssClass="RD" ID="Brate_2" runat="server"  GroupName="B"/>
    <asp:RadioButton  CssClass="RD" ID="Brate_3" runat="server"  GroupName="B"/>
    <asp:RadioButton  CssClass="RD" ID="Brate_4" runat="server"  GroupName="B"/>
    <asp:RadioButton  CssClass="RD" ID="Brate_5" runat="server"  GroupName="B"/>
                                                                             <asp:TextBox ID="txt_B" runat="server" Visible="False"></asp:TextBox>
         </div>                         
                                    </div>

                                                               <div class="field padding-bottom--1">
                                        <label for="email">قوة المعرفة</label>
                                                                    <div class="RBtns">

    <asp:RadioButton CssClass="RD" ID="Crate_1" runat="server"  GroupName="C"/>
    <asp:RadioButton CssClass="RD" ID="Crate_2" runat="server" GroupName="C"/>
    <asp:RadioButton CssClass="RD" ID="Crate_3" runat="server" GroupName="C"/>
    <asp:RadioButton CssClass="RD" ID="Crate_4" runat="server" GroupName="C" />
    <asp:RadioButton CssClass="RD" ID="Crate_5" runat="server" GroupName="C"/>
                                                                                           <asp:TextBox ID="Txt_c" runat="server" Visible="False"></asp:TextBox>
        </div>                          
                                    </div>
             <div class="field padding-bottom--1">
 <label >الخدمة المقدمة بشكل عام </label>
               <div class="RBtns">                                                          
      <asp:RadioButton CssClass="RD" ID="Drate_1" runat="server" GroupName="D"/>
    <asp:RadioButton CssClass="RD" ID="Drate_2" runat="server" GroupName="D"/>
    <asp:RadioButton CssClass="RD" ID="Drate_3" runat="server" GroupName="D"/>
    <asp:RadioButton CssClass="RD" ID="Drate_4" runat="server" GroupName="D"/>
    <asp:RadioButton CssClass="RD" ID="Drate_5" runat="server" GroupName="D"/>      
                                      <asp:TextBox ID="Txt_d" runat="server" Visible="False"></asp:TextBox>                         
   </div>
          </div>                                                                                                   <div class="field padding-bottom--1">
        <label >ما مدي سهولة التواصل معنا؟ </label>
                  <div class="RBtns">                                                          
      <asp:RadioButton CssClass="RD" ID="Erate_1" runat="server" GroupName="E" />
    <asp:RadioButton CssClass="RD" ID="Erate_2" runat="server" GroupName="E"/>
    <asp:RadioButton CssClass="RD" ID="Erate_3" runat="server" GroupName="E"/>
    <asp:RadioButton CssClass="RD" ID="Erate_4" runat="server" GroupName="E"/>
    <asp:RadioButton CssClass="RD" ID="Erate_5" runat="server" GroupName="E"/>    
                                         <asp:TextBox ID="Txt_E" runat="server" Visible="False"></asp:TextBox>                           
   </div>
          </div>            
                                    
                                         <div class="field padding-bottom--1">
        <label >ملاحظات و اقتراحات أخرى

 </label>

          </div>                                                         
                                    
                                                                                 
  </div>

                      <div class="div_txt">        
                      <asp:TextBox  CssClass="TxtArea" ID="Txt_area"  runat="server"></asp:TextBox>                          
                    
   </div>                         
                   

                                    <div class="Btn_div">
                                        <asp:Button CssClass="btn" ID="Button1" runat="server" Text="Button" />
                                 
                                    </div>

                              </div>


                            <p class="thx">

  نشكرك على تقييم الخدمة المقدمة من قبل ممثل خدمة العملاء. 

                            </p>