/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
    overflow: hidden;
}

:root {
    --main-purple: #5d4d83;
    --main-grey: #ccc;
    --hush-menu: #26242f;
    --color-placeholder: hsl(247deg 4% 45% / 70%);
    --color-label: #9e9e9e;
    /*From Materialize*/
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

/*TODO : Remove ?*/

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/** Scrollbar **/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--main-purple);
    /**#888;**/
}

::-webkit-scrollbar-thumb:hover {
    background: var(--main-purple);
    /**#555;**/
    background-image: linear-gradient( 45deg, rgba(240, 170, 139, 0.5) 25%, transparent 25%, transparent 50%, rgba(240, 170, 139, 0.5) 50%, rgba(240, 170, 139, 0.5) 75%, transparent 75%, transparent);
    /**-webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(97,77,131)), color-stop(0.72, rgb(104,72,156)), color-stop(0.86, rgb(240, 170, 139)));**/
}

::-webkit-scrollbar-thumb:active {
    background: #68489c;
    background-image: linear-gradient( 45deg, rgba(240, 170, 139, 1) 25%, transparent 25%, transparent 50%, rgba(240, 170, 139, 1) 50%, rgba(240, 170, 139, 1) 75%, transparent 75%, transparent);
}

::placeholder {
    color: var(--color-placeholder);
}

/*Support for google material icons*/

/* fallback */

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

/* fallback */

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v74/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUcel5euIg.woff2) format('woff2');
}

/* fallback */

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://fonts.gstatic.com/s/materialiconsround/v73/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmPq_HTTw.woff2) format('woff2');
}

/* fallback */

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialiconssharp/v74/oPWQ_lt5nv4pWNJpghLP75WiFR4kLh3kvmvRImcycg.woff2) format('woff2');
}

/* fallback */

@font-face {
    font-family: 'Material Icons Two Tone';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(https://fonts.gstatic.com/s/materialiconstwotone/v72/hESh6WRmNCxEqUmNyh3JDeGxjVVyMg4tHGctNCu0NjbrHg.woff2) format('woff2');
}

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

.material-icons-outlined {
    font-family: 'Material Icons Outlined';
    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;
}

.material-icons-round {
    font-family: 'Material Icons Round';
    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;
}

.material-icons-sharp {
    font-family: 'Material Icons Sharp';
    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;
}

.material-icons-two-tone {
    font-family: 'Material Icons Two Tone';
    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;
}

::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

.toast {
    background: rgb(93, 77, 131);
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}

#toast-container {
    height: max-content;
    overflow-y: hidden;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    /* margin: 1em 0; */
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

header {
    height: 60px;
    /* padding: 1.14em 0 0 7.21em; */
    text-align: left;
    z-index: 33;
    position: fixed;
    margin: 0;
    left: 7.14em;
    top: 1.14em;
}

/* Change the white to any color */

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 30px 30px white inset !important;
}

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    opacity: unset;
}

[type="checkbox"].mat-checkbox {
    opacity: 0;
}

nav>span {
    margin-left: 24px;
    /* font-weight:  300; */
}

nav>span>a>img {
    margin-left: 6px;
    margin-right: 28px;
}

body>div {
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    overflow-x: hidden;
}

footer>nav>span>a {
    color: #6f6e76;
}

img, a {
    /*user-select: none;*/
    -webkit-user-drag: none;
    user-drag: none;
    -o-user-drag: none;
    -moz-user-drag: none;
    -khtml-user-drag: none;
}

/* ==========================================================================
   Unset unwanted materialise customization
   ========================================================================== */

nav {
    background-color: unset;
}

h3 {
    font-size: 1.17em;
}

input:not([type]), input[type="text"]:not(.browser-default), input[type="password"]:not(.browser-default), input[type="email"]:not(.browser-default), input[type="url"]:not(.browser-default), input[type="time"]:not(.browser-default), input[type="date"]:not(.browser-default), input[type="datetime"]:not(.browser-default), input[type="datetime-local"]:not(.browser-default), input[type="tel"]:not(.browser-default), input[type="number"]:not(.browser-default), input[type="search"]:not(.browser-default), textarea.materialize-textarea {
    height: unset;
}

input:not([type]):focus:not([readonly]), input[type="text"]:not(.browser-default):focus:not([readonly]), input[type="password"]:not(.browser-default):focus:not([readonly]), input[type="email"]:not(.browser-default):focus:not([readonly]), input[type="url"]:not(.browser-default):focus:not([readonly]), input[type="time"]:not(.browser-default):focus:not([readonly]), input[type="date"]:not(.browser-default):focus:not([readonly]), input[type="datetime"]:not(.browser-default):focus:not([readonly]), input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), input[type="tel"]:not(.browser-default):focus:not([readonly]), input[type="number"]:not(.browser-default):focus:not([readonly]), input[type="search"]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

.ios-remove {
    /** This is empty, just a jquery hook **/
}

.ios-hidden {
    /** hooked elements are changed **/
    display: none !important;
}

.message-box {
    position: relative;
    /**padding: .75rem 1.25rem;**/
    padding: 0.75rem 2rem 0.75rem 1.5rem;
    /**background-color: #d4edda;**/
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
    border-radius: 0.5em;
    width: 68%;
    display: inline-block;
}

.message-box .close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.65rem 1rem;
    color: inherit;
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    /* color: #000; */
    text-shadow: 0 1px 0 #fff;
    opacity: 0.5;
    cursor: pointer;
}

.message-box-purple {
    background-color: #907ac5;
    color: var(--main-purple);
    /** #f0aa8b **/
}

.message-box-green {
    background-color: #d4edda;
    color: #155724;
}

.message-box-red {
    background-color: #f8d7da;
    color: #721c24;
}

.message-box-blue {
    background-color: #d1ecf1;
    color: #0c5460;
}

/** ENCRYPT & UPLOAD **/

#step-1 #upload-progress .material-icons, #step-2 #upload-progress .material-icons {
    position: static;
    /**display: inline-block;**/
    vertical-align: middle;
    margin-left: 0.33em;
}

/** SIGNIN **/

#signin {
    /*display: none;
    top: 0;
    padding-top: 5em;
    position: fixed; */
    left: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    /* background-color: #f8f8f8; */
    font-size: 1.15em;
    text-align: center;
    z-index: 30;
}

#signin>.providers, #signin>#passphrase {
    width: 25.21em;
    min-height: 15.71em;
    position: fixed;
    left: -12.6em;
    bottom: 50%;
    z-index: 32;
    margin-bottom: -3.75em;
    background: #fff;
    margin-left: 50%;
    box-shadow: 0px 8px 13px 0 rgba(0, 0, 0, 0.08);
}

#signin>div>h1, #passphrase>div>h1 {
    padding: 0;
    margin: 1.3em 0 0.3em;
    /* margin: 0; */
    font-weight: 500;
    font-size: 1.71em;
}

#sign-form {
    /* transition: .15s; */
    transition-timing-function: cubic-bezier;
    /* opacity: 0; */
}

#signup-activate-address {}

#signin>div>button, #passphrase>div>button {
    /* display: block; */
    /* text-align: center; */
    margin-bottom: 1.2%;
    margin-top: 1.1em;
    width: 17.3em;
    height: 2.86em;
    box-shadow: 0px 3px 7px 0 rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 2em;
    background-color: var(--main-purple);
    color: #fff;
    cursor: pointer;
    padding: 1em 2em 2.5em;
}

#signin>div>button>img {
    vertical-align: middle;
}

#signin>div>button>span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 1.21em;
}

#signin>div#passphrase {
    /* display: none; */
    min-height: 18.71em;
}

#signin>header {
    z-index: 111;
}

.introjs-tooltipReferenceLayer {
    overflow: visible;
}

.introjs-tooltip {
    background-color: #907ac5;
    padding: 20px;
    border-radius: 10%;
    z-index: 5;
}

.introjs-tooltip>.introjs-tooltiptext {
    color: #ffffff;
}

.smoothly-invisible {
    opacity: 0;
}

.smoothly-visible {
    opacity: 1;
    transition: all 1s ease-out 1s;
}

#passphrase>div>p>span {
    color: var(--main-purple);
}

#passphrase>div>input:focus {
    border-bottom: 1px solid var(--main-purple);
}

#passphrase>div>p {
    margin: 1.3em 0;
    color: var(--main-purple);
    cursor: pointer;
}

#passphrase>div>p:hover {
    text-decoration: underline;
}

*:focus {
    /* outline: none; */
}

#signin-providers>span, #signup-providers>span {
    font-size: 0.869565em;
    color: #acacac;
    margin-right: 0.5em;
}

#signin-providers>button, #signup-providers>button {
    /* width: 2.14em; */
    /* height: 2.14em; */
    border: none;
    display: inline-block;
    position: relative;
    background-color: transparent !important;
}

#signin-providers {
    display: inline-block;
}

.google-signin img {
    width: 10em;
    height: 2.5em;
}

.google-signin img:active {
    content: url("/img/btn_google_signin_dark_pressed_web@2x.png") !important;
}

.outlock-signin img {
    width: 10em;
    height: 2.25em;
    border-radius: 3px;
}

.linkedin-signin img {
    width: 10em;
    height: 2.2em;
}

#signin-passphrase, #create-passphrase, #old-passphrase, #confirm-passphrase {
    border: none;
    border-bottom: 1px solid #a1a1a1;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    padding: 0 1.6em 0.15em 0.3em;
    font-size: 1.15em;
    /* margin-top: 1.5em; */
    border-radius: 0;
    background: url("/img/eye.png") no-repeat;
}

#signin-passphrase[type="password"] {
    color: #a1a1a1;
    letter-spacing: 0em;
}

#sign-form>input[type="text"]::placeholder, #sign-form>input[type="password"]::placeholder {
    color: var(--color-placeholder);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    margin-right: 2.5em;
    font-size: large;
    color: #706f77;
    background: url(../img/times-circle.svg) no-repeat 50% 50%;
    background-size: contain;
    cursor: pointer;
}

/* Tooltip container */

.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */

.tooltip .tooltiptext {
    visibility: hidden;
    width: 275px;
    background-color: rgba(93, 77, 131, 0.75);
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    top: 100%;
    left: 50%;
    margin-left: -60px;
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    white-space: pre-line;
}

/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Show the tooltip text when you mouse over the tooltip container */

#thread-ext-tooltip.tooltip:hover .tooltiptext {
    position: fixed;
    top: 11.2em;
    left: 24.5em;
}

#phone-button-agree {
    margin-left: 1em;
}

.passtoggle, #external-passphrase-toggle {
    position: initial;
    background: url("/img/eye.png");
    width: 22px;
    height: 22px;
    z-index: 0;
    margin-left: -1.5em;
    /**margin-top: 1.3em;**/
    cursor: pointer;
    vertical-align: middle;
    opacity: 0.5;
    /* display: none; */
}

#ext-passphrase-toggle {
    background: url("/img/eye.png");
    width: 22px;
    height: 22px;
    z-index: 20;
    margin-left: -2em;
    cursor: pointer;
    vertical-align: middle;
    opacity: 0.5;
}

.ext-passtoggle-info {
    width: 15px;
    height: 15px;
    z-index: 20;
    cursor: pointer;
    vertical-align: middle;
    opacity: 0.5;
}

#ext-passphrase-toggle-info {
    margin-left: 5px;
}

#ext-thread-toggle-info {
    margin-right: 6px;
}

#reset-passphrase-toggle-info {
    width: 13px;
    height: 13px;
    z-index: 20;
    margin-left: 5px;
    /* margin-top: 0.3em; */
    cursor: pointer;
    vertical-align: middle;
    opacity: 0.5;
    /* display: none; */
}

.archive-menu {
    width: 1.5em;
}

#inc-passphrase-tooltip span {
    display: none;
}

#inc-passphrase-tooltip:hover span {
    display: inline;
    position: absolute;
    float: right;
    background-color: rgba(93, 77, 131, 0.75);
    color: #fff;
    padding: 5px 5px;
    border-radius: 6px;
    margin-right: 5px;
    left: 71%;
    text-align: center;
}

#oldpass-toggle, #newpass-toggle, #newrepass-toggle, #signin-passphrase-toggle, #signin-createpassphrase-toggle, #signin-confirmpassphrase-toggle {
    width: 1.305em;
    height: auto;
    margin-top: 0.25em;
}

#external-passphrase-toggle {
    /* margin-top: 12px; */
    /* margin-right: 4em; */
    margin-left: -4.5em;
    /* background: #fff; */
    opacity: 0.8;
}

.passtoggle:hover, #external-passphrase-toggle:hover {
    opacity: 1;
}

#new-check-passphrase-creation.action {
    width: 25em;
    height: 2.899em;
    margin: 3em 0 0.4em;
    border: 0;
    border-radius: 0.21em;
    background: #ddd;
    color: #fff;
}

#new-check-passphrase-creation.active {
    background-color: var(--main-purple);
}

#old-passphrase, #create-new-passphrase, #confirm-new-passphrase {
    border: none;
    border-bottom: 1px solid #a1a1a1;
    /*width: 14.3em;*/
    width: 80%;
    text-align: center;
    line-height: 1.5em;
    /* padding: 0 1.6em .15em .3em; */
    font-size: 1.15em;
    margin-bottom: 0.3em;
    /* margin-top: 1.5em; */
    background: url(/img/eye.png) no-repeat;
    padding: 0 0;
    margin-left: 3%;
    font-size: 1em;
    margin: 0.4em;
}

#content-pass>#create-new-passphrase {
    margin-bottom: 0;
}

#confirm-new-passphrase {
    margin-bottom: 0.7em;
}

#lang-selection, #rem-passphrase, #externals-sending-select {
    padding-left: 0;
    width: auto;
    height: auto;
    margin-top: 0.18em;
    display: inline-block !important;
    padding-right: 0;
    margin-left: -0.1em;
    margin-right: -0.5em;
    min-width: 7.4em;
    color: #000;
}

.span-passphrase>#signin-passphrase {
    margin: 0.7em 0 0 0;
    letter-spacing: 0.15em;
    cursor: pointer;
}

#select-image, #signin-passphrase.span-passphrase {
    border: none !important;
    text-decoration: underline;
    color: #907ac5;
    font-size: 1em;
    cursor: pointer;
    font-weight: 800;
}

#checkbox-search, #checkbox-log, #checkbox-persistent-signin, #checkbox-sound-notification, #checkbox-email-notification-transfer {
    display: none;
}

#display-search>#switch>label>.lever, #error-log>#switch>label>.lever, #persistent-signin>#switch>label>.lever, #sound-activation>#switch>label>.lever, #email_notification_transfer>#switch>label>.lever {
    margin-left: 0;
    margin-right: 0;
}

#passphrase-strength {
    width: 79%;
    display: inline-block;
    /* border: 1px solid rgba(0,0,0, .08); */
    line-height: 0.2em;
    font-size: 1.15em;
    margin-top: 0;
}

#keys-animation {
    width: 78.8%;
    margin-left: 10.5%;
    height: 10em;
    display: none;
}

#iOS-dropdown {
    position: absolute;
    z-index: 1000;
    left: 5em;
    top: 5em;
}

.btn-about {
    font-size: 75%;
    background-color: var(--main-purple);
    color: white;
    border-radius: 3em;
    padding: 0.6em 1em;
    margin-left: 0.5em;
    display: inline-block;
    border: 1px solid transparent;
}

.right-sided {
    float: right;
}

.cut-text {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/** - >     materialize.css **/

/** - - >   transfers **/

.collection {
    border: none;
}

.collection .collection-item.avatar {
    height: auto;
    border-radius: 0px;
}

.collection .collection-item.avatar .right-sided {
    font-size: 12px;
    align-self: flex-end;
    position: absolute;
    right: 1%;
    bottom: 0%;
}

.collection .collection-item.avatar .title {
    width: 75%;
}

.collection .collection-item.avatar .sub-title {
    font-size: 14px;
    width: 75%;
}

.msg-holder li.collection-item {
    display: flex;
    flex-direction: row;
    width: 100%;
}

/*#threads-tabs {*/

/*    display: flex;*/

/*}*/

/*#threads-tabs > :nth-child(2) {*/

/*    margin-right: auto;*/

/*}*/

.msg-holder li.collection-item>* {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: hidden;
}

.li-main {
    width: 100%;
}

.li-main .li-main-info {
    flex: 1;
    max-width: 100%;
    padding-left: 2em;
}

.li-checkbox-thread {
    /*flex: 1;*/
    max-width: 5em;
}

.highlighted-transfer {
    background-color: #ede7f7 !important;
}

#side-co-wrapper .highlighted-transfer {
    background-color: hsl(252deg 35% 81%)!important
}

.collection .highlighted-transfer .title {
    font-weight: bold;
    color: black;
}

.collection .highlighted-transfer .sub-title, .collection .highlighted-transfer .right-sided {
    color: black;
}

#mail-settings, #common-settings, #company-settings>div {
    padding: 0.6em 1.7em 0.6em 0;
    /* min-height: 5em; */
}

#mail-settings>div>*, #common-settings>div>*, #company-settings>div>* {
    padding-right: 0;
}

#common-settings>hr {
    margin: 0;
}

@supports (-ms-ime-align: auto) {
    .passtoggle, .passtoggle:hover, #external-passphrase-toggle:hover {
        display: none;
        position: absolute;
        top: -4em;
        opacity: 0;
    }
        {
        opacity: 1;
    }
    #signin-passphrase, #create-passphrase, #confirm-passphrase {
        padding-right: 0.3em;
    }
}

#menu-placeholder {
    width: 17%;
    min-width: 17em !important;
    padding: 0;
    /* margin: 0; */
    /* width: 0; */
    z-index: 8;
    position: absolute;
}

#menu {
    width: 13.5%;
    min-width: 0;
    background: var(--hush-menu);
    position: fixed;
    margin: 0;
    top: 0;
    height: 100%;
    left: 0;
    padding: 3em 0 0;
    transition: 0.3s;
    transition-timing-function: ease-out;
    z-index: 111;
    display: none;
}

.box-bademail {
    align-content: center;
    justify-content: center;
    align-items: center;
    /*text-align: center;*/
    display: none;
    min-height: 0 !important;
    height: 0;
    transition: height 0.5s linear 0s !important;
    transition-timing-function: ease-out;
    overflow: hidden;
    color: red;
}

#content>#content-frameset {
    position: absolute;
    right: 0;
    width: 84.5%;
    top: -3em;
    margin: 0;
    z-index: 1;
    height: 92%;
    font-size: 1em;
}

#content-frame {
    width: 100%;
    border: none;
    height: 111%;
}

#logo {
    /* margin: 1.79em 2.07em 3.28em; */
    /* font-weight: 500; */
    /*position: fixed;*/
    /*top: 1em;*/
    /*left: 1.86em;*/
    /* width: 93px; */
    display: none;
    width: 80%;
    transition-timing-function: ease-in-out;
}

#logo.bright-logo {
    border: 2px solid #6f638a;
    background-color: white;
}

#logo-container {
    z-index: 112;
    text-align: center;
}

#logo-big {
    width: 111px;
    height: 20px;
}

#private-logo-container {
    max-height: 100%;
    max-width: 100%;
    height: auto;
}

#big-custom-logo, #private-custom-logo {
    height: 9vw;
    margin-bottom: 2vh;
    z-index: 0;
}

.ext-logo {
    margin-bottom: 0 !important;
}

.justify-center>h2.dl-sender {
    padding: 1em 0;
}

#menu>nav>span {
    text-transform: uppercase;
    color: #b1b1b1;
    font-weight: 300;
    margin-left: 1.86em;
}

#menu>nav#menu-about {
    position: absolute;
    bottom: 3em;
    /*min-width: 17em;*/
    opacity: 0;
    transition: 0.3s;
    transition-timing-function: ease;
    height: unset;
    background-color: var(--hush-menu);
}

.invert-color {
    filter: invert(100%);
}

#menu_dl_app * {
    line-height: 1em;
    height: fit-content;
    height: -moz-fit-content;
    margin: 0 0.5em 0 0;
}

#menu_dl_app {
    font-size: 1.2em;
}

#menu_dl_app i {
    font-size: x-large;
    cursor: pointer;
}

#menu-choose-os * {
    font-size: 24px;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#menu-choose-os .highlighted {
    border: 22px solid rgb(93 77 131 / 60%);
    margin: 0;
    border-radius: 25%;
}

/*Maybe later : two columns footer to save place*/

/*#menu-about {*/

/*    display: grid;*/

/*    grid-template-columns: 1fr 1fr;*/

/*    font-size: 0.95em;*/

/*}*/

#menu>nav#menu-about a.legals, #menu_dl_app {
    padding: 0.51em 1.82em;
    line-height: 1em;
    font-weight: 300;
    color: #d4d7e9;
}

#menu>nav#menu-about a.menu:first-letter {
    text-transform: uppercase;
}

#menu>nav#menu-about a.menu.active {
    color: #fff;
}

#menu-main {
    margin-top: 1vh;
}

#menu>nav {
    background: transparent;
    box-shadow: none;
}

#menu>nav#menu-about>span {
    line-height: 2em;
}

#menu>nav a.menu {
    display: block;
    padding: .9em 0 .9em 2em;
    text-decoration: none;
    line-height: initial;
    color: #d4d7e9;
}

#menu>nav>a:hover {
    background: #1d2027;
    /* color: #fff; */
}

#menu>nav a.menu:active, #menu>nav a.menu.active {
    background: #1d2027;
    color: #d4d7e9;
    font-weight: bold;
    border-left: 5px solid #b39ddb;
    /*var(--main-purple);*/
}

#menu>nav>a.active img {
    margin-right: 1.42em;
    width: 28px;
}

#menu>nav>a .icon {
    margin-right: 1.2rem;
    width: 20px;
    line-height: unset;
    height: unset;
}

#menu>nav>a>i {
    margin-right: 1.42em;
    height: auto;
}

#menu>nav .menu-main-btn-in {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#menu_support_text {
    display: inline-block;
}

#menu_support_text::first-letter {
    text-transform: uppercase;
}

#menu_logoHostCompany>#menu-hostCompany-logo {
    width: 80%;
}

#container {
    width: 100%;
    max-height: 20px;
    top: 0;
}

#breadcrumb {
    margin: 0;
    padding: 0.9em 2.36em 0.9em 19em;
    font-weight: 300;
    line-height: 1em;
    display: none;
    font-size: 1em;
    background: #fff;
    left: 0;
    top: 0;
    height: 4em;
    position: fixed;
    width: 100%;
    z-index: 101;
}

#breadcrumb>a {
    text-decoration: none;
    color: #aeaeb2;
    font-size: 0.9em;
    margin: 0 0.18em;
    letter-spacing: 0.03em;
}

#user {
    display: none;
    float: right;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 111;
    width: 50%;
}

#user>img {
    width: 1.4em;
    height: 1.4em;
    border-radius: 1em;
    margin-right: 0.5em;
}

#user>span {
    font-size: 0.9em;
    font-weight: 300;
    color: #73727a;
    display: inline-block;
    letter-spacing: 0.015em;
}

#user>table>div {
    display: inline-block;
    vertical-align: middle;
    margin-top: 0;
    margin-left: 1em;
    color: #73727a;
}

.grid-container-menu {
    display: grid;
    grid-template-columns: 5rem 5rem fit-content(800px);
    grid-template-columns: 5rem 5rem -moz-fit-content(800px);
    grid-template-rows: 2em 2em;
    grid-template-areas: "bell-icon avatar-menu-right  user-menu" "bell-icon avatar-menu-right  company";
    float: right;
    margin-right: 2vw;
}

.grid-container-menu>div {
    display: grid;
    place-items: center;
}

.bell-icon {
    grid-area: bell-icon;
}

.company {
    grid-area: company;
}

.avatar-menu-right {
    grid-area: avatar-menu-right;
}

.user-menu {
    grid-area: user-menu;
    text-align: center;
    padding-top: 5px;
}

.user-menu a.dropdown-button {
    display: flex;
    flex-direction: row;
}

.user-menu #user-name {
    width: 100%;
}

#user-logout {
    width: 1em;
    height: 1em;
    background-size: contain;
    cursor: pointer;
    font-size: 12pt;
    margin: 0;
    display: block;
}

#content {
    margin-top: 1.3em;
    top: 0;
    padding: 1.78em 2.86em 1.78em 19.2em;
}

#content>div {
    display: none;
    opacity: 0;
    transition: 0.7s;
    transition-timing-function: cubic-bezier(0.25, 0.5, 0.06, 0.94);
}

#content-1 {
    padding-bottom: 3.36em;
}

#sd-btns>button, .sd-btn>button {
    font-size: 14px;
}

#content>#content-1a {
    padding-top: 0;
}

#content>#content-1a>div {
    padding-top: 0;
}

#content>#content-1a>#content-uploading-files>#sd-contacts {
    padding-top: 0em;
    background: transparent;
    border: none;
    /* display: block; */
    padding: 0;
    /* overflow-x:  hidden; */
}

#sd-contacts>h3 {
    display: none;
}

#video-containers {
    padding-top: 0.3em;
}

#video-containers>* {
    width: 600px;
    position: absolute;
    margin-left: 51.5%;
    left: -300px;
    /* top: -3em; */
    font-size: 14px;
}

#video-containers>p {
    height: 450px;
    margin-top: 0;
    background: rgba(255, 255, 255, 0.8);
    width: 600px;
    z-index: 20;
    border-radius: 3em;
    mix-blend-mode: difference;
    transition: 0.4s;
    /* opacity: 0; */
}

#video {
    height: 450px;
    border-radius: 3.3em;
}

#canvas {
    z-index: 20;
    /* top: 5.7em; */
    /* height: 450px; */
    /* top: 0; */
    /* position: relative; */
    transition: 0.3s;
    border-radius: 3.1em;
}

#content-1>h1, #content>div.contained>h1 {
    text-align: center;
    font-weight: 300;
    font-size: 1.71em;
    padding: 0;
    margin: 0;
    line-height: 1em;
    width: 100%;
    /* margin-left: -4%; */
}

#content-1>nav {
    margin-top: 3.42em;
    height: auto;
    text-align: center;
    background: transparent;
    box-shadow: none;
}

#content-1>nav>a {
    display: inline-block;
    margin: 0 3.39em 2em;
    text-decoration: none;
    width: 17.07em;
    height: 19.42em;
    font-size: 1em;
    text-align: center;
    color: var(--main-purple);
    border: 1px solid #eee;
    background-color: #ffffff;
    box-shadow: 0px 4px 12px 0 rgba(0, 0, 0, 0.1);
    background-position: 1.29em 1.36em;
    background-repeat: no-repeat;
    line-height: initial;
}

#content-1>nav>a>div {
    width: 7.14em;
    /* height: 6.21em; */
    vertical-align: middle;
    display: inline-block;
    margin-top: 12.57em;
}

#content-1>nav>a>div>img {
    vertical-align: -webkit-baseline-middle;
    font-size: 14px;
}

#content-1>nav>a>span {
    display: inline-block;
    font-weight: 300;
    font-size: 1.14em;
    width: 95%;
    padding-top: 0.9em;
    line-height: 1em;
}

#send-file {}

#content-1>nav>a::before {
    position: absolute;
    width: 17.07em;
    height: 19.42em;
    /* left: 0; */
    /* margin: 0 3.39em 2em; */
    /* top: 0; */
    background-position-x: 44%;
    background-position-y: 14%;
    background-repeat: no-repeat;
    margin-left: -5em;
    z-index: 30;
    /* margin-left: 10%; */
    /* left: 0; */
    /* position: relative; */
    display: inline-block;
    content: "";
}

#send-file::before {
    background: url("/img/send/choose_file-bg.png");
}

#take-photo {
    cursor: initial;
}

#take-photo::before {
    background-image: url("/img/send/take_photo-bg.png");
    opacity: 0.4;
    cursor: initial;
}

#content-1>nav>a#send-file>span {
    color: var(--main-purple);
}

#content-1>nav>a>span.sub {
    font-size: 1em;
    margin-top: 0.34em;
}

#content-1>nav>a.disabled>span {
    color: #a1a1a1;
}

#content>div.contained {
    width: 90%;
    margin-left: 6%;
    left: 50%;
    /* position: absolute; */
    padding-top: 2em;
    padding-bottom: 1em;
}

#content>div.contained>p {
    margin: 3.43em 0 1.29em;
    padding: 0;
    text-align: center;
}

#content>div.contained>p#content-action-buttons {
    /* display: none; */
    height: 2em;
    margin: 0;
}

p#content-action-buttons {
    /* height: 0; */
    text-align: right;
    /* display: none; */
    width: 51em;
    margin-left: 10%;
    /* position: absolute; */
    opacity: 0;
    z-index: -1;
    transition: 0.4s;
    margin-bottom: -3em;
}

#loading-contact-import>h4, #loading-contact-invite>h4 {
    font-weight: 700;
    color: #6f6e76;
    width: 70vw;
}

/*HERE Fabien*/

.default-button {
    font-weight: normal;
    float: right;
    vertical-align: bottom;
    min-width: 11.5em;
    margin-left: 1em;
    margin-bottom: 1em;
    line-height: 1.5em;
    background: var(--main-purple);
    border-radius: 0.2em;
    border: 1px solid transparent;
    padding: 0.6em;
    color: #fff;
}

.default-button-left {
    float: left !important;
}

.default-button:active {
    background: #bd98f5;
}

#content>#content-1a>div>p>button, #co-invite, #cancel-import, #co-import, #co-import-microsoft, .btns {
    /* display: none; */
    border-radius: 0.2em;
    border: 1px solid transparent;
    padding: 0.6em;
    color: #fff;
    background: var(--main-purple);
    min-width: 7em;
}

.hush-btn {
    font-weight: normal;
    vertical-align: bottom;
    line-height: 1.5em;
    background: var(--main-purple);
    border-radius: 0.2em;
    letter-spacing: .5px;
    cursor: pointer;
    text-transform: capitalize;
    border: none;
}

.hush-btn:hover i {
    color: white;
}

.hush-btn:hover, .hush-btn.btn:hover, .hush-btn.btn-large:hover, .hush-btn.btn-small:hover {
    background: var(--main-purple);
    transform: translate(0px, -1px);
    transition: .3s;
    color: white;
}

.hush-btn:hover:focus {
    color: var(--main-purple);
}

#content>#content-1a>div>p>button, #co-invite, #cancel-import, #co-import-microsoft, #co-import, .hush {
    /* display: none; */
    border-radius: 0.2em;
    border: 1px solid transparent;
    padding: 0.6em;
    color: #fff;
    background: var(--main-purple);
    min-width: 7em;
}

.btns.cancel {
    margin-left: 1em;
    background: #d16767;
}

.xbutton {
    border-radius: 0.2em;
    border: 1px solid transparent;
    padding: 0.6em;
    color: #fff;
    background: #d16767;
    float: right;
    line-height: 0.8;
    margin-right: 0.5em;
    margin-top: -0.6em;
}

.btns.cancel:active {
    background: #844;
}

#content>#content-1a>div>p>button, #co-invite, #co-import, #co-import-microsoft, #cancel-import {
    font-weight: normal;
    background: var(--main-purple);
}

#co-invite, #co-import, #co-import-microsoft, #cancel-import {
    font-weight: normal;
    float: right;
    vertical-align: bottom;
    /* margin-top: -.7em; */
    min-width: 11.5em;
    margin-left: 1em;
    /*margin-bottom: 1em;*/
    line-height: 1.5em;
}

#co-invite:active, #cancel-import:active {
    background: #bd98f5;
}

#invite {
    position: fixed;
    width: 78%;
    left: 11%;
    margin-left: 0;
    top: 30%;
    height: auto;
    background: #fff;
    padding: 2em;
    display: block;
    border-radius: 0.4em;
    /* left: 100%; */
    box-shadow: rgba(0, 0, 0, 0.13) 0.1em 0.2em 1.3em;
}

#invite>p {
    width: 100%;
    font-size: 1.3em;
    text-align: left;
    margin-top: 0;
    font-weight: 500;
}

#invite-area {
    min-height: 10em;
    max-height: 10em;
    border-radius: 0.2em;
    font-family: "Roboto", serif;
    font-size: 1.2em;
    position: relative;
    display: block;
    margin-bottom: 2em;
    padding: 0.5em;
    border: 1px solid var(--main-purple);
    left: 0;
    top: 0;
    width: initial;
    cursor: initial;
    overflow-x: hidden;
    overflow-y: auto;
    height: auto;
}

#invite-area>.chip>img {
    width: 2em;
    height: 2em;
    margin-right: 0.5em;
}

#invite-area>input {
    max-width: 100%;
    overflow-x: visible;
}

#invite>button {
    float: right;
    margin-left: 2em;
    font-size: 1.2em;
    /* font-weight: 500; */
}

#invite p::first-letter {
    text-transform: capitalize;
}

#invite>span {
    color: var(--main-purple);
    padding: 0.6em;
    display: block;
    font-size: 1.2em;
}

#invite>span>strong {
    color: #d16767;
}

#content>#content-1a-3 {
    margin-top: 15%;
    padding-top: 3em;
    background: transparent;
}

#sent-check-img {
    display: block;
    width: 5em;
    height: 5em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2em;
}

#content>#content-1a-3>p {
    padding: 0 2em;
    font-weight: 300;
    word-spacing: 0.04em;
    line-break: strict;
}

.hiddendiv {
    display: none;
}

#startbutton {
    position: absolute;
    right: -35px;
    margin-right: 48.7%;
    top: 520px;
    z-index: 20;
    width: 70px;
    height: 70px;
    /* font-size: 14px; */
    /* opacity: .6; */
    border-radius: 3em;
    color: #fff;
    background: rgba(255, 255, 255, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.2);
    mix-blend-mode: hard-light;
    z-index: 20;
    font-weight: 400;
    font-family: "Roboto";
}

button:first-letter {
    text-transform: uppercase;
}

button:disabled {
    background: #ccc !important;
    border-color: transparent !important;
    box-shadow: unset!important;
    color: white!important;
}

#cancelbutton {
    position: absolute;
    right: 2em;
    top: 6.3em;
    z-index: 20;
    width: 5em;
    height: 5em;
    z-index: 25;
    position: absolute;
    right: -35px;
    margin-right: 48.7%;
    top: 33em;
    z-index: 20;
    width: 70px;
    top: 520px;
    height: 70px;
    font-size: 14px;
    /* opacity: .6; */
    border-radius: 3em;
    color: #fff;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.4);
    mix-blend-mode: hard-light;
    z-index: 25;
}

#content-1b>div>p {
    /* margin: 0; */
    z-index: 20;
    /* top: 5.7em; */
    /* height: 450px; */
    /* top: 0; */
    /* position: relative; */
    background: #fff;
}

#content>#content-1b {
    padding-top: 1.7em;
}

#content>#content-1b>h1 {
    margin-bottom: 1em;
}

/*#uploading-filelist{
    border-bottom-width: .2em !important;
}*/

#content-uploading-files>#uploading-filelist {
    /* width: 58vw;
    margin: auto; */
    display: contents;
    /** or inline-block **/
    background: transparent;
    /* position: absolute; */
    margin-left: 0px;
    margin-right: 0px;
    height: 10.45em;
    /* border: 2px dashed rgba(183, 183, 183, .5) !important; */
    /* background: url('/img/add-document-icon.png'); */
    z-index: 39;
    transition: 0.4s;
    transition-timing-function: cubic-bezier(0.56, 1.24, 0.95, 1.27);
    transition: 0.15s;
    min-height: 10.4em;
    /*border-style: dashed;*/
    padding-left: 0 !important;
    /* border-width: .2em; */
    padding-right: 0 !important;
    /* border-bottom-style: none; */
    /*border-color: transparent;*/
}

#uploading-filelist-empty {
    text-align: center;
    padding-top: 6em;
    /* background: #fff; */
    height: 5em;
    font-weight: 300;
    /* cursor: crosshair; */
    color: #6f6e76;
    z-index: 56;
    background: url("/img/add-document-icon.png") no-repeat 50% 0;
    /* background-position-x: 0; */
    transition-duration: 0.15s;
    transition-delay: 0s;
    background-position-y: 0.5em;
    /* width: 58vw; */
    /* position: absolute; */
    width: 58%;
    left: 0;
    margin-left: 21%;
    background-size: 5em;
    /* margin-top: 6em; */
}

.has-files #uploading-filelist-empty {
    background-size: 3em;
    padding-top: 3.7em;
}

#uploading-filelist-empty>span.browse {
    color: #68489c;
    cursor: pointer;
}

#uploading-filelist>input {
    cursor: pointer;
}

#content>div.contained>p>button {
    border-radius: 1.42em;
    border: none;
    background: #e0e0e0;
    padding: 1em 2em;
    min-width: 8.86em;
    font-family: "Roboto";
}

#file-up {
    color: rgba(0, 0, 0, 0);
    width: 100%;
    opacity: 0;
    /* left: -10%; */
    /* left: 0; */
    margin-top: -6.45em;
    /* margin-left: 2em; */
    height: 8em;
    font-family: "Roboto", sans-serif;
    border: dashed;
    /* margin-right: 15%; */
    z-index: 109;
    /* float: right; */
    background: rgba(255, 0, 0, 0.03);
    /*cursor: crosshair;*/
    /* margin-left: 5%; */
    text-align: center;
    display: block;
}

#file-up:after {
    content: attr(data-content);
    /* color: rgb(255, 0, 255); */
    position: fixed;
    width: 20vw;
    margin-left: 40vw;
    left: 9.25%;
    margin-top: 21vh;
    z-index: 50;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 3em;
    font-weight: 400;
    display: none;
}

#file-up.fullscreen {
    left: 0;
    width: 100% !important;
    top: 0;
    background: rgba(255, 255, 255, 0.2) url("/img/add-document-icon.png") no-repeat;
    background-size: 6em;
    opacity: 1;
    position: absolute;
}

#send-size {
    /* position: absolute; */
    /* right: 0em; */
    font-weight: 300;
    margin-top: 0;
    display: flex;
    float: right;
    /* height: 3em; */
    text-align: right;
    margin-top: -2em;
    /* margin: auto; */
    /* vertical-align: middle; */
}

#send-size b {
    font-weight: 400;
}

#send-size>* {
    margin: auto;
}

#send-qty {
    /* margin-left: .8em; */
    /* position: absolute; */
    /* right: 8em; */
    font-weight: 400;
    /* margin: auto; */
    display: inline-block;
}

#send-qty-str {
    padding-top: 2em;
}

.rounded {
    border-radius: 50%;
}

.chld-rounded>* {
    border-radius: 50%;
}

#uploading-filelist-details {
    /* margin-top: 4em; */
    /* height: 10em; */
    /* position: absolute; */
    top: 7.5em;
    width: 57.6vw;
    margin: auto;
    display: none;
}

#text-files {
    display: inherit;
    vertical-align: top;
    color: #707070;
    font-weight: 300;
    margin-top: -0.5em;
}

#text-files>span {
    padding-right: 0.5em;
}

#uploading-filelist-details>button {
    opacity: 0;
    margin-top: -1em;
}

#send-qty {
    margin-right: 0.1em;
}

#send-qty-str {
    padding-top: 2em;
}

#files-upload {
    padding: 0;
    height: 8em;
    overflow: auto;
    margin-top: -1em;
}

#files-upload>li {
    list-style-type: none;
    margin: 0;
    padding: 0.5em 0 0.5em;
    line-height: 1.3em;
    margin-bottom: 0.5em;
    background-color: #f2eefd !important;
    display: flex;
    align-items: center;
}

#files-upload>li>img {
    width: 2em;
    height: 2em;
    margin: 0 1em;
    /* background: rgba(255,255,255, .6); */
    mix-blend-mode: multiply;
    margin-top: -2px;
}

#files-upload>li>span.file-size {
    /* float: right; */
    color: #707070;
    font-weight: 300;
    font-size: 0.9em;
    margin: 0em 0em 0 1.5em;
}

.delete-file {
    float: right;
    margin: 0.3em 2em 0 0em !important;
}

#files-upload>li:last-child {
    margin-bottom: 0;
}

#upload-progress {
    text-align: center;
}

#upload-progress-text {
    color: var(--main-purple);
    /** display: inline-block; **/
    display: block;
}

#upload-progress>svg {
    display: block;
    width: 55% !important;
    margin-left: 22.3%;
    margin-top: 3.3em;
}

#upload-progress-bar {
    display: inline-block;
    height: 0.8em;
    margin: 1em 24% 2em;
    width: 50%;
    background: rgb(190, 190, 255);
    margin-bottom: 0em;
}

#co-add-search {
    /**width: 70%;**/
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    padding: 0.75em 0 0.75em 1.3em;
    background: #e0e0e0 url("/img/search.png");
    border: none;
    font-weight: 300;
    font-size: 1.2em;
    background-position: 99% 50%;
    font-family: "Roboto";
    background-repeat: no-repeat;
    outline: none;
}

/*TODO : Make a class for input ?*/

#thread-search, #archived-search {
    /**width: 70%;**/
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    padding: 0.75em 0 0.75em 1.3em;
    background: #e0e0e0 url("/img/search.png");
    border: none;
    font-weight: 300;
    font-size: 1.2em;
    background-position: 99% 50%;
    font-family: "Roboto";
    background-repeat: no-repeat;
}

.wrapper-threads-action {
    /*background-color: red;*/
    width: 55%;
    float: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    max-height: 50px;
}

#co-add-search::placeholder {
    color: #6f6e76;
}

#thread-search::placeholder, #archived-search::placeholder {
    color: var(--color-placeholder);
}

#content-3>p, #content-3>ul>p, #sd-co-list>p, #co-import-results>p, #co-invite-results>p, #invitations-list>p {
    font-weight: 500;
    color: #6f6e76;
    padding: 0;
    margin: 1.71em 0 1.29em;
    width: 100%;
    line-height: 3em;
    font-size: 15px;
}

#sd-co-list.iOS-avatar img.avatar {
    transform: translate(10px, 0px);
}

#invitations-table>tr>td:nth-child(even) {
    background: #e1e1e1;
}

#invitations-table>tr>td, #invitations-table>tr>th {
    text-align: center;
    word-wrap: break-word;
}

#invitations-table {
    table-layout: fixed;
    margin-bottom: 1em;
}

#invitations-table>tr>td:last-child>button {
    width: 60%;
}

#content-3>p {
    text-align: right;
    width: 100%;
    line-height: 3em;
    height: 3em;
}

h5.section-title {
    cursor: default;
    font-weight: 500;
    color: #6f6e76;
    padding: 0;
    width: 100%;
    line-height: 3em;
    font-size: 1.3rem;
}

#content-3>p>span {
    float: left;
    left: 0;
}

#co-loading {
    margin-top: 6em;
}

#content-2, #content-2-threads, #content-2-archived {
    color: #6f6e76;
}

.news-box p>a {
    cursor: pointer;
}

.news-box {
    text-align: center;
    font-size: 15px;
    display: block;
    width: 100%;
    margin-top: 1em;
}

ul.bullet-list {
    list-style: initial;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: height .5s ease-in;
    width: fit-content;
    width: -moz-fit-content;
}

#user-int-list {
    padding-bottom: 1em;
}

ul.bullet-list>li:not(.more) {
    list-style-type: initial;
    width: 100%;
}

#sd-contacts>.news-box {
    width: 98%;
    margin: 0.5em auto;
}

#fl-avatar {
    margin-top: 1.1em;
    left: 0;
    display: none;
    width: auto;
    margin-left: 1em;
}

#dl-t2 {
    font-size: 0.5em;
    font-weight: 500;
    line-height: 1em;
}

#download-as-zip {
    font-size: 0.4em;
    font-weight: 300;
    cursor: pointer;
    color: #8761bf;
    display: none;
}

#dl-progress, .dl-progress {
    font-size: 1.4em;
    padding: 1em;
}

#content-3>ul, #sd-co-list, #co-import-results, #co-invite-results {
    list-style-type: none;
    padding: 0;
    /* width: 73.4%; */
    /* min-width: 40em; */
    margin: 0;
    color: black;
    margin-bottom: 2.8em;
    /* display: flex; */
    /* min-height: min-content; */
    /* needs vendor prefixes */
    flex-direction: row;
    max-width: 100vw;
    font-size: 15px;
    /* overflow: auto; */
}

#sd-co-list, #co-import-results, #co-invite-results {
    display: flex;
    flex-direction: row;
    /* max-height: 9em; */
    /* flex-wrap: wrap; */
    /* margin-right: 4em; */
    /* border-bottom: 1px solid rgba(183, 183, 183, .5); */
    margin-bottom: 0;
    overflow: hidden;
    overflow-x: scroll;
    padding: 0.4em 0.2em;
}

#co-import-results>li, #co-invite-results>li {
    position: relative;
}

#sd-co-list>li, #co-import-results>li, #co-invite-results>li, #content-2>ul>li, #content-2-threads>ul>li, #content-2-archived>ul>li, #content-2a>ul>li {
    /* display: -webkit-box; */
    background: #fff;
    /*padding: 1.29em 1.4em 1.29em 1.2em;*/
    padding: 1.2em;
    /* border-bottom: 1px solid #efefef; */
    width: 100%;
    cursor: pointer;
}

#co-import-results>li, #co-invite-results>li {
    height: 16em;
}

#sd-co-list>li {
    height: 14em;
}

#content-3>ul>li {
    background: #fff;
    padding: 1.2em;
    /*padding: 1.29em 1.4em 1.29em 1.2em;*/
    border-bottom: 1px solid #efefef;
}

#content-3>ul>li.external {
    height: 5.5em;
    display: none;
}

#content-3>ul>li.external>#img-avatar {
    display: none;
}

#content-3>ul>li.external>.contact-name {
    min-height: 1em;
}

#content-3>ul>li.external>.contact-mail {
    /* margin-left: 2em; */
}

/*#content-3 > ul > li.external > #user-cont {*/

/*    margin-top: -1.7em;*/

/*    right: 0;*/

/*}*/

#content-2a>h2 {
    text-align: center;
    font-size: 3em;
    line-height: 0.5em;
}

/**#content-2 > ul > li,**/

#content-2a>ul>li, .trans-details {
    min-height: 4.6em;
    padding-bottom: 0.8em;
    line-height: 2em;
    /*cursor: pointer;*/
}

.files-meta-list-content {
    min-height: 4.6em;
    padding-bottom: 0em;
    line-height: 2em;
    font-size: 1em;
}

.content, .content-origin {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.content, li.files-meta-list-elm {
    word-break: break-word;
}

#content-2a>ul>li, .files-meta-list-content>li {
    padding: 0.35em 3%;
    cursor: default;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}

.files-meta-list-content>li>a.dl-not-clickable {
    color: black;
}

.files-meta-list-content>li>a.dl-clickable {
    color: #8761bf;
    cursor: pointer;
}

.files-meta-list-content>li>img.dl-clickable {
    cursor: pointer;
}

#content-2a>ul>li>a.ios-link, .files-meta-list-content>li>a.ios-link {
    color: #151515;
}

#content-2a>ul>li>img, .files-meta-list-content>li>img.file-icon {
    height: 3em;
    /* cursor: pointer; */
    /* margin-top: -.6em; */
    margin-right: 1em;
    vertical-align: middle;
}

.files-meta-list-content>li>img.dl-icon {
    margin-left: 1%;
    height: 100%;
}

#dl-link {
    position: fixed;
}

.dropdown-content li>a, .dropdown-content li>span {
    word-break: break-all;
    vertical-align: middle;
}

#dropdown1 {
    top: 3.5em !important;
    display: inline-table;
    width: fit-content !important;
    width: -moz-fit-content !important;
    right: 10px;
    left: unset !important;
    max-width: 22vw;
}

#dropdown1>li a {
    width: 100%;
    height: 100%;
}

#dropdown1 li.divider~li span {
    text-transform: capitalize;
}

#dropdown1>li span {
    padding-left: 0.8em;
}

#dropdown1>li:first-child {
    padding: 0.3em 0;
}

#dropdown1 i {
    font-size: 12pt;
}

#dropdown1>li:first-child:hover {
    background: transparent !important;
}

#user-name::after {
    content: "\A";
    white-space: pre;
}

.user-dropdown {
    display: inline;
    width: 100%;
}

.notifictation-span {
    color: white;
    background-color: var(--main-purple);
    line-height: 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0.3em 0.3em;
    position: relative;
}

#notif-bell {
    /*margin-top: -1.5em;*/
    /*margin-bottom: 0.5em;*/
    position: relative;
    display: inline-block;
}

#notif-bell-mobile {
    margin-top: -2em;
    /*margin-bottom: 0.5em;*/
    position: relative;
    display: inline-block;
}

#notif-bell-icon {
    font-size: 2em;
}

#notif-bell-icon-mobile {
    font-size: 3.6em;
}

#notif-bell-count {
    color: white;
    background-color: var(--main-purple);
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 1em;
    padding: 0.2em 0.6em;
    bottom: -0.6em;
}

#notif-bell-count-mobile {
    color: white;
    background-color: var(--main-purple);
    border-radius: 50%;
    text-align: center;
    position: relative;
    left: -0.9em;
    padding: 0.3em 0.3em;
}

#notif-bell-count-mobile.zero-notif {
    display: none;
}

#notif-bell-count.zero-notif {
    background-color: #c0c0c0;
    display: none;
}

/*#notif-bell-count-mobile.zero-notif {
    background-color: #c0c0c0;
} */

#notif-bell-reset {
    font-weight: bold;
}

#notif-bell-reset-mobile {
    font-weight: bold;
}

#notif-bell-reset.zero-notif {
    font-weight: normal;
    font-style: italic;
    color: rgba(176, 176, 176, 0.87);
}

#notif-bell-reset-mobile.zero-notif {
    font-weight: normal;
    font-style: italic;
    color: rgba(176, 176, 176, 0.87);
}

#notif-bell-dropdown-menu-mobile {
    top: -60px !important;
    bottom: 5em;
}

i.icon-blue {
    color: rgba(195, 200, 216, 0.6);
}

.notif-list-item>.notif-avatar-wrapper {
    min-width: 7%;
}

.notif-list-item>.notif-avatar-wrapper>img {
    height: 38px;
    width: 38px;
}

.notif-list-item>* {
    display: grid;
    place-items: center;
}

.notif-list-item .notif-date {
    display: flex;
    align-items: center;
}

.notif-list-item .notif-date>i {
    margin-right: 0.5em;
}

.delete-notif-icon {
    margin: 8px;
}

.delete-notif-icon:hover {
    box-shadow: 0px 0px 20px #d9d9d975, -20px -20px 60px #ffffff;
    font-weight: bolder;
}

.menu-transfers-unread-count {
    font-weight: bold;
    background-color: var(--main-purple);
    color: white;
    border-radius: 25%;
    margin-left: 0.7em;
    padding: 0 0.7em;
}

.unread-message-count-mobile {
    color: white;
    background-color: var(--main-purple);
    border-radius: 50%;
    text-align: center;
    position: relative;
    left: -0.8em;
    top: -1.6em;
    padding: 0.3em 0.3em;
    font-size: 45%;
}

.user-dropdown>.dropdown-button>i.right {
    margin-left: 0.2em;
}

.tx-recv>li>.pic, .tx-sent>li>div>.pic, .trans-details>.pic {
    width: 2.5em;
    border-radius: 2em;
    height: 2.5em;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    font-size: 1em;
    margin-right: 1em;
    vertical-align: middle;
    float: left;
    margin-top: -0.3em;
}

.avatars {
    width: 8.5em;
    float: left;
    margin-top: -0.5em;
    display: inline-block;
}

.li-main .avatars {
    display: flex!important;
    margin: 0;
    flex-basis: 6em;
    float: unset;
    width: unset;
    min-width: 6em;
}

.transfer-detailed-meta .trans-details .avatars {
    width: 5em !important;
}

#content-2a>ul>li>* {
    vertical-align: middle;
}

#content-2a>ul>li>span, .files-meta-list-content>li>span {
    margin-left: auto;
}

.tx-recv>li>div>.from, .tx-sent>li>div>.to {
    display: inline-block;
    font-weight: 500;
    max-width: 72%;
    line-height: 1.2em;
}

.tx-sent>li>.to>i {}

.tx-recv>li>div>.date {
    display: inline-block;
    float: right;
}

.trans-details>div>.date {
    display: inline-block;
    font-size: 12px;
    /**float: right;**/
    /**margin-top: -2em;**/
}

.trans-details {
    color: #6f6e76;
    border-bottom: 1px solid rgba(183, 183, 183, 0.5);
    position: relative;
}

.read-icon-details {
    position: absolute;
    top: 0;
    right: 2em;
    height: 2em;
    width: 2em;
}

.read-icon-history {
    position: absolute;
    top: 1em;
    right: 1em;
    height: 2em;
    width: 2em;
}

.tx-sent>li>div .date {
    float: right;
    display: inline-block;
}

.tx-recv>li>.size, .tx-sent>li>.size {
    width: auto;
    display: inline-block;
    float: right;
    /* margin-top: .3em; */
    font-weight: 500;
}

.tx-recv>li>.size {
    margin-top: -1.6em;
}

.trans-details>.size {
    margin-top: -2em;
    width: auto;
    display: inline-block;
    float: right;
    font-weight: 500;
    clear: both;
}

.tx-recv>p {
    text-align: center;
    font-size: 2em;
}

.tx-empty-txt {
    top: 110px;
    width: 100px !important;
}

.tx-empty {
    margin-left: -50px;
    position: fixed;
    top: 50%;
    display: inline-block;
}

.tx-empty>* {
    position: absolute;
    width: max-content;
}

.tx-sent>li>.pic {}

.tx-sent>li>.pic {}

#sd-co-list>li.highlighted {
    background: var(--main-purple);
    border-bottom: 1px solid #7782f4;
    color: white;
}

#sd-co-list>li.highlighted .contact-name {
    color: #f0aa8b;
}

#co-import-results>li.highlighted {
    background: var(--main-purple);
    border-bottom: 1px solid #7782f4;
}

#co-invite-results>li.highlighted {
    background: var(--main-purple);
    border-bottom: 1px solid #7782f4;
}

#sd-co-list>li.highlighted>input {
    width: 20px;
    border-radius: 10px;
}

#co-import-results>li.highlighted>input {
    width: 20px;
    border-radius: 10px;
}

#co-invite-results>li.highlighted>input {
    width: 20px;
    border-radius: 10px;
}

#sd-co-list>li>input {
    float: right;
}

#co-import-results>li>input {
    float: right;
}

#co-invite-results>li>input {
    float: right;
}

#sd-co-list>li.highlighted>span {
    color: #fff;
}

#co-import-results>li.highlighted>span {
    color: #fff;
}

#co-invite-results>li.highlighted>span {
    color: #fff;
}

#sd-co-list>li.highlighted>.contact-name {
    color: #f0aa8b;
}

#content-3>ul>li>img.trash, #sd-co-list>li>img.trash {
    float: right;
    /* margin-top: -9.2em; */
    cursor: pointer;
    margin-right: 0.3em;
}

#co-import-results>li>img.trash {
    float: right;
    /* margin-top: -9.2em; */
    cursor: pointer;
    margin-right: 0.3em;
}

#co-invite-results>li>img.trash {
    float: right;
    /* margin-top: -9.2em; */
    cursor: pointer;
    margin-right: 0.3em;
}

.trash {
    cursor: pointer;
}

#content-3>ul>li>img.avatar, #sd-co-list>li>img.avatar, #co-import-results>li>img.avatar, #co-invite-results>li>img.avatar {
    width: 3.2em;
    height: 3.2em;
    vertical-align: middle;
    border-radius: 2em;
    display: inline-block;
    margin-right: 1.43em;
    text-align: center;
    border: 2px solid rgba(230, 230, 230, 0.07);
}

#content-3>ul>li>span, #sd-co-list>li>span, #co-import-results>span, #co-invite-results>span {
    font-size: 0.85em;
    /**color: #6f6e76;**/
    vertical-align: middle;
    font-weight: 300;
    margin-top: -0.1em;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    /** display: inline-block; **/
}

#co-import-results>li span, #co-invite-results>li span {
    display: block;
}

#sd-co-list>li>input[type="checkbox"], #co-import-results>li>input[type="checkbox"], #co-invite-results>li>input[type="checkbox"] {
    /*margin-top: 5px;*/
    height: 0;
    pointer-events: none;
    position: relative;
    top: 5px;
    margin-left: 80%;
}

#content-2, #content-2-threads, #content-2-archived, #content-3 {
    margin-left: 2%;
    margin-top: 1.75em;
}

.tx-sent>li>.user-info {
    width: 65%;
}

.tx-recv>li>.user-info {
    width: 52%;
}

#content-3>ul>li>span>strong, #sd-co-list>li>span>strong, #co-import-results>li>span>strong, #co-invite-results>li>span>strong {
    margin-right: 1.43em;
    font-weight: 500;
    /* width: 80%; */
    display: inline-block;
}

#content-3>#co-results>li {
    background: #fff;
}

#invite-message {
    font-size: 1em;
    margin-bottom: 2em;
    font-weight: 500;
}

#co-list {
    color: #b1b1b1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 3em;
}

#contact-div {
    position: relative;
}

#content-1, #content>div.contained>div#sd-btns, #content-1, #content>div.contained>div.sd-btn {
    padding-top: 4em;
    text-align: right;
}

div#sd-btns>button, div.sd-btn>button, #add-external {
    width: 9.2em;
    display: inline-block;
    height: 2.6em;
    border-radius: 3px;
    /* border: none; */
    text-align: center;
    line-height: 1.5em;
    border: 1px solid transparent;
}

.transfer-tabs>span.thread-tab {
    margin-right: 1.36em;
    font-weight: 500;
    color: #a1a1a1;
    display: inline-block;
    line-height: 1.4em;
    padding-bottom: 0;
    border-bottom: 2px transparent;
    cursor: pointer;
    margin-bottom: 1em;
    height: 2em;
}

.transfer-tabs>span.thread-tab:hover {
    border-bottom: 2px solid #a1a1a1;
}

.transfer-tabs>span.active {
    color: #6f6e76;
    border-bottom: 2px solid #6f6e76;
}

#sd-co-list>li {
    padding: 1.3em 1em;
    background-color: #ffffff;
    /* height: 17em; */
    min-width: 17em;
    max-width: 17.5em;
    margin: 15px;
    text-align: center;
    display: block;
    /*font-size: .75em;*/
    /* margin: auto auto 15px auto; margin: auto;*/
    margin-left: 0.3em;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0 0.7em;
    border: 1px solid #f5f5f5;
    max-height: 15em;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#co-import-results>li, #co-invite-results>li {
    padding: 1.3em 1em;
    background-color: #ffffff;
    /* height: 17em; */
    min-width: 17em;
    max-width: 17.5em;
    margin: 15px;
    text-align: center;
    display: block;
    font-size: 0.75em;
    margin-left: 0.3em;
    box-shadow: rgba(0, 0, 0, 0.08) 0 0 0.7em;
    border: 1px solid #f5f5f5;
    max-height: 18em;
}

#co-import-results>li>button, #co-invite-results>li>button {
    border-radius: 0.2em;
    margin-top: 10px;
    border: 1px solid transparent;
    padding: 0.6em;
    color: #fff;
    background: var(--main-purple);
    font-weight: normal;
    vertical-align: bottom;
    min-width: 11.5em;
    margin-bottom: 1em;
    line-height: 1.5em;
}

/*#sd-co-list > li:nth-child(2),*/

#co-import-results>li:nth-child(2), #co-invite-results>li:nth-child(2) {
    margin-left: 0;
}

#sd-co-list>li>img {}

#co-import-results>li>img {}

#sd-co-list>li.not-contact::after, #co-import-results>li.not-contact::after, #co-invite-results>li.not-contact::after {
    display: block;
    /*float: left;*/
    /* margin-top: 1.05em; */
    /* margin-right: 1em; */
    /*margin-left: .4em;*/
    color: #fff;
    padding: 0.4em 1em;
    border-radius: 1em;
    background: #ca6900;
    font-weight: 500;
    /*position: static;*/
    /*margin-bottom: -35px;*/
}

#sd-co-list>li.not-contact>input[type="checkbox"]:before, #co-import-results>li.not-contact>input[type="checkbox"]:before, #co-invite-results>li.not-contact>input[type="checkbox"]:before {
    color: #ff9929;
    /* right: -1em; */
    /* margin-top: -.25em; */
    /* margin-bottom: .6em; */
}

#sd-co-external {
    /* width: 100%; */
    padding-left: 0;
}

#sd-co-external::before {
    position: absolute;
    width: 104%;
    background: #fff;
    display: inline-block;
    content: "";
    height: 19em;
    margin-left: -50%;
    mix-blend-mode: multiply;
    left: 48%;
    margin-top: 0;
    z-index: 6;
}

#sd-co-external-bg {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    background: rgba(55, 55, 55, 0.33);
    bottom: -5em;
    left: 0;
    transition: 0.3s;
    /* mix-blend-mode: luminosity; */
}

#sd-add-external {
    background: #f0aa8b;
    border: 1px solid transparent;
}

#sd-add-external:hover {
    background: rgb(221, 221, 221);
    border: solid 1px transparent;
}

#sd-add-external-count {
    /**background: var(--main-purple);
    height: 1.7em;**/
    text-align: center;
    font-weight: 500;
    width: auto;
    /**padding: .5em .35em 1.4em .35em;**/
    margin-left: -2em;
    border: #fff;
    line-height: 1em;
    color: #fff;
    font-size: 0.9em;
    display: none;
    border-radius: 1em;
    margin-top: 9px;
    position: absolute;
}

.cip-genpw-icon.cip-icon-key-small {
    display: none !important;
}

.browse-top {
    text-decoration: underline;
    color: rgba(86, 96, 205, 0.8);
    /*background-color: white;*/
    padding: 0.5em 0.5em 0.5em 0;
    cursor: pointer;
    color: #68489c;
}

#sd-add-external {
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 0.6em 0;
    font-weight: 300;
    width: auto;
    line-height: 1.5em;
    font-size: 1.4em;
    margin-right: 0.4em;
}

#uploading-filelist-details>button, #sd-send, #addrecipients-btn, .sd-btn>button {
    display: inline-block;
    border-radius: 3px;
    background-color: var(--main-purple);
    font-size: 1.4em;
    padding: 0.6em 2em;
    font-weight: 300;
    color: #fff;
    border: 1px solid transparent;
}

.audio-container {
    height: 2.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0 !important;
    /* position: relative; */
}

.audio-container-compose {
    margin-left: 1.5em;
}

.play-pause-icon {
    /* position: absolute; */
    /* right: 9.2em; */
    /* z-index: 10; */
    margin-top: auto;
    margin-bottom: auto;
}

.voice-message-player {
    height: 2.5em;
}

.record-voice {
    margin: 0em 0.33em 0.33em 0em;
    background-color: var(--main-purple);
    color: #fff;
    font-weight: 300;
}

#reply {
    border-radius: 3px;
    background-color: var(--main-purple);
    font-size: 1.1em;
    padding: 0.6em 3em;
    color: #fff;
    border: 1px solid transparent;
    margin-left: 45%;
    margin-top: 2%;
    display: none;
    margin-bottom: 3.5em !important;
}

#uploading-filelist-details>button:first-letter, #sd-send:first-letter {
    text-transform: uppercase;
}

#text-files>input[type="file"] {
    height: 2em;
    margin: -2em 0;
}

#sd-send:active, #reply:active, #reply:focus, #sd-send:focus {
    background: #8761bf;
}

#content-1 {
    display: none;
}

#content-1 {
    padding-top: 2em;
}

#add-external {
    /* float: right; */
    height: 3em;
    background: var(--main-purple);
    height: initial;
    padding: 0.6em 0;
    z-index: 8;
    text-transform: capitalize;
    color: #fff;
    display: block;
    right: 0;
    position: absolute;
    margin-top: 1em;
}

#chips-external {
    /* top: 7em; */
    left: 0;
    margin-bottom: 2em;
    overflow: auto;
    border: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #9e9e9e;
    /* width: 90vw; */
    position: relative;
    margin: 0;
    height: auto;
    min-height: 11em !important;
    width: 100%;
    max-height: 13em;
}

#chips-external>.chip>img {
    width: 2em;
    height: 2em;
    margin-top: 2px;
}

#add-external:focus {
    background: #8761bf;
}

#sd-co-external {
    position: fixed;
    bottom: 48%;
    z-index: 113;
    width: 50%;
    padding-left: 0;
    padding-bottom: 1em;
    margin-left: -25%;
    left: 59%;
    text-align: right;
    font-size: 14px;
}

#sd-co-external>h3 {
    text-align: left;
    /* position: absolute; */
    /* z-index: 9; */
}

#file-blocker {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 84;
    opacity: 1;
    top: 0;
    background: rgba(170, 170, 170, 0.7);
}

#blocker {
    position: fixed;
    width: 100%;
    opacity: 0;
    top: 0;
    height: 100%;
    background: rgba(70, 70, 70, 0.5);
    transition: 0.3s;
    display: none;
    text-align: center;
    z-index: 111;
    place-items: center;
}

.modal .modal-footer {
    height: fit-content;
    height: -moz-fit-content;
    min-height: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

#modal-external {
    height: fit-content;
    height: -moz-fit-content;
}

#modal-external>.modal-content>#input-phone {
    text-align: center;
}

#modal-external input[type="radio"]+label {
    font-size: 1em;
}

#modal-external .section-title {
    line-height: initial;
    margin-top: 0;
}

#modal-external .section-title+p {
    color: black;
}

#modal-external label, #modal-external p {
    color: var(--color-label);
}

#modal-2fa-otp input[type=number] {
    height: 45px;
    width: 45px;
    font-size: 25px;
    text-align: center;
    border-radius: 15%;
    border: 3px solid hsl(260deg 27% 42%);
}

#modal-2fa-otp input[type=number].form-control-otp:focus {
    color: #3F4254;
    background-color: #ffffff;
    border-color: hsl(311deg 27% 62%);
    outline: 0;
    box-shadow: 0px 0px 6px hsl(311deg 27% 62%), 0px 0px 4px #ffffff;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#modal-2fa-otp input[type=number]::-webkit-inner-spin-button, #modal-2fa-otp input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#otp-input-field-form {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

#otp-input-field-form>input {
    border-color: blue;
}

.tfa-modal {
    height: fit-content;
    height: -moz-fit-content;
}

.tfa-modal .modal-text-2fa {
    font-size: 1.3em;
}

.tfa-modal input[type=number] {
    -moz-appearance: textfield;
}

.tfa-modal #registration-phone-input-field {
    width: unset;
    width: 80%;
}

.tfa-modal ul.iti__country-list {
    max-height: 8rem;
}

#modal-2fa-registration .modal-content {
    margin-bottom: 2em;
}

#change-phone-number {
    cursor: pointer;
}

#externals-manual-desc-desktop, #externals-manual-desc-mobile {
    color: #9e9e9e;
}

#externals-manual-desc-mobile {
    display: none;
}

#phone-validation-result {
    color: red;
}

#phone-validation-result.valid_phone_number {
    color: blue;
}

#modal-subtop {
    z-index: 1003;
    opacity: 1;
    top: 10%;
    transform: scaleX(1) scaleY(1);
    display: block;
}

#modal-subtop>.modal-footer>button {
    border-radius: 0.12em;
    border: none;
    font-size: 1.2em;
    height: 2.86em;
    background-color: var(--main-purple);
    color: white;
    margin: 0 0.3em 0 0.3em;
    /*padding: 0;*/
    display: inline-block;
    width: fit-content;
    width: -moz-fit-content;
    padding: 0 1em;
    min-width: 8em;
}

#modal-subtop>.modal-footer>button>a {
    margin: 0;
    padding: 0;
}

#modal-subtop>.modal-footer>button.button-white-greyed, #modal-subtop>.modal-footer>.button-white-greyed>a {
    background-color: inherit;
    color: darkgrey;
}

#modal-subtop>.modal-footer>button.button-white-greyed {
    box-shadow: inset 0 0 0 2px darkgrey;
}

#modal-subtop>.modal-footer>button.button-white>a {
    color: white;
}

.btn-greyed {
    background-color: inherit;
    color: darkgrey;
    box-shadow: inset 0 0 0 2px darkgrey;
}

.btn-greyed:hover {
    background-color: unset;
    box-shadow: inset 0 0 0 2px darkgrey;
    -webkit-box-shadow: inset 0 0 0 2px darkgrey;
}

.btn-validate {
    background-color: var(--main-purple);
}

.btn-validate:hover {
    background-color: var(--main-purple);
    color: white!important;
    transform: translate(0px, -2px);
    transition: .1s;
}

.uppercase {
    text-transform: uppercase;
}

#modal {
    display: table;
    position: static;
    /*min-height: 10em;*/
    width: 36em;
    border-radius: 0.4em;
    padding: 0;
    text-align: center;
    background: white;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.13) 0.1em 0.2em 1.3em;
    margin: 0;
    overflow: auto;
}

#modal>#title-h2 {
    padding: 1em;
}

#modal>h2 {
    padding: 1em 0;
    margin: 0;
    width: 100%;
    font-size: 0.8em;
    background: var(--main-purple);
    color: #fff;
    text-align: left;
    border-top-left-radius: 0.16em;
    border-top-right-radius: 0.16em;
}

#modal>h2:first-letter {
    text-transform: uppercase;
}

#modal>h2>span {
    display: inline-block;
    margin-left: 0.92em;
    font-size: 1.2em;
    letter-spacing: 0.02em;
    font-weight: 500;
}

#modal>div {
    /*width: 25em;*/
    padding: 1.3em;
    letter-spacing: 0.02em;
    font-weight: 300;
    text-align: left;
    /* font-size: .95em; */
    /* height: 13em; */
    padding: 1.2em 1.2em 1.7em;
    /* font-family: sans-serif; */
    /* padding: 0; */
}

#modal>div>h1 {
    margin: 0.3em 0 0;
    font-size: 1.4em;
}

#modal>button {
    margin: 1em 0.5em 1.2em 1.2em;
    border-radius: 0.12em;
    border: none;
    width: 7.3em;
    font-size: 14px;
    height: 2.86em;
    background-color: var(--main-purple);
    color: #fff;
}

#modal>div>div>button {
    margin: 1em 0.5em 1.2em 1.2em;
    border-radius: 0.12em;
    border: none;
    font-size: 14px;
    background-color: var(--main-purple);
    color: #fff;
    height: 2.86em;
    width: auto;
    /**width: 2.86em;**/
    position: absolute;
    right: 0;
    bottom: 0;
}

#password-reset-explanation, #plan-limit-explanation {
    display: block;
    margin-top: 2em;
}

#modal>button:active, #modal>button:focus {
    background-color: #8761bf;
}

#modal>button::first-letter {
    text-transform: uppercase;
}

#modal>input {
    margin: 0 2em 1em;
    width: 80%;
    text-align: center;
}

#modal>input[type="text"], #modal>input[type="password"] {
    /* margin: 0 2em 1em; */
    border-radius: 1.5em;
    background: #e0e0e0;
    /* padding: .5em; */
    border: 1px solid transparent;
}

#modal>input[type="password"], #modal>input[type="text"] {
    letter-spacing: 0.04em;
    margin: 0 1em 1em;
    width: 70%;
    text-align: center;
    padding: 0.8em 12% 0.8em 5%;
}

#modal>input[type="text"] {
    letter-spacing: 0.01em;
}

#modal>button.modal-alert-close {}

#modal>button#modal-alert-confirm {
    background: var(--main-purple);
    color: #fff;
}

#modal>div>div>img, #modal>div>div>br {
    display: none;
}

#modal>#content-pass {
    /* margin: 1em; */
    margin-top: 0;
}

#content-pass>* {
    margin: 0.5em 3%;
}

#content-pass>span {
    /* padding-bottom:2em; */
    font-size: 0.8em;
    margin-left: 3%;
    margin-top: 1.5em;
    display: block;
    font-weight: 400;
}

.changepass-feedback {
    height: 0.24em;
    /* width: 20em; */
    width: 80%;
    font-size: 0.8em;
    text-transform: uppercase;
    font-variant: all-petite-caps;
    color: #d00;
}

#change-prevpassphrase-feedback {
    margin: 0 auto 3em;
}

#change-passphrase-feedback {
    background: transparent;
    margin: 0 3% 1.3em;
}

#old-passphrase {
    margin-bottom: 0;
}

#loading-contact-search {
    padding: 1.7em 1.1em;
    /* display: none; */
}

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

#loading-contact-search>span {
    display: inline-block;
    vertical-align: middle;
    color: #b1b1b1;
    font-weight: 300;
}

.floatingBarsG {
    position: relative;
    bottom: 2em;
    width: 17px;
    height: 21px;
    margin: 0 1em 0 0;
    vertical-align: middle;
    display: inline-block;
}

#loading-contact-search>.floatingBarsG {
    bottom: 0;
}

#co-li-loading {
    position: absolute;
    margin-top: 0.6em;
    /* margin-left: 6em; */
}

#co-li-loading>span {
    position: relative;
    bottom: 2em;
    font-size: 0.85em;
}

.blockG {
    position: absolute;
    background-color: rgba(161, 161, 161, 0.56);
    width: 3px;
    height: 7px;
    border-radius: 2px 2px 0 0;
    -o-border-radius: 2px 2px 0 0;
    -ms-border-radius: 2px 2px 0 0;
    -webkit-border-radius: 2px 2px 0 0;
    -moz-border-radius: 2px 2px 0 0;
    transform: scale(0.4);
    -o-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    animation-name: fadeG;
    -o-animation-name: fadeG;
    -ms-animation-name: fadeG;
    -webkit-animation-name: fadeG;
    -moz-animation-name: fadeG;
    animation-duration: 0.572s;
    -o-animation-duration: 0.572s;
    -ms-animation-duration: 0.572s;
    -webkit-animation-duration: 0.572s;
    -moz-animation-duration: 0.572s;
    animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-direction: normal;
    -o-animation-direction: normal;
    -ms-animation-direction: normal;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
}

#rotateG_01 {
    left: 0;
    top: 8px;
    animation-delay: 0.2095s;
    -o-animation-delay: 0.2095s;
    -ms-animation-delay: 0.2095s;
    -webkit-animation-delay: 0.2095s;
    -moz-animation-delay: 0.2095s;
    transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

#rotateG_02 {
    left: 2px;
    top: 3px;
    animation-delay: 0.286s;
    -o-animation-delay: 0.286s;
    -ms-animation-delay: 0.286s;
    -webkit-animation-delay: 0.286s;
    -moz-animation-delay: 0.286s;
    transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
}

#rotateG_03 {
    left: 7px;
    top: 1px;
    animation-delay: 0.3525s;
    -o-animation-delay: 0.3525s;
    -ms-animation-delay: 0.3525s;
    -webkit-animation-delay: 0.3525s;
    -moz-animation-delay: 0.3525s;
    transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}

#rotateG_04 {
    right: 2px;
    top: 3px;
    animation-delay: 0.429s;
    -o-animation-delay: 0.429s;
    -ms-animation-delay: 0.429s;
    -webkit-animation-delay: 0.429s;
    -moz-animation-delay: 0.429s;
    transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

#rotateG_05 {
    right: 0;
    top: 8px;
    animation-delay: 0.4955s;
    -o-animation-delay: 0.4955s;
    -ms-animation-delay: 0.4955s;
    -webkit-animation-delay: 0.4955s;
    -moz-animation-delay: 0.4955s;
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
}

#rotateG_06 {
    right: 2px;
    bottom: 2px;
    animation-delay: 0.572s;
    -o-animation-delay: 0.572s;
    -ms-animation-delay: 0.572s;
    -webkit-animation-delay: 0.572s;
    -moz-animation-delay: 0.572s;
    transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
}

#rotateG_07 {
    bottom: 0;
    left: 7px;
    animation-delay: 0.6385s;
    -o-animation-delay: 0.6385s;
    -ms-animation-delay: 0.6385s;
    -webkit-animation-delay: 0.6385s;
    -moz-animation-delay: 0.6385s;
    transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

#rotateG_08 {
    left: 2px;
    bottom: 2px;
    animation-delay: 0.715s;
    -o-animation-delay: 0.715s;
    -ms-animation-delay: 0.715s;
    -webkit-animation-delay: 0.715s;
    -moz-animation-delay: 0.715s;
    transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
}

@keyframes fadeG {
    0% {
        background-color: rgb(161, 161, 161);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

@-o-keyframes fadeG {
    0% {
        background-color: rgb(161, 161, 161);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

@-ms-keyframes fadeG {
    0% {
        background-color: rgb(161, 161, 161);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes fadeG {
    0% {
        background-color: rgb(161, 161, 161);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

@-moz-keyframes fadeG {
    0% {
        background-color: rgb(161, 161, 161);
    }
    100% {
        background-color: rgba(255, 255, 255, 0);
    }
}

/*********************/

.contained>div {
    /* background: white; */
    /* height: 50em; */
    /* height:61vh; */
}

.chips {
    left: 6em;
    top: -0.5em;
    border: none !important;
    background: transparent !important;
    width: 90%;
    height: 4em;
    min-height: 0 !important;
}

.chips.focus {
    border: none !important;
    box-shadow: none !important;
}

#reply-window>#uploading-fileList {
    border-bottom: 1px solid rgba(183, 183, 183, 0.5) !important;
}

#reply-window>#uploading-filelist {
    border-bottom: 1px solid rgba(183, 183, 183, 0.5);
    margin-bottom: 1em;
}

#content-uploading-files>div {
    min-height: 4em;
    /*padding: 1.15em 0 .4em;*/
    border-bottom: 1px solid rgba(183, 183, 183, 0.5);
    transition: 0.2s;
    /*padding-left: 2%;*/
    /*padding-right: 2%;*/
    padding: 0.8em 2%;
}

#content-uploading-files>div>span {
    display: inline-block;
    min-width: 7em;
    vertical-align: top;
    padding-top: 0;
    padding-left: 0;
    vertical-align: middle;
    /* height: 1.4em; */
}

#content-uploading-files>div>span:first-letter {
    text-transform: uppercase;
}

#content-contacts {
    position: relative;
    /*margin-top: .3em;*/
    /* border-bottom: none !important; */
}

#content-contacts>span {
    margin-top: -0.6em;
}

#content-contacts>.chips {
    position: relative;
    left: unset;
    display: inline-block;
    width: 78%;
    margin: 0.3em 0 0;
    padding-bottom: 0;
    /* min-height: 2em; */
    /* line-height: 3em; */
    vertical-align: middle;
    min-height: 2em;
    height: auto;
    /* background-color: #f8f8f8 !important; */
}

div#add-recipients {
    padding-top: 0;
}

#add-recipients>input {
    max-width: 100%;
    overflow-x: visible !important;
    /*width: unset!important;*/
    /*!* max-width: unset!important; *!*/
    /*width: 100%!important;*/
}

.chips .chip.selected {
    background-color: var(--main-purple);
    color: #fff;
}

#content-contacts>.chips>.chip {
    height: 2.3em;
    border-radius: 1.5em;
    display: inline-table;
    margin: 0.2em 0.5em 0.2em 0;
    padding-right: 0.25em;
}

#content-contacts>.chips>input {
    font-size: 0.94em;
    display: inline-block;
    /* height: 2em; */
    /* line-height: 2em; */
    /*width: 80%!important;*/
    /*margin: .9em 0;*/
    /*margin-top: 0.9em;*/
    min-width: 0 !important;
    transition: 0s;
    padding-top: 2em;
    vertical-align: middle;
}

.chips>input {
    position: initial !important;
    border: none !important;
}

*>.chip>img {
    float: left;
    margin: 0.1em 0.5em 0 -0.5em;
    /* height:32px; */
    /* width:32px; */
    /* border-radius:50%; */
}

#wrapper-passphrase {
    display: none;
    opacity: 0;
    transition: 0.4s;
    padding-bottom: 0 !important;
}

#wrapper-passphrase>.tooltip {
    width: 15%;
}

#wrapper-passphrase.tooltip-active {
    align-items: center;
    padding: 0 1.6em;
}

.transfer-expiration-cont>#sd-btns, .transfer-expiration-cont>.sd-btn {
    margin-top: -0.4em;
}

#external-passphrase {
    width: 100%;
    border-bottom: none;
    margin-bottom: 0;
    margin-top: -0.35em;
    height: 2em;
    padding-left: 0.5em;
    font-size: 1em;
    letter-spacing: 0.1em;
}

.transfer-text {
    min-height: 6em;
    border: none;
}

.reply-text {
    min-height: 6em;
    /*
    border: 1px solid rgba(183, 183, 183, .5);
    border-radius: 0.35em;*/
    background-color: white !important;
    width: 90% !important;
    margin-left: 2em;
    margin-top: 1em;
    border: none;
}

#context-area {
    margin-bottom: 2em;
    border-bottom: 1px solid rgba(183, 183, 183, 0.5);
}

#reply-window {
    width: 85%;
    margin-left: 7%;
    margin-top: 2.5em;
    background-color: white;
    /**margin-bottom: 5%;**/
    margin-bottom: 3.5em;
}

.transfer-expiration-cont {
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
    border-bottom: none !important;
    /* padding-top: 1.8em !important; */
    /* min-height: auto !important; */
    height: 5em;
}

.transfer-expiration-cont>span {
    padding: 1em 1em;
    display: none !important;
}

#sd-btns, .sd-btn {
    position: absolute;
    right: 1em;
}

#report-issue-button {
    height: 2.899em;
    border: none;
    border-radius: 0.21em;
    background: #2d2c38;
    color: #fff;
}

/*********************/

footer {
    position: fixed;
    font-size: 16px;
    color: #6f6e76;
    bottom: 1em;
    /* width: 27em; */
    text-align: center;
    font-weight: 300;
    z-index: 1;
    left: 60%;
    /* justify-content: center; */
    /* align-items: center; */
    display: flex;
}

footer .report-issue {
    /* height: 2.899em; */
    border: none;
    /* border-radius: 0.21em; */
    /* background: rgb(45, 44, 56); */
    color: rgb(111, 110, 118);
    cursor: pointer;
    /* margin-right: 6vw; */
    background: transparent;
    position: relative;
    left: -2em;
}

header>nav>a>img, footer>nav>a>img {
    width: 2em;
    height: 2em;
}

header>nav {
    position: fixed;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    right: 7.14em;
    top: 0.8em;
    color: #000;
    text-align: right;
}

header>nav>span>a {
    color: #6f6e76;
    font-size: 16px;
}

footer>nav {
    /* width: 50%; */
    display: inline-block;
    /* float: right; */
    /* margin-top: 3px; */
    position: fixed;
    color: #6f6e76;
    top: 21px;
    box-shadow: none;
    right: 7.14em;
    background: transparent;
    width: unset;
    height: unset;
    line-height: unset;
    box-sizing: initial;
    display: none;
}

footer>a {
    color: #6f6e76;
    margin-left: 0.3em;
}

header>nav>a>img, footer>nav>a>img {
    margin-left: 0.5em;
}

strong {
    font-weight: 500;
}

.alignright {
    text-align: right;
}

#signup-activate {
    display: inline-block;
    min-width: 43.668em;
    width: 52.7em;
    min-height: 488px;
    background: linear-gradient(to right, var(--main-purple) 39%, #fff 39%);
    /* box-shadow: 15.5px 12.6px 20px 0 rgba(0, 0, 0, 0.08); */
    /* margin-left: 8.57%; */
    margin: auto;
    height: 30.64em;
    text-align: center;
    margin-top: 3em;
    border-radius: 0.22em;
    opacity: 0.2;
    transition: 3s;
}

#signup-activate {
    opacity: 1;
    background: #fff;
    color: #5660cd;
    padding-top: 13em;
}

#signup-activate>p {
    font-size: 1.3em;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
}

#sign-form>div>h2 {
    padding: 1.6em 0 41px;
    margin: 0;
    color: black;
}

#sign-form>div>h2>img {
    width: 24px;
    height: 25px;
    border-radius: 25px;
    margin-right: 5px;
    /* vertical-align: sub; */
}

#sign-form>div>h2>span {
    font-weight: 300;
    font-size: 20px;
    /* height: 21px; */
}

#passphrase, #signup-user, #signup-passphrase, #signup-complete {
    width: 51%;
    background: #fff;
    /* opacity: .5; */
    /* float: right; */
    /* display: inline-block; */
    /* height: 100%; */
    display: inline-block;
    /* position: absolute; */
    border-top-right-radius: 0.22em;
    border-bottom-right-radius: 0.22em;
    transition: 0.4s;
    z-index: 1;
    min-width: 35vw;
}

#signup-info.mail-signup {}

#passphrase.signin {
    /* padding-top: 17em; */
}

#sign-avatar-container {
    /* position: relative; */
    text-align: center;
    /*width: 27.25em;*/
    /* margin-left: .5em; */
    /* padding-top: 9em; */
    z-index: 10;
    display: none;
    /* height: 17vh; */
    /* padding: 4em; */
}

#side-right-in>#sign-avatar-container {
    width: 100%;
}

#sign-avatar-container.mail-signin.active {
    display: block;
}

#sign-avatar-container.mail-signup.active {
    display: block;
}

.mail-signup {
    /* position: relative;
    top:10em; */
}

.mail-signup>p {}

#sign-avatar {
    /* position: absolute; */
    /* margin-left: -1.4em; */
    width: 2.857em;
    /* margin-top: .8em; */
    /* display: inline-block; */
    background-color: white;
    border-radius: 2em;
}

#signin-user-welcome {
    font-size: 1.35em;
    /* margin-top: 3.5em; */
    /* padding-bottom: 0; */
    /* margin-bottom: 0; */
    /* display: none; */
    font-weight: 500;
    margin: 0.5em 0 1.5em;
}

#signin-user-welcome>span {
    text-transform: capitalize;
}

#signin-other-provider {
    cursor: pointer;
    color: var(--main-purple);
    font-weight: 300;
}

#passphrase>input[type="email"], #passphrase>input[type="password"], #passphrase>input[type="text"], #signup-user>input[type="email"], #signup-user>input[type="password"], #signup-user>input[type="text"], #signup-passphrase>input[type="email"], #signup-passphrase>input[type="password"], #signup-passphrase>input[type="text"] {
    width: 68.8%;
    display: inline-block;
    margin: 0 auto 2.2em;
    font-size: 0.87em;
    text-align: left;
    font-weight: normal;
    padding: 0 10% 0.44em 0;
    border-bottom: 1px solid #e1e1e1;
    /* max-width: 40em; */
}

#passphrase>input[type="text"]::placeholder, #passphrase>input[type="password"]::placeholder, #passphrase>input[type="email"]::placeholder, #signup-user>input[type="text"]::placeholder, #signup-user>input[type="password"]::placeholder, #signup-user>input[type="email"]::placeholder, #signup-passphrase>input[type="text"]::placeholder, #signup-passphrase>input[type="password"]::placeholder {
    color: var(--color-placeholder);
    text-align: left;
}

#signup-info {
    float: right;
    margin-top: -11.7em;
    margin-right: 1.75em;
    margin-bottom: 11.3em;
    padding-left: 20.7em;
    z-index: 33;
    position: absolute;
}

#passphrase>input[type="text"]:focus, #passphrase>input[type="password"]:focus, #passphrase>input[type="email"]:focus, #signup-user>input[type="text"]:focus, #signup-user>input[type="password"]:focus, #signup-user>input[type="email"]:focus, #signup-passphrase>input[type="text"]:focus, #signup-passphrase>input[type="password"]:focus, #signup-passphrase>input[type="email"]:focus {
    border-bottom: 1px solid #1e1e1e;
}

#signup-passphrase {
    font-weight: 500;
    /* padding-top: 28em; */
    z-index: 2;
}

#signup-passphrase>p {
    width: 78.8%;
    margin: auto;
    text-align: left;
    font-size: 0.87em;
    font-weight: normal;
    color: #cfcfcf;
    margin-bottom: 2em;
}

#signup-passphrase>#create-passphrase {
    margin-bottom: 0.5em;
}

#signup-passphrase>#confirm-passphrase {
    margin-bottom: 0.3em;
}

#signup-user>input {
    text-align: left;
}

#signup-user>label::before {
    /*border-width: 1px;*/
    /*margin-top: 0;*/
}

[type="checkbox"]+label:before, [type="checkbox"]:not(.filled-in)+label:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    z-index: 0;
    border: 1px solid #5a5a5a;
    border-radius: 1px;
    margin-top: 2px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

[type="checkbox"]+span:not(.lever):before, [type="checkbox"]:not(.filled-in)+span:not(.lever):after {
    border: 1px solid #5a5a5a;
}

[type="checkbox"]+label {
    position: relative;
    padding-left: 35px;
    /*cursor: pointer;*/
    display: inline-block;
    /*height: 25px;*/
    /*line-height: 25px;*/
    width: 23.4em;
    /* margin-left: 1em; */
    text-align: left;
    /*font-size: 1em;*/
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.terms {
    color: #b0b0b0;
    margin-bottom: 1.5em;
    font-size: 0.8rem !important;
}

.terms>a {
    color: #b0b0b0;
    text-decoration: underline;
}

#passphrase, #signup-user, #signup-complete {
    /* padding-top: 26.4em; */
    /* width: 100%; */
}

#signin-providers, #signup-providers {
    margin: auto;
}

#open-private-code {
    display: inline-block;
    margin: 0px auto 10px;
}

#access-private-version {
    width: 68.8%;
    margin: auto;
}

#access-private-version>a, #back-to-public>a {
    color: var(--main-purple);
    cursor: pointer;
    margin: auto;
}

#access-private-version>#code-private-version {
    margin: 1.2% auto;
}

#access-private-version>#button-private-version {
    padding: 1em 2em;
    margin: 1.2% auto;
    width: 100%;
}

#check-passphrase.action, #check-passphrase-creation.action, #confirm-user.action, #confirm-passphrase.action {
    width: 79%;
    height: 2.899em;
    margin: 0 0 1.7em;
    border: none;
    border-radius: 0.21em;
    background: var(--main-purple);
    color: #fff;
    /* font-weight: 300; */
}

#getId-passphrase.action {
    height: 4em;
    width: 25%;
    margin: 0 0 1.7em;
    border: none;
    border-radius: 0.8em;
    background: var(--main-purple);
    color: #fff;
}

#getId-passphrase.action>img {
    width: 3em;
    height: 3em;
}

#check-passphrase-creation.action {
    margin-top: 1em;
    background: #ddd;
}

#check-passphrase-creation.active {
    background-color: var(--main-purple);
}

#signup-passphrase>#passphrase-strength-tip {
    width: 78.8%;
    margin: auto;
    min-height: 3em;
    transition: 0.2s;
}

#passphrase>#signin-passphrase {
    text-align: left;
}

#passphrase.signin>.container-mail-nav-mobi {
    display: none;
}

#mail-signup-tosacceptance {
    display: none;
}

#signup-user>input[type="checkbox"]::before {
    display: block;
    content: " ";
}

#signup-user>label {
    margin-left: 0;
    color: #b0b0b0;
    font-size: 0.87em;
    width: 80%;
    /*padding-left: 2.4em;*/
    margin-top: 0;
    line-height: 1.6em;
    margin-bottom: 2.5em;
}

#signup-user>label>a {
    color: #b0b0b0;
    text-decoration: underline;
}

footer .report-issue {
    display: none !important;
}

#side-container {
    min-width: 30vw;
    width: 30vw;
    height: 100vh;
    background: var(--hush-menu);
    color: #fff;
    z-index: 110;
}

#side-col {
    background-image: url("../img/hushapp_intro_reduced.gif");
    background-repeat: no-repeat;
    background-position: 0% 90%;
    background-size: 30vw auto;
    width: 30vw;
    position: absolute;
    vertical-align: middle;
    line-height: normal;
    align-items: center;
    justify-content: center;
    display: flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#side-right {
    width: 70vw;
    height: 100vh;
    position: relative;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#mobile-welcome-box {
    margin: auto;
    display: none;
    margin-bottom: 3em;
    color: white;
    background-color: var(--main-purple);
    padding: 0.5em;
    border-radius: 1em;
    width: 80%;
}

#mobile-welcome-box>h3 {
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    line-height: 1.4;
    font-size: 1.2em;
    margin: 1.168rem 0;
}

#side-container>#side-container-1 {
    display: unset;
    text-align: left;
    margin: auto;
    width: 25em;
}

#side-container-1 {
    position: absolute;
    top: 10%;
}

#side-container-1>h1 {
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    letter-spacing: normal;
    line-height: 1.28em;
    color: #ffffff;
    font-size: 2.02em;
    display: block;
    text-align: center;
    margin-left: 1vw;
    margin-right: 1vw;
}

#side-container-1>p {
    display: block;
    margin-top: 2.3em;
    font-size: 1.24em;
    text-align: center;
    margin-left: 1vw;
    margin-right: 1vw;
}

#container-mail-nav {
    /* position: fixed; */
    /* margin-left: 2.4em; */
    /* margin-top: 10em; */
    color: #b4b4b4;
    /* text-align: left; */
    font-size: 1.13427em;
    /*width: 30em;*/
    /* left: 50%; */
    /* top: 16em; */
    transition: 1.8s;
    z-index: 12;
    opacity: 0.1;
    align-items: center;
    justify-content: center;
    display: block;
    margin: 0.5em 0 2.5em;
    text-align: center;
}

#container-mail-nav>a {
    padding-bottom: 0.4em;
    color: #929292;
    font-size: 1.15em;
    cursor: pointer;
    margin: 0 0.5em;
}

.container-mail-nav-mobi>a {
    font-size: 1.5em;
    margin: 0px 1em;
    color: var(--main-purple);
    font-weight: 300;
    cursor: pointer;
    padding-bottom: 0.3em;
    display: inline-block;
    width: 5em;
}

#container-mail-nav>a:active {
    color: #5660cd;
}

#container-mail-nav>a:hover, .container-mail-nav-mobi>a:hover {
    border-bottom: 1px solid #5660cd;
}

#container-mail-nav>a.active {
    color: var(--main-purple);
    border-bottom: 1px solid var(--main-purple);
}

.chip .close {
    background: #777;
    /* padding: 0 1em; */
    border-radius: 1em;
    /* line-height: 22px; */
    /*margin: .2em 0 0 .4em;*/
    color: #e4e4e4;
    /* font-size: .9em; */
    /* height: 1.4em; */
    width: 2em;
    margin-left: 3px;
    /* font-weight: bold; */
    font-family: "Material Icons", sans-serif;
}

.chips {
    border: 0 transparent;
    background: #fff;
    margin: 0 1em 1em;
    min-height: 6em;
    border-radius: 0.4em;
    text-align: left;
    padding: 0.4em 0.5em;
}

.chip {
    padding-right: 6px;
}

.chips.focus {
    border: 0 transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#mobile-head-menu {
    /* background: url('/img/burger.png') no-repeat; */
    width: 2em;
    height: 2em;
    position: absolute;
    z-index: 200;
    left: 1em;
    /* background-size: contain;
    opacity: .3; */
    cursor: pointer;
}

#mobile-head-menu::after {
    content: "\2630";
    color: white;
    font-size: 4em;
    cursor: pointer;
}

.mail-signup-cont {
    top: -5em;
}

.mail-signup-top {
    margin-top: 12em;
}

.mail-signup-bot {
    margin-top: -10em;
}

/* ==========================================================================
   Unsupported browsers
   ========================================================================== */

.unsupported-browser-b {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/background-login.png) no-repeat;
    filter: blur(0.3em);
    z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.unsupported-browser {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/background-login.png) no-repeat;
    filter: blur(0.3em);
    z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.unsupported-b {
    text-align: center;
    display: block;
    font-size: 1.5em;
    z-index: 2;
    top: 50%;
    left: 57%;
    width: 20em;
    height: 24em;
    margin-top: -11em;
    margin-left: -11.5em;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position: fixed;
}

.unsupported {
    text-align: center;
    display: block;
    font-size: 1.5em;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 23em;
    height: 21em;
    margin-top: -11em;
    margin-left: -11.5em;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    position: fixed;
}

.unsupported-b>img {
    margin-top: 2em;
}

.browsers {
    border: 1px solid #ebebeb;
    width: 7em;
    margin: 0.5em;
}

.browsers>a>img {
    padding: 1em;
    padding-bottom: 0;
}

.browsers>span {
    font-size: 7pt;
    padding-bottom: 0.5em;
}

#co-results {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 2em;
}

#co-results>p {
    /* position: absolute; */
    font-weight: 500;
    color: #6f6e76;
}

#contact-div, .internal_send_c {
    background-color: #fff;
    height: 15em;
    width: 17.5em;
    margin: 1em 1em 0 0;
    text-align: center;
    display: block;
    overflow-x: hidden;
    /*overflow-x: auto;*/
    overflow-y: hidden;
    word-wrap: break-word;
    box-shadow: 3px 1px 6px 2px hsl(259deg 26% 20% / 10%);
    -webkit-box-shadow: 3px 1px 6px 2px hsl(259deg 26% 20% / 10%);
}

.not-confirmed {
    background-color: #e1e1e1!important;
}

.add-contact-hov {
    background-color: #fff;
    line-height: 2;
    border-radius: 0.2em;
}

.add-contact-hov>i {
    margin: auto 0;
    padding-left: 0.3em;
    pointer-events: none;
}

.flex-center {
    display: flex !important;
    align-content: center;
    justify-content: center;
}

.add-contact-hov:hover {
    background-color: var(--main-purple);
    color: white;
}

#img-avatar {
    margin: 0.9em 0 1.6em 0;
    height: 4em;
}

#avatar, .avatar {
    width: 4em;
    height: 4em;
    border-radius: 3em;
}

#contact-name, #contact-avatar-mail {
    display: block;
}

.not-contact>#contact-info {
    display: flex !important;
    color: white;
}

#contact-info {
    display: flex;
    flex-direction: column;
    margin-top: -1em;
    white-space: pre-line;
}

#contact-info>.contact-company {
    font-size: 0.75em;
}

#contact-info>* {
    flex: 1 1 auto;
    margin: 0;
    padding: 0 0 0.2em 0;
    font-size: 0.85em;
    overflow-wrap: break-word;
    word-break: break-word;
}

#contact-info>*:not(.contact-name) {
    font-weight: 300;
}

#user-action {
    display: inline-flex;
    justify-content: space-evenly;
    position: absolute;
    width: 100%;
    bottom: 10%;
    right: 0;
}

#user-action>* {
    height: 20px;
    cursor: pointer;
}

#user-action>img {
    filter: brightness(0%);
}

.tiny-img {
    height: 1.5em;
}

#user-action label>span {
    padding: 0;
    width: 20px;
    height: 20px;
}

#img-avatar>img {
    width: 4em;
    height: 4em;
    min-width: 4em;
    min-height: 4em;
    /*margin-top:0.4em;*/
    object-fit: cover;
}

#contactAdd {
    width: 20px;
    height: 20px;
    position: relative;
    top: 1em;
    right: 1em;
    cursor: pointer;
    float: right;
}

#co-list-no-match {
    position: relative;
    /* top:14em; */
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins o644f child elements.
 */

.clearfix:before, .clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

input[type="checkbox"] {
    cursor: pointer;
}

input[type="checkbox"]:not(.filled-in):before {
    content: "\202A";
    background: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    font-size: 2.5em;
    text-align: center;
    line-height: 1em;
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    color: #00904f;
    border: 1px solid #cdcdcd;
    border-radius: 4px;
    text-indent: 1px;
    padding: 0 0.9em 0.9em 0;
    margin-top: -0.45em;
    margin-right: -0.15em;
    position: absolute;
    right: 0;
}

input[type="checkbox"]:checked:before {
    content: "\2713";
    text-indent: 1px;
}

#co-import-results>.highlighted>input[type="checkbox"]:before, #co-invite-results>.highlighted>input[type="checkbox"]:before {
    content: "\2713" !important;
    text-indent: 1px;
}

.container-mail-nav-mobi {
    display: none;
}

.mail-user {
    width: 80%;
    vertical-align: middle;
    padding-top: 0.7em !important;
    padding-left: 0 !important;
}

::-webkit-credentials-auto-fill-button {
    position: relative;
    margin-right: -3em;
}

/******** SOCIAL ICONS *******/

#menu-about .click-expand-next+div.drop {
    line-height: 1.5em;
    background: var(--hush-menu);
    justify-content: space-evenly;
    width: 90%;
    margin: auto;
}

#menu-social a>div>div {
    right: 0;
    display: flex;
}

#menu-social a>div {
    width: 2em;
    padding: 0.4em;
}

.resp-sharing-button__link, .resp-sharing-button__icon {
    display: inline-block;
}

.resp-sharing-button__link {
    text-decoration: none;
    color: #fff;
    margin: 0.5em;
}

.resp-sharing-button {
    border-radius: 5px;
    transition: 25ms ease-out;
    padding: 0.2em 0.5em;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

.resp-sharing-button__icon svg {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: top;
}

.resp-sharing-button--small svg {
    margin: 0;
    vertical-align: middle;
}

/* Non solid icons get a stroke */

.resp-sharing-button__icon {
    stroke: #fff;
    fill: none;
}

/* Solid icons get a fill */

.resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle {
    fill: #fff;
    stroke: none;
}

.resp-sharing-button--twitter {
    background-color: var(--main-purple);
}

.resp-sharing-button--twitter:hover {
    background-color: #2795e9;
}

.resp-sharing-button--facebook {
    background-color: var(--main-purple);
}

.resp-sharing-button--facebook:hover {
    background-color: #2d4373;
}

.resp-sharing-button--google {
    background-color: var(--main-purple);
}

.resp-sharing-button--google:hover {
    background-color: #c23321;
}

.resp-sharing-button--linkedin {
    background-color: var(--main-purple);
}

.resp-sharing-button--linkedin:hover {
    background-color: #046293;
}

.resp-sharing-button--whatsapp {
    background-color: var(--main-purple);
}

.resp-sharing-button--whatsapp:hover {
    background-color: #1da851;
}

.resp-sharing-button--facebook {
    background-color: #3b5998;
    border-color: #3b5998;
}

.resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active {
    background-color: #2d4373;
    border-color: #2d4373;
}

.resp-sharing-button--twitter {
    background-color: #55acee;
    border-color: #55acee;
}

.resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active {
    background-color: #2795e9;
    border-color: #2795e9;
}

.resp-sharing-button--google {
    background-color: #dd4b39;
    border-color: #dd4b39;
}

.resp-sharing-button--google:hover, .resp-sharing-button--google:active {
    background-color: #c23321;
    border-color: #c23321;
}

.resp-sharing-button--linkedin {
    background-color: #0077b5;
    border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active {
    background-color: #046293;
    border-color: #046293;
}

.resp-sharing-button--whatsapp {
    background-color: #25d366;
    border-color: #25d366;
}

.resp-sharing-button--whatsapp:hover, .resp-sharing-button--whatsapp:active {
    background-color: #1da851;
    border-color: #1da851;
}

.resp-sharing-button--telegram {
    background-color: #54a9eb;
}

.resp-sharing-button--telegram:hover {
    background-color: #4b97d1;
}

.social {
    /* font-size: .75rem; */
    /* padding: 2em 1em; */
    bottom: 0;
    position: absolute;
    left: 0;
    color: #d4d7e9;
    display: flex;
    right: 1.2em;
    padding: 0 0.3em 1em 0.2em;
    width: 100%;
    transition: 0.1s;
}

.dropdown-button>i.right {
    font-size: 1.6em;
}

.social a {
    text-align: center;
    color: inherit;
    font-size: 0.9325rem;
    border-radius: 3px;
    opacity: 0.8;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    margin: auto;
    padding: 0.4em 1em;
}

.social a:hover {
    color: #fff;
}

#mobile-head-logo {
    width: 10em;
    height: auto;
    margin-top: 0.4em;
}

.user-dropdown img {
    width: 2em;
    margin: auto;
    border-radius: 1em;
    margin-left: 1em;
}

#user-avatar, #user-avatar-drop {
    width: 2.3em;
    height: 2.3em;
    border-radius: 1em;
    vertical-align: middle;
    object-fit: cover;
}

.other-users-avatar {
    margin-right: -2em;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    vertical-align: middle;
    object-fit: cover;
}

#user-avatar-drop {
    margin: auto;
    height: 80%;
    width: auto;
    max-width: 3em;
    max-height: 3em;
}

.dropdown-content {
    border-radius: 0.3em;
    min-width: 20em !important;
    opacity: 1;
    /* left: initial !important; */
    position: fixed;
    /* right: 0; */
    z-index: 200;
    /* display: none; */
    max-height: 30em;
    box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 31%) 0px 0px 1px;
}

.dropdown-content li>a, .dropdown-content li>span {
    color: black !important;
    font-size: 1em !important;
    /* width:100%; */
    width: fit-content;
    width: -moz-fit-content;
}

.dropdown-content li {
    display: flex;
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-height: 2em !important;
    hyphens: auto;
    align-items: center;
    color: black;
}

.dropdown-content>span>li {
    justify-content: space-between;
}

.dropdown-content li.divider {
    min-height: 1px !important;
}

.dropdown-content>img {
    margin: 1em;
}

.dropdown-button {
    color: #222;
    vertical-align: middle;
}

#dropdown1 li:last-child>a {
    display: flex;
    padding-left: 1.5em;
    /* padding-top: 0.6em; */
}

#user-mail {
    padding-left: 1em !important;
}

button.relative-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%);
}

#error-pass {
    border-bottom-color: red !important;
}

.error_message {
    font-size: 15px;
    color: rgb(210, 0, 0);
    font-weight: 600;
    display: block;
    margin: -30px auto 2.2em;
    margin-top: -10px;
    margin-right: auto;
    margin-bottom: 2.2em;
    margin-left: auto;
    width: 79%;
}

.error_message_body {
    font-size: 13px;
    color: rgb(127, 0, 0);
    font-weight: 350;
}

.multiple_attempt_error {
    border-style: solid;
    border-color: rgb(210, 0, 0);
    padding-left: 8px;
    padding-right: 8px;
}

.autocomplete-content>li>img {
    margin-left: 0.7em;
    margin-right: 0.2em;
    height: 2.6em;
    width: 2.6em;
    margin-top: 0.45em;
}

.autocomplete-content>li>span {
    padding: 1em 0.4em;
    color: rgba(0, 0, 0, 0.6) !important;
}

.autocomplete-content>li>span.mail-addr {
    color: rgb(174, 174, 178) !important;
    font-size: 0.85em !important;
    margin-top: 0.24em;
    margin-right: 1em;
}

.user-settings {
    /* display:flex; */
    color: black;
    /* line-height: 22px; */
    padding: 0.9em 0.9em 1em 1.4em;
    padding-bottom: 0;
}

.user-settings i {
    /* padding-top: .2em; */
    font-size: 13pt;
    color: black;
    vertical-align: middle;
    /* margin-right:.5em; */
}

#cm-mail-settings, #cm-company-settings {
    padding: 0.7em 0 1.5em 0.2em;
    color: #b0b0b0;
    /* font-size: .8em; */
}

#pass-fields {
    display: flex;
}

#cont-pass {
    width: auto;
    padding-top: 0.5em;
}

#cont-pass>span>input {
    width: 7.2em;
    border: none;
    padding-right: 0;
}

.logout-resp {
    display: none;
}

/*********** SETTINGS LAYOUT **************/

#mail-settings, #company-settings {
    background: #fff;
    height: auto;
    display: flex;
}

#common-settings {
    background: #fff;
    height: auto;
}

#company-settings {
    border-top: 1px solid #ccc;
}

#mail-settings-field, #company-settings-field, #cm-settings-field, #save-pass-title, #lang-change-title, #default-title, #logouttime-change-title {
    width: 25em;
    padding: 0.5em 0.5em;
}

#mail-settings-field>span, #company-settings-field>span, #cm-settings-field>span, #searchable-switch>span, #persistent-signin-switch>span, #avatar-text>span, #sound-switch>span, #pass-save>span, #default-exp-transf>span, #save-pass-title>span, #lang-change-title>span, #logouttime-change-title>span, #log-switch>span, #default-title>span, #email-notification-switch>span {
    display: block;
    padding: 0.2em 10px;
    font-size: 1.1em;
}

#searchable-switch, #avatar-text, #log-switch, #persistent-signin-switch, #sound-switch, #email-notification-switch {
    width: 25em;
    padding: 0.5em 0.5em;
}

#display-search, #pass-save, #lang-change, #default-exp-transf, #upload-avatar, #logouttime-change, #error-log, #persistent-signin, #sound-activation, #email_notification_transfer {
    display: flex;
}

#logouttime-change-form>input {
    cursor: pointer;
}

#style-upload {
    display: inline-block;
    text-decoration: underline;
    font-size: 1em;
}

.fileName {
    margin-left: 0.6em;
}

.style-submit {
    display: inline-block;
    border-radius: 3px;
    background-color: var(--main-purple);
    font-size: 1em;
    padding: 0.3em 1em;
    color: #fff;
    border: 1px solid transparent;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
}

.style-submit>span#text-tips {
    display: inline-block;
    font-size: 1em !important;
    /*padding: .3em 1em;*/
    color: #fff;
    /*border: 1px solid transparent;*/
}

.style-submit-disable {
    display: inline-block;
    border-radius: 3px;
    background-color: var(--main-purple);
    font-size: 1em;
    padding: 0.3em 1em;
    color: #fff;
    border: 1px solid transparent;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    opacity: 0.6;
    cursor: default !important;
}

#switch {
    padding: 0.7em 0.5em 0 0;
    margin-left: 0.2em;
}

#remember-pass {
    padding-top: 0.25em;
}

#default-time {
    /* width: 15em; */
    padding-top: 0.05em;
    /* text-align: right; */
}

#text-tips {
    color: #b0b0b0;
    font-size: 0.85em !important;
    padding-top: 0 !important;
}

select {
    display: block !important;
    color: black;
}

.switch label input[type="checkbox"]:checked+.lever {
    background-color: #907ac5 !important;
}

.switch label input[type="checkbox"]:checked+.lever:after {
    background-color: var(--main-purple) !important;
}

a>.avatar {
    margin: -1em 0.5em;
}

#user-mobile {
    display: none;
}

/******************* BILLING *************************/

#main_wrap {
    margin: 0 auto;
}

#content-top-plan {
    width: 100%;
    height: 3.5em;
    background-color: #fff;
    position: fixed;
    padding: 1em 2.3em;
    font-size: 1em;
    left: 0;
    padding: 0.9em 2.36em 0.9em 19em;
}

#loading-content {
    position: fixed;
    top: 31%;
    left: 55%;
    z-index: 111;
}

#menu>nav>.menu_billing {
    display: none;
}

#content-top-plan>span {
    vertical-align: middle;
}

#plan-main-content {
    position: relative;
    top: 6em;
    width: 100%;
}

#plan-main-content>span, #payment-content>span {
    margin: 1em 1em 0 0;
    color: #7c7b7b;
    font-weight: normal;
}

#plan-type, #payment-period, #plan-price, #payment-card-number, #payment-card-name, #detail-name, #expiration-days, #detail-address {
    border-bottom: 1px solid lightgrey;
    padding: 1em;
}

#payment-period, #plan-type, #plan-price, #expiration-days, #payment-card-number, #payment-card-name, #detail-name, #detail-address {
    display: flex;
}

#plan-main-content .text-tips {}

#plan-main-content .text-tips::first-letter {
    text-transform: uppercase;
}

#period-date::first-letter {
    text-transform: uppercase;
}

#billing-settings, #payment-method {
    background-color: #fff;
    height: auto;
    position: relative;
    width: 100%;
    top: 1em;
}

#payment-content {
    top: 2em;
    position: relative;
}

.text-tips {
    color: #b0b0b0;
    font-size: 0.7em;
}

#plan-type-content>span, #payment-period-text>span, #plan-price-text>span, #expiration-days-text>span, #card-number>span, #card-holder>span, #detail-title-name>span, #billing-address>span {
    display: block;
}

#plan-main-content>span, #plan-main-content>div>div>div>span::first-letter {
    text-transform: capitalize;
}

#step_2>h4::first-letter {
    text-transform: uppercase;
}

.btn:hover, .btn-large:hover {
    background-color: transparent !important;
    color: var(--main-purple);
}

.btn:focus, .btn-large:focus, .btn-floating:focus {
    background-color: transparent !important;
    color: var(--main-purple);
}

#main_wrap>button, #step_2>button {
    text-transform: capitalize;
    background-color: var(--main-purple);
    color: #ffff;
    border: 1px solid var(--main-purple);
    font-size: 1em;
    border-radius: 3px;
    margin-top: -2em;
}

#payment-period-text, #plan-type-content, #expiration-days-text, #plan-price-text, #card-number, #card-holder, #detail-title-name, #billing-address {
    width: 50vw;
    padding-right: 2em;
}

#period-date, #plan-type-brain, #price-brain, #expiration-days-value, #price-brain, #card-number-brain, #card-name-brain, #detail-name-brain, #billing-address-brain {
    width: 70vw;
}

#period-date>p, #plan-type-brain>p, #price-brain>p, #expiration-days-value>p, #price-brain>p, #card-name-brain>p {
    margin: 0;
    color: #7a7a7a;
}

#btn-change-plan {
    text-transform: initial;
    background-color: var(--main-purple);
    color: #ffff;
    border: 1px solid var(--main-purple);
    font-size: 1em;
    border-radius: 3px;
    vertical-align: baseline;
    /** those properties came from bottom-menu buttons ... TODO: consider making a class ? **/
    line-height: 1.5em;
    margin: 0.33em 0.33em 0.33em 0em;
    float: none;
    min-width: min-content;
}

.title_plans {
    text-align: center;
}

.img-card-type {
    height: 1.6em;
    vertical-align: middle;
    margin-right: 0.7em;
}

#plans {
    display: flex;
    width: 50%;
    height: auto;
    margin: 0 auto;
}

.content-plan {
    margin: 1.5em;
    margin-top: 1em;
    margin-bottom: 3em;
    font-size: 12px;
}

.wrapp_plan {
    border: 1px solid var(--main-purple);
    border-radius: 3px;
    min-height: 33vh;
    margin: 0.5em 1em 0em 1em;
    width: 23vw;
}

#premium_plan {
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    width: 25vw;
    height: 25em;
    margin: 0em 1em;
}

.wrapp_plan>p {
    border-bottom: 1px solid black;
    padding: 1em 0em 1em 0em;
    text-align: center;
    margin: 0;
}

#btn-top-plan_2, #btn-top-plan_4, #btn-top-plan_5 {
    border-bottom: 1px solid black;
    padding: 1em 0em 1em 0em;
    text-align: center;
    margin: 0;
    background-color: var(--main-purple);
    color: #fff;
    width: 100%;
}

.active_plan {
    background-color: var(--main-purple);
    color: #fff;
}

#form-brain {
    width: 47vw;
    /* min-height: 65vh; */
    margin-bottom: 3em;
    max-height: 65vh;
    overflow-y: auto;
}

#wrapper_plan #step_2 #back {
    left: 0;
    background-color: rgba(93, 77, 131, 0.7);
}

#wrapper_plan #step_2 #back:hover {
    background-color: rgb(93, 77, 131) !important;
}

.autoExpand {
    transition: height 0.3s ease-in-out;
    max-height: 10rem;
}

[contenteditable=true]:empty:before {
    content: attr(placeholder);
    pointer-events: none;
    display: block;
    /* For Firefox */
}

div[contenteditable=true] {
    border: 1px dashed #AAA;
    width: 290px;
    padding: 5px;
}

.content-plan>span {
    display: block;
    text-align: left;
    padding: 0 1em;
    margin-bottom: 0.3em;
}

.switch-plan {
    margin-bottom: 2em;
}

.label-toggle-plan::after {
    content: "Yearly";
}

.label-toggle-plan::before {
    content: "Monthly";
}

.monthly {
    display: none !important;
}

.yearly {
    display: none !important;
}

#plan_yearly {
    position: relative;
}

#best_offer {
    position: absolute;
    top: -220%;
    right: -20%;
    width: 90px;
    height: 80px;
}

#choose_plan button {
    border: 1px solid var(--main-purple);
    font-size: 0.8em;
    border-radius: 3px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 10px;
    margin-top: 5px;
    padding: 0 1rem;
    height: 26px;
    line-height: 1.5em;
    letter-spacing: 0.5px;
    font-weight: 500;
}

#choose_plan button.active, #choose_plan button:hover {
    background-color: var(--main-purple);
    color: #ffff;
}

#btn-plan_4, #btn-plan_3 {
    top: 4.3em;
}

#btn-buy_more_plans {
    text-transform: capitalize;
    background-color: var(--main-purple);
    color: #ffff;
    border: 1px solid var(--main-purple);
    font-size: 1em;
    border-radius: 3px;
    margin-top: -2em;
}

#wrap_more_plans {
    margin-top: 2em;
}

del {
    position: absolute;
    color: #c03a32;
    text-align: right !important;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 11px;
}

#price {
    font-size: 14px;
}

#period {
    font-size: 10px;
    padding-right: 3px;
}

#subscription_agreement {
    font-size: 12px;
}

#save {
    color: #c03a32;
    margin-top: 2px;
    font-weight: 600;
}

.save_text {
    position: absolute;
    top: -50%;
    right: -20%;
    color: white;
    background-color: #c03a32;
    border-radius: 50%;
    padding: 2px;
    font-size: 10px;
    font-weight: normal;
}

#feature {
    display: table;
}

#feature_check {
    display: table-cell;
    text-align: left;
}

#feature_text {
    display: table-cell;
    text-align: left;
    padding: 3px 0px 3px 5px;
}

#plan_half_yearly {
    position: relative;
}

.bt-drop-in-wraper {
    border: 1px solid #f2f2f2;
    padding: 1em;
    margin: 0.5em 0 1.5em 0;
}

#premium_plan>button, .content-plan>button {
    text-transform: capitalize;
    background-color: #fff;
    color: var(--main-purple);
    border: 1px solid var(--main-purple);
    font-size: 1em;
    border-radius: 3px;
    position: relative;
    top: 8em;
}

#wrapper_plan .pay-step {
    overflow: visible visible;
}

#step_1 {
    text-align: center !important;
    width: 50vw;
    height: auto;
}

#step_2 {
    text-align: center;
}

#finish {
    margin-left: 0.5em;
}

.trans-details>.user-info {
    width: 100%;
    margin-bottom: 1.5em;
    font-size: 14px;
}

#step_1>button {
    text-transform: capitalize;
    background-color: #fff;
    color: var(--main-purple);
    border: 1px solid var(--main-purple);
    font-size: 1em;
    border-radius: 3px;
    margin: 0.5em;
}

.modal-plan {
    overflow: hidden;
    min-width: 50vw;
}

#modal-subtop input.filled-in {
    opacity: 0;
}

#modal-subtop #ext-to-invite label {
    color: black;
    font-size: 1rem;
}

#modal-subtop #ext-invite-all span {
    font-weight: 600;
}

#modal-subtop [type="checkbox"]+span:not(.lever) {
    font-size: 0.75em;
}

#wrapper_plan {
    width: 100%;
    min-height: 40vh;
}

#step_2, #step_3 {
    display: none;
    min-height: 25em;
}

.braintree-method__check-container::before {
    display: none;
}

.bt-drop-in-wrapper>select {
    border: 1px solid #f2f2f2;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.mobile-hidden {
    display: none;
}

.mobile-shown {
    display: none;
}

.fullscreen-shown {
    display: unset;
}

#note-block-textarea {
    width: 100%;
    height: 4em;
    padding: 0.4em 1em;
    left: 0;
    position: absolute;
    z-index: 1234;
    top: 0;
    margin: 1em 0 0;
    display: none;
}

.has-files>#file-up {
    bottom: 3.7em !important;
    left: 0.4em !important;
}

.has-files>#uploading-filelist-details {
    display: initial;
}

.transfer-detailed-meta {
    padding: 0.7em 0 !important;
    margin-top: 1.6em;
}

.transfer-detailed-meta>div {
    padding: 0.33em 2em 0em;
}

.transfer-detailed-meta>div.expires-on, .transfer-detailed-meta>div.expires-on-reply {
    display: none;
}

.transfer-detailed-meta>div>span {
    /*display: block;*/
    /*    display: inline-block;*/
}

.transfer-detailed-meta>div.note>span.header, .transfer-detailed-meta>div>span.files-meta-list-header {
    display: block;
}

.transfer-detailed-meta>div.note>span.content, .transfer-detailed-meta>div.files-meta-list>ul>li.files-meta-list-elm {}

.transfer-detailed-meta>div>span.header, .transfer-detailed-meta>div>span.files-meta-list-header {
    min-width: 8em;
    margin-bottom: 0.6em;
    font-weight: 300;
    font-size: 1em;
    margin-right: 2em;
}

.transfer-detailed-meta>div>span.content, .content-origin, .transfer-detailed-meta>div.files-meta-list>ul>li.files-meta-list-elm {
    line-height: 1.7em;
    /**font-size: .875em;**/
    /**color: rgba(0, 0, 0, 0.42);**/
    word-break: break-word;
}

.transfer-detailed-meta>.download, .reseted-msg-box {
    text-align: center;
    font-size: 1.2em;
    /*  margin-top: 2em;*/
    margin-top: 0em;
    position: relative;
}

.transfer-detailed-meta>.view {
    text-align: center;
    font-size: 1.2em;
    /*  margin-top: 2em;*/
    margin-top: 0em;
    position: relative;
}

#content-2-meta:not(.replies):not(.replied) {
    margin-left: 7.5%;
    background-color: white;
    width: 85% !important;
    padding-bottom: 1em;
    margin-top: 1.6em;
}

#content-2-meta>div.sent-by, .sent-by-reply {
    display: block;
}

.contained>.download {
    display: none;
    justify-content: space-evenly;
}

.download-transfer-span {
    /**padding: 1em 2em;**/
    display: inline-block;
}

.download-transfer-span>img {
    width: 1.7em;
    height: auto;
    vertical-align: top;
    margin-right: 0.4em;
}

.download-transfer-span>span, .reseted-msg {
    vertical-align: sub;
    font-weight: 500;
}

.reseted-msg-button {
    background-color: var(--main-purple);
    color: white;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 1.1em;
}

.reseted-msg-button:hover {
    background-color: #f0aa8b;
}

#gif-signin-container {
    display: initial;
    position: absolute;
    left: 0;
    opacity: 1;
    top: 0;
    width: 100%;
    /*height: 100%;*/
    /*background-color: #f8f8f8;*/
    text-align: center;
    z-index: 112;
    /*margin: 25% auto 25% auto;*/
    margin-top: 40vh;
}

#gif-signin {
    margin: 0 auto 0 auto;
}

#gif-signin>img {
    height: 20vw;
    max-height: 75px;
    max-width: 75px;
}

/*#side-right {*/

/*    height: inherit;*/

/*}*/

.showLoadingSignIn {
    display: initial !important;
    opacity: 1;
    z-index: 999;
    /*animation-name: fadeInOpacity;*/
    /*animation-duration: 2s;*/
    /*animation-timing-function: linear;*/
    /*animation-iteration-count: infinite;*/
    /*-webkit-animation-name: fadeInOpacity;*/
    /*-webkit-animation-duration: 2s;*/
    /*-webkit-animation-timing-function: linear;*/
    /*-webkit-animation-iteration-count: infinite;*/
}

#sentFilesView-history {
    padding: 1em 2em;
    display: inline-block;
}

#sentFilesView-history>img {
    width: 1.7em;
    height: auto;
    vertical-align: top;
    margin-right: 0.4em;
}

#sentFilesView-history>span {
    vertical-align: sub;
    font-weight: 500;
}

.small-image {
    width: 2.5em;
    height: 2.5em;
}

#invite-all-check {
    margin-right: 0.4em;
}

#download-transfer-a, #download-transfer-a, .replied-box>div>a {
    position: absolute;
    width: 33%;
    height: 3.7em;
    margin-left: 50%;
    left: -20.6%;
    cursor: pointer;
}

#sentFilesView-history-a, #sentFilesView-history-a, .replied-box>div>a {
    position: absolute;
    width: 33%;
    height: 3.7em;
    margin-left: 50%;
    left: -20.6%;
    cursor: pointer;
}

#content>#content-2-meta {
    padding-bottom: 1em;
    margin-top: 1.6em;
}

#content>div#reply-boxes {
    display: block;
    opacity: 1;
}

.replied-box {
    display: block !important;
    opacity: 1 !important;
    padding-bottom: 1em;
    background: #fff;
    margin-top: 1em;
    width: 85% !important;
    left: 50%;
}

.replied {
    background-color: rgba(93, 77, 131, 0.3);
    margin-left: 13% !important;
}

.replied-reseted {
    background-color: darkgray;
    margin-left: 13% !important;
}

.replies {
    background-color: rgba(240, 170, 139, 0.5) !important;
    margin-left: 3% !important;
    width: 85% !important;
}

.replies-reseted {
    background-color: darkgray !important;
    margin-left: 3% !important;
    width: 85% !important;
}

#unread-separator {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 0.5em;
}

#unread-separator>hr {
    display: inline-block;
    width: 30%;
}

#unread-separator>div {
    display: inline-block;
    width: 20%;
    text-align: center;
    color: #6f6e76;
}

.sent-by .contact-name, .sent-by-reply .contact-name-reply {
    font-weight: 500;
    padding-right: 0.6em;
}

.sent-by.mobile>.content {
    margin-top: 1em;
}

.sent-by.mobile .avatar {
    vertical-align: top;
    display: inline-block;
}

.sent-by.mobile .contact-data {
    display: inline-block;
    max-width: 73%;
    padding-left: 1em;
    padding-top: 0.2em;
}

.sent-by.mobile .contact-name {
    display: block;
    /* max-width: 73%; */
    /* padding-left: 1em; */
    line-height: 2em;
}

.sent-by.mobile .contact-mail {
    display: block;
    font-weight: 300;
}

/*******************************************************/

@media only screen and (min-width: 1120px) {
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 1.8em !important;
    }
    body {
        font-size: 12px;
    }
    .bigscreen {
        display: initial;
    }
    .smallscreen {
        display: none !important;
    }
    .sent-by.mobile {
        display: none !important;
    }
    #sd-add-external-count {
        margin-top: 0.9em;
        font-size: 0.7em;
    }
    #invite {
        left: 19.3%;
    }
    #sd-btns {
        display: none;
    }
    .bigscreen-show {
        display: block;
    }
    #content-textarea {
        display: block;
    }
    #content>#content-1a>div {
        margin-top: 2em;
    }
    .download-transfer-link {
        position: absolute;
        width: 33%;
        height: 4em;
        margin-left: 50%;
        left: -10.85%;
        cursor: pointer;
        /* background: rgba(255,0,0,.3); */
    }
}

@media only screen and (max-width: 1119px) {
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 1.9em !important;
    }
    .modal-plan {
        width: 66vw !important;
        margin-left: 50% !important;
        left: -33vw !important;
    }
    #btn-plan_4, #btn-plan_3 {
        top: 2.9em;
    }
    #content>#content-frameset {
        width: 91.3%;
        margin-top: -5em;
        margin-right: 3.5%;
    }
    #modal>div {
        font-size: 1.25em;
    }
    #modal>h2 {
        font-size: 1.35em;
    }
    #user {
        font-size: 16px;
        margin: 0.33em 2em;
    }
    #loading-content {
        left: 43%;
    }
    #remember-pass, #lang-change-field, #logouttime-change-form {
        padding-top: 0;
    }
}

@media only screen and (max-width: 1349px) {
    #uploading-filelist {
        margin-left: 3%;
    }
    p#content-action-buttons {
        margin-left: 3%;
    }
    .mobile-shown {
        display: block;
    }
}

@media only screen and (max-height: 750px) and (min-width: 1800px), only screen and (max-height: 640px) and (min-width: 1421px), only screen and (max-height: 520px) and (min-width: 1119px), only screen and (max-height: 410px) {
    nav#menu-about #menu_share, nav#menu-about #menu_faq, nav#menu-about #menu_about, nav#menu-about #menu_terms, nav#menu-about #menu_privacy {
        display: none;
    }
}

@media only screen and (max-width: 1350px) {
    #content>div.contained {
        margin-left: 6%;
    }
}

@media only screen and (min-width: 1421px) {
    body {
        font-size: 16px;
    }
    .transfer-detailed-meta>div.note>span.header, .transfer-detailed-meta>div.files-meta-list>span.files-meta-list-header {
        display: inline-block !important;
        vertical-align: top;
    }
    .transfer-detailed-meta>div.note>span.content, .transfer-detailed-meta>div.files-meta-list>ul>li.files-meta-list-elm {
        display: inline-block !important;
        max-width: 83%;
    }
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 2.3em !important;
    }
    .tx-empty-txt {
        top: 120px;
        width: 120px !important;
    }
}

@media only screen and (min-width: 2050px) {
    #signin {
        background-size: cover;
    }
}

@media only screen and (min-width: 1800px) {
    body {
        font-size: 17px;
    }
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 2.5em !important;
    }
}

@media only screen and (min-width: 1900px) {
    body {
        font-size: 18px;
    }
    .trans-details>.user-info {
        width: 52%;
    }
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 2.7em !important;
    }
}

@media only screen and (min-width: 1801px) and (max-width: 1840px) {
    .trans-details>.user-info {
        width: 60%;
    }
}

@media only screen and (min-width: 2200px) {
    body {
        font-size: 19px;
    }
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 2.8em !important;
    }
}

@media only screen and (min-width: 2400px) {
    body {
        font-size: 20px;
    }
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 2.95em !important;
    }
}

.chips {
    width: 100%;
}

#add-recipients>.chip>img {
    height: 2.1em;
    width: 2.1em;
    object-fit: cover;
}

#add-recipients>ul.autocomplete-content {
    display: block;
    opacity: 1;
    position: absolute;
    top: unset;
}

#sd-co-external>.chips>.input {
    min-width: 12em;
    transition: 0s !important;
    min-width: 0 !important;
}

#sd-co-external>.chips>.input::placeholder {
    color: var(--color-placeholder);
}

#sd-co-external>.chips.focus {
    border-bottom: 0.08em solid var(--main-purple);
}

#content-3>p, #sd-contacts, #content-3>ul {
    font-size: 1.2em;
}

#content>#content-1a>div#content-uploading-files {
    background: #fff;
}

#content-buttons {
    display: none;
}

@media only screen and (max-width: 1120px) {
    #buttons-import {
        font-size: 0.5em !important;
    }
    #content-uploading-files {
        padding-bottom: 6em;
    }
    #thread-ext-tooltip.tooltip:hover .tooltiptext {
        position: fixed;
        top: 8.5em;
        left: 7.5em;
    }
    #thread-ext-tooltip.tooltip .tooltiptext {
        width: 60vw;
    }
    .trans-details .date {
        float: none !important;
    }
    .sent-by {
        display: block !important;
    }
    #reply {
        margin-bottom: 6.5em !important;
    }
    #tx-recv, #tx-sent {
        margin-bottom: 3em !important;
    }
    .desktop-click {
        display: none;
    }
    #sd-btns {
        display: none;
    }
    .mobile-shown {
        display: block;
    }
    .bigscreen-show {
        display: unset;
    }
    #loading-content {
        left: 50%;
    }
    #content-top-plan {
        display: none;
    }
    #wrapper_plan {
        overflow: scroll;
        overflow-x: hidden;
    }
    #wrapper_plan>#step_1 {
        width: 62vw;
    }
    .wrapp_plan {
        margin-bottom: 2em;
        width: 59vw;
    }
    .wrapp_plan>button {
        margin-top: -1em;
    }
    .btn-default-plan {
        margin-top: -10em !important;
    }
    #form-brain {
        width: 62vw;
        overflow: auto;
        min-height: 30em;
        margin-bottom: 5em;
        overflow: auto;
        max-height: 50vh;
    }
    .modal-plan {
        /* margin-left: 34% !important; */
        width: 66vw;
        left: -33vw;
        margin-left: 50%;
    }
    #premium_plan>button, .content-plan>button, #btn-plan_4, #btn-plan_3 {
        top: 0;
    }
    #plans {
        width: 100%;
    }
    #menu>nav#menu-about {
        bottom: 9em;
    }
    #user-logout {
        font-size: 2em;
        float: right;
    }
    .menu_billing {
        display: block;
        width: 100%;
        position: relative;
        top: 1em;
    }
    #menu>nav>a>i {
        margin-right: 0em;
        height: auto;
    }
    .menu_billing>span {
        color: #b1b1b1;
        font-weight: 300;
        margin-left: 1.86em;
    }
    #menu>nav>.menu_billing {
        padding: 1.07em 1.82em;
        text-decoration: none;
        line-height: initial;
        color: #d4d7e9;
        display: block;
    }
    div#menu>nav a#menu_logoHostCompany {
        display: none;
    }
    #menu-main {
        display: none !important;
    }
    #user-mobile {
        background-color: #494654;
        height: 3.6em;
        position: absolute;
        display: flex;
        width: 100%;
        bottom: 0;
    }
    #user-mobile-name {
        padding: 0.8em 1em 0.8em 1em;
        padding-right: 1em;
        width: 80%;
        cursor: pointer;
    }
    #user-mobile-name>img {
        width: 2em;
        height: auto;
        margin-top: -0.1em;
        vertical-align: middle;
        margin-right: 0.4em;
        display: inline-block;
    }
    #user-mobile-name>span {
        color: #fafafa;
        font-size: 0.875em;
        font-weight: 300;
        vertical-align: middle;
        display: inline-block;
        width: 70%;
        line-height: 1.2em;
    }
    .social {
        /* right:10em; */
        bottom: 3.8em;
    }
    .logout-resp {
        display: block;
        margin: 1em 0.4em 0 0;
    }
    #content {
        padding: 0 0 0 0;
    }
    .chips {
        width: 80%;
    }
    #content-1a-1>#sd-btns, #content-1a-1>.sd-btn {
        text-align: center;
    }
    #add-external {
        right: 10%;
        right: 5vw;
    }
    #chips-external {
        left: -5vw;
        width: 90vw;
        margin-top: 3em;
    }
    #sd-co-external::after {
        display: none;
    }
    #content>div.contained {
        width: 100%;
        margin-left: unset;
    }
    .transfer-tabs>span {
        font-size: 2.5em;
        margin-bottom: 1em;
    }
    #uploading-filelist-details {
        width: 88%;
        margin-left: 5.4%;
        left: 0;
    }
    .sd-co-external-bg {
        display: none;
    }
    #content>#content-1a>#sd-co-external {
        padding: 0 10% 3.6em;
        width: 100%;
        left: 0;
        margin-left: 0;
        bottom: 0;
        background: #fff;
        height: 24em;
        box-shadow: rgba(0, 0, 0, 0.08) 0 0 13em;
    }
    .contained>div>h3 {
        margin: 2em 0 1em;
    }
    #sd-co-list>li>img.avatar, #co-import-results>li>img.avatar, #co-invite-results>li>img.avatar {
        float: left;
    }
    #sd-co-list>li>span>strong, #co-import-results>li>span>strong, #co-invite-results>li>span>strong {
        width: 84%;
    }
    .contained>div#sd-co-external>h3 {
        margin-left: 0;
        font-size: 1.2em;
        font-weight: 400;
        margin-top: 0.9em;
        text-align: center;
    }
    .mobile {
        display: initial;
    }
    #mobile-head.mobile {
        display: inline-block;
        position: fixed;
        text-align: right;
        width: 100%;
        /*padding-top: .6em;*/
        height: 6em;
        /* background: #fff; */
        background: var(--hush-menu);
        z-index: 101;
        bottom: 0;
        /** bottom: 0; **/
    }
    #mobile-head.mobile>nav {
        width: calc(100% - 5em);
        float: right;
        height: 100%;
    }
    #mobile-head-nav {
        color: #d4d7e9;
        background-color: unset;
    }
    #mobile-head-nav i {
        height: 100%;
        line-height: unset;
    }
    #mobile-head-nav-list {
        display: flex;
        height: 100%;
    }
    #mobile-head-nav-list>li {
        flex: 1;
    }
    #mobile-head-nav-list>li>a {
        padding: 0;
        margin: 0;
        display: grid;
        place-items: center;
    }
    .unread-message-count-mobile {
        position: relative;
        left: -0.8em;
        top: -0.6em;
        font-size: 100%;
    }
    .notifictation-span {
        color: white;
        background-color: var(--main-purple);
        line-height: 10px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        padding: 0.3em 0.3em;
        position: relative;
    }
    #threads>a {
        transform: translate(6px, 0px);
    }
    #notif-bell-icon-mobile {
        font-size: 260%;
    }
    #notif-bell-count-mobile {
        position: relative;
        top: -0.8em;
        left: -1.1em;
    }
    #notif-bell-reset-mobile {
        line-height: unset;
    }
    .mobile-head-action {
        text-align: right;
        color: inherit;
        /*font-size: 2rem;*/
        font-size: 1.6rem;
        border-radius: 2px;
        opacity: 0.5;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        margin: auto;
        padding: 0em 0.3em;
    }
    #mobile-head-action_myTransfers {
        padding-right: 0em;
    }
    #mobile-head-action_contacts {
        padding-left: 0.1em;
    }
    #mobile-head-action_logout {
        padding-left: 0.1em;
    }
    .mobile-head-action i {
        font-size: 1.5em;
    }
    .mobile-head-action.mobile-head-active-action {
        opacity: 1;
        color: #f0aa8b;
        /** #bd98f5 **/
    }
    /** #buttons-imprt, .transfer-tabs, **/
    .bottom-menu {
        position: fixed;
        display: block;
        background-color: var(--hush-menu);
        height: auto;
        bottom: 6em;
        width: 100%;
        left: 0;
        z-index: 98;
        text-align: center;
        padding-top: 0 !important;
    }
    .wrapper-threads-action {
        float: unset;
        width: unset;
    }
    #buttons-imprt {
        font-size: 2em;
        bottom: 6em;
    }
    .transfer-tabs>span.active {
        color: #f0aa8b;
        border-bottom: 2px solid #f0aa8b;
    }
    #co-invite, #co-import, #co-import-microsoft {
        vertical-align: bottom;
        line-height: 1.5em;
        margin: 0.33em 0.33em 0.33em 0em;
        float: none;
        min-width: min-content;
        font-size: 1.08em;
    }
    /**
    .mobile-head-action-dropdown {
        position: fixed;
        display: inline-block;
        color: #d4d7e9;
    }
    .mobile-head-action-dropdown-content {
        display: none;
        z-index: 1;
    }
    .mobile-head-action-dropdown-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    .mobile-head-action-dropdown:hover .mobile-head-action-dropdown-content {
        display: contents;
    }
    **/
    #content-uploading-files>div {
        padding-top: 0;
        padding-bottom: 0;
    }
    body {
        font-size: 0.8em;
    }
    .bigscreen {
        display: none !important;
    }
    /** oposite of big screen **/
    .smallscreen {
        display: initial;
    }
    #uploading-filelist {
        width: 85% !important;
        border: none;
        height: auto;
        border-color: transparent;
        /* width: 96vw !important; */
    }
    .mobile-shown {
        display: block;
    }
    p#content-action-buttons {
        width: 90vw;
        position: relative;
        z-index: 1;
        bottom: 2.6em;
    }
    #uploading-filelist-empty {
        width: 50%;
        background-position-x: 50%;
        padding-bottom: 1em;
        padding-top: 10.4em;
        font-size: 1.3em;
        height: 14em;
        left: -29vw !important;
        /* margin: auto; */
        margin-left: 25%;
    }
    #uploading-filelist-empty>span.browse, #content>#content-1a>div>div>p>button {
        display: inline-block;
        border-radius: 3px;
        background-color: var(--main-purple);
        font-size: 14px;
        padding: 0.6em 0.6em;
        font-weight: 300;
    }
    #uploading-filelist-empty>span.browse {
        border: 1px solid var(--main-purple);
        color: white/**#fff**/
        ;
        background-color: var(--main-purple);
    }
    #uploading-filelist-empty {
        background-position-y: 5em;
    }
    #file-up {
        width: 80%;
        height: 16em;
        margin-top: -13em;
        margin-left: 0;
        left: 10%;
        /* background: #fff; */
    }
    #text-files {
        /* display: none; */
    }
    #content-1, #content>div.contained>div.sd-btn {
        /* margin-right: 2em; */
        text-align: center;
        width: 91.5%;
    }
    footer {
        bottom: 0;
        z-index: 25;
        position: fixed;
        /* z-index: 300; */
        /**height: 105px;**/
        /* padding-top: 45px; */
        margin: 0;
        left: 52%;
        /* background: #252525; */
        /* width:100%; */
        display: block;
    }
    footer>nav {
        bottom: 0;
        left: 0;
        position: relative;
        margin-bottom: 2em;
        color: #fff;
        width: 100%;
        z-index: 20;
    }
    footer>nav>span {
        opacity: 1;
        margin-left: 0;
        font-weight: 400;
    }
    footer>nav>span>a {
        color: #6f6e76;
    }
    footer>nav>a>img {
        opacity: 1;
    }
    #menu {
        /* box-shadow: rgba(0,0,0,.7) -3em 0 13em; */
        font-size: 1.35em;
    }
    #menu-placeholder {
        display: none;
    }
    #content-1>nav>a::before {
        background-size: 85%;
        opacity: 0.8;
    }
    #content-2, #content-2-threads, #content-2-archived, #content-3 {
        margin-top: 0;
    }
    #plan-main-content {
        top: 0;
    }
    #content>div:not(#thread-summarized-cont, #content-1a) {
        padding-bottom: 6em;
    }
    #content>div {
        width: 95%;
        margin-left: 2.5%;
    }
    #mobile-head-menu-bg {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 8;
        margin-left: 0;
        /* mix-blend-mode: multiply; */
        filter: blur(0.24em);
        background: rgba(90, 90, 90, 1);
        transition: 0.3s;
    }
    #mobile-head-menu-bg>canvas {
        opacity: 0.6;
        mix-blend-mode: hard-light;
        transition: 0.3s;
        animation-timing-function: cubic-bezier(0.86, 0.21, 0.45, 1.01);
    }
    header {
        left: 4em;
        margin-top: 1em;
        text-align: center;
        padding: 20px 0 24px;
        height: auto;
    }
    #get-app {
        margin-left: 19px;
    }
    .has-files>#uploading-filelist-details>button {
        opacity: 1;
        margin-top: 1.2em;
    }
    #content>#content-1a>div#content-uploading-files {
        padding-top: 3%;
        margin-bottom: 65px;
    }
    #send-size {
        margin-top: -1em;
    }
    #content>#content-1a {
        padding-bottom: 0;
    }
    footer>nav.mobile {
        display: block;
    }
}

@media only screen and (max-width: 800px) {
    #content {
        /**padding: 2.8em 1em 2em;**/
        padding: 0 0 0 0;
    }
    #big-custom-logo, #private-custom-logo {
        height: 15vw;
    }
    #content-3>p, #content-3>ul {
        width: 100vw;
        /*margin-left: -4.2%;*/
        left: 0;
        padding: 0 1em;
    }
    #content-1>nav>a {
        height: 13em;
        margin-top: 1em;
        background-position-y: 0.3em;
        width: 80%;
        background-size: cover;
        background-position-x: -2%;
    }
    #content-1>nav>a>div {
        margin-top: 4.5em;
        font-size: 1.3em;
    }
    #content-1>nav>a>span {
        font-size: 1.6em;
    }
    #sd-co-list>li>span, #co-import-results>li>span, #co-invite-results>li>span {
        display: inline-block;
        width: 90%;
        /* color: #000 !important; */
    }
    #content-1>nav>a::before {
        background-size: 190%;
        height: 13em;
        width: 73.2%;
        margin-left: 13.4%;
        margin-left: 13.5%;
        /* left: 0; *
    }
    #content-1 > nav > a > span {
        background: #fff;
        display: block;
        /* padding-bottom: .8em; */
        /* margin-top: .85em; */
        /* margin-left: 37%; */
        width: 73%;
        background-size: cover;
        left: 0;
        border-radius: 0.8em;
        border-top-left-radius: 0;
        line-height: 1.25em;
        font-weight: 500;
        background-position-y: 1em;
        padding: 0em 3% 0.8em;
        border-top-right-radius: 0;
        box-shadow: 0px 6px 8px 0 rgba(0, 0, 0, 0.07);
    }
    #content-1>nav>a>div>div {
        margin-top: -1.1em !important;
    }
    #signin {
        background-size: 180%;
    }
    #content-1>nav>a::before {
        background-size: 85%;
        opacity: 0.14;
    }
    #content>#content-frameset {
        width: 85.8%;
        top: -4em;
        margin-right: 5%;
    }
    #co-list {
        width: 94vw;
        margin-left: 0;
    }
    #co-list>#contact-div {
        margin: 0.5em 0.5em 0em 0;
    }
    #wrapper_plan {
        width: 80vw;
    }
    #wrapper_plan>#step_1 {
        width: 71vw;
    }
    #step_2 {
        width: 77vw;
        overflow: auto;
    }
    #form-brain {
        width: 76vw;
        height: auto;
        margin-bottom: 5em;
        overflow: auto;
    }
    #sd-co-list>li.not-contact::after, #co-import-results>li.not-contact::after, #co-invite-results>li.not-contact::after {
        /*display: block;*/
        /*!*float: left;*!*/
        /*!* margin-top: 1.05em; *!*/
        /*!* margin-right: 1em; *!*/
        /*!*margin-left: .4em;*!*/
        /*color: #fff;*/
        padding: 0.2em 0.8em;
        /*border-radius: 1em;*/
        font-size: 0.9em;
    }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {
    footer {
        left: 54%;
    }
}

@media only screen and (max-width: 768px) {
    #content-3>p {
        font-size: 7.6px;
    }
    #buttons-imprt {
        margin-right: 3%;
    }
    /**footer {
        display: none; /** FIXME: for now hidding the hostCompany footer
    }**/
    footer .report-issue {
        display: inline !important;
    }
    #side-container {
        display: none !important;
    }
    header {
        background: #252525;
        position: fixed;
        height: auto;
        width: 100%;
        text-align: center;
        margin: 0;
        left: 0;
        top: 0;
        text-align: center;
        height: auto;
        padding: 20px 0 24px;
    }
    header img {
        position: fixed;
        left: 2em;
        top: 1em;
        z-index: 40;
        /* background: #fff; */
        height: 1.8em;
        width: auto;
    }
    body.iosBody #signin>header {
        display: none;
    }
    body.iosBody #side-right-in {
        padding-bottom: 6rem;
    }
    body.iosBody #signin>header img {
        top: -3em;
    }
    #side-right {
        width: 100vw;
    }
    #signup-passphrase {
        position: relative;
        /* top:12em; */
    }
    #sign-avatar-container {
        margin-left: 0;
        z-index: 10;
    }
    footer {
        justify-content: center;
        align-items: center;
        width: 100%;
        left: 0;
        font-size: 1.7vh !important;
    }
    .container-mail-nav {
        display: none;
    }
    #loading-content {
        left: 50%;
    }
    #passphrase, #signup-user {
        width: 100vw;
        font-size: 2vh;
    }
    .transfer-detailed-meta>div>span.header {
        display: block;
    }
    .transfer-detailed-meta>div>span.content {
        display: block;
    }
    .transfer-detailed-meta>div.note>span.header, .transfer-detailed-meta>div>span.files-meta-list-header {
        display: block;
    }
    .transfer-detailed-meta>div.note>span.content, .transfer-detailed-meta>div.files-meta-list>ul>li.fiintrojs-helperLayerles-meta-list-elm {
        display: block;
    }
    #big-custom-logo {
        display: none;
    }
}

@media only screen and (max-width: 768px) and (min-height: 600px) {
    #mobile-welcome-box {
        display: block;
    }
}

@media only screen and (max-width: 600px) {
    modal .modal-footer {
        justify-content: flex-end;
    }
    #sd-send-expires-on {
        font-size: 2vw;
    }
    #modal-2fa-otp input[type=number] {
        height: 38px;
        width: 38px;
        font-size: 20px;
    }
    header {
        background: #252525;
        text-align: center;
        padding: 20px 0 24px;
        height: auto;
    }
    #side-col {
        display: none;
    }
    header img {
        position: fixed;
        right: 2em;
        top: 1em;
        z-index: 40;
        /* background: #fff; */
        height: 1.8em;
        width: auto;
    }
    #co-list>li>span, #co-results>li>span {
        width: 55%;
    }
    .mobile-head-action i {
        font-size: 1.3em;
    }
    #side-right {
        position: absolute;
        /* top:-1em; */
    }
    #passphrase, #signup-user, #signup-passphrase, #signup-complete {
        top: 0;
    }
    #content>div {
        width: 95%;
        margin-left: 2.5%;
    }
    #modal-subtop>.modal-footer>button>a {
        font-size: 0.9em;
    }
    #modal-subtop>.modal-footer>button {
        width: 20vw;
        height: 5.8em;
    }
    #modal-subtop>.modal-footer {
        justify-content: space-evenly;
    }
}

@media only screen and (max-width: 400px) {
    body {
        font-size: 0.7em;
    }
    .mobile-head-action i {
        /*font-size: 1em !important;*/
    }
    #modal-subtop>.modal-footer>button>a {
        font-size: 0.9em;
    }
    #modal-subtop>.modal-footer>button {
        width: 20vw;
        height: 5.8em;
        font-size: 1em;
    }
}

@media only screen and (min-width: 320px) and (max-width: 374px) {
    body {
        font-size: 0.6em;
    }
    #reply {
        margin-left: 40%;
    }
    .tx-recv:not(.tx-is-empty), .tx-sent:not(.tx-is-empty) {
        font-size: 8px !important;
    }
    .tx-recv>li>.user-info {
        width: 57% !important;
    }
    .tx-sent>li>.user-info {
        width: 70% !important;
    }
    .tx-recv>li>.size {
        margin-top: -2em;
    }
    .mobile-head-action i {
        font-size: 0.75em !important;
    }
}

@media only screen and (max-width: 1920px) and (min-width: 1421px) {
    #modal-subtop>.modal-footer {
        height: fit-content;
        height: -moz-fit-content;
        min-height: 56px;
    }
}

@media only screen and (max-width: 1720px) and (min-width: 1500px) {
    .trans-details>.user-info {
        width: 60%;
    }
}

@media only screen and (max-width: 1499px) and (min-width: 1421px) {
    .trans-details>.user-info {
        width: 65%;
    }
}

@media only screen and (max-width: 1420px) and (min-width: 1170px) {
    .trans-details>.user-info {
        width: 62%;
    }
}

@media only screen and (max-width: 1170px) and (min-width: 1122px) {
    .trans-details>.user-info {
        width: 65%;
    }
}

@media only screen and (min-width: 375px) and (max-width: 750px) {
    #reply {
        margin-left: 40%;
    }
    .tx-recv>li>.user-info {
        width: 60% !important;
    }
    .tx-sent>li>.user-info {
        width: 77% !important;
    }
    .tx-recv>li, .tx-sent>li {
        font-size: 8px;
    }
    .tx-recv>li>.size {
        margin-top: -1.9em;
    }
    .tx-sent>li>div>.to {
        max-width: 59%;
    }
}

@media only screen and (max-width: 480px) {
    .read-icon-details {
        top: 3em;
    }
    .error_message {
        font-size: 1.1em;
        margin-bottom: 0.6em;
    }
    #check-passphrase {
        margin-bottom: 0.6em;
    }
    .error_message_body {
        font-size: .9em;
    }
    .sidebar {
        margin: 0;
        padding-bottom: 50px;
    }
    #menu-choose-os * {
        font-size: 20px;
        height: 20px;
        width: 20px;
    }
    #reply-green-box {
        margin-bottom: 9em!important;
    }
    #co-sidebar.sidebar.is-active {
        min-width: 80vw;
    }
    #co-sidebar .thread {
        min-width: 70vw;
    }
    #side-co-groups .thread>.thread-int, #side-co-groups .thread>.thread-ext, #side-co-groups span.date {
        max-width: 80vw;
    }
    #user-action-tgl i {
        font-size: 1em;
    }
    .tiny-img {
        height: 1.2em;
    }
    #user-action-tgl i {
        font-size: 1em;
    }
    #user-action-tgl button {
        padding: 0 1em;
    }
    #user-action {
        bottom: 5%;
    }
    #inc-passphrase-tooltip:hover span {
        display: flex;
        left: unset;
        z-index: 100;
        background-color: rgba(93, 77, 131, 0.9);
    }
    #modal-2fa-otp input[type=number] {
        width: 30px;
        height: 30px;
        font-size: 15px;
        border-width: 2px;
        margin: 0 1px;
    }
    #modal-2fa-otp.modal {
        width: 93%;
    }
    span.cut-text {
        max-width: 100%;
    }
    .sidebar.is-active {
        width: 80vw;
    }
    .news-box {
        width: 90%;
        margin: auto;
    }
    .autoExpand {
        max-height: 6rem;
    }
    #content-uploading-files {
        padding-bottom: 0;
    }
    #notif-bell-dropdown-menu {
        top: 0 !important;
        right: 0;
        left: unset !important;
    }
    #reply-window {
        background-color: initial;
    }
    #lst-msg-date {
        display: none;
    }
    #side-right {
        height: 100%;
    }
    #mobile-head-nav-list>#bell {
        display: none !important;
    }
    #notif-bell-mobile {
        display: none !important;
    }
    #invite-area {
        height: 8em;
        min-height: 8em !important;
    }
    #invite {
        width: 95% !important;
        height: 23.5em;
        left: 1em !important;
    }
    #IOS-mobile-redirection {
        top: 0em;
        position: absolute;
        z-index: 200;
        display: inline-block;
        width: 100%;
        height: 21em;
        background-color: var(--hush-menu);
        color: white;
    }
    #IOS-mobile-redirection>p {
        width: 90%;
        padding-left: 1.5em;
        font-size: 1.5em;
    }
    #IOS-mobile-redirection>#IOS-countdown-div {
        width: 90%;
        display: inline-block;
        margin-left: 1.5em;
        margin-bottom: 1em;
    }
    #IOS-mobile-redirection>#IOS-countdown-div>span {
        font-size: 1.5em;
    }
    #IOS-mobile-redirection>a {
        color: white;
        background-color: var(--main-purple) !important;
        margin-left: 1em;
    }
    #content-2-meta-sent .trans-details .user-info .to {
        line-height: 1.45em !important;
    }
    #content-3>p, #sd-contacts, #content-3>ul, #sd-co-list {
        font-size: calc(1vh + 1.8vw);
    }
    #sd-co-list-container {
        /*height: 400px;*/
        overflow-x: hidden;
        overflow-y: scroll;
        height: 60vh;
    }
    #uploading-filelist-empty {
        font-size: 1em !important;
        position: absolute !important;
        background-position: 40vw 10.4em !important;
        background-size: 3.7em !important;
        top: none !important;
        bottom: 6.7em;
        left: -7em !important;
        width: 55vw !important;
        z-index: 108;
    }
    #blocker>#invite>#invite-area>input {
        min-width: 0em !important;
        width: 100% !important;
        overflow: scroll !important;
    }
    #uploading-filelist-empty>span {
        position: absolute !important;
        left: -1.4em !important;
    }
    #uploading-filelist-empty {
        background-image: unset;
    }
    #send-size:before {
        font-size: 2em;
        z-index: 108;
        color: white;
        content: "\f0c6";
        /* paperclip */
        font-family: FontAwesome;
        left: -1em;
        top: 1em;
        position: absolute;
        transform: rotate(45deg);
    }
    #send-size {
        position: fixed;
        bottom: 8.7em;
        right: 17.7em;
        z-index: 108;
    }
    #send-size>span {
        font-size: 1.2em;
        color: white;
    }
    #btn-tutorial {
        border-top: none !important;
        margin-top: 0em !important;
        bottom: 2.3em !important;
        vertical-align: initial !important;
        background-color: var(--main-purple);
        box-shadow: none;
    }
    .btn-about {
        padding-right: 0em;
        padding-left: 0em;
        width: 30px !important;
        display: none;
    }
    #content-1a>#tutorial-modals>.modal {
        background: transparent !important;
        width: 96vw !important;
        margin-right: 2vw !important;
        margin-left: 2vw !important;
        box-shadow: none;
        max-height: 100vh !important;
    }
    #content-1a>#tutorial-modals>.modal>.modal-footer>p {
        white-space: pre-line;
    }
    #content-1a>#tutorial-modals>#modal-1 {
        top: 0.5em !important;
    }
    #content-1a>#tutorial-modals>#modal-1>.modal-content {
        height: 9.6em;
    }
    #content-1a>#tutorial-modals>#modal-1>.modal-footer {
        height: 10em !important;
    }
    #content-1a>#tutorial-modals>#modal-2 {
        top: 1.8em !important;
    }
    #content-1a>#tutorial-modals>#modal-2>.modal-content {
        height: calc(var(--vh, 1vh) * 100 - 28em) !important;
    }
    #content-1a>#tutorial-modals>#modal-2>.modal-footer {
        height: 8em !important;
    }
    #content-1a>#tutorial-modals>#modal-3 {
        bottom: 9.3em !important;
        top: initial !important;
    }
    #content-1a>#tutorial-modals>#modal-3>.modal-content {
        height: 8em;
        margin-top: 1.5em;
    }
    #content-1a>#tutorial-modals>#modal-3>.modal-footer {
        height: 8em !important;
    }
    #content-1a>#tutorial-modals>#modal-4 {
        top: initial !important;
        height: 95vh;
    }
    #content-1a>#tutorial-modals>#modal-4>#modal-file-1 {
        display: inline-block;
        height: 4em;
        margin-top: 1.5em;
        width: 40vw;
    }
    #content-1a>#tutorial-modals>#modal-4>#modal-file-2 {
        padding: 0px !important;
        display: inline-block;
        height: 7.8em;
        width: 96vw;
        margin-top: 8.25em;
        margin-bottom: calc(var(--vh, 1vh) * 100 - 46em) !important;
        background-image: url("/img/files-downloaded.png");
    }
    #content-1a>#tutorial-modals>#modal-4>#modal-file-2>#tutorial_number {
        font-size: 1.2em;
    }
    #content-1a>#tutorial-modals>#modal-4>#modal-file-3 {
        display: inline-block;
        height: 4em;
        margin-top: 1.5em;
        width: calc(var(--vh, 1vh) * 60 - 27em);
        background-image: url("/img/file-clip.png");
    }
    #content-1a>#tutorial-modals>#modal-4>.modal-footer {
        height: 8em !important;
    }
    #content-1a>#tutorial-modals>#modal-4>.modal-content>#tutorial_number {
        background: #ff8a65;
        color: white;
        padding: 0.5em;
        font-size: 1.5em;
        border-radius: 20%;
    }
    #content-1a>#tutorial-modals>#modal-5 {
        bottom: 3.8em !important;
        top: initial !important;
        width: 100vw !important;
        margin-left: 0vw !important;
        margin-right: 0vw !important;
    }
    #content-1a>#tutorial-modals>#modal-5>.modal-content {
        height: 4em;
        margin-top: 1.5em;
        width: 35vw;
        float: right;
    }
    #content-1a>#tutorial-modals>#modal-5>.modal-footer {
        height: 8em !important;
        width: 96vw !important;
        margin-left: 2vw !important;
        margin-right: 2vw !important;
    }
    #content-1a>#tutorial-modals>#modal-6 {
        bottom: -1.5em !important;
        top: initial !important;
    }
    #content-1a>#tutorial-modals>#modal-6>.modal-content {
        height: 4em;
        margin-top: 1.5em;
    }
    #content-1a>#tutorial-modals>#modal-6>.modal-footer {
        height: calc(75vh - 5em) !important;
        top: initial !important;
        overflow-y: visible;
        overflow-x: hidden;
    }
    #content-1a>#tutorial-modals>#modal-6>.modal-footer>div {
        display: block;
        text-align: left;
        margin-bottom: 3em;
    }
    #content-1a>#tutorial-modals>#modal-6>.modal-footer>div>p {
        width: calc(80vw - 55px - 1em);
        display: inline-block;
    }
    #content-1a>#tutorial-modals>#modal-6>.modal-footer>div>img {
        margin-right: 1em;
        display: inline-block;
    }
    #content-1a>#tutorial-modals>.modal>.modal-content {
        display: block;
        text-align: center;
        border: 5px solid #ff8a65;
        margin-bottom: 1.5em;
        border-radius: 2px;
    }
    #content-1a>#tutorial-modals>.modal>#bottom-modal-buttons {
        margin-top: 1em;
        margin-bottom: 1em;
        display: block;
        text-align: center;
    }
    #content-1a>#tutorial-modals>.modal>#bottom-modal-buttons>#left-button {
        display: inline-block;
        margin-left: 0.5em;
        margin-right: 0.5em;
        float: left !important;
        background-color: #ff8a65 !important;
    }
    #content-1a>#tutorial-modals>.modal>#bottom-modal-buttons>#right-button {
        display: inline-block;
        margin-left: 0.5em;
        margin-right: 0.5em;
        float: right !important;
        background-color: #ff8a65 !important;
    }
    #content-1a>#tutorial-modals>.modal>#bottom-modal-buttons>#close-button {
        display: inline-block;
        margin-left: auto !important;
        margin-right: auto !important;
        background-color: #483a64 !important;
    }
    #content-1a>#tutorial-modals>.modal>.modal-footer {
        display: block;
        text-align: center;
    }
    .modal .modal-footer {
        height: fit-content;
        height: -moz-fit-content;
        min-height: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
    }
    .trans-details .size {
        float: none;
    }
    #sd-contacts {
        margin-top: 0;
    }
    #sd-contacts>h3 {
        display: unset;
        margin: 1em;
        /* padding-bottom: 1em; */
    }
    #sd-btns {
        display: unset;
    }
    #content-1a .mobile-hidden {
        display: none;
    }
    #wrapper-textarea-content {
        min-height: 5em;
        max-height: unset;
        max-height: 10.5em;
        height: 100%;
        margin: 0;
        padding: 0 0 0 0.75em;
        border: 4px solid #907ac5;
        border-radius: 15px;
        background-color: white;
        font-size: 1.5em;
        resize: none;
    }
    #content-textarea {
        height: fit-content;
        height: -moz-fit-content;
    }
    #wrapper-textarea-content:focus {
        outline: none;
    }
    #content-contacts {
        position: relative;
        display: block;
        left: 0.5em;
        top: -3em;
        margin-top: 0em;
        border-top: 2em solid white;
        background: white;
        z-index: 110;
        height: 130px !important;
        max-height: 15em !important;
    }
    #content-contacts>#span-contact {
        font-size: 2.5em;
        margin-top: 0em;
    }
    #content-contacts>.chips {
        position: initial !important;
        width: 95vw !important;
        max-width: 95vw !important;
        /*height : 58% !important;*/
        height: 65% !important;
        /*overflow-y: scroll !important;*/
        overflow-x: hidden !important;
    }
    #content-contacts>.chips>input {
        width: 90vw !important;
        max-width: 90vw !important;
        line-height: 1.2em;
        font-size: 1.5em !important;
    }
    #content-contacts>.chips>.dropdown-content {
        position: absolute !important;
        z-index: 999 !important;
        top: 11.5em !important;
    }
    #signin>footer {
        bottom: 0.8em;
        /*bottom: 0;*/
        /*margin-bottom: 0.75em;*/
        /*height: 10%;*/
    }
    #signin>footer>nav>button {
        left: -0.5em;
    }
    .transfer-expiration-cont {
        display: none;
    }
    .modal-plan {
        width: 100vw !important;
        left: 0 !important;
        margin-left: 0 !important;
    }
    #main_wrap {
        width: 100vw;
    }
    .wrapp_plan {
        width: 87vw;
        min-height: 60vh;
    }
    #wrapper_plan>#step_1, #form-brain>#step_2 {
        width: 90vw;
    }
    #wrapper_plan {
        overflow: auto;
        height: 95%;
        width: 100vw;
        max-height: 92vh;
    }
    #loading-content {
        left: 50%;
        margin-left: -12px;
    }
    #step_2 {
        width: 100%;
        text-align: center;
        overflow: auto;
        margin-bottom: 3em;
    }
    #step_2>button {
        margin-top: -10em;
    }
    #form-brain {
        width: 91vw;
        height: auto;
        margin-bottom: 8em;
        max-height: unset;
    }
    #co-list>li>span>strong, #sd-co-list>li>span>strong, #co-import-results>li>span>strong, #co-invite-results>li>span>strong {
        width: 75%;
    }
    #menu {
        font-size: 1.15em;
        z-index: 202;
    }
    /**#content > div.contained > div#sd-btns,**/
    #content>div.contained>div.sd-btn, #content1>h1 {
        width: 100%;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        position: fixed;
        /* margin-top: 8em; */
    }
    #content-1a.mobile-step-2 {
        padding-top: 2em;
    }
    /**#sd-btns, **/
    #reply-window>#sd-btns>button {
        margin: 0.33em 0.33em 0.33em 0em;
        width: auto;
        padding: 0.6em 0.6em;
    }
    #reply-window>#sd-btns {
        text-align: right;
    }
    #reply-window>#sd-btns>#btn-tutorial {
        display: none;
    }
    #reply-window>#context-area {
        position: absolute;
        bottom: 10.7em;
        /**3.5em;**/
        width: 100% !important;
        background: transparent;
        z-index: 110;
        margin-bottom: initial !important;
        border-bottom: initial !important;
        /*border-top: 1px solid #cfcfcf;*/
    }
    #reply-window>#uploading-filelist {
        margin-bottom: initial !important;
        border-bottom: initial !important;
    }
    #reply-window>#uploading-filelist>#uploading-filelist-details>#files-upload {
        width: 95.4vw !important;
    }
    #reply-window>#context-area>textarea {
        padding-left: 0.75em;
        margin-top: 0.5em;
        padding-bottom: 4.3em;
        border: 4px solid #907ac5;
        border-radius: 15px;
        background-color: white;
        font-size: 1.5em;
        margin-left: initial !important;
        width: 95% !important;
        overflow: hidden;
    }
    #reply-window>#context-area>textarea:focus {
        outline: none;
    }
    .bottom-menu-onsmall {
        position: fixed;
        display: block;
        background-color: var(--hush-menu);
        height: auto;
        bottom: 6em;
        width: 100%;
        left: 0;
        z-index: 98;
        text-align: center;
        /** note: this one can be removed ;) (only #sd-btns uses it for now) **/
        padding-top: 0 !important;
    }
    #content-3>#co-list>#co-list-no-match {
        left: 2em;
        margin-top: 1em;
    }
    #content-3>#co-list>span {
        margin-left: 1em;
    }
    #content-3>#co-results>span {
        margin-left: 1.8em;
    }
    /** .mobile-step-2 #content-buttons, **/
    /**.mobile-step-1 #content-buttons, /** FIXME: Get rid of content-buttons **/
    /** .mobile-step-1 #sd-btns,
    .mobile-step-1 #sd-co-external,
    .mobile-step-1 #sd-co-external-bg,
    **/
    .mobile-step-2 #content-textarea, .mobile-step-2 #uploading-filelist, .mobile-step-1 #sd-contacts {
        display: none;
    }
    #file-up::after {
        content: "";
        display: block;
        height: 6em;
    }
    #sd-co-list>li.not-contact::before, #co-import-results>li.not-contact::before, #co-invite-results>li.not-contact::before {
        float: right;
        margin-top: 4.2em;
        margin-right: 2.2em;
    }
    #sd-co-list>li.not-contact>input[type="checkbox"]:before, #co-import-results>li.not-contact>input[type="checkbox"]:before, #co-invite-results>li.not-contact>input[type="checkbox"]:before {
        margin-top: -0.45em;
        right: 0;
    }
    #sd-co-list>li>input[type="checkbox"]:before {
        right: 3px;
        top: 3px;
    }
    #sd-co-list.iOS-avatar>li>input {
        top: 5px;
        right: 5px;
        position: relative;
    }
    #content>div.contained>div#sd-btns>button {
        margin: 0.33em 0.33em 0.33em 0em;
        width: auto;
        padding: 0.6em 0.6em;
    }
    #uploading-filelist {
        padding-top: 2em;
        width: 100%;
        margin: 0;
        background-color: transparent !important;
        /* height: 77vh; */
    }
    #uploading-filelist-details {
        width: 95%;
        margin-top: 0.5em;
        margin-left: 2.5%;
    }
    #uploading-filelist-details>div {
        margin-top: 1.5em;
    }
    #uploading-filelist-details>ul {
        margin-top: -4em;
    }
    #uploading-filelist-details>button {
        bottom: 4.7em !important;
        left: 0.4em !important;
        display: block !important;
        position: absolute !important;
        z-index: 108 !important;
        width: 9em;
        text-align: center;
        padding-top: .8em;
        padding-left: 0;
        padding-bottom: .6em;
        padding-right: 0;
    }
    #content-3>p, #content-3>ul {
        width: 100vw;
        margin-left: -0.3em;
    }
    #content-3>ul {
        overflow: hidden;
    }
    #content-3>p {
        width: 94vw;
        margin-left: 0.1em;
    }
    #content-3>ul>li>img.trash, #sd-co-list>li>img.trash, #co-import-results>li>img.trash, #co-invite-results>li>img.trash {
        /*        margin-top: -.4em;*/
        margin-right: -0.7em;
        background-color: white;
        opacity: 0.7;
    }
    body {
        font-size: 0.6em;
    }
    #content {
        /**padding: 3em 0em 2em;**/
        padding: 0 0 0 0;
    }
    #content>div.contained {
        width: 100%;
        margin-left: 0;
        padding: 0;
        /* margin-top: -2.6em; */
    }
    #content>#content-1a {
        /* padding-top: 15em; */
        background: transparent;
        padding: 0;
        padding-bottom: 0 !important;
    }
    #sd-btns {
        margin-right: 1.4em;
    }
    .contained>div>h3 {
        margin-left: 2.3em;
        margin-top: 3.4em;
    }
    #menu>nav>a>img {
        display: none;
    }
    .menu_billing>i {
        display: none;
    }
    .menu_billing>span {
        margin-left: 0;
    }
    .tx-recv>li>.date {
        margin-left: 0;
    }
    #co-add-search {
        margin-left: 2.5%;
        width: 90%;
        padding-left: 5%;
    }
    #signin {
        background-size: 270%;
    }
    #content-1>nav>a::before {
        background-size: 85%;
        background-position-y: 1em;
        opacity: 0.18;
    }
    #sign-avatar-container.mail-signin.active {
        display: block;
        position: absolute;
        top: 8em;
    }
    footer {
        /* position:absolute;
        height: 1em; */
        /* margin-bottom: -1em; */
        /**z-index: -1;**/
        font-size: 1.2em;
    }
    #content-contacts {}
    .transfer-expiration-cont {
        display: none;
    }
    #content-action-buttons {
        opacity: 1 !important;
    }
    #content-uploading-files {
        padding-top: 0em !important;
        margin-top: 0.5em;
        /* min-height: 24em; */
        background: white;
    }
    #files-upload {
        position: absolute;
        overflow-x: hidden;
        background: white;
        height: auto;
        border: 4px solid #907ac5;
        z-index: 2;
        border-radius: 15px;
        bottom: 19.5em;
        margin-top: 0.1em;
    }
    #content-uploading-files #files-upload {
        position: absolute;
        overflow-x: hidden;
        background: white;
        height: auto;
        border: 4px solid #907ac5;
        z-index: 2;
        border-radius: 15px;
        bottom: 18em;
        margin-top: 0.1em;
        left: 1em;
    }
    .transfer-text {
        /**margin-top: 2em;**/
        max-height: 1.5em;
        min-height: unset;
    }
    #warning-bademail-add-recipients {
        display: none !important;
    }
    #content-uploading-files>div {
        min-height: 6em;
        /**height: 6em;**/
        /*height: 120px!important;*/
        /*max-height: 12em;*/
        /* background: none !important; */
        width: 100% !important;
        /**padding-top: 2.4em !important;**/
        /* margin-top: -5em; */
    }
    #content-uploading-files>div>textarea:not(textarea#wrapper-textarea-content) {
        height: 3rem;
    }
    #content-uploading-files>div.expanded {
        /**min-height: 16.4em;**/
        height: max-content;
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 2em !important;
    }
    #content-uploading-files>#content-textarea {
        position: absolute;
        bottom: 10.7em;
        /**3.5em;**/
        width: 100% !important;
        /*background: transparent;*/
        z-index: 110;
        /*border-top: 1px solid #cfcfcf;*/
        box-shadow: rgba(0, 0, 0, 0.2) 0 0 0.5em;
        background-color: #fbfbfb;
    }
    div#content-textarea>textarea {
        color: black;
        /**#c0c0c0;**/
        /* resize: none; */
    }
    div.expanded>#note-block-textarea {
        height: 1.1em;
    }
    div.expanded>textarea:not(#wrapper-textarea-content) {
        color: #000;
        max-height: unset;
        min-height: 9em;
    }
    #content-3>p, #content-3>ul {
        padding: 0;
    }
    #content-uploading-files>div.mobile {
        display: none !important;
    }
    #note-block-textarea {
        display: unset;
    }
    #send-size {
        margin-top: 0;
        /**margin-top: -1em;**/
        /* margin: auto; */
        vertical-align: middle;
        height: 3em;
    }
    textarea::placeholder {
        color: var(--color-placeholder)!important;
        font-size: inherit !important;
    }
    textarea.transfer-text::-webkit-input-placeholder {
        color: transparent;
    }
    textarea.transfer-text:-moz-placeholder {
        /* Firefox 18- */
        color: transparent;
    }
    textarea.transfer-text::-moz-placeholder {
        /* Firefox 19+ */
        color: transparent;
    }
    textarea.transfer-text:-ms-input-placeholder {
        color: transparent;
    }
    header {
        position: sticky;
        /* margin:  0 0 5em; */
        background: #252525;
        padding: 20px 0 24px;
        height: 5%;
    }
    header img {
        position: fixed;
        left: 2em;
        top: 1em;
        z-index: 40;
        /* background: #fff; */
        height: 1.8em;
        width: auto;
    }
    footer .report-issue {
        display: inline !important;
    }
    #side-container {
        /* display: block; */
        display: none;
        width: 100%;
        height: 0em;
    }
    #container-mail-nav {
        /* display: none; */
        opacity: 0;
    }
    #sign-form, #signup-activate {
        width: 100%;
        display: initial;
        /**font-size: 4vw;**/
    }
    #signup-activate {
        display: block;
        width: 100%;
        min-width: 0;
    }
    #sign-avatar-container {
        width: 100%;
        margin-left: 0;
        /* margin-top: 13em; */
        z-index: 3;
        /* padding-bottom: 5em; */
        /* position: absolute; */
    }
    #signin-user-welcome {
        margin-top: 0em;
    }
    .container-mail-nav-mobi {
        display: none;
        width: 100%;
        margin-bottom: 7em;
        /* margin-top: -14em; */
        z-index: 6;
    }
    #signup-passphrase>#create-passphrase, #signin-createpassphrase-toggle {
        /* margin-top: 9em; */
        font-size: 1em;
    }
    #signup-passphrase>#confirm-passphrase {
        font-size: 1em;
    }
    #sign-avatar-container.mail-signup.active {
        position: relative;
        padding: 0;
        /* margin-bottom: -25em;
        top:6em; */
    }
    #sign-avatar {
        margin-top: -3.5em;
        top: 0;
    }
    #side-container-1 {
        padding-top: 3em;
        background: var(--main-purple);
        height: 9em;
        width: 100%;
    }
    #side-container-1>h1 {
        width: 100%;
        margin-left: 0;
        text-align: center;
        margin: 0;
    }
    #side-container-1>p {
        margin-left: 0;
        text-align: center;
        display: none;
        width: 100%;
    }
    #passphrase, #signup-user, #signup-passphrase, #signup-complete {
        display: block;
        width: 100vw;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .mail-signup-top {
        margin-top: 0em;
    }
    #signup-passphrase {
        /* margin-top:10em;    */
        padding-bottom: 3em;
    }
    #sd-co-list, #co-import-results, #co-invite-results {
        /* position: absolute; */
        width: 100vw;
        left: 0;
        padding-bottom: 6em;
        /*Keep ?*/
        height: auto;
        /* display: flex; */
        flex-wrap: wrap;
        max-width: unset;
        max-height: unset;
        margin-top: 0.5em;
        border-bottom: none;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #sd-co-list {
        padding-bottom: 10em !important;
    }
    #sd-co-list>li, #co-import-results>li, #co-invite-results>li {
        width: 46vw;
        min-height: 7em;
        display: block;
        padding: 0;
        margin: 1vw;
        max-width: 46vw;
        min-width: 46vw;
        border-bottom: 1px solid #efefef;
    }
    #sd-co-list>li {
        height: 11em;
    }
    #co-import-results>li, #co-invite-results>li {
        height: 16em;
    }
    #img-avatar>img {
        height: 3em;
        width: 3em;
        /*top: -1.5em;*/
        top: 0;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        display: block;
        min-width: 3em;
        min-height: 3em;
    }
    #sd-co-list>li>.contact-name, #co-import-results>li>.contact-name, #co-invite-results>li>.contact-name {
        font-weight: bold;
        position: relative;
        text-align: center;
        height: 2em;
        top: -1.5em;
        /* display: inline-block; */
    }
    #sd-co-list>li>.contact-name {
        width: 46vw;
    }
    #sd-co-list>li>.contact-mail {
        display: none;
    }
    #sd-co-list>li>.contact-mail-compressed {
        position: relative;
        width: 46vw;
        text-align: center;
        display: block !important;
        margin-left: auto;
        margin-right: auto;
        top: -2em;
    }
    #co-import-results>li>.contact-mail, #co-invite-results>li>.contact-mail {
        position: relative;
        /*width: 46vw;*/
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        top: -2em;
    }
    #contact-info {
        display: flex;
        flex-direction: column;
        margin-top: -1.8em;
    }
    #contact-info>* {
        flex: 1 1 auto;
        margin: 0;
        padding: 0 0 0.2em 0;
        font-size: 0.85em;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    #sd-co-list>li>.contact-company, #co-import-results>li>.contact-company, #co-invite-results>li>.contact-company {
        position: relative;
        width: 46vw;
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
        top: -3em;
    }
    #sd-co-list>li>input[type="checkbox"], #co-import-results>li>input[type="checkbox"], #co-invite-results>li>input[type="checkbox"] {
        top: 1.2em;
        float: right;
        right: 9px;
    }
    #co-list>#contact-div {
        width: 46vw;
        min-height: 7em;
        height: 12em;
        display: block;
        padding: 0;
        margin: 1vw;
        max-width: 46vw;
        min-width: 46vw;
    }
    #co-list>#contact-div>#contact-info>.contact-mail {
        display: none;
    }
    #co-list>#contact-div>#contact-info>.contact-mail-compressed {
        /*position: relative;*/
        /*width: 46vw;*/
        /*left: 0em;*/
        /*text-align: center;*/
        /*top: -2em;*/
    }
    .contact-mail {
        display: none;
    }
    .contact-mail-compressed {
        display: block !important;
    }
    #co-list>#contact-div>.contact-name {
        display: block;
    }
    #co-results {
        justify-content: center;
    }
    #co-results>p {
        position: relative !important;
        margin-top: -1em !important;
        margin-bottom: 1em !important;
        margin-left: 1em !important;
    }
    #co-results>#contact-div {
        width: calc(var(--vw, 1vw) * 50);
        padding: 0;
        margin: 0;
        height: auto;
        background: #f2f2f2;
        border-bottom: 1px solid #efefef;
    }
    #co-results>#contact-div>.contact-mail {
        position: relative;
        width: 80vw;
        left: 0em;
        text-align: center;
        top: -2em;
        /*display: block;*/
        margin-left: 0em;
        margin-right: 0em;
    }
    #co-results>#contact-div>.contact-name {
        position: relative;
        /* width: 80vw; */
        left: 5.5em;
        vertical-align: middle;
        text-align: center;
        top: -2em;
        display: block !important;
        max-width: 52vw;
    }
    #co-results>#contact-div>img {
        position: relative;
        top: 2em;
        right: 3em;
    }
    #menu>nav>a {
        padding: 0.6em 1.82em;
    }
    .download-transfer-span>img {
        /* display: none; */
        margin-left: -1.6em;
    }
    #sentFilesView-history>img {
        /* display: none; */
        margin-left: -1.6em;
    }
    #content>#content-2-meta {
        /* padding-bottom: 0; */
    }
    .contained>.download {
        padding: 0;
        margin-top: 0em;
        /**2em**/
        position: relative;
    }
    .contained>.view {
        padding: 0;
        margin-top: 0em;
        /** 0em **/
        position: relative;
    }
    #content-uploading-files>#uploading-filelist {
        min-height: 27em;
    }
    .mobile-head-action i {
        font-size: 1.25em;
    }
    #externals-manual-desc-mobile {
        display: inherit;
    }
    #externals-manual-desc-desktop {
        display: none;
    }
}

@media only screen and (max-width: 420px) {
    #main-settings {
        width: 100vw;
        margin-left: -2.5%;
    }
    #main-settings>p {
        margin-left: 1em;
    }
}

@media only screen and (max-width: 320px) {
    .mobile-head-action i {
        font-size: 0.6em !important;
    }
}

@media only screen and (max-width: 300px) {
    .mobile-head-action i {
        font-size: 0.5em !important;
    }
}

@media only screen and (max-height: 459px) and (max-width: 670px) {
    .providers>header {
        position: relative;
        /* left: -10em; */
        width: auto;
        float: left;
        margin-left: -3em;
        display: inline-block;
        /* margin-top: 5em; */
    }
    .providers>header>img {
        width: 6em;
        margin-top: -2.4em;
        margin-right: -6em;
        bottom: 50%;
        /* margin-left: 1.3em; */
        /* margin-bottom: 10.7em; */
        opacity: 0.5;
    }
}

@media only screen and (max-height: 479px) and (max-width: 322px) {}

@media only screen and (max-height: 290px) {
    .providers>header>img, #signin>div {
        bottom: 10%;
        margin-bottom: 0;
    }
    .providers>header>img {
        margin-bottom: 14.7em;
    }
}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media only print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media only print {
    *, *:before, *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
                                          http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a, a:visited {
        text-decoration: underline;
    }
    a[href]:after {
        content: " (" attr(href) ")";
    }
    abbr[title]:after {
        content: " (" attr(title) ")";
    }
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after, a[href^="javascript:"]:after {
        content: "";
    }
    pre {
        white-space: pre-wrap !important;
    }
    pre, blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {
        display: table-header-group;
    }
    tr, img {
        page-break-inside: avoid;
    }
    p, h2, h3 {
        orphans: 3;
        widows: 3;
    }
    h2, h3 {
        page-break-after: avoid;
    }
}

.blinks {
    animation-name: blink;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: blink;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInOpacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInOpacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeInOpacity {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 1120px) {
    footer>nav.mobile {
        display: block;
    }
}

#thread-summarized-cont.visible {
    opacity: 1;
    display: flex;
}

#thread-summarized-cont {
    margin: 1.8em 0 0 0;
    padding: 0 0 .3em 0;
    flex-direction: column;
    position: relative;
    border-bottom: 1px solid #e0e0e0;
}

#thread-summarized-cont>.right-sided {
    position: absolute;
    bottom: 5px;
    right: 0;
}

#thread-summarized-cont>.sum-avatar {
    width: 8.5em;
}

#thread-summarized-cont #ext-avatar>img {
    /*TDOO : Change the way to differentiate externals*/
    filter: blur(2px);
}

/*First DIV element of the parent*/

#thread-summarized-cont>div:first-of-type {
    padding-bottom: 1em;
}

#thread-summarized-cont>div.sum-recip {
    width: calc(100% - 3.5em);
    display: flex;
    flex-direction: row;
}

#reply-green-box {
    width: 98%;
    margin: .5em auto;
}

#thd-more-info {
    position: absolute;
    right: 5px;
    top: 2px;
}

#thd-more-info i {
    color: black;
    cursor: pointer;
    font-size: 3em;
}

.grid-container-menu {
    display: grid;
    grid-template-columns: 5rem 5rem fit-content(800px);
    grid-template-columns: 5rem 5rem -moz-fit-content(800px);
    grid-template-rows: 2em 2em;
    grid-template-areas: "bell-icon avatar-menu-right  user-menu" "bell-icon avatar-menu-right  company";
    float: right;
    margin-right: 2vw;
}

.grid-container-menu>div {
    display: grid;
    place-items: center;
}

.bell-icon {
    grid-area: bell-icon;
}

.company {
    grid-area: company;
}

.avatar-menu-right {
    grid-area: avatar-menu-right;
}

.user-menu {
    grid-area: user-menu;
    text-align: center;
    padding-top: 5px;
}

.user-menu a.dropdown-button {
    display: flex;
    flex-direction: row;
}

.user-menu #user-name {
    width: 100%;
}

.sidebar {
    height: 100%;
    /* 100% Full-height */
    width: 0;
    /* 0 width - change this with JavaScript */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Stay on top */
    top: 0;
    right: 0;
    background-color: hsl(259deg 6% 81% / 98%);
    overflow-x: hidden;
    /* Disable horizontal scroll */
    padding-top: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .0001em;
    box-shadow: -1px 0px 20px 0px rgb(0 0 0 / 23%);
    /*TODO : Change color*/
    -webkit-transition: font-size .4s ease-out, width .3s;
    -moz-transition: font-size .4s ease-out, width .3s;
    -o-transition: font-size .4s ease-out, width .3s;
    transition: font-size .4s ease-out, width .3s;
}

.sidebar.is-active {
    width: 30vw;
    min-width: fit-content;
    min-width: -moz-fit-content;
    max-width: 80vw;
    font-size: unset;
    /*To ensure the transition is smooth*/
}

.sidebar .closebtn {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 36px;
    padding: 0;
    color: #818181;
}

#co-sidebar .thread {
    display: flex;
    flex-direction: column;
    border-bottom: rgb(58 106 148 / 10%) 1px solid;
    margin-bottom: 0.5em;
}

#side-co-groups span {
    max-width: 50vw;
    overflow-wrap: break-word;
}

#side-co-groups .thread>div {
    max-width: 50vw;
    overflow-wrap: break-word;
}

#side-co-groups .thread>span.date {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}

#side-co-groups .thread-avatar-cont {
    display: flex;
    width: 8.5em;
    height: 4em;
}

#co-list-sum-colapse, #side-co-wrapper {
    max-height: 70%;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-width: fit-content;
    min-width: -moz-fit-content;
    margin: 1em;
    height: 100%;
}

#side-co-info li>span {
    display: inline-block;
    width: 5em;
    min-width: fit-content;
    min-width: -moz-fit-content;
}

#side-co-info {
    display: flex;
    min-width: fit-content;
    min-width: -moz-fit-content;
    width: 90%;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

#user-action-tgl {
    display: flex;
    align-items: center;
    gap: 10%;
    justify-content: flex-end;
}

#user-action-tgl img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

.space-btw {
    justify-content: space-between;
}

.flex {
    display: flex;
}

.flex-al-center {
    align-items: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

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

.sidebar .col-details {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5em;
    border-bottom: rgb(58 106 148 / 10%) 1px solid;
    padding: 0.3em 0.1em;
}

.sidebar .col-details .col-info {
    display: flex;
    flex-direction: column;
    margin: 0 0 0 1em;
    justify-content: space-evenly;
}

#co-list-sum-colapse .other-users-avatar {
    margin-right: 0;
}

#col-thread-sum>div:first-of-type {
    padding-bottom: 1em;
}

.introjs-overlay {
    background: -webkit-radial-gradient( center, ellipse farthest-corner, rgb(0 0 0 / 60%) 0, rgb(0 0 0 / 40%) 100%);
}

.introjs-tooltip {
    width: 300px;
    max-width: 70vw;
}

.introjs-helperLayer {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgb(255, 255, 255);
}

.introjs-helperNumberLayer.rel-right {
    left: unset;
    top: -16px;
    right: -16px;
}

.introjs-helperNumberLayer.rel-bottom-left {
    top: unset;
    bottom: -16px;
    left: unset;
    right: -16px;
}

.introjs-tooltip>.introjs-arrow {
    border: 10px solid #907ac5;
    transform: rotate( 45deg);
    z-index: 2;
}

.introjs-arrow.left {
    top: 11%;
    left: -10px;
    border-top-right-radius: 50%;
}

.introjs-arrow.top {
    left: 11%;
    border-bottom-right-radius: 50%;
}

.news-buttons-wrapper>a {
    padding: 0 1em;
}

#reply-window p.news-buttons-wrapper {
    margin: .5em 0;
}

.news-box a.more {
    display: flex;
    align-items: center;
}

.news-box a.more i {
    font-size: 1.7rem;
}

.shake {
    animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: rotateZ(10deg);
    }
    20%, 80% {
        transform: rotateZ(-5deg);
    }
    30%, 50%, 70% {
        transform: rotateZ(20deg);
    }
    40%, 60% {
        transform: rotateZ(-10deg);
    }
}

[data-custom="th-tooltip-file"], [data-custom="th-tooltip-message"] {
    position: absolute;
    height: -moz-fit-content;
    height: fit-content;
    top: 20vh;
    max-height: 40vh;
    overflow-y: auto;
}

[data-custom="th-tooltip-file"] #side-co-wrapper, [data-custom="th-tooltip-message"] #side-co-wrapper {
    max-height: unset;
    overflow-x: unset;
    overflow-y: unset;
}

.user-list li.file-d-user {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5em;
    border-bottom: rgb(58 106 148 / 10%) 1px solid;
    padding: 0.3em 0.1em;
}

.sidebar .li-avatar {
    width: 4em;
}

.material-icons.loading, .material-icons-outlined.loading {
    opacity: 0;
}

.previews {
    display: flex;
    flex-direction: row-reverse;
    height: 25%;
    width: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 5%;
    flex-grow: 0;
    flex-shrink: 1;
}

.item-preview {
    /*flex: 0 0 9%;*/
    margin: 2px;
    margin-bottom: 10px;
}

.previews .item-preview {
    position: relative;
}

.previews>.img-preview>img {
    object-fit: contain;
    max-height: 15vh;
    height: fit-content;
    width: fit-content;
    max-width: 15em;
}

.replies>.previews>img {
    border: solid;
    border-color: rgba(93, 77, 131, 0.3);
}

.item-preview.docx-preview {
    background-color: white;
    width: 81px;
    overflow: hidden;
    padding: 5px;
    height: 125px;
    margin-top: auto;
    border-color: rgba(93, 77, 131, 0.3);
    border: solid;
}

.item-preview.xlsx-preview {
    background-color: white;
    overflow: hidden;
    height: 81px;
    margin-top: auto;
    text-align: center;
    /* border-color: rgba(93, 77, 131, 0.3);*/
    /*border: solid;*/
}

.previews>.item-preview.xlsx-preview {
    max-width: 125px;
}

.item-preview.xlsx-preview th, .item-preview.xlsx-preview td {
    border: 2px solid black;
}

.shrink * {
    /*-webkit-transform:scale(0.75);
-moz-transform:scale(0.75);
-ms-transform:scale(0.75);
transform:scale(0.75);
*/
    width: fit-content;
    white-space: pre;
}

.mini-shrink {
    position: absolute;
    -webkit-transform: translate(0%) scale(0.25);
    -moz-transform: translate(0%) scale(0.25);
    -ms-transform: translate(0%) scale(0.25);
    transform: translate(0%) scale(0.33);
    transform-origin: left top;
    -webkit-transform-origin: left top;
    top: 0%;
    left: 0%;
}

.previews>.item-preview.xlsx-preview th, .previews>.item-preview.xlsx-preview td {
    font-size: 8px;
    max-height: 81px;
    height: 2px;
    line-height: 2px;
    tab-size: fixed;
    white-space: nowrap;
    text-overflow: ellipsis;
    ;
}

.item-preview.xlsx-preview>table>tbody {
    max-height: 81px;
}

.item-preview.xlsx-preview>table {
    max-height: 125px;
}

.previews>.docx-preview>p {
    font-size: 2px;
}

.previews>.docx-preview>h1 {
    margin: 0;
    font-size: 5px;
}

.full-preview {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 0;
    margin-top: 4em;
    text-align: center;
    backdrop-filter: blur(5px);
    z-index: 2;
    padding: .08em .06em 1.78em 18.2em;
}

.full-preview.hidden {
    display: none;
}

.full-preview>div {
    position: relative;
    width: 100% !important;
    height: 94vh ! important ;
}

.full-preview>.pdfViewer {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 95.5%;
    font-size: large;
}

.full-preview>*>img {
    margin-left: auto;
    margin-right: auto;
    vertical-align: baseline;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    position: relative;
}
.full-preview-ppt {
    margin-left: 19%;
    position: fixed;
    height: 61vh;
    width: 80%;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 0;
    margin-top: 14em;
    text-align: center;
    backdrop-filter: blur(5px);
    z-index: 2;
    /* padding: .08em .06em 1.78em 18.2em; */
    overflow: hidden;

    border: solid var(--main-purple);
}
.full-preview-ppt > .slides-toolbar {
    background-color: var(--main-purple);
}
iframe {
    width: 100% !important;
}

.pdf-img {
    margin-left: auto;
    width: 100%;
}

.full-preview>.docx-preview, .full-preview>.img-preview {
    overflow-y: scroll !important;
}

.full-preview>.item-preview.xlsx-preview {
    overflow: scroll !important;
}

@media only screen and (max-width: 1119px) {
    .full-preview {
        padding: 0;
        margin-top: 0;
    }
    .full-preview-ppt {
        padding: 0;
        margin-top: 0;
        margin-left: 0;
        width: 40em;
        height: 64em;
        overflow-x: scroll;
    }
}

#mic_ico {
    position: relative;
    top: 36%;
    margin-top: -40%;
}

@media only screen and (max-width: 480px) {
    #files-upload {
        width: 95.4vw !important;
        margin: 0.8em 0%;
    }
}

.add-file {
    display: inline-block;
    border-radius: 3px;
    background-color: var(--main-purple);
    font-size: 1.4em;
    padding: 0.6em 2em;
    font-weight: 300;
    color: #fff;
    height: 2.8em;
    border: 1px solid transparent;
}

@media only screen and (min-width: 480px) {
    .add-file {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    #file-up {
        bottom: 5.8em !important;
        margin-left: 1vw;
        left: 0.5em !important;
        display: block !important;
        position: fixed !important;
        z-index: 109 !important;
        width: 14em;
        text-align: center;
        padding-top: .8em;
        padding-left: 0;
        padding-bottom: .6em;
        padding-right: 0;
        height: 5em;
    }
    .add-file {
        bottom: -0.2em !important;
        margin-left: 1vw;
        left: -3.6vw !important;
        display: block !important;
        position: absolute !important;
        z-index: 108 !important;
        width: 9em;
        text-align: center;
        padding-top: .8em;
        padding-left: 0;
        padding-bottom: .6em;
        padding-right: 0;
    }
    .bigscreen.browse.hush-i18n {
        display: none;
    }
    .has-files #uploading-filelist-empty {
        display: none !important;
    }
}
.pptx-preview {
    position: relative;
    width: 16em;
    left: 0%;
    max-height: 17em;
    height: 10em;
}
.pptx-preview > .slides-toolbar >  #slides-next {
    margin-left: 9%;
}
.full-preview-ppt > #all_slides_warpper{
    width: 100% ! important;
    transform: scale(0.75);
    transform-origin: top;
}
#all_slides_warpper > .slide {
    transform-origin : top center
}
.simple-ppt-preview > #all_slides_warpper > .slide {
    transform-origin: top left;
    transform: translateY(5%);
}
.full-preview>div.btn_add-copy-3 {
    position: fixed !important;
    top:2%;
    right:2%;
    width: 25px !important;
    height: 25px !important;
    margin: 0 0 0 95px;
    padding: 8px 7px 7px 8px;
    background-color: #907ac5;
}

html.matomoHsr img{
    display: none;
}