/* @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=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito:wght@200&display=swap'); */

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

/* @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:            #0B1524;
                                         --secondary:          #384455;    
                                         --moderate:           #888E98;    
                                         --light:              #C4C7CB;    
                                         --notImportant:       #EBECEE;    
                                         --disabled:           #F5F6F7;  
                                           
                                         --danger:             #D84A45;    
                                         --confirm:            #374EF4;    
                                         --warning:            #EFBC69;    
                                         --approve:            #3D8A4C;  
                                         --danger10:           #d84a451d;    
                                         --confirm10:          #374df41d;    
                                         --warning10:          #efbc691d;    
                                         --approve10:          #3d8a4c1d;    

                                         --white:              #ffffff;
                                         --black:              #000000;
                                         --offWhite:           #FAFAFB;
                                         --offWhite10:         #fafafbc1;
                                         
                                         --dark:               #0b1524;
                                         --gray:               #384455; 
                                         --gray60:             #38445560;
                                         --gray30:             #38445530; 
                                         --gray10:             #86868639; 

                                         --blue:               #438EC4;
                                         --alert:              #D84A45;
                                         --nutral:             #3FB0FF;
                                         --action:             #FFA23A;  
                                         --green:              #7ED321;  
                                         --red:                #FE504F;  
                                         
                                         --padding:            var(--unit);
                                         --margin:             0px; 
                                         --gap:                calc(var(--unit)/2);  
                                         --font:               normal  500 12px 'Cairo', 'Montserrat', 'roboto', sans-serif; 
                                         --border:             1px solid  var(--moderate);  
                                         --border2:             1px solid  var(--notImportant);  
                                         --borderDash:         1px dashed var(--moderate);
                                         --shadow:             0px 0px calc(var(--unit) * 3) var(--notImportant);
                                         --radius:             var(--unit);

                                         --elementHeight:      32px; 
                                         --elementWidth:       230px; 

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

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

                                      
html, body                            {  
                                        height:                 100% !important; 
                                        width:                  100% !important; 
                                        padding:                0px !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(--primary); 
                                      
                                      }

.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:  400; 
                                        
                                      }   
 

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

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: var(--light);
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: var(--light);
  opacity: 1;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: var(--light);
  opacity: 1;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: var(--light);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: var(--light);
}

::placeholder {
  /* Most modern browsers support this now. */
  color: var(--light);
}


input:disabled {
  border: 0 !important;
  box-shadow: none !important;
  cursor: default !important;
}
input:disabled::-webkit-outer-spin-button,
input:disabled::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number]:disabled {
  -moz-appearance: textfield;
}


input::file-selector-button {
  border: 0px solid #fff;
  font-weight: bold;
  color: var(--white);
  border: thin solid grey;
  border-radius: 3px;
}
input[type="file"]::file-selector-button {
  background-color: var(--secondary);
  transition: 1s;
}

/* input[type="file"]::file-selector-button:hover {
  background-color: #81ecec;
  border: 2px solid #00cec9;
} */


textarea                  { 
  border:          var(--border); 
  width:           var(--elementWidth) ;  
  min-height: 120px;
  resize: none;
}