
/***

FILE: app.css

TABLE OF CONTENTS

1.- FONTS
 1.1.- Text
 1.2.- Icon
2.- CONTENT
 2.1.- SCROLLBAR
3.- CONTROLS
 3.1.- Button
 3.2.- Input Text

***/

@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;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Italic.ttf) format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Light.ttf) format("truetype");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-LightItalic.ttf) format("truetype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Italic.ttf) format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Medium.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-MediumItalic.ttf) format("truetype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-BoldItalic.ttf) format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-Black.ttf) format("truetype");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Roboto";
  src:url(#{$_PATH_TO_FONTS}/roboto/Roboto-BlackItalic.ttf) format("truetype");
  font-weight: 800;
  font-style: italic;
}

/* 1.2.- FONTS: Icon
   ----------------------------- */
@font-face {
  font-family: 'icomoon';
  src:  url(#{$_PATH_TO_FONTS}/icon.eot?y4ei23);
  src:  url(#{$_PATH_TO_FONTS}/icon.eot?y4ei23#iefix) format('embedded-opentype'),
    url(#{$_PATH_TO_FONTS}/icon.ttf?y4ei23) format('truetype'),
    url(#{$_PATH_TO_FONTS}/icon.woff?y4ei23) format('woff'),
    url(#{$_PATH_TO_FONTS}/icon.svg?y4ei23#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-ask:before {
  content: "\e941";
}
.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: "\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-settings:before {
  content: "\e917";
}
.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-minus: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, Roboto;
}

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

#root, .wrapper{
  height: 100%;
  width: 100%;
}

.wrapper{
  display: flex;
  flex-direction: column;
}

/* 2.1.- CONTENT: SCROLLBAR
   ----------------------------- */
@mixin cptx-scrollbar-scheme{
  &::-webkit-scrollbar-track{
    background-color: transparent;
    box-shadow: inset 0 0 10px rgba(220,220,220,0.1);
  }

  &::-webkit-scrollbar{
    cursor: pointer;
    width: 10px;
  }

  &::-webkit-scrollbar-thumb{
    border-radius: 0;
    background-color: transparent;
  }
}

.cptx-scrollbar{
  @include cptx-scrollbar-scheme
}

.react-autosuggest__suggestions-container--open{
  @include cptx-scrollbar-scheme
}

/* 3.- CONTROLS
   ----------------------------- */

/* 3.1.- CONTROLS: Button
   ----------------------------- */
input{
  font-family: 'NunitoSans';

  &:focus{
    outline: 0;
  }
}

/* 3.2.- CONTROLS: Input text
   ----------------------------- */
button{
  border: none;
  cursor: pointer;

  &:focus{
    outline:0;
  }
}

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

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

  span{
    background-color: transparent;
    font-family: NunitoSans;
    font-size: 13px;
    font-weight: 700;
    position: relative;
    top: -1px;
  }
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_MAIN, $_BACKGROUND_COLOR_SCROLLBAR, $_BACKGROUND_COLOR_SCROLLBAR_CONTROL){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    &.wrapper{
      background-color: $_BACKGROUND_COLOR_MAIN;

      .cptx-scrollbar, .react-autosuggest__suggestions-container--open{
        &::-webkit-scrollbar-track{
          background-color: $_BACKGROUND_COLOR_SCROLLBAR;
        }

        &::-webkit-scrollbar-thumb{
          background-color: $_BACKGROUND_COLOR_SCROLLBAR_CONTROL;
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_MAIN_LIGHT, $_BACKGROUND_COLOR_SCROLLBAR_LIGHT, $_BACKGROUND_COLOR_SCROLLBAR_CONTROL_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_MAIN_DARK, $_BACKGROUND_COLOR_SCROLLBAR_DARK, $_BACKGROUND_COLOR_SCROLLBAR_CONTROL_DARK);