/***

FILE: app.css

TABLE OF CONTENTS

1.- FONTS
 1.1.- Text
 1.2.- Icon
2.- CONTENT
3.- CONTROLS
 3.1.- Button
4.- POPUP

***/

@import './styles/index.scss';

/* 1.1.- FONTS: Text
   ----------------------------- */

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-regular.svg)
      format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito/nunito-sans-v3-latin-italic.svg) format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200.svg) format('svg');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito200/nunito-sans-v3-latin-200italic.svg)
      format('svg');
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300.svg) format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito300/nunito-sans-v3-latin-300italic.svg)
      format('svg');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600.svg) format('svg');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito600/nunito-sans-v3-latin-600italic.svg)
      format('svg');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700.svg) format('svg');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito700/nunito-sans-v3-latin-700italic.svg)
      format('svg');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800.svg) format('svg');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito800/nunito-sans-v3-latin-800italic.svg)
      format('svg');
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900.svg) format('svg');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'NunitoSans';
  src: url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.eot);
  src: url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.eot?#iefix)
      format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.woff)
      format('woff'),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.ttf)
      format('truetype'),
    url(#{$_PATH_TO_FONTS}/nunito900/nunito-sans-v3-latin-900italic.svg)
      format('svg');
  font-weight: 900;
  font-style: italic;
}

/* 1.2.- FONTS: Icon
   ----------------------------- */
@font-face {
  font-family: 'icomoon';
  src: url(#{$_PATH_TO_FONTS}/icon.eot?iptng1);
  src: url(#{$_PATH_TO_FONTS}/icon.eot?iptng1#iefix) format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/icon.ttf?iptng1) format('truetype'),
    url(#{$_PATH_TO_FONTS}/icon.woff?iptng1) format('woff'),
    url(#{$_PATH_TO_FONTS}/icon.svg?iptng1#icomoon) format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-mailbox:before {
  content: '\e900';
}
.icon-doc:before {
  content: '\e901';
}
.icon-calendar:before {
  content: '\e904';
}
.icon-trash:before {
  content: '\e905';
}
.icon-lock:before {
  content: '\e906';
}
.icon-archive:before {
  content: '\e907';
}
.icon-tag:before {
  content: '\e908';
}
.icon-not:before {
  content: '\e909';
}
.icon-edit:before {
  content: '\e911';
}
.icon-mail:before {
  content: '\e90f';
}
.icon-file:before {
  content: '\e90c';
}
.icon-download:before {
  content: '\e90b';
}
.icon-forward:before {
  content: '\e90d';
}
.icon-criptext:before {
  content: '\e914';
}
.icon-settings:before {
  content: '\e917';
}
.icon-ask:before {
  content: '\e941';
}
.icon-warning:before {
  content: '\e936';
}
.icon-log-out:before {
  content: '\e928';
}
.icon-star-fill:before {
  content: '\e903';
}
.icon-star:before {
  content: '\e926';
}
.icon-important-fill:before {
  content: '\e90a';
}
.icon-important:before {
  content: '\e902';
}
.icon-unsend:before {
  content: '\e916';
}
.icon-sent:before {
  content: '\e91a';
}
.icon-bell-inclined:before {
  content: '\e91b';
}
.icon-bell:before {
  content: '\e91c';
}
.icon-bell-mute:before {
  content: '\e91d';
}
.icon-replay-all:before {
  content: '\e91e';
}
.icon-replay:before {
  content: '\e91f';
}
.icon-pencil:before {
  content: '\e940';
}
.icon-dots:before {
  content: '\e918';
}
.icon-user:before {
  content: '\e90e';
}
.icon-box:before {
  content: '\e915';
}
.icon-check:before {
  content: '\e919';
}
.icon-next2:before {
  content: '\e938';
}
.icon-back:before {
  content: '\e939';
}
.icon-attach:before {
  content: '\e912';
}
.icon-checked:before {
  content: '\e943';
}
.icon-double-checked:before {
  content: '\e913';
}
.icon-correct:before {
  content: '\e920';
}
.icon-incorret:before {
  content: '\e921';
}
.icon-next:before {
  content: '\e910';
}
.icon-time:before {
  content: '\e93c';
}
.icon-search:before {
  content: '\e93d';
}
.icon-show:before {
  content: '\e922';
}
.icon-not-show:before {
  content: '\e923';
}
.icon-mobile:before {
  content: '\e924';
}
.icon-desktop:before {
  content: '\e925';
}
.icon-video:before {
  content: '\e927';
}
.icon-audio:before {
  content: '\e942';
}
.icon-word:before {
  content: '\e929';
}
.icon-ppt:before {
  content: '\e92a';
}
.icon-excel:before {
  content: '\e92b';
}
.icon-pdf:before {
  content: '\e92c';
}
.icon-file-default:before {
  content: '\e92d';
}
.icon-image:before {
  content: '\e92e';
}
.icon-lock-file:before {
  content: '\e92f';
}
.icon-arrow-down:before {
  content: '\e930';
}
.icon-arrow-up:before {
  content: '\e931';
}
.icon-arrow-right:before {
  content: '\e93f';
}
.icon-plus:before {
  content: '\e932';
}
.icon-minimize:before {
  content: '\e933';
}
.icon-exit:before {
  content: '\e937';
}
.icon-zip:before {
  content: '\e93a';
}
.icon-text-edit:before {
  content: '\e93b';
}
.icon-font-size:before {
  content: '\e935';
}
.icon-clock:before {
  content: '\e93e';
}
.icon-add-friend:before {
  content: '\e934';
}

/* 2.- CONTENT
----------------------------- */
* {
  font-family: NunitoSans;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

#root {
  height: 100%;
  width: 100%;
}

/* 3.1.- CONTROLS: Button
----------------------------- */
button {
  border: none;
  cursor: pointer;

  &:focus {
    outline: 0;
  }

  &:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  &.button-a {
    border-radius: 100px;
    color: white;
    height: 31px;
    padding: inherit;
    text-transform: uppercase;

    i {
      font-size: 18px;
      position: relative;
      top: 2px;
    }

    span {
      font-size: 13px;
      font-weight: 700;
      position: relative;
      top: -1px;
    }
  }

  &.button-b {
    color: #0091ff;

    i {
      font-size: 14px;
    }

    span {
      font-size: 13px;
    }
  }
}

input {
  background: transparent;
  border: none;
  border-bottom: solid 1px rgba(255, 255, 255, 0.19);

  &:focus {
    outline: 0;
  }
}

/* 4.- POPUP
----------------------------- */
.popup-content {
  border-radius: 15px;
  padding: 30px 25px;
  text-align: center;
  width: 230px;
  font-family: 'NunitoSans';

  .popup-title {
    h1 {
      font-size: 16px;
      font-weight: 700;
      line-height: 22px;
      margin: 0px;
    }
  }

  .popup-items {
    > .popup-paragraph {
      padding: 0px 0px;
      margin-top: 25px;
      line-height: 16px;

      > p {
        font-size: 13px;
        font-weight: 300;
      }
    }

    > .popup-list {
      margin-top: 20px;
      padding: 0px;

      ul {
        list-style-type: none;
        padding-left: 0px;

        li {
          font-weight: bold;
        }
      }
    }
  }

  .popup-scroll {
    overflow: auto;
  }

  .popup-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;

    .button-a {
      width: 75px;
      text-transform: capitalize;
      font-weight: bold;
      cursor: pointer;

      &.popup-cancel-button {
        background-color: transparent;
        color: #5d5b5b;
      }

      &.popup-confirm-button {
        background-color: #0091ff;
        color: #ffffff;
      }

      span {
        font-weight: 500;
        letter-spacing: 0.2px;
        top: 1px;
      }
    }
  }

  .popup-input {
    position: relative;

    input {
      border-bottom: solid 1px rgba(143, 143, 143, 0.42);
      font-size: 12px;
      padding-right: 20px;
      width: calc(100% - 20px);
    }

    i {
      bottom: 2px;
      color: rgb(133, 133, 133);
      font-size: 15px;
      right: 0;
      position: absolute;
      width: 20px;
    }

    span.popup-input-error {
      color: red;
      left: 0;
      position: absolute;
    }
  }

  .popup-error {
    color: red;
    left: 0;
  }
}
