#locimoi_m {
  display: flex;
  min-width: 320px;
  #m_close {
    display: none;
  }
  &.interactive #m_close {
    display: flex;
  }
  > .navigation {
    position: relative;
    padding-left: 44px;
    padding-top: 2px;
    .menu-item, #logout_link, #m_close  {
      padding: 0 2px;
      cursor: pointer;
      margin-right: 6px;
    }
    #logout_link a {
      text-decoration: none;
      color: var(--tertiary-70);
    }
    .overflow {
      left: 34px;
    }
  }
  --locimoi-pad: 10px;
  #md_register, #md_login, #md_pass_change {
    width: 300px;
  }
  #md_options, #md_subscription {
    width: 540px;
    form {
      flex-grow: 1;
    }
    .display {
      align-items: stretch;
    }
  }
  #md_options .display .user-form {
    margin-bottom: 100px;
    .form-title {
      font-weight: 400;
      font-size: 1.2em;
    }
  }
  #md_subscription .locus.content {
    .ci-desc {
      display: none;
    }
  }
  .display-form {
    padding: 20px;
    .label {
      font-size: 11pt;
      font-size: 0.9rem;
      margin-right: 4px;
      padding: 4px;
      border-radius: 4px;
      background-color: var(--tertiary-30);
      color: var(--tertiary-95);
    }
    .input {
      font-size: 13pt;
      font-size: 1rem;
    }
  }
  *, input, select {
    font-family: Roboto;
    font-family: Mukta;
  }
  &.interactive .locus.display {
    margin-top: 20px;
    padding: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    border-radius: 8px;
    border: 1px solid #EEE;
    padding-top: 40px;
  }
  .menu-display > .display {
    margin: 0 auto;
    
  }
  .form-process {
    font-family: var(--primary-font);
    font-weight: 100;
    font-size: 26px;
    font-size: 1.6rem;
    line-height: 1.24;
    margin: 0 auto 10px auto;
    text-align: center;
  } 
  #locus_gene_protected {
    width: 100%;
    justify-content: space-between;
    > .content-item {
      width: 48%;
      flex-grow: 1;
      min-width:  320px;
      margin: 1%;
    }
    .locus.gene:not(.index) {
      width: 100%;
    }
  }
  .user-form {
    .select-options {
      justify-content: space-between;
    }
    .select-option {
      border-radius: 4px;
      margin: 6px;
      .title {
        color: var(--primary-40);
        font-weight: 900; 
        font-size: 11pt;
        font-size: 0.9rem;
        margin-bottom: 10px;
      }
      .desc {
        font-weight: 100; 
        font-size: 1rem;
      }
      &:hover {
        .title {
          color: var(--primary-10);
        }
      }
      &.selected:hover, &.selected {
        .title {
          color: var(--primary-99);
        }
      }
    }
    .select-options {
      &[data-options="2"] {
        .select-option {
          width: calc(50% - 4px);
          box-sizing: border-box;
          margin:0;
        }
      }
    }
  }
  #register_type_form .select-options {
    margin-top:10px;
    margin-bottom: 10px;
  }
  #register_pass_form, #pass_change_form {
    .title {
      font-size: 11pt;
      font-size: 0.9rem;
      font-weight: 900;
      margin-top: 10px;
    }
    .rule {
      font-size: 11pt;
      font-size: 0.9rem;
    }
  }
  
  &.min {
    .locus.display {display: none !important;}
  }
  
}


#dash {
  flex-flow: column nowrap;
  position: absolute;
  left: 2px;
  top: 2px;
  width: 40px;
  flex-grow: 0;
  overflow: visible;
  z-index: 9000;
}
.dash-notifications { 
  position: relative;
  display: none;
  flex-flow: column nowrap;
  top: 48px;
}
.dash-notifications.vis {
  display: flex;
  width: auto;
  min-width: 300px;
}


.notifications-icon {
  position: absolute;
  top: 4px;
  width: 40px;
  height: 40px;
  background-image: url('../assets/notifications-white.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.interactive .notifications-icon {
  background-image: url('../assets/notifications-tertiary.svg');
}

/*
.notifications-icon {
  cursor: pointer;
  left: 10px;
  top: 8px;
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  margin-bottom: 8px;
  background:
        linear-gradient(
            to left,var(--tertiary-90) 10px,transparent 0)
            no-repeat right bottom/2px 8px,
        linear-gradient(
            to left,var(--tertiary-90) 10px,transparent 0)
            no-repeat left top/8px 2px
}
.notifications-icon::after,
.notifications-icon::before {
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box
}
.notifications-icon::before {
    width: 14px;
    height: 14px;
    border-left: 2px solid var(--tertiary-90);
    border-bottom: 2px solid var(--tertiary-90);
}
.notifications-icon::after {
    width: 6px;
    height: 6px;
    border-radius: 4px;
    background: var(--tertiary-90);
    top: -2px;
    right: -2px;
    transition: all 0.4s;
}
.notifications-icon:hover {
  background:
        linear-gradient(
            to left,var(--tertiary-10) 10px,transparent 0)
            no-repeat right bottom/2px 8px,
        linear-gradient(
            to left,var(--tertiary-10) 10px,transparent 0)
            no-repeat left top/8px 2px
}
.notifications-icon:hover::before {
  border-left: 2px solid var(--tertiary-10);
    border-bottom: 2px solid var(--tertiary-10);
}
.notifications-icon::after {
  animation-name: notify;
  animation-duration: 4s;
  transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
}
*/

@keyframes notify {
  0%   {transform: scale(1,1);background: var(--tertiary-60);}
  20%  {transform: scale(1.4,1.4);background: var(--secondary-60);}
  25%  {transform: scale(1,1);background: var(--secondary-95);}
  45%  {transform: scale(1.6,1.6);background: var(--secondary-60);}
  50%  {transform: scale(1,1);background: var(--tertiary-60);}
  
  70%  {transform: scale(1.4,1.4);background: var(--secondary-60);}
  75%  {transform: scale(1,1);background: var(--secondary-95)}
  95%  {transform: scale(1.6,1.6);background: var(--secondary-60);}
  100%  {transform: scale(1,1);background: var(--tertiary-60);}
}
.dash-notifications > div {
  align-items: center;
  padding: 2px 8px;
}
#authorisation_email_link {
  position: relative;
  font-size: 12px;
  font-size: 0.8rem;
  color: var(--primary-99);
  background-color: var(--tertiary-40);
  padding: 2px;
  border-radius: 3px;
  margin:2px 0;
  padding: var(--tiny-pad) var(--primary-pad);
  flex-grow:0;

}
.jump-link {
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:800;
  opacity: 0.28;
  cursor: pointer;
  transition: all 0.2s;
  background-color: var(--tertiary-60);
  &:hover {
   opacity: 0;
   transition: all 0.2s;
  }
}
#authorisation_email_link {
  background-color: var(--secondary-40);
}
#authorisation_email_link a {
  text-decoration: none;
  align-items: center;
  padding: 2px 8px;
  display: block;
  color: var(--primary-99);
  cursor: pointer;
}

.avatar {
  position: absolute;
  top:4px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-image: url('../assets/account-white.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.interactive .avatar {
  background-image: url('../assets/account-tertiary.svg');
}


/*.avatar {
  overflow: hidden;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 9px;
  right: 34px;
  cursor: pointer;
}
.avatar,
.avatar::after,
.avatar::before {
  display: block;
  box-sizing: border-box;
  border: 2px solid var(--tertiary-90);
  border-radius: 100px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.avatar::after,
.avatar::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 8px;
  height: 8px;
  color: var(--tertiary-70)
}
.avatar::after {
  border-radius: 200px;
  top: 11px;
  left: 0px;
  width: 18px;
  height: 18px;
}
*/

@media screen and (max-width: 1559px) {
  .avatar {
    display: block;
    margin-left: auto;
  }
  /*#locimoi_m:not(.interactive) {*/
  #locimoi_m {
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    > .navigation {
      position: absolute;
      top: 48px;
      padding: 6px;
      flex-flow: column nowrap;
      /*height: 0;
      overflow: hidden;*/
      visibility: collapse;
      z-index: 99999;
      align-content: flex-start;
      align-items: flex-start;
      flex-grow: 0;
      width: auto;
      right: 0;
      background-color: hsl(233, 14%, 36%);
      border-radius: 6px;
      .menu-item, #logout_link {
        background-color: hsl(233, 14%, 36%);
        flex-grow: 0;
        width: auto;
      }
      .menu-item {
        color: #FFF;
      }
      .close {
        color: var(--tertiary-20);
        background-color: var(--tertiary-99);
        border-radius: 6px;
        padding: 2px 2px !important;
      }
      #logout_link {
        padding: 0 !important;
      }
      #logout_link a {
        border: 1px solid var(--tertiary-40);
        background-color: var(--tertiary-10);
        padding: 2px 2px !important;
        border-radius: 6px;
      }
      &.exp {
        visibility: visible;
        .overflow {
          position: relative;
          top: 0;
          left:0;
          height: auto;
          flex-flow: column nowrap;
          visibility: visible;
          opacity: 1;       
        }
      }
    }
  }
  /*#locimoi_m.interactive {
    .avatar {display: none;}
  }*/
}

@media screen and (min-width: 1560px) {
  #locimoi_m {
    .avatar {display: none;}
  }
} 

.sub-prod {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  border: 1px solid rgba(000,000,000,0);
  &.incomplete {
    border: 1px solid var(--error-color);
  }
  .sp-title, .sp-desc {
    /*width: 100%;*/
    font-size: 12pt;
    font-size: 0.9rem;
  }
  .sp-desc {
    h4 {
      margin-top: 4px;
      margin-bottom: 4px;
    }
    p {
      margin: 2px;
    }
  }
  .sp-title {
    display: inline-block;
    font-size: 15pt;
    font-size: 1.2rem;
    font-weight: 100;
    margin-top: 18px;
    background-color: var(--tertiary-90);
    color: var(--tertiary-20);
    width: auto;
    flex-grow: 0;
    align-self: flex-start;
    padding: 6px;
    border-radius: 4px;
  }
  ul {
    padding: 10px 0;
    padding-left: 14px;
    margin: 4px 0;
  }
  .select-options {
    font-size: 14px;
    font-size: 0.9rem;
    .desc {
      font-size: 1rem;
      /*max-height: 30px;*/
      min-height: 30px;
      padding: 14px 6px;
      display: flex;
      flex-flow: row wrap;
      align-content: center;
      box-sizing: border-box;
      border-radius: 4px;
      background-color: var(--tertiary-99);
    }
    .select-option.selected .desc {background-color: var(--tertiary-30);}
  }
}

#orders_list {
  margin: 0 auto;
  flex-shrink: 1;
  width: 540px;
  max-width: calc(100% - 20px);
  flex-grow: 1;
  margin: 10px;
  &, div {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    box-sizing: border-box;
  }
  &.hidden {
    display: none;
  }
  .order {
    width: 100%;
    min-width: 100%;
    border-top: 1px solid var(--tertiary-40);
    align-items: center;
    align-content: center;
    .container {
      flex-flow: column nowrap;
    }
    .order-date, .order-invoice {
      width: 100px;
      flex-wrap: nowrap;
      flex-grow: 0;
      flex-shrink: 0;
      white-space: nowrap;
      font-size: 14px;
      font-size: 0.9rem;
    }
    .order-date::before {
      content: 'date: ';
      display: block;
      margin-right: 4px;
    }
    .order-invoice::before {
      content: 'invoice: ';
      display: block;
      margin-right: 4px;
    }
    .order-item {
      border-bottom: 1px solid var(--tertiary-40);
      align-items: center;
      width: 100%;
      min-width: 100%;
      padding: 4px 0;
      .oi-title {
        max-width: calc(100% - 120px);
        font-size: 14px;
        font-size: 0.9rem;
      }
    }
  }
}
.oi-download input:read-only {
  display: none !important;
}
.oi-download button {
  display: block !important;
}
.oi-download {
  padding: 0 4px;
  background-color: var(--tertiary-30);
  color: var(--tertiary-90);
  border-radius: 4px;
  box-shadow:0px 0px 10px rgba(255,255,255,0.4) inset;
  text-align: center; 
  cursor:pointer;
  justify-content: center;
  font-size: 11px;
  font-size: 0.8rem;
  margin-left: auto;
  &:hover {
    box-shadow:0px 0px 16px rgba(50,50,50,0.3) inset;
  }
}
#order_download_form {
  background:rgba(244,244,244,0.9);
  z-index:1000000;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgb(222,222,222);
  box-shadow: var(--box-shadow-1);
 .form-title {
   width: 100%;
 }
}
.subscription-manage {
  display: block;
  font-weight: 100;
  font-size: 20px;
  font-size: 1.2rem;
  padding: 6px;
  background-color: var(--error-color);
  color: #FFF;
  text-decoration: none;
  opacity: 0.92;
  border-radius: 6px;
  margin-top: 12px;
  text-align: center;
  &:hover {
    opacity: 1;
  }
}
#pass_valid{
  .rule {
    color: var(--tertiary--50);
  }
  .lower {color: var(--tertiary-10);}
  .upper {color: var(--tertiary-10);}
  .space {color: var(--tertiary-10);}
  .length {color: var(--tertiary-10);}
  .number {color: var(--tertiary-10);}
  
  .lower, .upper, .length, .number, .space {
    &:after {
    content: '\00d7';
    display: inline-block;
    color: var(--tertiary-40);
    padding: 0 6px 0 0;
    margin-left: 6px;
    }
  }

  
  &.lower .lower,
  &.upper .upper, 
  &.space .space,
  &.length .length,
  &.number .number {
    &:after {
    content: '\2713';
    display: inline-block;
    color: var(--tertiary-40);
    padding: 0 6px 0 0;
    margin-left: 6px;
    }
  }
}
label[for='c_terms'] {
  align-items: center;
}
.terms-link {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  color: var(--tertiary-60);
  text-decoration: none;
  font-size: 13pt;
  font-size: 1rem;
  a {
    position: absolute; 
    left: 0;
    top:0;
    right: 0;
    bottom: 0;
  }
}
.external {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  box-shadow:
    -2px 2px 0 0,
    -4px -4px 0 -2px,
    4px 4px 0 -2px;
  margin-left: -2px;
  margin-top: 1px;
  margin-left: 10px;
  margin-right: 6px;
}
.external::after,
.external::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  right: -4px;
}
.external::before {
  background: currentColor;
  transform: rotate(-45deg);
  width: 12px;
  height: 2px;
  top: 1px;
}
.external::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid;
  border-top: 2px solid;
  top: -4px;
}
.terms-link:hover {
  color: var(--tertiary-30);
  .external::after,
  .external::before {
    right: -6px;
  }
  .external::before {
    width: 12px;
    height: 2px;
    top: -1px;
  }
  .external::after {
    width: 8px;
    height: 8px;
    border-right: 2px solid;
    border-top: 2px solid;
    top: -6px;
  }
}
.certificate-link {
  font-size: 14px;
  font-size: 0.9rem;
  line-height: 1.7; 
  padding: var(--locimoi-pad);
  border-radius: 4px;
  color: #FFF;
  background-color: var(--tertiary-50);
  margin-top: 10px;
  cursor: pointer;
  &:hover {
    background-color: var(--tertiary-20);
  }
}
.otp-container {
  width: 100%;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #EEE;
  .course-title {
    font-size: 12pt;
    font-size: 0.9rem;
    font-weight: 900;
    margin-left: 6px;
  }
  .course-overview { 
    padding: 6px;
    .course-intro {
      * {
        font-size: 11px;
        font-size: 0.8rem;
        margin: 2px 0;
      }
    }
    .course-title {
      font-size: 12pt;
      font-size: 0.9rem;
    }
    .course-category {
      font-size: 9pt;
      font-size: 0.7rem;
      color: var(--tertiary-70);
      margin-bottom:6px;
    }
    &.hid {
      display: none;
    }
    
  }
  &:last-of-type {
    border-bottom: 0;
  }
}

.otp-request-link {
  position: absolute;
  display: inline-block;
  font-size: 14px;
  font-size: 0.9rem;
  line-height: 1.7;
  padding: 6px;
  margin:6px;
  background-color: #4e5269;
  color: #FFF;
  flex-grow: 0;
  border-radius: 6px;
  width: auto;
  cursor: pointer;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  &:hover {
    background-color: var(--tertiary-20);
  }
  &.hid {
    display: none;
  }
}

.otp-link-form {
  display: none;
  opacity: 0;
  visibility: hidden;
  padding: 6px;
}
.otp-link-form.vis {
  display: flex;
  opacity: 1;
  visibility: visible;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  > .otp-request-response {
    margin-top: 20px;
  }
}
.otp-request-response {
  margin-top: -4px;
  * {
    font-size: 14px;
    font-size: 0.9rem;
    line-height: 1.7;
  }
  .display {
    margin-top: 8px;
  }
  .otp-link-display {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 6px;
    box-sizing: border-box;
    width: 100%;
    .otp-details {
      position: relative;
      width: 100%;
      padding: 4px;
      box-sizing: border-box;
    }
    .otp-url {
      position: relative;
      padding: 4px;
      width: calc(100% - 30px);
      width: auto;
      max-width: 100%;
      box-sizing: border-box;
      padding: 3px;
      background-color: var(--tertiary-80);
      border: 1px solid var(--tertiary-70);
      border-radius: 2px;
      overflow-wrap: break-word;
    }
    .icon {
      position: relative;
      width: 26px;
      height: 26px;
      margin-left: 4px;
      box-sizing: border-box;
    }
    .otp-status {
      margin-left: 10px;
      border-left: 1px solid var(--tertiary-70);
      padding-left: 4px;
      margin-left: auto;
    }
    .otp-used {
      margin-left: 4px;
      padding-left: 4px;
      border-left: 1px solid var(--tertiary-70);
      /*margin-left: auto;*/
    }
  }
}

.copy-to-clipboard {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 14px;
  height: 18px;
  border: 2px solid;
  margin-left: -5px;
  margin-top: -4px;
  cursor: pointer;
  opacity: 0.7;
}
.copy-to-clipboard:hover {
  opacity: 1;
}
.copy-to-clipboard::after,
.copy-to-clipboard::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
}
.copy-to-clipboard::before {
  background:
    linear-gradient(to left, currentColor 5px, transparent 0) no-repeat right
      top/5px 2px,
    linear-gradient(to left, currentColor 5px, transparent 0) no-repeat left
      bottom/ 2px 5px;
  box-shadow: inset -4px -4px 0 -2px;
  bottom: -6px;
  right: -6px;
  width: 14px;
  height: 18px;
}
.copy-to-clipboard::after {
  width: 6px;
  height: 2px;
  background: currentColor;
  left: 2px;
  top: 2px;
  box-shadow:
    0 4px 0,
    0 8px 0;
}
.copy-pop {
  position: fixed;
  z-index: 99999;
  padding: 20px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background: var(--tertiary-40);
  color: #FFF;
  transition: all 260ms;
}
.copy-pop.removing {
  opacity: 0;
  transform: scale(0);
  transition: all 260ms;
}