
/***

FILE: app.css

TABLE OF CONTENTS

1.- FONTS
 1.1.- Text
 1.2.- Icon
2.- CONTENT
 2.1.- SCROLLBAR
3.- POPUP
4.- SPINNING
5.- CONTROLS
 5.1.- Input Text
 5.2.- Select
 5.3.- Button
 5.4.- Tooltip

***/

@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-trash-permanently:before {
  content: "\e944";
}
.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-next:before {
  content: "\e938";
}
.icon-back:before {
  content: "\e939";
}
.icon-attach:before {
  content: "\e912";
}
.icon-secure:before {
  content: "\e910";
}
.icon-checked:before {
  content: "\e943";
}
.icon-double-checked:before {
  content: "\e913";
}
.icon-correct:before {
  content: "\e920";
}
.icon-incorret:before {
  content: "\e921";
}
.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, Roboto;
}

html{
  height: 100%;
  width: 100%;

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

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

h1{
  font-size: 13px;
  font-weight: 800;
}

h2{
  font-size: 12px;
  font-weight: 600;
}

.wrapper-out{
  display: flex;
  flex-direction: column;
  height: 100%;
  position: fixed;
  width: 100%;
}

.wrapper-in{
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100%;
  height: 100%;
  position: relative;
  width: 100%;
}

.wrapper-in-height{
  height: calc(100% - 31px);
}

.wrapper-left{
  display: flex;
  flex-direction: row;
  height: 100%;
  position: relative;
}

.sidebar-app-expand.navigation-feed-expand{
  .wrapper-left{
    min-width: 770px;
  }
}

.sidebar-app-collapse.navigation-feed-expand{
  .wrapper-left{
    min-width: 639px;
  }
}

.main-container{
  min-width: 560px;
}

.content-container{
  height: 100%;
  position: relative;
  width: 100%;
}

.navigation-feed-collapse .wrapper-left{
  transition: width $_DURATION_NAVIGATION_FEED_COLLAPSE linear;
  width: 100%;
}

.navigation-feed-expand .wrapper-left{
  transition: width $_DURATION_NAVIGATION_FEED_EXPAND linear $_DELAY_NAVIGATION_FEED_EXPAND;
  width: calc(100% - 288px);
}

.empty-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .empty-content {
    margin: auto;
    align-items: center;

    .empty-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: auto 100%;
    }

    .header-text {
      font-size: 14px;
      text-align: center;
      margin-top: 15px;
    }

    .subheader-text {
      font-size: 14px;
      font-style: italic;
      text-align: center;
      color: #9b9b9b;
    }
  }
}

.sidebar-app-expand .main-container{
  width: calc(100% - 210px);
}

.sidebar-app-collapse .main-container{
  width: calc(100% - 79px);
}

@media screen and (max-width: $_MAX_WIDTH_SCREEN) {
  .sidebar-app-expand .main-container{
    width: calc(100% - 79px);
  }

  .sidebar-app-expand.navigation-feed-expand{
    .wrapper-left{
      min-width: 639px;
    }
  }
}

/* 2.1.- CONTENT: SCROLLBAR
   ----------------------------- */
.cptx-scrollbar{
  &::-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;
  }
}

/* 3.- POPUP
   ----------------------------- */
.popup-content{
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  width: 230px;

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

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

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

  .popup-inputs{
    margin: 20px auto 0;
    width: calc(100% - 15px);

    .popup-input{
      margin-top: 18px;
      position: relative;

      input{
        background-color: transparent;
        border: none;
        border-bottom: solid 1px transparent;
        font-size: 12px;
        font-weight: 300;

        &:focus {
          border-bottom: solid 1px #0091ff;
        }
      }
      
      i {
        color: #aeaeae;
        font-size: 17px;
        position: absolute;
        bottom: 2px;
        right: 1px;
        cursor: pointer;
      }

      span {
        color: #de4646;
        bottom: -15px;
        font-size: 10px;
        float: left;
        left: -14px;
        margin-left: 15px;
        position: absolute;
      }
    }
  }

  .popup-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 40px;
  
    .button-a {
      height: 28px;
      text-transform: capitalize;
      width: auto;
      padding: 0px 13px;

      &.popup-cancel-button {
        background-color: transparent;
      }
      
      &.popup-confirm-button {
        background-color: #0091ff;
        color: #ffffff;
    
        &:disabled {
          opacity: 0.5;
          pointer-events: none;
        }
      }

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

    .loading-ring{
      margin-top: 28px;
      top: -26px;
      left: -10px;
    }
  }
}

/* 4.- SPINNING
   ----------------------------- */
.loading-ring {
  display: inline-block;
  position: relative;
  top: -4px;
  left: -27px;
  height: inherit;

  > div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    margin: 3px;
    border: 3px solid rgb(211,211,211);
    border-radius: 50%;
    animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: rgb(211,211,211) transparent transparent transparent;

    &:nth-child(1) {
      animation-delay: -0.45s;
    }
    &:nth-child(2) {
      animation-delay: -0.3s;
    }
    &:nth-child(3) {
      animation-delay: -0.15s;
    }
    @keyframes loading-ring {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  }
}

.cptx-spinning-circle {
  display: inline-block;
  position: relative;

  > div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    margin: 2px;
    border: 2px solid #373a45;
    border-radius: 50%;
    animation: cptx-spinning-circle 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #373a45 transparent transparent transparent;

    &:nth-child(1) {
      animation-delay: -0.45s;
    }
    &:nth-child(2) {
      animation-delay: -0.3s;
    }
    &:nth-child(3) {
      animation-delay: -0.15s;
    }
    @keyframes cptx-spinning-circle {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  }

  &.ctpx-spinning-circle-a{
    height: 18px;
    width: 18px;

    >div{
      width: 12px;
      height: 12px;
    }
  }
}

/* 5.- CONTROLS
   ----------------------------- */
.disabled{
  opacity: 0.3;
}

/* 5.1.- CONTROLS: Input text
   ----------------------------- */
input{
  width: 100%;
  color: black;

  &.input-a{
    background-color: transparent;
    border: none;
    border-bottom: solid 1px #e3e5e6;
    padding: 1px;

    &:focus{
      border-bottom: solid 1px #0091ff;
    }
  }
}

input[type="text"]:focus {
  outline: 0;
}

input[type="password"]{
  padding-right: 20px;
  width: calc(100% - 20px);
  
  &:focus {
    outline: 0;
  }
}

/* 5.2.- CONTROLS: Select
   ----------------------------- */
select {
  background-color: #f0f0f0;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  height: 26px;
  outline: none;
}

/* 5.3.- CONTROLS: Button
   ----------------------------- */
button{
  border: none;
  cursor: pointer;
  font-size: inherit;

  &: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{
      background-color: transparent;
      font-size: 13px;
      font-weight: 700;
      position: relative;
      top: -1px;
    }
  }

  &.button-b{
    color: #0091ff;
  
    i{
      font-size: 14px;
    }
  
    span, label{
      font-size: 13px;
    }
  }

  &.button-c {
    color: #0091ff;
    background-color: transparent;

    span {
      font-size: 13px;
      text-decoration: underline;
      text-decoration-color: #0091ff;
    }
  }

  &.button-aa{
    background-color: #0091ff;
  }

  span{
    font-family: NunitoSans;
    line-height: inherit;
  }
}

.button-a-circle{
  align-items: center;
  background-color: #0091ff;
  border-radius: 50%;
  display: flex;
  height: 38px;
  padding: 0;
  width: 38px;

  i{
    color: white;
    font-size: 22px;
    margin: 0 auto;
  }
}

/* 5.4.- CONTROLS: Tooltip
   ----------------------------- */
.labels-tooltip{
  border-radius: 3px;
  font-family: NunitoSans;
  font-size: 12px;
  font-weight: normal;
}

.__floater__open {
  padding: 0px 12px !important;
}
.__floater__arrow > span {
  transform: scale(0.5);
}

/* THEME
   ----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_SCROLLBAR, $_BACKGROUND_COLOR_SCROLLBAR_CONTROL, $_COLOR_TEXT_CONTAINER_EMPTY_TITLE, $_COLOR_TEXT_POPUP_TITLE, $_COLOR_TEXT_POPUP_SUBTITLE, $_COLOR_TEXT_POPUP_PARAGRAPH, $_BORDER_COLOR_POPUP_INPUT, $_COLOR_TEXT_POPUP_BUTTON_CANCEL, $_BACKGROUND_COLOR_BUTTON-B, $_BACKGROUND_COLOR_SELECT, $_COLOR_TEXT_SELECT, $_COLOR_TEXT_INPUT, $_BACKGROUND_COLOR_TOOLTIP, $_COLOR_TEXT_TOOLTIP){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    .cptx-scrollbar{
      &::-webkit-scrollbar-track{
        background-color: $_BACKGROUND_COLOR_SCROLLBAR;
      }

      &::-webkit-scrollbar-thumb{
        background-color: $_BACKGROUND_COLOR_SCROLLBAR_CONTROL;
      }
    }

    .empty-container {
      .empty-content {
        .header-text {
          color: $_COLOR_TEXT_CONTAINER_EMPTY_TITLE;
        }
      }
      
      &.cptx-empty-mailbox-status-loading{
        .header-text {
          color: #9b9b9b;
        }
      }
    }

    .popup-content{
      .popup-title {
        h1 {
          color: $_COLOR_TEXT_POPUP_TITLE;
        }
      }

      .popup-subtitle {
        h2 {
          color: $_COLOR_TEXT_POPUP_SUBTITLE;
        }
      }

      .popup-paragraph {
        p{
          color: $_COLOR_TEXT_POPUP_PARAGRAPH;
        }
      }

      .popup-inputs{
        .popup-input{
          input{
            border-bottom-color: $_BORDER_COLOR_POPUP_INPUT;
          }
        }
      }

      .popup-buttons {
        .button-a {
          &.popup-cancel-button {
            color: $_COLOR_TEXT_POPUP_BUTTON_CANCEL;
          }
        }
      }
    }

    button{
      &.button-b{
        background-color: $_BACKGROUND_COLOR_BUTTON-B;
      }
    }

    select {
      background-color: $_BACKGROUND_COLOR_SELECT;
      color: $_COLOR_TEXT_SELECT;
    }

    input{
      color: $_COLOR_TEXT_INPUT;
    }

    .labels-tooltip{
      background-color: $_BACKGROUND_COLOR_TOOLTIP;
      color: $_COLOR_TEXT_TOOLTIP;

      .tooltip-tip{
        &:after{
          background-color: $_BACKGROUND_COLOR_TOOLTIP;
        }
      }
    }
  }
}
  
@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_SCROLLBAR_LIGHT, $_BACKGROUND_COLOR_SCROLLBAR_CONTROL_LIGHT, $_COLOR_TEXT_CONTAINER_EMPTY_TITLE_LIGHT, $_COLOR_TEXT_POPUP_TITLE_LIGHT, $_COLOR_TEXT_POPUP_SUBTITLE_LIGHT, $_COLOR_TEXT_POPUP_PARAGRAPH_LIGHT, $_BORDER_COLOR_POPUP_INPUT_LIGHT, $_COLOR_TEXT_POPUP_BUTTON_CANCEL_LIGHT, $_BACKGROUND_COLOR_BUTTON-B_LIGHT, $_BACKGROUND_COLOR_SELECT_LIGHT, $_COLOR_TEXT_SELECT_LIGHT, $_COLOR_TEXT_INPUT_LIGHT, $_BACKGROUND_COLOR_TOOLTIP_LIGHT, $_COLOR_TEXT_TOOLTIP_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_SCROLLBAR_DARK, $_BACKGROUND_COLOR_SCROLLBAR_CONTROL_DARK, $_COLOR_TEXT_CONTAINER_EMPTY_TITLE_DARK, $_COLOR_TEXT_POPUP_TITLE_DARK, $_COLOR_TEXT_POPUP_SUBTITLE_DARK, $_COLOR_TEXT_POPUP_PARAGRAPH_DARK, $_BORDER_COLOR_POPUP_INPUT_DARK, $_COLOR_TEXT_POPUP_BUTTON_CANCEL_DARK, $_BACKGROUND_COLOR_BUTTON-B_DARK, $_BACKGROUND_COLOR_SELECT_DARK, $_COLOR_TEXT_SELECT_DARK, $_COLOR_TEXT_INPUT_DARK, $_BACKGROUND_COLOR_TOOLTIP_DARK, $_COLOR_TEXT_TOOLTIP_DARK);