@import url(https://fonts.googleapis.com/css?family=Nunito);

:root {

    --light-shadow: 0 4px 4px rgb(0 0 0 / 4%);
    --mat-border-light: rgba(0, 0, 0, .12);
    --mat-grey: #757575;
    --mat-grey-100: #f5f5f5;

    --light-black: rgba(0, 0, 0, .87);
    --ocean-blue: #464EB8;
    --medium-slate-blue: #7B83EB;
    --iris: #505AC9;
    --dark-iris: #6568A8;
    --darker-iris: #494C7D;
    --yoxel-blue: #007bff;
    --yoxel-blue-rgb: 0, 123, 255;
    --yoxel-blue-hsl: 211, 100%, 50%;
    --red: #d23f31;

    --mat-blue: #4285f4;
    --mdc-typography-font-family: 'Nunito', 'Noto', sans-serif;
}

html {
    background-color: #fff !important;
    color: var(--light-black);
    font: 400 14px var(--mdc-typography-font-family);
}


.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}


@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 425px)
  and (-webkit-min-device-pixel-ratio: 3) {


     html {
            font-size: 36px;
        }


}

 @media only screen
    and (min-device-width: 375px)
    and (max-device-height: 667px)
    and (-webkit-device-pixel-ratio: 2) {

         html {
                     font-size: 40px;
         }

}

/* 1792x828px at 326ppi */
@media only screen
    and (device-width: 414px)
    and (device-height: 896px)
    and (-webkit-device-pixel-ratio: 2) {
       html {
           font-size: 40px;
       }

}

body {

    --mdc-theme-primary: var(--light-black);
    --mdc-theme-secondary: var(--yoxel-blue);
    --primary: var(--yoxel-blue);
    --mdc-theme-text-primary-on-background: var(--light-black);
    --mdc-theme-text-icon-on-background: var(--light-black);
    --mdc-theme-on-primary: white;
    --mdc-text-field-fill-color: white;
    --mdc-text-field-ink-color: var(--light-black);
    --mdc-list-side-padding: 1.1rem;
    --mdc-typography-subtitle1-letter-spacing: 0.01rem;
    --mdc-menu-min-width: 14rem;
    --tab-header-height: 3rem;
    --light-border: 1px solid var(--mat-border-light);
    --mdc-menu-max-height: 30rem;
    --mdc-dialog-max-width: 90vw;
    --mdc-list-item-meta-size: 1.7rem;
    --mdc-menu-item-height: 3rem;

    margin: 0;
/*    min-height: 100vh;*/
}


.rf-content {
    --mdc-theme-secondary: var(--dark-iris);
    --tab-header-height: 4.5rem;
    --primary: var(--dark-iris);
}

h1, h2, h3, h4, p, strong, span, ul, li {
    margin: unset;
    color: inherit;
}

/* iconc */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v88/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}


*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.messages-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.spinner-container {
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

mwc-circular-progress {
    --mdc-theme-primary: var(--dark-iris);
    z-index: 1000;
}

.hidden {
    display: none !important;
}

.message-snackbar {
    max-width: 35rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;

    box-shadow: var(--light-shadow);
    z-index: 100;
}

mwc-top-app-bar-fixed {
    --mdc-theme-primary: white;
    --mdc-theme-on-primary: var(--light-black);
    z-index: 7 !important;
    position: fixed;
    --mdc-select-fill-color: white;

}

a {
    text-decoration: none;
}

.moved-left {
    margin-left: -.2em;
}

.light {
    opacity: 0.54;
}

.lighter {
    opacity: 0.74;
}


.secondary {
    color: var(--mdc-theme-secondary);
    --mdc-theme-text-primary-on-background: var(--mdc-theme-secondary);
    --mdc-theme-text-icon-on-background: var(--mdc-theme-secondary);
}

.primary {
    color: var(--mdc-theme-primary);
    --mdc-theme-text-primary-on-background: var(--mdc-theme-primary);
    --mdc-theme-text-icon-on-background: var(--mdc-theme-primary);
}

.blue, a {
    color: var(--yoxel-blue);
    --mdc-theme-text-primary-on-background: var(--yoxel-blue);
    --mdc-theme-text-icon-on-background: var(--yoxel-blue);

}

.red {
    color: var(--red);
    --mdc-theme-text-primary-on-background: var(--red);
    --mdc-theme-text-icon-on-background: var(--red);
}

.grey {
    color: var(--mat-grey);
    --mdc-theme-text-primary-on-background: var(--mat-grey);
    --mdc-theme-text-icon-on-background: var(--mat-grey);
}

.text-bold {
    font-weight: bold;
}

.clickable, a {
    cursor: pointer;
}


.content-width {
    width: fit-content;
}


mwc-checkbox {
    margin-left: -1rem;
}


mwc-radio.no-left-margin {
    margin-left: -0.7rem;
}

.subtitle--level-1 {
    font-weight: bold;
    font-size: 1.2rem;
}

.subtitle--level-3 {
    font-size: 1.1rem;
}

.text--level-2 {
    font-size: .9rem;
}

mwc-button {
  --mdc-theme-primary: var(--primary);
  --mdc-theme-on-primary: white;
}

mwc-button.black {
  --mdc-theme-primary: var(--light-black);
}

.tab-header {

  --mdc-theme-text-icon-on-background: var(--light-black);
  display: flex;
  justify-content: space-between;
  position: fixed;
  height: var(--tab-header-height);
  align-items: center;
  width: 100vw;
  z-index: 7;
  padding: 0 2rem;
  box-sizing: border-box;
  left: 0;
  background-color: white;
  top: 0;
  transition: top .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--light-shadow);
}

.no-left-padding {
    padding-left: 0;
}

.back-arrow-container {
    width: 2rem;
    display: flex;
    justify-content: center;
}


.rf-content .tab-header {

  --mdc-theme-text-icon-on-background: white;
  padding: 0 2rem;
  background-color: var(--primary);
  top: 0;
  color: white;
}

.profile-icon {
    margin-right: -1rem;
}

.profile-menu {

    left: calc(50px - var(--mdc-menu-min-width));
    top: 50px;
    --mdc-list-item-graphic-margin: 1.3rem;
    position: absolute;

}


.profile-menu.wide {
    --mdc-menu-min-width: 18.5rem;
}


.growing-block {
    flex-grow: 1;
  }

  .title--level-1 {
      font-size: 1.3rem;
      font-weight: bold;
  }

  .title--level-2 {
      font-weight: bold;
      font-size: 1.2rem;
  }

  .title--level-3 {
        font-size: 1.1rem;
    }

  .tab-page-wrapper {
        height: calc(100vh);
        position: relative;
        overflow: auto;
        box-sizing: border-box;
        height: 100vh;
        padding-top: var(--tab-header-height);
      }



mwc-select {
   width: 20rem;
}

.non-clickable {
    cursor: default;
    pointer-events: none;
}

.mdc-list-divider {
    background-color: rgba(0, 0, 0, 0.12);
    height: 1px;
    padding: 0;
    background-clip: content-box;
}

mwc-textfield {
    width: 25rem;
}

mwc-textfield.with-error {
                        --mdc-theme-primary: var(--red);
                        --mdc-text-field-disabled-ink-color: var(--red);
                        --mdc-text-field-label-ink-color: var(--red);
                        --mdc-text-field-idle-line-color: var(--red);
                      }

mwc-textfield.low-disabling, mwc-textarea.low-disabling {
                        --mdc-text-field-disabled-fill-color: white;
                        --mdc-text-field-disabled-ink-color: var(--mdc-theme-primary);
                      }

mwc-textfield.blue-disabling, mwc-textarea.blue-disabling {
                        --mdc-text-field-disabled-fill-color: white;
                        --mdc-text-field-disabled-ink-color: blue;
                        --mdc-text-field-label-ink-color: var(--mdc-theme-primary);
                      }

.token-container {
    width: 60rem;
    word-break: break-all;
}


.expand-icon {
    transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-down {
    transform: rotate(270deg);
}

.icon-up {
    transform: rotate(90deg);
}

.header-card--container {
    padding: .5rem 2rem;
    border-bottom: var(--light-border);
}

.slide-panel {
    overflow: hidden;
    padding: .5rem 2rem;
    border-bottom: var(--light-border);

}

.slide-panel-content {
    transition:  height .4s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
}

.slide-panel-header {
    color: var(--mat-grey);
    font-size: .9rem;
    margin-bottom: .5rem;
}

.simple-card {
   margin: 0 -1rem;
   padding: .5rem 1rem;
   border-radius: 5px;
   box-sizing: border-box;
   overflow: hidden;

   transition: display .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.simple-card.hoverable:hover {
    background-color: var(--mat-grey-100);
}

.slds-icon--larger {
    width: 2.5rem;
    height: 2.5rem;
}

.slds-icon-standard-color {
    background-color: #bdc1c6;
}

.icon-container--small {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-container--medium {
    width: 3rem;
    height: 3rem;
}

pre {
  font-family: var(--mdc-typography-font-family);
}

mwc-icon, mwc-icon-button {
    --mdc-icon-size: 1.5rem;
  }

mwc-icon.small, mwc-icon-button.small {
    --mdc-icon-size: 1.2rem;
  }

  mwc-icon.x-small, mwc-icon-button.x-small {
    --mdc-icon-size: 1rem;
  }

mwc-icon.xx-small, mwc-icon-button.xx-small {
  --mdc-icon-size: .8rem;
}

mwc-icon.medium, mwc-icon-button.medium {
   --mdc-icon-size: 1.4rem;
}

mwc-icon.xx-large, mwc-icon-button.xx-large {
   --mdc-icon-size: 3rem;
}

mwc-icon.no-left-margin {
    margin-left: -.25px;
  }

.input-width--medium {
    width: 27rem;
}

.hidden {
    display: none;
}