/** Bold */

@font-face {
    font-family: "SF Display";
    font-weight: 700;
    src: url("https://sf.abarba.me/SF-UI-Display-Bold.otf");
}


/** Light */

@font-face {
    font-family: "SF Display";
    font-weight: 200;
    src: url("https://sf.abarba.me/SF-UI-Display-Light.otf");
}


/** Medium */

@font-face {
    font-family: "SF Display";
    font-weight: 500;
    src: url("https://sf.abarba.me/SF-UI-Display-Medium.otf");
}


/** Regular */

@font-face {
    font-family: "SF Display";
    font-weight: 400;
    src: url("https://sf.abarba.me/SF-UI-Display-Regular.otf");
}


/** Semibold */

@font-face {
    font-family: "SF Display";
    font-weight: 600;
    src: url("https://sf.abarba.me/SF-UI-Display-Semibold.otf");
}


/** Thin */

@font-face {
    font-family: "SF Display";
    font-weight: 300;
    src: url("https://sf.abarba.me/SF-UI-Display-Thin.otf");
}


/** Ultralight */

@font-face {
    font-family: "SF Display";
    font-weight: 100;
    src: url("https://sf.abarba.me/SF-UI-Display-Ultralight.otf");
}

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');
body {
    --cor-01: #ffffff;
    --cor-02: #fafaff;
    --cor-03: #f5f5f5;
    --cor-04: #d1d1d1;
    --cor-05: #0d0d0d;
    --cor-06: #000000;
    --cor-07: #3a3a3a;
    /**/
    --area-mens: #dcf8c5;
    --barra-per: #f5f5f5;
    --barra-not: #ffffff;
    --msg-previ: #dbf7c4;
    --bolhas: #d3e0e9;
    --stick-bar: #333335;
    --barra-inf: #f8f6f7;
    --background-meg: #e0e0e0;
    /**/
    --btn: #6096AE;
    --btn-color: #2F3136;
    --fab: #487082;
    --fab-color: #2F3136;
    /**/
    --cor-active: #849FE8;
    /* Blue Theme */
    --cor-blue-01: #0A000D;
    --cor-blue-02: #01023F;
    --cor-blue-03: #2A5AF1;
    --cor-blue-04: #4490F0;
    --cor-blue-05: #82F8ED;
}

.borderMedium {
    border-radius: .28571rem;
}

body,
html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: var( --cor-02);
    color: var(--cor-05);
    transition: all 0.23 ease-out;
    overflow: hidden;
}

nav {
    height: 56px;
    background-color: var( --cor-01);
    color: var(--cor-06);
    position: relative;
    user-select: none;
    z-index: 111;
}

blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #2A5AF1;
    color: #2F3136;
    font-size: 0.8em;
}

.navbar-fixed {
    height: 56px;
}

.modal.bottom-sheet {
    border-radius: .28571rem;
    top: auto;
    bottom: -100%;
    margin: 0;
    width: 100%;
    height: 65% !important;
    max-height: none;
    will-change: bottom, opacity;
    overflow: hidden;
}

nav .nameApp {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: #2A5AF1;
    height: 56px;
    font-size: 24px;
    font-family: 'Comfortaa', cursive;
    font-weight: 500;
}

nav .nameApp::before {
    content: "";
    width: 80%;
    height: 2px;
    background-color: #4490F0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 25px 25px;
}

nav .nav-wrapper .left,
nav .nav-wrapper .right {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav .nav-wrapper .right a {
    background-color: transparent;
    color: red;
}

.waves-effect.waves-help .waves-ripple {
    background-color: #4490F0a6;
}

.logoApp {
    width: 36px;
    height: 36px;
    border-radius: 25px;
    display: flex;
    justify-self: center;
    align-self: center;
}

.preloader-wrapper {
    position: absolute;
}

.block {
    min-height: calc(100% - 56px);
}

.btn-small {
    border-radius: 30px;
    width: 38px;
    height: 38px;
    padding: 0;
    line-height: 36px;
    margin: 0 4px;
    margin-bottom: 20px;
    border: 1px solid #82F8ED;
    background-color: transparent;
    color: var(--cor-07);
}

.btn-small:hover {
    background-color: #82F8ED;
}

.telaApp {
    position: absolute;
    top: 56px;
    left: 0;
    width: 100%;
    height: calc(100% - 56px - 48px);
    overflow: auto;
    z-index: 100;
}


/* Select Mensage */

.btnSelect {
    border-radius: 25px;
    background-color: transparent;
    height: 38px;
    font-size: 0.9em;
    font-weight: 300;
    border: 1px solid #4490F0;
    color: #4490F0;
    margin: 16px auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.btnSelect:hover {
    background-color: #2A5AF180;
    color: #fafaff;
}


/* Preview */

.ladoEsq,
.ladoDir {
    margin-top: 4px;
    height: calc(100vh - 120px);
    position: relative;
    background-color: transparent;
    position: relative;
    padding: auto;
}

.ladoEsq {
    margin: 0;
}

.ladoDir {
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cor-02);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999
}

.notifierBar {
    font-family: "SF Display";
    font-weight: 400;
    width: auto;
    height: 1.8em;
    display: table-cell;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cor-06);
    background-color: var(--barra-not);
    width: 100%;
    font-size: 1em;
    text-align: right;
    display: flex;
    justify-content: end;
}

.ladoEsqBar,
.ladoDirBar {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 0.6em;
    width: 25%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.ladoEsqBar {
    left: 0;
}

.ladoDirBar {
    right: 0;
}

.ladoDirBar .ion-icon {
    margin: 0 2px;
}

.tela {
    height: calc(100% - 1.8em - 1.4em);
    position: absolute;
    top: 1.8em;
    background: var(--background-meg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

.perfil {
    width: 100%;
    height: 2.8em;
    background-color: var(--barra-per);
    font-size: 0.8em;
    position: relative;
    overflow: hidden;
}

.perfil .foto {
    position: absolute;
    top: 2px;
    left: 8px;
    width: 24px;
    height: 24px;
    background-color: gray;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cor-01);
}

.perfil .foto ion-icon {
    width: 32px;
    height: 32px;
}

.perfil .number {
    position: absolute;
    top: 0;
    left: 38px;
    color: var(--cor-05);
}

.perfil .textoPerfil {
    position: absolute;
    top: 1.1em;
    left: 38px;
    font-size: 0.9em;
    text-overflow: ellipsis;
    color: var(--cor-07);
}

.bolhas {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    font-size: 0.8em;
    margin: 8px 0;
}

.bolhas div {
    width: auto;
    height: 20px;
    background-color: var(--bolhas);
    border-radius: 25px;
    color: var(--cor-06);
    padding: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.areaMsg {
    color: #0d0d0ddd;
    width: auto;
    max-width: 70%;
    position: relative;
    margin: 0 0 0 auto;
}

.areaMsg .msg {
    background-color: var(--area-mens);
    position: absolute;
    top: 0;
    right: 8px;
    padding: 4px 8px;
    text-align: right;
    border-radius: 8px;
    font-size: 0.8em;
}

.areaMsg .msg::after {
    content: "";
    width: 15px;
    height: 15px;
    background-image: linear-gradient(135deg, var(--area-mens) 0% 50%, transparent 50% 100%);
    position: absolute;
    top: 0;
    right: -7.5px;
    border-radius: 2px;
}

.msgPreview {
    background-color: var(--msg-previ);
}

.btnSend {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--barra-inf);
    color: #427592;
    height: 32px;
    font-size: 1.1em;
    padding: 0 8px;
}

.btnSend .textMensage {
    height: 70%;
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
    border-left: 1px solid #42759280;
    margin: 0 2px;
    font-size: 0.8em;
}

.btnSend ion-icon {
    cursor: pointer;
    height: 16px;
    width: 16px;
    margin: 2px;
}

.stickerBar {
    height: 1.4em;
    width: 100%;
    background-color: var(--barra-inf);
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stickerBar .bar {
    height: 4px;
    width: 40%;
    border-radius: 8px;
    background-color: var(--stick-bar);
}


/* Tabela */

.tabulator-pages {
    color: #3a3a3a;
}


/* Barra histórico */

.historico {
    position: absolute;
    top: calc(100% - 48px);
    left: 0;
    width: 100%;
    height: calc(100vh + 0.6rem);
    background-color: #3a3a3a;
    z-index: 999;
    transition: top 0.5s ease-out;
    overflow: hidden;
}

.historico nav {
    color: #2A5AF1;
    cursor: pointer;
    height: 48px;
}

.historico.opem {
    top: -0.29rem;
}

.historico .nameApp {
    font-size: 1.2em;
    height: 48px;
}

.historico .nameApp::before {
    top: 100%;
}

.historico .barraSup {
    margin-top: 16px;
    padding: 8px 0;
}

.historico .barraSup .row,
.historico .barraSup .row .input-field {
    margin-bottom: 0;
}

.historico .barraScroll {
    width: 100%;
    height: calc( 100% - 48px);
    overflow: auto;
}

.iconToggle {
    color: #2A5AF1;
    transform: rotate(0deg);
    transition: all 0.25s 0.5s ease-in-out;
}

.iconToggle.opem {
    transform: rotate(180deg);
}

#example-table {
    position: absolute;
    top: 56px;
}

.colorAlert {
    color: #D95B43;
    background-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 25px;
}

.barraInferiorOpts {
    background-color: transparent;
    width: 100%;
    height: 48px;
    position: relative;
    margin-bottom: 20px;
}

.barraInferiorOpts .lineBtns {
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    padding: 2px 0;
}

.barraInferiorOpts .lineBtns a.btn {
    border-radius: 25px;
    background-color: transparent;
    height: 38px;
    font-size: 0.9em;
    font-weight: 300;
    border: 1px solid #4490F0;
    color: #4490F0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.barraInferiorOpts .lineBtns a.btn:hover {
    background-color: #2A5AF180;
    color: #fafaff;
}

.barraInferiorOpts .lineBtns a.btn img {
    margin-left: 4px;
}


/* 
Scroll
*/

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

::-webkit-scrollbar-thumb {
    background: #82F8ED;
    border: 0px none #ffffff;
    border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5bffef;
}

::-webkit-scrollbar-thumb:active {
    background: #53f8e8;
}

::-webkit-scrollbar-track {
    background: none;
    border: 0px none #ffffff;
    border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
    background: none;
}

::-webkit-scrollbar-track:active {
    background: none;
}

::-webkit-scrollbar-corner {
    background: transparent;
}


/* Forms 
label color 
*/

.input-field label {
    color: #2F3136;
}


/* label focus color */

.input-field input:focus+label {
    color: #4490F0 !important;
}


/* label underline focus color */

.input-field input[type=text]:focus {
    border-bottom: 1px solid #4490F0 !important;
    box-shadow: 0 1px 0 0 #4490F080;
}


/* valid color */

.input-field input[type=text].valid {
    border-bottom: 1px solid #4490F0;
    box-shadow: 0 1px 0 0 #4490F080;
}

.input-field input[type=text].valid+label {
    color: #4490F0 !important;
}


/* icon prefix focus color */

.input-field .prefix.active {
    color: #4490F0;
}