@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900;1000&display=swap');


/* @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap'); */

:root                                  {
                                        
                                         --unit:               4px; 
                                         --unitBorder:         4.5px;
                                         --arrowPosition:      50%; 

                                         --primary:            #57C4E5;
                                         --secondary:          #438EC4;    

                                         --white:              #ffffff;
                                         
                                         --dark:               #77797c;
                                         --gray:               #384455; 
                                         --gray60:             #38445560;
                                         --gray30:             #38445530; 
                                         --gray10:             #55433810; 

                                         --approve:            #38C976; 
                                         --alert:              #FE504F;
                                         --nutral:             #3FB0FF;
                                         --action:             #FFA23A;  
                                         
                                         --padding:            var(--unit);
                                         --margin:             0px; 
                                         --gap:                calc(var(--unit)/2);  
                                         --font:               normal  500 12px 'roboto', cairo ; 
                                         --border:             1px solid  var(--gray30);  
                                         --borderDash:         1px dashed var(--gray30);
                                         --shadow:             0px 0px calc(var(--unit) * 3) var(--gray30);
                                         --radius:             var(--unit);

                                         --elementHeight:      28px; 
                                         --elementWidth:       230px; 

                                         --designBorder:       1px dashed var(--gray5);

                                       }
 
                                       
/* Global Style Elemenets */
*                                     { 
                                         
                                        outline:                none; 
                                        box-sizing:             border-box; 
                                        margin:                 var(--margin);  
                                        padding:                var(--padding); 
                                        border-radius:          var(--radius); 
                                        
                                        font:                   var(--font);
                                       /* needs review */ 
                                      }
                                      

                                      
html, body                            {  
                                        height:                 100%; 
                                        width:                  100%; 
                                        padding:0 !important  ;
                                        margin:0px !important   
                                      }
   
 
                                      div                                   {
                                         border:             var(--designBorder)  
                                      } 

a, a:active, a:visited                { text-decoration: none; font-weight: 500; color: var(--secondary); }
a:hover                               { text-decoration: none; font-weight: 500; color: var(--primary)} 

                                      
input                                 {
                                        
                                        border-radius:    var(--radius);
                                        border:           var(--border);
                                        width:            var(--elementWidth);
                                        padding:          calc(2 * var(--padding));
                                        height:           var(--elementHeight);
                                        font:             var(--font); 
                                        color:            var(--elementFontColor); 
                                      
                                      }
textarea                         {
                                        
                                        border-radius:    var(--radius);
                                        border:           var(--border);
                                        width:            var(--elementWidth);
                                        padding:          calc(2 * var(--padding));
                                        height:           100px; 
                                        font:             var(--font); 
                                        color:            var(--elementFontColor); 
                                      
                                      }

.invalid {
  border:1px solid red
} 

select                                {
                                        
                                        border-radius:    var(--radius);
                                        border:           var(--border);
                                        width:            var(--elementWidth); 
                                        height:           var(--elementHeight); 
                                       
                                      }

 

input[type=checkbox]                  { 
                                          height:          calc(var(--elementHeight)/2); 
                                          width:           24px ; 
                                      }   

                                      
input[type=checkbox]::after           { 
                                          margin-left: 24px; 
                                          content: attr(label); 
                                          white-space: nowrap;
                                      }   
 
input[type=button]                    { 
                                        border:none;
                                        color:        var(--white); 
                                        font-weight:  var(--fontWeight); 
                                        background: var(--gray60)
                                        
                                      }   
 

input[type=button]:hover              { 
                                        cursor:       pointer;
                                        font-weight:  400;
                                        opacity:      0.9;
                                      }