@ -330,470 +330,6 @@ $loading-height: 16px;
 
		
	
		
			
				  } 
 
		
	
		
			
				}  
		
	
		
			
				
 
		
	
		
			
				. full-screen-flow  {  
		
	
		
			
				  position :  absolute ; 
 
		
	
		
			
				  left :  0 ; 
 
		
	
		
			
				  right :  0 ; 
 
		
	
		
			
				  top :  0 ; 
 
		
	
		
			
				  bottom :  0 ; 
 
		
	
		
			
				  font-family :  $session-font-default ; 
 
		
	
		
			
				
 
		
	
		
			
				  & . overlay  { 
 
		
	
		
			
				    / /  . modal ,  used  for  the  settings  view ,  is  100 
 
		
	
		
			
				    z-index :  200 ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  color :  black ; 
 
		
	
		
			
				  a  { 
 
		
	
		
			
				    color :  $blue ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				  background :  linear-gradient ( 
 
		
	
		
			
				    to  bottom , 
 
		
	
		
			
				    /* (1 - 0.41) * 255 + 0.41 * 213*/  rgb ( 238 ,  238 ,  238 )  0 % , 
 
		
	
		
			
				    /* (1 - 0.19) * 255 + 0.19 * 191*/  rgb ( 243 ,  243 ,  243 )  12 % , 
 
		
	
		
			
				    rgb ( 255 ,  255 ,  255 )  27 % , 
 
		
	
		
			
				    rgb ( 255 ,  255 ,  255 )  60 % , 
 
		
	
		
			
				    /* (1 - 0.19) * 255 + 0.19 * 222*/  rgb ( 249 ,  249 ,  249 )  85 % , 
 
		
	
		
			
				    /* (1 - 0.27) * 255 + 0.27 * 98 */  rgb ( 213 ,  213 ,  213 )  100 % 
 
		
	
		
			
				  ) ; 
 
		
	
		
			
				  display :  flex ; 
 
		
	
		
			
				  align-items :  center ; 
 
		
	
		
			
				  text-align :  center ; 
 
		
	
		
			
				
 
		
	
		
			
				  font-size :  10 pt ; 
 
		
	
		
			
				  input  { 
 
		
	
		
			
				    margin-bottom :  1 em ; 
 
		
	
		
			
				    font-size :  12 pt ; 
 
		
	
		
			
				    font-family :  $session-font-default ; 
 
		
	
		
			
				    border :  2 px  solid  $blue ; 
 
		
	
		
			
				    padding :  0 .5 em ; 
 
		
	
		
			
				    text-align :  center ; 
 
		
	
		
			
				    width :  20 em ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  @media  ( min-height :  750 px )  and  ( min-width :  700 px )  { 
 
		
	
		
			
				    font-size :  14 pt ; 
 
		
	
		
			
				
 
		
	
		
			
				    input  { 
 
		
	
		
			
				      font-size :  16 pt ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  # qr  { 
 
		
	
		
			
				    display :  inline-block ; 
 
		
	
		
			
				
 
		
	
		
			
				    & . ready  { 
 
		
	
		
			
				      border :  5 px  solid  $blue ; 
 
		
	
		
			
				      box-shadow :  2 px  2 px  4 px  rgba ( 0 ,  0 ,  0 ,  0 .5 ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    img  { 
 
		
	
		
			
				      height :  20 em ; 
 
		
	
		
			
				      border :  5 px  solid  white ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    @media  ( max-height :  475 px )  { 
 
		
	
		
			
				      img  { 
 
		
	
		
			
				        width :  8 em ; 
 
		
	
		
			
				        height :  8 em ; 
 
		
	
		
			
				      } 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    . dot  { 
 
		
	
		
			
				      width :  14 px ; 
 
		
	
		
			
				      height :  14 px ; 
 
		
	
		
			
				      border :  3 px  solid  $blue ; 
 
		
	
		
			
				      border-radius :  50 % ; 
 
		
	
		
			
				      float :  left ; 
 
		
	
		
			
				      margin :  0 6 px ; 
 
		
	
		
			
				      transform :  scale ( 0 ) ; 
 
		
	
		
			
				
 
		
	
		
			
				      animation :  loading  1500 ms  ease  infinite  0 ms ; 
 
		
	
		
			
				      & : nth-child ( 2 )  { 
 
		
	
		
			
				        animation :  loading  1500 ms  ease  infinite  333 ms ; 
 
		
	
		
			
				      } 
 
		
	
		
			
				      & : nth-child ( 3 )  { 
 
		
	
		
			
				        animation :  loading  1500 ms  ease  infinite  666 ms ; 
 
		
	
		
			
				      } 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    canvas  { 
 
		
	
		
			
				      display :  none ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . os-icon  { 
 
		
	
		
			
				    height :  3 em ; 
 
		
	
		
			
				    width :  3 em ; 
 
		
	
		
			
				    vertical-align :  text-bottom ; 
 
		
	
		
			
				    display :  inline-block ; 
 
		
	
		
			
				    margin :  0 .5 em ; 
 
		
	
		
			
				
 
		
	
		
			
				    & . apple  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/apple.svg ' ,  black ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    & . android  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/android.svg ' ,  black ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . header  { 
 
		
	
		
			
				    font-weight :  normal ; 
 
		
	
		
			
				    margin-bottom :  1 .5 em ; 
 
		
	
		
			
				
 
		
	
		
			
				    font-size :  20 pt ; 
 
		
	
		
			
				
 
		
	
		
			
				    @media  ( min-height :  750 px )  and  ( min-width :  700 px )  { 
 
		
	
		
			
				      font-size :  28 pt ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . body-text  { 
 
		
	
		
			
				    max-width :  22 em ; 
 
		
	
		
			
				    text-align :  left ; 
 
		
	
		
			
				    margin-left :  auto ; 
 
		
	
		
			
				    margin-right :  auto ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				  . body-text-wide  { 
 
		
	
		
			
				    max-width :  30 em ; 
 
		
	
		
			
				    text-align :  left ; 
 
		
	
		
			
				    margin-left :  auto ; 
 
		
	
		
			
				    margin-right :  auto ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  form  { 
 
		
	
		
			
				    height :  100 % ; 
 
		
	
		
			
				    width :  100 % ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				  . step  { 
 
		
	
		
			
				    display :  flex ; 
 
		
	
		
			
				    align-items :  center ; 
 
		
	
		
			
				    min-width :  100 % ; 
 
		
	
		
			
				    min-height :  100 % ; 
 
		
	
		
			
				    margin :  auto ; 
 
		
	
		
			
				    padding :  10 px  0 ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				  . step-body  { 
 
		
	
		
			
				    margin-left :  auto ; 
 
		
	
		
			
				    margin-right :  auto ; 
 
		
	
		
			
				    max-width :  35 em ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . inner  { 
 
		
	
		
			
				    display :  flex ; 
 
		
	
		
			
				    align-items :  center ; 
 
		
	
		
			
				    justify-content :  center ; 
 
		
	
		
			
				    flex-direction :  column ; 
 
		
	
		
			
				    height :  100 % ; 
 
		
	
		
			
				    width :  100 % ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . banner-image  { 
 
		
	
		
			
				    margin :  1 em ; 
 
		
	
		
			
				    display :  none ; 
 
		
	
		
			
				
 
		
	
		
			
				    @media  ( min-height :  550 px )  { 
 
		
	
		
			
				      display :  inline-block ; 
 
		
	
		
			
				      height :  10 em ; 
 
		
	
		
			
				      width :  10 em ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . banner-icon  { 
 
		
	
		
			
				    display :  none ; 
 
		
	
		
			
				    margin :  1 em ; 
 
		
	
		
			
				
 
		
	
		
			
				    / /  640px  by  338px  is  the  smallest  the  window  can  go 
 
		
	
		
			
				    @media  ( min-height :  550 px )  { 
 
		
	
		
			
				      display :  inline-block ; 
 
		
	
		
			
				      height :  10 em ; 
 
		
	
		
			
				      width :  10 em ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    / /  generic 
 
		
	
		
			
				    & . check-circle-outline  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/check-circle-outline.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    & . alert-outline  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/alert-outline.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    / /  import  and  export 
 
		
	
		
			
				    & . folder-outline  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/folder-outline.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    & . import  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/import.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    & . export  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/export.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    / /  registration  process 
 
		
	
		
			
				    & . lead-pencil  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/lead-pencil.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    & . sync  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/sync.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    / /  delete 
 
		
	
		
			
				    & . alert-outline-red  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/alert-outline.svg ' ,  red ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    & . delete  { 
 
		
	
		
			
				      @include  color-svg ( ' ../images/delete.svg ' ,  #dedede ) ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . button  { 
 
		
	
		
			
				    cursor :  pointer ; 
 
		
	
		
			
				    display :  inline-block ; 
 
		
	
		
			
				    border :  none ; 
 
		
	
		
			
				    min-width :  300 px ; 
 
		
	
		
			
				    padding :  0 .75 em ; 
 
		
	
		
			
				    color :  white ; 
 
		
	
		
			
				    background :  $blue ; 
 
		
	
		
			
				    box-shadow :  2 px  2 px  4 px  rgba ( 0 ,  0 ,  0 ,  0 .5 ) ; 
 
		
	
		
			
				    user-select :  none ; 
 
		
	
		
			
				    font-size :  12 pt ; 
 
		
	
		
			
				    margin-top :  4 px ; 
 
		
	
		
			
				
 
		
	
		
			
				    & . neutral  { 
 
		
	
		
			
				      color :  black ; 
 
		
	
		
			
				      background :  #dedede ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    & . destructive  { 
 
		
	
		
			
				      background :  red ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    @media  ( min-height :  750 px )  and  ( min-width :  700 px )  { 
 
		
	
		
			
				      font-size :  20 pt ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				  a . link  { 
 
		
	
		
			
				    display :  block ; 
 
		
	
		
			
				    cursor :  pointer ; 
 
		
	
		
			
				    text-decoration :  underline ; 
 
		
	
		
			
				    margin :  0 .5 em ; 
 
		
	
		
			
				    color :  #2090ea ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . nav  { 
 
		
	
		
			
				    width :  100 % ; 
 
		
	
		
			
				    bottom :  50 px ; 
 
		
	
		
			
				    margin-top :  auto ; 
 
		
	
		
			
				    padding-bottom :  2 em ; 
 
		
	
		
			
				    padding-left :  20 px ; 
 
		
	
		
			
				    padding-right :  20 px ; 
 
		
	
		
			
				
 
		
	
		
			
				    . instructions  { 
 
		
	
		
			
				      text-align :  left ; 
 
		
	
		
			
				      margin-left :  auto ; 
 
		
	
		
			
				      margin-right :  auto ; 
 
		
	
		
			
				      margin-bottom :  2 em ; 
 
		
	
		
			
				      margin-top :  2 em ; 
 
		
	
		
			
				      max-width :  30 em ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    . instructions : after  { 
 
		
	
		
			
				      clear :  both ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    . android  { 
 
		
	
		
			
				      float :  left ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    . apple  { 
 
		
	
		
			
				      float :  right ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    . label  { 
 
		
	
		
			
				      float :  left ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				    . body  { 
 
		
	
		
			
				      float :  left ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				}  
		
	
		
			
				
 
		
	
		
			
				. standalone-fullscreen  {  
		
	
		
			
				  background :  $color-dark-85 ; 
 
		
	
		
			
				  overflow-y :  auto ; 
 
		
	
		
			
				}  
		
	
		
			
				
 
		
	
		
			
				. standalone  {  
		
	
		
			
				  color :  $color-dark-05 ; 
 
		
	
		
			
				  height :  auto ; 
 
		
	
		
			
				  padding :  0 ; 
 
		
	
		
			
				  background :  inherit ; 
 
		
	
		
			
				
 
		
	
		
			
				  . step-body  { 
 
		
	
		
			
				    width :  80 % ; 
 
		
	
		
			
				    min-width :  100 px ; 
 
		
	
		
			
				    max-width :  none ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . section-toggle  { 
 
		
	
		
			
				    background :  $color-dark-75 ; 
 
		
	
		
			
				
 
		
	
		
			
				    & : first-of-type  { 
 
		
	
		
			
				      border-radius :  8 px  8 px  0 0 ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    & : last-of-type  { 
 
		
	
		
			
				      border-radius :  0 0 8 px  8 px ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . section-toggle-visible : last-of-type  { 
 
		
	
		
			
				    border-bottom-left-radius :  0 ; 
 
		
	
		
			
				    border-bottom-right-radius :  0 ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . section-content  { 
 
		
	
		
			
				    padding :  1 em  0 ; 
 
		
	
		
			
				    background-color :  $color-dark-72 ; 
 
		
	
		
			
				
 
		
	
		
			
				    & : last-of-type  { 
 
		
	
		
			
				      border-radius :  0 0 8 px  8 px ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  # display-name  { 
 
		
	
		
			
				    font-weight :  bold ; 
 
		
	
		
			
				    font-size :  25 px ; 
 
		
	
		
			
				    border-radius :  100 px ; 
 
		
	
		
			
				
 
		
	
		
			
				    & : focus  { 
 
		
	
		
			
				      outline :  none ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  # status  { 
 
		
	
		
			
				    margin-top :  12 px ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  input  { 
 
		
	
		
			
				    border :  1 px  solid  $color-light-60 ; 
 
		
	
		
			
				    border-radius :  4 px ; 
 
		
	
		
			
				
 
		
	
		
			
				    & : focus  { 
 
		
	
		
			
				      outline :  solid  1 px  $blue ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . button  { 
 
		
	
		
			
				    background :  $color-loki-green-gradient ; 
 
		
	
		
			
				    border-radius :  100 px ; 
 
		
	
		
			
				
 
		
	
		
			
				    & : disabled , 
 
		
	
		
			
				    & : disabled : hover  { 
 
		
	
		
			
				      background :  $color-loki-dark-gray ; 
 
		
	
		
			
				      cursor :  default ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  # mnemonic-display  { 
 
		
	
		
			
				    margin :  2 em  8 px ; 
 
		
	
		
			
				    font-size :  16 px ; 
 
		
	
		
			
				    font-style :  italic ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . standalone-register-warning  { 
 
		
	
		
			
				    font-weight :  bold ; 
 
		
	
		
			
				    font-size :  16 px ; 
 
		
	
		
			
				    margin :  0 px  8 px ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . standalone-register-language  { 
 
		
	
		
			
				    display :  flex ; 
 
		
	
		
			
				    align-items :  center ; 
 
		
	
		
			
				    justify-content :  center ; 
 
		
	
		
			
				    margin-top :  2 em ; 
 
		
	
		
			
				
 
		
	
		
			
				    & . restore  { 
 
		
	
		
			
				      margin-bottom :  2 em ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    span  { 
 
		
	
		
			
				      margin-right :  8 px ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . input-header  { 
 
		
	
		
			
				    margin-bottom :  8 px ; 
 
		
	
		
			
				    font-size :  14 px ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . button . grey  { 
 
		
	
		
			
				    background :  $grey ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . buttons  { 
 
		
	
		
			
				    margin-top :  24 px ; 
 
		
	
		
			
				  } 
 
		
	
		
			
				
 
		
	
		
			
				  . select-container  { 
 
		
	
		
			
				    position :  relative ; 
 
		
	
		
			
				    display :  block ; 
 
		
	
		
			
				    width :  13 em ; 
 
		
	
		
			
				    line-height :  2 .8 ; 
 
		
	
		
			
				    background :  white ; 
 
		
	
		
			
				    overflow :  hidden ; 
 
		
	
		
			
				    border-radius :  0 .25 em ; 
 
		
	
		
			
				
 
		
	
		
			
				    select  { 
 
		
	
		
			
				      / /  Reset  select 
 
		
	
		
			
				      -webkit-appearance :  none ; 
 
		
	
		
			
				      -moz-appearance :  none ; 
 
		
	
		
			
				      -ms-appearance :  none ; 
 
		
	
		
			
				      appearance :  none ; 
 
		
	
		
			
				      outline :  0 ; 
 
		
	
		
			
				      box-shadow :  none ; 
 
		
	
		
			
				      border :  0 !important ; 
 
		
	
		
			
				      background :  white ; 
 
		
	
		
			
				      background-image :  none ; 
 
		
	
		
			
				
 
		
	
		
			
				      / /  Our  own  stlying 
 
		
	
		
			
				      width :  100 % ; 
 
		
	
		
			
				      height :  100 % ; 
 
		
	
		
			
				      margin :  0 ; 
 
		
	
		
			
				      padding :  0 0 0 0 .5 em ; 
 
		
	
		
			
				      color :  black ; 
 
		
	
		
			
				      cursor :  pointer ; 
 
		
	
		
			
				      font-size :  14 px ; 
 
		
	
		
			
				
 
		
	
		
			
				      : : -ms-expand  { 
 
		
	
		
			
				        display :  none ; 
 
		
	
		
			
				      } 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    & : after  { 
 
		
	
		
			
				      content :  ' \25BC ' ; 
 
		
	
		
			
				      position :  absolute ; 
 
		
	
		
			
				      top :  0 ; 
 
		
	
		
			
				      right :  0 ; 
 
		
	
		
			
				      bottom :  0 ; 
 
		
	
		
			
				      padding :  0 1 em ; 
 
		
	
		
			
				      background :  $color-dark-85 ; 
 
		
	
		
			
				      pointer-events :  none ; 
 
		
	
		
			
				      -webkit-transition :  $session-transition-duration  all  ease ; 
 
		
	
		
			
				      -o-transition :  $session-transition-duration  all  ease ; 
 
		
	
		
			
				      transition :  $session-transition-duration  all  ease ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				  @media  ( min-height :  750 px )  and  ( min-width :  700 px )  { 
 
		
	
		
			
				    . input-header  { 
 
		
	
		
			
				      font-size :  18 px ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    . standalone-register-warning  { 
 
		
	
		
			
				      font-size :  20 px ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				
 
		
	
		
			
				    # mnemonic-display  { 
 
		
	
		
			
				      font-size :  20 px ; 
 
		
	
		
			
				    } 
 
		
	
		
			
				  } 
 
		
	
		
			
				}  
		
	
		
			
				
 
		
	
		
			
				/ / yellow  border  fix  
		
	
		
			
				. inbox : focus  {  
		
	
		
			
				  outline :  none ;