/*
//--------------------------------------------------------------------
// Constants
//--------------------------------------------------------------------
*/

:root {
    --custom-main-color: #626262;
    --bg-color-fo: #bdbdbd;
    --bg-color-bo: #626262;

    --color-primary: #ff9800;
    --plyr-color-main: var(--color-primary);
    --color-primary-light: #ffc947;
    --color-primary-lighter: #fcd98c;
    --color-primary-light-20: rgba(255, 201, 71, 0.2);
    --color-primary-light-50: rgba(255, 201, 71, 0.5);
    --color-primary-dark: #c66900;

    --color-secondary: #2e7d32;
    --color-secondary-light: #60ad5e;
    --color-secondary-lighter: #80a47f;
    --color-secondary-dark: #005005;

    --background-primary: #F2F2F2;
    --background-secondary: #FFFFFF;

    --text-primary: #000000;
    --text-secondary: #FFFFFF;

    --color-alert: #f25c75;
    --color-alert-20: rgba(242, 92, 117, 0.2);
    --color-alert-darker: #9e3b4c;
    --color-positive: #8eab4b;
    --color-positive-darker: #667b34;
    --color-positive-20: rgba(194, 234, 98, 0.2);

    --color-badge-default: #989898;
    --color-badge-default-hover: #626262;

    --color-datatables-odd: rgba(164, 130, 166, 0.15);
    --color-datatables-even: rgba(164, 130, 166, 0.05);

    --bg-edit: #ffc107;
    --bg-new: green;
    --bg-delete: red;
    --bg-disabled: orange;
    --bg-enabled: mediumseagreen;

    --bg-notAvailable: gray;

    --bg-datatab-bg-odd: lightgray;
    --bg-datatab-bg-even: white;

    /*  ----------------- BOOTSTRAP COLORS -----------------  */

    --bs-color-primary: #007bff;
    --bs-color-secondary: #6c757d;
    --bs-color-success: #28a745;
    --bs-color-info: #17a2b8;
    --bs-color-warning: #ffc107;
    --bs-color-danger: #dc3545;
    --bs-color-light: #f8f9fa;
    --bs-color-dark: #343a40;
}

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

.batify-mobile {
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.batify-mobile #masterContainer {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.post-content-show-btn {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    font-weight: bold;
}

.batify-posts-list-mobile .post-content-show-btn {
    margin-top: 30px;
    font-weight: bold;
    font-size: 46px;
}

#masterContainer {
    position: absolute;
    top: 0;
}

.bg-accent {
    background-color: var(--color-primary);
}

.bg-accent-20 {
    background-color: var(--color-primary-light);
}

.bg-accent-light {
    background-color: var(--color-primary-light-20) !important;
}

.bg-accent-darker {
    background-color: var(--color-primary-dark);
}

.bg-positive {
    background-color: var(--color-positive);
}

.bg-alert {
    background-color: var(--color-alert);
}

.bg-positive-20 {
    background-color: var(--color-positive-20);
}

.bg-alert-20 {
    background-color: var(--color-alert-20);
}

.file-received-status {
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

body {
    font-family: Roboto, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 16px;
    font-weight: bold;

    background-image: url("../img/bg.png") !important;
}

h1 {
    font-size: 36px;
    font-weight: initial;
}

a {
    font-weight: initial;
}

.form-tabs .nav-link {
    font-weight: bold;
}

h2 {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-primary-dark);
}

input {
    font-weight: bold !important;
    color: var(--color-primary-dark) !important;
    font-size: 16px !important;
}

.bg-custom {
    background-color: var(--custom-main-color);
    color: white;
}

.btn-custom {
    background-color: var(--custom-main-color);
    color: white;
}

.btn-edit {
    background-color: var(--bg-edit);
    color: white;
}

.btn-add {
    background-color: var(--bg-new);
    color: white;
}

.btn-delete {
    background-color: var(--bg-delete);
    color: white;
}

.btn-disabled {
    background-color: var(--bg-disabled);
    color: white;
}

.btn-enabled {
    background-color: var(--bg-enabled);
    color: white;
}

.btn-accent, .btn-outline-accent, .btn-outline-accent-darker, .btn-outline-accent-darker-white {
    font-weight: bold;
    border-radius: 10px;
    padding: 15px 20px;
    line-height: 20px;
    font-size: 16px;
    height: 53px;
    text-transform: uppercase;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}

.btn-accent {
    background-color: var(--color-primary);
    color: white;
}

.btn-accent-secondary {
    background-color: var(--color-secondary);
    color: white;
}

.btn-accent img, .btn-accent i, .btn-outline-accent img, .btn-outline-accent i {
    padding-right: 20px;
}

.btn-outline-accent:hover img, .btn-outline-accent:hover i {
    filter: brightness(0) invert(1);
}

.btn-outline-accent-darker:hover img, .btn-outline-accent-darker:hover i, .btn-outline-accent-darker-white:hover img, .btn-outline-accent-darker-white:hover i {
    filter: brightness(0) invert(1);
}

.btn-accent:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

.btn-accent-secondary:hover {
    background-color: var(--color-secondary-dark);
    color: white;
}

.btn-outline-accent, .btn-outline-accent-sm {
    background: none;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.btn-outline-accent-darker {
    background: none;
    border: 2px solid var(--color-primary-dark) !important;
    color: var(--color-primary-dark) !important;
}

.btn-outline-accent-darker-white {
    background: none;
    border: 2px solid var(--color-primary-dark) !important;
    color: white !important;
}

.btn-outline-accent:hover {
    background-color: var(--color-primary) !important;
    line-height: 20px;
    border: 2px solid var(--color-primary) !important;
    color: white !important;
}

.custom-select {
    padding: 0px 26px 0px 10px;
}

.page-item.active .page-link {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.page-link {
    color: var(--color-primary-dark);
}

.page-link:hover {
    color: var(--color-primary);
}

.btn-outline-accent-sm:hover {
    background-color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
    color: white !important;
}

.btn-outline-accent-darker-white:hover, .btn-outline-accent-darker:hover {
    background-color: var(--color-primary-dark) !important;
    line-height: 20px;
    color: white !important;
}

.btn-notAvailable {
    background-color: var(--bg-notAvailable);
    color: white;
}

.form-control {
    border-radius: 0;
    border-color: var(--color-primary-dark);
}

.form-control::placeholder {
    opacity: 0.5;
}

select.form-control {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    font-weight: bold !important;
}

.modal-body {
    padding: 20px;
}

.alert-block-error, .alert-block-success {
    width: 100%;
    margin-bottom: 40px;
    padding: 20px;
    align-items: center;
    display: inline-flex;
}

.alert-block-error img, .alert-block-success img {
    margin-right: 20px;
}

.alert-block-error {
    background-color: var(--color-alert-20);
}

.alert-block-error span {
    color: var(--color-alert-darker);
    font-weight: initial;
    font-style: italic;
}

.alert-block-success span {
    color: var(--color-positive-darker);
    font-weight: initial;
    font-style: italic;
}

.alert-block-success {
    background-color: var(--color-positive-20);
}

.nav-link {
    color: white !important;
}

.form-tabs .nav-link {
    color: var(--color-primary) !important;
}

.form-tabs .active {
    color: var(--color-primary-dark) !important;
}

.active {
    color: var(--bs-color-secondary) !important;
}

table.dataTable tbody td {
    vertical-align: middle;
}

.dt-file-status-td {
    text-align: center;
}

.dt-file-status-td span {
    width: 60px;
    padding: 20px;
}

.clickable {
    cursor: pointer;
}

.rf-nav-item {
    display: block;
    padding: .5rem .5rem;
}

.noHover {
    pointer-events: none !important;
}

.form-2nd-page, .form-3rd-page, .form-4th-page, .form-5th-page {
    display: none;
}

.col-form-label {
    color: var(--color-primary-dark);
    font-weight: bold;
}

.text-accent {
    color: var(--color-primary);
}

.text-accent-darker {
    color: var(--color-primary-dark);
}

.text-success {
    color: var(--color-positive) !important;
}

.vertical-divider {
    overflow: hidden;
}

hr {
    border-color: var(--color-primary);
}

.pt-40 {
    padding-top: 40px !important;
}

.pt-80 {
    padding-top: 80px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pb-40 {
    padding-bottom: 40px !important;
}

.pb-80 {
    padding-bottom: 80px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.tail-select {
    width: 100% !important;
}

.form-control {
    font-size: 16px !important;
}

.select-label {
    width: 100% !important;
    font-weight: bold !important;
    color: var(--color-primary) !important;
    font-size: 16px !important;
    border-radius: 0 !important;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.loading-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8) url('../img/ajax-loader.gif') 50% 50% no-repeat;
}

.task-done {
    background: var(--color-positive-20) !important;
    text-decoration: line-through;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading .loading-modal,
body.loading-forced .loading-modal {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loading-modal,
body.loading-forced .loading-modal {
    display: block;
}

.dropdown-option {
    color: var(--color-primary) !important;
}

.dropdown-option.selected {
    color: var(--color-primary-dark) !important;
    font-weight: bold !important;
}

.vertical-divider > div[class^="col-"] {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    margin-bottom: -100px;
    border-left: 1px solid var(--color-primary);
}

.vertical-divider div[class^="col-"]:first-child {
    border-left: none;
    padding-left: 0;
    padding-right: 40px;
}

.vertical-divider div[class^="col-"]:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 40px;
}

.vertical-divider.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
}

.vertical-divider .row {
    margin-right: 0 !important;
}

.col-cb {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.col-cb div:first-child {
    padding-right: 40px;
}

.col-cb input {
    margin-right: 20px !important;
}

.form-check-label {
    color: var(--color-primary-dark);
    font-weight: bold;
}

.form-tabs > li:not(:first-child) {
    border-left: 2px solid var(--color-primary-dark);
}

.form-tabs > li > .nav-link:hover {
    color: var(--color-primary-dark) !important;
    text-decoration: underline !important;
}

.form-tabs > li > .nav-link {
    font-size: 20px !important;
}

.page-header {
    background-color: var(--color-primary);
    color: white;
    padding: 40px 40px 0 40px;
    flex-wrap: wrap;
    display: flex;
}

.page-header h1 {
    padding-bottom: 40px;
}

.page-header div:first-child {
    padding-left: 0 !important;
}

.page-header .nav-link {
    font-size: 20px;
    padding: 20px;
    border-radius: 15px 15px 0 0;
}

.page-header .nav-link.active {
    color: var(--color-primary-dark) !important;
}

.returnLink {
    font-weight: bold;
    color: white;
}

.returnLink:hover {
    font-weight: bold;
    color: white;
    text-decoration: underline;
}

.page-content {
    padding: 40px;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* DATATABLES */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

/*.dataTables_filter{*/
/*    display: none;*/
/*}*/

.dataTables_info {
    margin-top: 30px;
}

.dt-actions {
    text-align: center;
    font-size: 16px;
    color: var(--color-primary);
}

.dt-actions i:not(:last-child) {
    padding-right: 10px;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    background-blend-mode: color-burn;
}

th {
    color: white !important;
    font-weight: bold;
    background-color: var(--color-primary);
}

/*.table-striped tbody tr:nth-of-type(odd) {*/
/*    background-color: var(--color-datatables-odd);*/
/*}*/
/*.table-striped tbody tr:nth-of-type(even) {*/
/*    background-color: var(--color-datatables-even);*/
/*}*/

.pagination .page-item.active .page-link {
    background: var(--color-primary);
}

.pagination .page-item.active .page-link:hover {
    background: var(--color-primary-dark);
}

tbody tr {
    height: 60px;
    font-size: 14px !important;
    font-weight: initial !important;
    color: var(--color-primary-dark) !important;
}

.xdsoft_calendar tr {
    height: initial;
}

tbody td:not(.xdsoft_date) {
    font-size: 14px !important;
    font-weight: initial !important;
    color: var(--color-primary-dark) !important;
}

td > .rf-action-button:not(:last-child) {
    margin-right: 20px;
}

.rf-actions-td {
    width: 170px;
    padding-right: 0 !important;
}

.rf-filters {
    width: 100%;
    margin-bottom: 40px;
    background-color: var(--color-primary-light);
    padding: 40px;
}

.batify-card thead > tr {
    border-radius: 10px !important;
    background: white !important;
}

.batify-card th, .batify-card td {
    text-align: center;
}

.batify-card td {
    vertical-align: middle;
    color: var(--text-primary);
}

.batify-card td > span {
    padding-left: 5px;
    vertical-align: bottom;
}

.contextual-menu-item {
    margin-bottom: 20px;
}

.contextual-menu-item > a {
    width: 100%;
    color: var(--color-primary) !important;
    font-weight: bold;
}

.contextual-menu-item > a:hover {
    color: var(--color-primary-dark) !important;
    cursor: pointer;
}

.contextual-menu-item span {
    vertical-align: bottom;
    padding-right: 10px;
}

.dataTables_length select {
    padding-right: 25px !important;
    height: 100%;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: initial !important;
}

.selectable-rows > tbody tr:hover {
    background-color: var(--color-primary-light) !important;
    cursor: pointer;
}

.selectable-rows > tbody tr:hover td {
    color: black !important;
}

tr.selected {
    background-color: var(--color-primary-dark) !important;
}

tr.selected td {
    color: white !important;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* FOOTER */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.rf-footer {
    height: 80px;
    width: 100%;
    padding: 20px 40px 20px 40px;
    font-size: 16px;
    margin: 0;
    color: var(--color-primary);
    background-color: var(--color-primary-dark);
    display: flex;
}

.footer-home-link {
    font-size: 20px;
    align-items: start;
    align-self: center;
}

.footer-home-link a {
    vertical-align: middle;
    color: var(--color-primary);
}

.footer-home-link a:hover {
    text-decoration: none;
    color: var(--color-primary);
}

.footer-useful-links {
    text-align: right;
    align-self: center;
}

.footer-useful-links a {
    vertical-align: middle;
    color: var(--color-primary);
}

.footer-useful-links > a {
    margin-left: 20px;
}

.footer-social-networks {
    text-align: right;
    align-self: center;
    margin-left: 40px;
}

.footer-social-networks a:not(:first-child) {
    margin-left: 20px;
}

.footer-social-networks a {
    font-size: 20px;
}

.footer-social-networks a:hover {
    color: var(--color-primary);
    text-decoration: none;
}


/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* MENU */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.rf-menu {
    z-index: 1;
    float: left;
    height: 100%;
}

.rf-menu-item-div {
    height: 80px;
    background-color: var(--color-primary-dark);
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: middle;
    display: flex;
    box-shadow: 8px 8px 8px -8px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 2;
}

.rf-menu-item:hover > div {
    background-color: var(--color-primary);
}

.rf-menu-item:hover {
    color: white;
    text-decoration: none;
}

.rf-menu-item {
    color: white;
}

.rf-menu-item-logo {
    width: 40px;
    height: 41px;
    align-self: center;
    font-size: 24px;
    text-align: center;
}

.rf-menu-item-logo i {
    font-size: 40px !important;
    margin-left: -10px;
}

.rf-menu-item-title {
    margin-left: 20px;
    width: 220px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    align-self: center;
    display: none;
    color: white;
}

.rf-menu-item-active {
    color: var(--color-primary) !important;
}

.rf-menu-item-active:hover {
    color: var(--color-primary-dark) !important;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* LOGIN */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.login-title {
    margin-top: 80px;
    margin-bottom: 20px;
    align-items: center;
    padding: 0 20px;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 36px;
}

.login-title > span:first-of-type {
    vertical-align: text-bottom;
    padding-right: 40px;
    font-weight: initial;
    font-size: 46px;
}

.login-title > span:last-of-type {
    text-transform: uppercase;
}

.login-alert {
    width: 100%;
    min-height: 80px;
    background-color: var(--color-alert-20);
    margin-bottom: 40px;
    padding: 20px;
    align-items: center;
    display: flex;
}

.login-alert-ok {
    width: 100%;
    min-height: 80px;
    background-color: var(--color-positive-20);
    margin-bottom: 40px;
    padding: 20px;
    align-items: center;
    display: flex;
}

.login-alert .col:first-child, .login-alert-ok .col:first-child {
    width: 40px;
    max-width: 40px;
    min-width: 40px;
    margin: 0 20px 0 0;
    padding: 0;
}

.login-alert .col:last-child, .login-alert-ok .col:last-child {
    padding: 0;
}

.login-alert span, .login-alert div:last-child, .login-alert-ok span {
    font-weight: initial;
    font-style: italic;
    color: var(--color-primary-dark);
}

.separator {
    margin-bottom: 40px;
}

.login-buttons {
    margin-top: 40px;
    padding: 0 15px 0 15px;
    align-items: center;
}

.login-buttons a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: bold;
    font-style: italic;
    margin-right: 40px;
    opacity: 50%;
}

.login-buttons a:hover {
    color: var(--color-primary-dark);
    opacity: 100%;
}

.forgotten-pwd-button {
    margin-top: 20px;
    padding: 0 15px 0 15px;
}

.forgotten-pwd-button a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: bold;
    font-style: italic;
    opacity: 50%;
}

.not-registered-btn {
    opacity: 100% !important;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* CONTAINERS */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.main-container {
    z-index: 1;
    min-height: calc(100vh - 80px);
    max-height: calc(100vh - 80px);
    padding-top: 40px;
    overflow-y: scroll;
    width: 100%;
    display: block;
}

.rf-container {
    display: table;
    z-index: 1;
    width: 100%;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* HOMEPAGE */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.hp-logo {
    height: 200px;
}

.hp-content .row, .hp-content .col-12, .hp-content .col-6 {
    padding: 0;
    margin: 0;
}

.hp-subtitle {
    font-size: 36px;
    font-style: italic;
    color: var(--color-primary);
    font-weight: initial;
}

.hp-client-wrapper {
    background-color: var(--color-primary);
}

.hp-photographer-wrapper {
    background-color: var(--color-primary-dark);
}

.hp-client-wrapper, .hp-photographer-wrapper {
    padding: 40px 40px 80px 40px;
}

.hp-title-client, .hp-title-photographer {
    padding: 40px 40px 80px 40px;
    color: white;
    font-style: italic;
    font-weight: initial;
    font-size: 36px;
    width: 100%;
}

.hp-title-client span, .hp-title-photographer span {
    padding-left: 40px;
}

.hp-title-client hr {
    border-color: var(--color-primary-dark);
}

.hp-title-photographer hr {
    border-color: var(--color-primary);
}

.hp-buttons {
    padding-bottom: 80px;
    width: 100%;
    text-align: center;
}

.hp-button-connect-client, .hp-button-register-client, .hp-button-connect-photographer, .hp-button-register-photographer {
    font-weight: bold;
    border-radius: 27px;
    padding: 15px 20px;
    line-height: 20px;
    font-size: 16px;
    height: 53px;
    color: white !important;
}

.hp-button-connect-client {
    border: solid 2px var(--color-primary-dark);
    background-color: var(--color-primary);
    color: white;
    margin-right: 40px;
}

.hp-button-connect-client:hover {
    background-color: var(--color-primary-dark);
}

.hp-button-register-client {
    border: solid 2px white;
    background-color: var(--color-primary);
    color: white;
    padding: 15px 40px 15px 40px;
}

.hp-button-register-client:hover {
    background-color: var(--color-primary-dark);
}

.hp-button-connect-photographer {
    border: solid 2px var(--color-primary);
    background-color: var(--color-primary-dark);
    color: white;
    margin-right: 40px;
}

.hp-button-connect-photographer:hover {
    background-color: var(--color-primary);
}

.hp-button-register-photographer {
    border: solid 2px white;
    background-color: var(--color-primary-dark);
    color: white;
    padding: 15px 40px 15px 40px;
}

.hp-button-register-photographer:hover {
    background-color: var(--color-primary);
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* GLOBAL HEADER */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.global-logo {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 0;
    width: 300px;
}

.global-header-wrapper, .global-header-wrapper-no-shadow {
    /*width: calc(100vw);*/
    width: 100%;
    min-width: max-content;
    display: flex;
    background: var(--color-primary);
    height: 80px;
    padding: 10px 40px 10px 0;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 4;
}

.global-header-wrapper-no-shadow {
    width: 100%;
    display: flex;
    background-color: initial;
    height: 80px;
    padding: 10px 40px 10px 0;
    box-shadow: none;
    position: relative;
    z-index: 4;
}

.sub-header-wrapper {
    width: 100%;
    display: flex;
    background: white;
    height: 80px;
    padding: 0 40px 0 40px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 3;
    align-items: center;
}

.global-header-wrapper-no-shadow {
    box-shadow: none;
    height: 80px;
    padding: 0;
}

.global-header-wrapper > div:first-child {
    padding-left: 0;
    max-width: 265px;
}

.sub-header-wrapper > div {
    height: auto;
    width: auto;
}

.sub-header-wrapper > div:first-child {
    width: 265px;
    border-right: solid 1px var(--color-primary);
    padding-right: 40px;
}

.sub-header-wrapper > div:first-child > select {
    border: none;
}

.sub-header-wrapper > div:not(:first-child) {
    padding-left: 40px;
    text-transform: uppercase;
}

.sub-header-wrapper > div:not(:first-child) > a {
    color: var(--text-primary);
    font-weight: bold;
    font-size: 16px;
}

.sub-header-wrapper > div:not(:first-child) > a > span {
    vertical-align: top;
    margin-right: 20px;
}

.sub-header-wrapper > div:not(:first-child) > a:hover {
    color: var(--color-primary);
    font-weight: bolder;
}

.sub-header-wrapper > div > a {
    display: flex;
}

.right-menu {
    width: 350px;
    max-width: 350px;
    min-width: 350px;
    margin-left: 40px;
}

.left-menu {
    width: 350px;
    margin-right: 40px;
    max-width: 350px;
    min-width: 350px;
}

.central-content {
    margin-left: auto;
    margin-right: auto;
    min-width: 600px;
}

@media only screen and (max-width: 1540px) {
    .sub-header-wrapper a div {
        /*display: none;*/
        width: 0;
        overflow: hidden;
        -webkit-transition: width 0.25s linear;
        -moz-transition: width 0.25s linear;
        -ms-transition: width 0.25s linear;
        -o-transition: width 0.25s linear;
        transition: width 0.25s linear;
    }

    .sub-header-wrapper a:hover div {
        /*display: initial;*/
        width: 100%;
        -webkit-transition: width 0.25s linear;
        -moz-transition: width 0.25s linear;
        -ms-transition: width 0.25s linear;
        -o-transition: width 0.25s linear;
        transition: width 0.25s linear;
    }

    .sub-header-wrapper > div:not(:first-of-type):not(:nth-child(2)) {
        padding-left: 0;
    }

    .sub-header-wrapper > div:not(:first-of-type) > a {
        padding-right: 20px;
    }

    .right-menu {
        position: absolute;
        left: 25px;
        top: 440px;
        margin-left: 0;
    }

    .subscribers-list-menu {
        top: 520px;
    }

    .non-subscribers-list-menu, .companies-list-menu {
        top: 390px;
    }
}

.global-header-wrapper > div {
    align-self: center;
}

.global-header-right {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    /*min-width: 550px;*/
    max-width: fit-content;
    min-width: max-content;
}

.global-header-worksite-selector {
    display: flex;
    min-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.global-header-worksite-selector > label {
    margin-right: 20px;
    color: white;
    align-self: center;
    text-transform: uppercase;
    margin-bottom: 0;
}

.global-header-help {
    margin-right: 20px;
    vertical-align: middle;
    align-self: center;
}

.global-header-dropdown {
    font-size: 20px;
    color: var(--color-primary-dark);
    margin-left: 0;
    vertical-align: middle;
}

.global-header-dropdown img {
    margin-right: 20px;
    vertical-align: middle;
}

.global-header-dropdown i {
    margin-left: 20px;
    color: var(--color-primary);
    vertical-align: middle;
}

.global-header-wrapper .dropdown-menu {
    margin-top: 20px;
}

.global-header-wrapper .dropdown-item {
    font-size: 16px;
    color: var(--color-primary-dark);
}

.global-header-wrapper .dropdown-item i {
    margin-right: 20px;
}

.global-header-dropdown:hover {
    text-decoration: none;
    color: var(--color-primary-dark);
}

.global-header-logo {
    height: 60px;
    padding-left: 20px;
}

.global-header-logo {
    height: 60px;
    padding-left: 20px;
}

.sub-header-logo {
    height: 60px;
    padding-left: 20px;
}

.notification-badge {
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: var(--color-primary-dark);
    border: 2px var(--color-primary-dark) solid;
}

.notification-badge:hover {
    text-decoration: none;
    background: var(--color-primary-dark);
    color: white;
}

.notification-badge-alert {
    background: var(--color-alert);
    color: white;
    border: 2px var(--color-alert) solid;
}

.notification-badge-alert:hover {
    text-decoration: none;
    background: var(--color-alert-darker);
    border: 2px var(--color-alert-darker) solid;
    color: white;
}

.page-header-title {
    font-size: 36px;
    color: var(--text-secondary);
    margin-left: 20px;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* FORM STEPS */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.progress-container {
    text-align: center;
    align-items: center;
    align-content: center;
    display: inline-flex;
    padding-top: 41px;
}

.progressbar {
    counter-reset: step;
    width: 1000px;
    display: flex;
    justify-content: center;
}

.progressbar li {
    list-style-type: none;
    /* width: 32%; */
    float: left;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    text-align: center;
    color: var(--color-primary-dark);
}

.progressbar li .active {
    color: var(--color-primary);
}

.progressbar li:before {
    width: 30px;
    height: 30px;
    content: " ";
    line-height: 30px;
    border: 2px solid var(--color-primary-dark);
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
}

.progressbar li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: transparent;
    border: dashed 2px var(--color-primary);
    opacity: 50%;
    top: 13px;
    left: -50%;
    z-index: -1;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active {
    color: var(--color-primary);
    opacity: 100%;
}

.progressbar li.active:after {
    color: var(--color-primary);
    opacity: 100% !important;
    border-style: solid !important;
}

.progressbar li.active:before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.progressbar li.active + li:after {
    background-color: transparent;
    border: dashed 2px var(--color-primary);
    opacity: 50%;
}

.progressbar li span {
    top: -85px;
    position: relative;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* WORKFLOW STEPS */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.progress-container-wf {
    text-align: center;
    align-items: center;
    align-content: center;
    display: inline-flex;
    padding-top: 41px;
    width: 100%;
}

.progressbar-wf {
    counter-reset: step;
}

.progressbar-wf li {
    list-style-type: none;
    width: 200px;
    float: left;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    text-align: center;
    color: var(--color-primary-dark);
    padding-bottom: 40px;
}

.progressbar-wf li .active {
    color: var(--color-primary);
}

.progressbar-wf li:before {
    width: 20px;
    height: 20px;
    content: " ";
    line-height: 20px;
    border: 2px solid var(--color-primary-dark);
    display: block;
    text-align: center;
    margin: 0 auto 10px auto;
    border-radius: 50%;
    background-color: white;
}

.progressbar-wf li:after {
    width: 100%;
    height: 2px;
    content: '';
    position: absolute;
    background-color: transparent;
    border: dashed 2px var(--color-primary);
    opacity: 50%;
    top: 8px;
    left: -50%;
    z-index: -1;
}

.progressbar-wf li:first-child:after {
    content: none;
}

.progressbar-wf li.active {
    color: var(--color-primary);
    opacity: 100%;
}

.progressbar-wf li.active:after {
    color: var(--color-primary);
    opacity: 100% !important;
    border-style: solid !important;
}

.progressbar-wf li.active:before {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.progressbar-wf li.active + li:after {
    background-color: transparent;
    border: dashed 2px var(--color-primary);
    opacity: 50%;
}

.progressbar-wf li span {
    top: -85px;
    position: relative;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* PHOTOGRAPHER REGISTER FORM */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.p-register-form-title {
    font-size: 36px;
    color: var(--color-primary);
    font-weight: initial;
}

.p-register-form-content .col-6:first-child {
    padding-left: 100px !important;
}

.p-register-form-content .col-6:last-child {
    padding-right: 100px !important;
}

.password-checks {
    padding-top: 20px;
    /*font-weight: 16px;*/
    color: var(--color-primary-dark);
}

.password-checks li {
    padding-top: 20px;
}

.password-checks ul {
    padding-bottom: 20px;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* INPUTS */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.is-invalid {
    border-color: var(--color-alert) !important;
}

.invalid-feedback {
    display: block;
}

.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
    position: absolute;
    width: auto;
    bottom: 28px;
    right: 15px;
    margin-top: 0;
    font-size: 16px;
    color: var(--color-alert);
}

.valid-feedback.feedback-icon-no-text,
.invalid-feedback.feedback-icon-no-text {
    position: absolute;
    width: auto;
    bottom: 5px;
    right: 25px;
    margin-top: 0;
    font-size: 16px;
    color: var(--color-alert);
}

.email-content-writer {
    font-weight: initial !important;
    font-style: initial !important;
}

.trumbowyg-button-pane {
    background-color: var(--color-primary);
}

.trumbowyg-box svg, .trumbowyg-modal svg {
    fill: white;
}

.trumbowyg-button-group button:hover svg {
    fill: white;
}

.trumbowyg-button-pane button {
    color: white;
}

.trumbowyg-button-pane button.trumbowyg-active, .trumbowyg-button-pane button:not(.trumbowyg-disable):focus, .trumbowyg-button-pane button:not(.trumbowyg-disable):hover {
    background-color: var(--color-primary-dark);
    color: white;
    fill: white;
}

.trumbowyg-editor table td {
    border: solid 1px var(--color-primary-dark);
    border-top: solid 1px var(--color-primary-dark) !important;
}

.popover {
    background: var(--color-positive);
    font-weight: bold;
}

.arrow:after {
    border-color: var(--color-positive);
}

.rf-toolbar {
    display: inline-flex;
    margin-bottom: 40px;
    width: 100%;
}

.rf-toolbar span {
    align-self: center;
}

.rf-toolbar span:not(:first-child) {
    text-align: right;
    width: 100%;
}

.toolbar-margin-right {
    margin-right: 40px;
}

.rf-search-input {
    width: 300px;
    font-weight: bold;
    border-radius: 27px;
    padding: 16px 15px 16px 50px;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary-dark) !important;
    height: 53px;

    background-image: url('../img/icons/_x32_-Magnifying_Glass.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-position-x: 16px;
}

.rf-search-input:focus {
    border: 2px solid var(--color-primary-dark) !important;
    outline: none;
}

.rf-search-input::placeholder {
    opacity: 25% !important;
    font-weight: bold;
}

textarea {
    border-color: var(--color-primary-dark) !important;
    color: var(--color-primary-dark) !important;
    font-weight: bold !important;
}

input:disabled, textarea:disabled {
    background: white !important;
    /*border-color: var(--color-primary-dark-20) !important;*/
}

select:disabled {
    background: white !important;
    border-color: var(--color-primary-light) !important;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* DATEPICKER */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.ui-widget {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif !important;
    font-size: 16px !important;
}

.ui-widget-header {
    background: var(--color-primary) !important;
    color: white !important;
    font-weight: bold;
}

.ui-icon {
    color: white !important;
}

.ui-state-default.ui-state-highlight {
    border-color: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: white !important;
    font-weight: bold;
}

.ui-state-default.ui-state-highlight:before {
    opacity: 50%;
}

.ui-state-default.ui-state-active {
    border-color: var(--color-primary-dark) !important;
    background-color: var(--color-primary-dark) !important;
    color: white !important;
    font-weight: bold;
}

.select-dropdown {
    position: relative !important;
}

.tail-select .select-dropdown {
    position: absolute !important;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* ADMIN HOME */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.admin-links-container {
    margin-top: -40px;
    margin-right: -40px;
}

.admin-link-card {
    background-color: var(--color-primary-light);
    margin-top: 40px;
    margin-right: 40px;
    width: 500px;
    padding: 40px 40px 80px 40px;
    display: inline-flex;
    color: var(--color-primary);
}

.admin-link-card:hover {
    /*background-color: var(--color-primary-dark-20);*/
}

.admin-link-card span {
    font-size: 36px;
    font-weight: initial;
    text-decoration: none !important;
}

.admin-link-card img {
    padding-top: 10px;
    margin-right: 40px;
    width: 40px;
    align-self: start;
}

.fa-action-btn {
    font-size: 18px;
    vertical-align: text-top;
    padding-left: 5px;
    color: var(--color-primary);
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* TRUMBOWYG */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.trumbowyg-editor, .no-global-css {
    align-content: initial;
    align-items: initial;
    align-self: initial;
    alignment-baseline: initial;
    background: initial;
    font-family: initial;
    font-weight: initial;
    color: initial;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* FILE UPLOAD */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.fileUploadDropArea.highlight {
    border-color: var(--color-primary);
}

.border-file-upload-area {
    border: dashed 5px;
}

.border-accent {
    border-color: var(--color-primary-light) !important;
}

.border-accent-darker {
    border-color: var(--color-primary) !important;
}

.fileUploadDropArea.highlight {
    border-color: var(--color-primary);
}

.global-header-right > div {
    display: flex;
    align-items: center;
}

.global-header-right > div > div:not(:last-of-type) {
    padding-right: 20px;
    width: auto;
}

.sub-header-wrapper > div:last-of-type {
    position: absolute;
    right: 40px;
}

.sub-header-wrapper > div:last-of-type > a {
    color: var(--color-secondary);
}

.sub-header-wrapper > div:last-of-type > a:hover {
    color: var(--color-secondary-dark);
}

.notification-badge-icon {
    font-size: 28px !important;
    color: var(--text-secondary);
}

.notification-badge-icon:hover {
    color: var(--color-primary-dark);
}

.my-profile {
    color: var(--text-secondary);
    font-weight: bold;
}

a:hover {
    text-decoration: none;
    color: var(--color-primary-dark);
}

.user-role {
    font-size: 14px;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* CARDS */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

form > .row > .col > .batify-card:not(:first-of-type) {
    margin-top: 40px;
}

.batify-card {
    background-color: white;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
    padding: 40px;
    border-radius: 10px;
    height: fit-content;
}

.messages-list::-webkit-scrollbar {
    display: none !important;
}

.messages-list:hover::-webkit-scrollbar {
    /*display: initial !important;*/
}

/* width */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar:hover {
    display: initial;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
    display: initial;
    background: #888;
}

body:hover::-webkit-scrollbar-thumb,
.batify-posts-list:hover::-webkit-scrollbar-thumb,
.batify-tasks-list:hover::-webkit-scrollbar-thumb {
    background: #888;
    display: initial;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary) !important;
}

.batify-separator {
    margin-bottom: 40px;
    margin-top: 40px;
}

.vertical-divider > div[class^="col-"] {
    padding-bottom: initial !important;
    margin-bottom: initial !important;
}

.btn-accent {
    border-color: white;
    border-width: 2px;
}

.btn-outline-accent {
    border-color: var(--color-primary);
    border-width: 2px;
}

.btn-outline-delete {
    border-color: var(--bg-delete);
    color: var(--bg-delete);
    border-width: 2px;
}

.btn-outline-delete:hover {
    background-color: var(--bg-delete);
    color: white;
}

.g-recaptcha > div:first-of-type {
    display: contents !important;
}

.page-title {
}

.btn-sm {
    margin-left: 10px;
    padding: 3px 10px 3px 10px;
    height: 100%;
    font-size: 14px;
    box-shadow: none;
}

.centered-label {
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

.delete-btn, .modal-close, .close {
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    background-color: rgba(10, 10, 10, .2) !important;
    border: none !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    display: inline-block !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    font-size: 0 !important;
    height: 20px !important;
    max-height: 20px !important;
    max-width: 20px !important;
    min-height: 20px !important;
    min-width: 20px !important;
    outline: 0 !important;
    position: relative !important;
    vertical-align: top !important;
    width: 20px !important;
}

.delete-btn::before, .modal-close::before, .close::before {
    height: 2px !important;
    width: 50% !important;
}

.delete-btn::after, .delete-btn::before, .modal-close::after, .modal-close::before, .close::after, .close::before {
    background-color: #fff !important;
    content: "" !important;
    display: block !important;
    left: 50% !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) rotate(45deg) !important;
    transform-origin: center center !important;
}

.delete-btn::after, .modal-close::after, .close::after {
    height: 50% !important;
    width: 2px !important;
}

.close {
    opacity: 1 !important;
}

.modal-header .close {
    margin: 0 !important;
}

.close:hover {
    background-color: var(--color-badge-default-hover) !important;
}

.is-small.delete-btn, .is-small.modal-close, .is-small.close {
    height: 16px !important;
    max-height: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    min-width: 16px !important;
    width: 16px !important;
}

/* ----------------------------- */
/* ----------------------------- */
/* ----------------------------- */

.toast {
    box-shadow: -0.5rem 0.55rem 0.5rem rgb(0 0 0 / 20%);
    border-radius: 15px;
    border: 2px solid white;
}

.toast-header {
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.toast-body {
    padding: .75rem
}

#toast-container {
    z-index: 1060 !important;
}

.toast-header {
    color: var(--text-secondary);
    background-color: var(--color-primary);
}

.toast-header img {
    height: 30px;
    width: 30px;
}

.toast-header button {
    margin-left: 20px;
    color: black;
}

.toast-body {
    background-color: var(--color-primary);
    font-size: 16px;
    font-weight: initial;
    color: white;
}

.toast-error {
    background-color: var(--color-alert-20);
    color: var(--color-alert);
}

.toast-error + .toast-body {
    background-color: var(--color-alert-20);
    color: black;
}

.toast-ok {
    background-color: var(--color-positive-20);
    color: var(--color-positive);
}

.toast-ok + .toast-body {
    background-color: var(--color-positive-20);
    color: black;
}

.btn-accent.btn-request-accept {
    border-color: var(--color-positive) !important;
    background-color: var(--color-positive) !important;
}

.btn-accent.btn-request-accept:hover {
    border-color: var(--color-positive-darker) !important;
    background-color: var(--color-positive-darker) !important;
}

.btn-outline-accent.btn-request-decline {
    border-color: var(--color-alert) !important;
    color: var(--color-alert) !important;
}

.btn-outline-accent.btn-request-decline:hover {
    border-color: var(--color-alert) !important;
    background-color: var(--color-alert) !important;
    color: white !important;
}

.modal-content {
    border: 2px solid var(--color-primary) !important;
    border-radius: 10px !important;
}

tr.alert-danger {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border-color: #f5c6cb !important;
}

tr.alert-danger td {
    color: #721c24 !important;
}

tr.alert-danger.selected {
    background-color: #7e6767 !important;
}

tr.alert-danger.selected td {
    color: white !important;
    font-weight: bold;
}

table.table-sm > tbody tr {
    height: initial;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* POSTS                                                        */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

#postFormModal .row {
    margin-left: 0;
    margin-right: 0;
}

#postFormModal .row:not(:first-of-type) {
    margin-top: 20px;
}

.batify-post-form-content {
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    resize: none; /*remove the resize handle on the bottom right*/
    font-size: 1.5em;
    color: black !important;
}

.post-form-file, .post-form-task {
    box-shadow: 0 6px 6px rgb(0 0 0 / 16%);
    border-radius: 15px;
    width: 100%;
    padding: 20px;
    border: 2px solid var(--color-primary);
}

.post-form-task {
    padding: 20px;
    display: flex;
}

.post-form-file span:first-of-type {
    vertical-align: middle;
    font-size: 36px;
    margin-right: 10px;
}

.post-form-task > span:first-of-type {
    vertical-align: middle;
    font-size: 56px;
    margin-right: 10px;
}

.post-form-file span:not(:first-of-type) {
    vertical-align: middle;
}

.post-form-task > span:not(:first-of-type) {
    align-self: center;
}

.post-form-task > span:not(:first-of-type) > span:not(:first-of-type) {
    font-size: 14px;
    opacity: 0.75;
}

.post-form-task > span:not(:first-of-type) > span:first-of-type {
    font-size: 16px;
    font-weight: bold;
}

.post-form-file button, .post-form-task button {
    vertical-align: sub !important;
    right: 35px;
    margin-top: 7px;
    position: absolute !important;
}

.post-form-file button:hover {
    background-color: red !important;
    opacity: 0.7;
}

.batify-post-form-content:focus {
    border: none;
}

.batify-post-form {
    height: 130px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.batify-post-form > .batify-card {
    margin-left: 0;
    margin-right: 0;
    padding: 12px 16px;
    margin-top: 0;
}

.post-creation-form-btn {
    width: calc(100% - 80px);
    border-radius: 30px;
    background-color: var(--color-primary-light-20);
    padding: 10px 20px;
    cursor: pointer;
    font-weight: initial;
}

.post-creation-form-btn:hover {
    background-color: var(--color-primary-light-50);
    font-weight: bold;
}

.post-form-footer {
    margin-left: 0;
    margin-right: 0;
    border: lightgray 1px solid;
    border-radius: 10px;
}

.post-form-footer [class*="col-"] {
    vertical-align: middle;
    padding: 10px 0 10px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
}

.post-form-footer [class*="col-"]:hover {
    background-color: var(--background-primary);
    font-weight: bold;
}

.post-form-footer [class*="col-"] span {
    font-size: 28px !important;
    vertical-align: middle;
    margin-right: 10px;
}

.post-creation-form-btn > span {
    width: 100%;
    vertical-align: sub;
}

.post-author-pp {
    margin-right: 10px !important;
}

.post-author-pp img, .comment-author-pp img {
    background: lightgray;
    border-radius: 50%;
}

.post-visibility {
    margin-left: auto;
}

.post-visibility .dropdown-toggle {
    background-color: var(--color-primary) !important;
    padding: 10px;
    border-radius: 7px;
    color: white;
    font-weight: bold;
}

.post-visibility .dropdown-toggle:hover,
.post-visibility .dropdown-toggle:active {
    background-color: var(--color-primary-dark) !important;
}

.post-visibility .dropdown-toggle span {
    margin-right: 5px;
    vertical-align: text-bottom;
}

.post-hashtag-input {
    width: 100%;
    padding-top: 10px;
}

.post-tag-input {
    width: 100%;
    padding-top: 10px;
}

.post-header > div:last-child {
    margin-left: auto;
}

.post-header {
    padding-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.post-author-name > a {
    font-size: 14px;
}

.post-content {
    margin-left: 20px;
    margin-right: 20px;
    word-break: break-word;
}

.post-content-container {
    -webkit-transition: max-height 0.25s linear;
    -moz-transition: max-height 0.25s linear;
    -ms-transition: max-height 0.25s linear;
    -o-transition: max-height 0.25s linear;
    transition: max-height 0.25s linear;
}

.post-content-container.post-content-less {
    max-height: 200px;
    overflow-y: hidden;
}

.post-content-less::before {
    content: "";
    margin-top: -20px;
    display: block;
    top: 210px;
    position: relative;
    height: 20px;
    width: 610px;
    background: linear-gradient(0deg, lightgray, gray, white);
    z-index: 1;
    filter: blur(15px);
}

.post-content-container.post-content-more {
    max-height: max-content;
    overflow-y: hidden;
}

.post-content > span:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.post-content > .plyr {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.post-content > .post-form-file, .post-content > .post-form-task {
    display: flex;
}

.post-content > .post-form-file > span:last-of-type, .post-content > .post-form-task > span:last-of-type {
    margin-left: auto;
    color: var(--color-primary);
    font-size: 38px;
}

.post-content > .post-form-file > span, .post-content > .post-form-task > span {
    align-self: center;
}

.post-single-image {
    box-shadow: 0 0 10px rgb(0 0 0 / 60%);
    border-radius: 7px;
}

.post-single-image > img {
    width: 605px;
    object-fit: cover;
    border-radius: 7px;
    object-position: top;
    max-height: 400px;
}

.post-reactions {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    font-size: 14px;
    cursor: pointer;
}

.post-reactions > span {
    opacity: 75%;
    min-height: 27px;
}

.post-reactions > span:last-of-type {
    margin-left: auto;
}

.post-reactions-icons > span {
    font-size: 21px;
}

.post-reactions > span:hover {
    opacity: 100%;
    text-decoration: underline;
    font-weight: bold;
}

.post-footer {
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 5px;
}

.batify-tasks-list-mobile .post-footer {
    padding-top: 5px;
}

.post-footer [class*="col-"] {
    vertical-align: middle;
    padding: 10px 0 10px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
}

.post-footer [class*="col-"]:hover {
    background-color: var(--background-primary);
    font-weight: bold;
}

.post-footer [class*="col-"] span {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 10px;
}

.post-author-name div {
    font-size: 12px;
    display: flex;
    opacity: 50%;
}

.batify-post, .batify-task, .batify-contact {
    margin-bottom: 20px;
    margin-top: 0;
    font-weight: initial;
    padding: 0;
    border-radius: 10px;
}

.batify-mobile .batify-post,
.batify-mobile .batify-task,
.batify-mobile .batify-contact {
    margin: 0 0 30px;
    max-width: calc(97vw);
}

.batify-post hr, .batify-task hr, .batify-contact hr {
    margin-bottom: 5px;
    margin-top: 5px;
    border-color: initial;
    opacity: 20%;
}

.batify-tasks-list {
    overflow-y: scroll;
    max-height: calc(100vh - 200px);
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    min-width: 680px;
    margin-top: 90px;
    padding: 0;
}

.batify-tasks-list-mobile {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 100%;
    font-size: 42px;
    margin-top: 20px;
    padding: 0;
    width: 100%;
    min-width: 100%;
}

.batify-tasks-list > div {
    margin-left: auto;
    margin-right: auto;
}

.batify-tasks-list > div:first-of-type {
    margin-top: -40px;
}

.batify-mobile .dropdown-item-task-status > span {
    font-size: 44px !important;
}

.batify-posts-list {
    overflow-y: scroll;
    max-height: calc(100vh - 120px);
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    min-width: 680px;
    padding: 0;
}

.batify-posts-list > div {
    margin-left: auto;
    margin-right: auto;
}

.batify-posts-list > div,
.batify-posts-list > hr,
.batify-tasks-list > div,
.batify-tasks-list > hr {
    max-width: 650px;
}

.batify-tasks-list-mobile > div,
.batify-tasks-list-mobile > hr,
.batify-tasks-list-mobile > div,
.batify-tasks-list-mobile > hr {
    max-width: none;
    padding-left: 10px;
    padding-right: 10px;
}

.batify-posts-list > div:last-of-type {
    margin-top: 40px;
}

.hidden {
    background: none;
    box-shadow: none;
}

.modal-footer > .btn-accent {
    box-shadow: none;
    border: none;
    font-size: 14px;
    padding: 12px;
    height: auto;
}

.input-group-append > .btn {
    padding: 5px 10px !important;
    height: auto;
    box-shadow: none;
    border-radius: 0 7px 7px 0;
    border-width: 1px !important;
    margin: 0;
}

.btn-accent-small span,
.btn-outline-accent-sm span {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 10px;
}

.btn-accent-small,
.btn-outline-accent-sm {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* -------------- AUTOCOMPLETE -------------- */

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid var(--color-primary);
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
}

.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: var(--color-primary-lighter);
}

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: var(--color-primary-lighter) !important;
}

/* -------------- BADGE PILL -------------- */

.post-badge {
    background-color: var(--color-badge-default);
    color: white;
    cursor: pointer;
    padding: 5px 7px;
    border-radius: 5px;
}

.post-badge:hover {
    background-color: var(--color-badge-default-hover);
    color: white;
}

.post-badge-icon {
    font-size: 14px !important;
    vertical-align: middle;
}

.post-badge-text {
    font-size: 12px !important;
    vertical-align: middle;
}

.post-badge-action {
    font-size: 26px !important;
    vertical-align: middle;
}

.post-badge-hashtag-add, .post-badge-hashtag-display {
    background-color: var(--color-primary);
}

.post-badge-hashtag-add:hover, .post-badge-hashtag-display:hover {
    background-color: var(--color-primary-dark);
}

.post-badge-tag-add, .post-badge-tag-display {
    background-color: var(--color-secondary);
}

.post-badge-tag-add:hover, .post-badge-tag-display:hover {
    background-color: var(--color-secondary-dark);
}

.post-hashtags-list > span {
    margin-right: 5px;
    margin-bottom: 5px;
}

.batify-posts-list-mobile .post-hashtags-list > span {
    margin-right: 20px;
    margin-bottom: 20px;
}

.post-tags-list > span {
    margin-right: 5px;
}

.post-hashtags-list .post-badge-hashtag-add:hover {
    background-color: var(--color-primary);
}

.post-hashtags-list .post-badge-hashtag-add {
    cursor: initial;
}

.post-hashtags-list .post-badge button, .post-tags-list .post-badge button, .search-tags-list .post-badge button {
    margin-left: 5px;
    height: 14px !important;
    max-height: 14px !important;
    min-height: 14px !important;
}

/* -------------- GALLERY -------------- */

.docs-pictures {
    list-style: none;
    margin: 0;
    padding: 0;
}

.docs-pictures > li {
    border: 1px solid transparent;
    float: left;
    height: 150px;
    margin: 0 -1px -1px 0;
    overflow: hidden;
    width: calc(605px / 4);
}

#postFormImages.docs-pictures > li {
    height: calc(464px / 4);
    width: calc(464px / 4);
}

.docs-pictures > li.gallery-info {
    margin-left: -149px;
    background-color: rgba(0, 0, 0, 0.7);
    display: inline-table;
    cursor: zoom-in;
    height: 148px;
    margin-top: 1px;
}

.docs-pictures > li.gallery-info > span {
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    font-size: 36px;
}

.docs-pictures > li > img {
    /*cursor: -webkit-zoom-in;*/
    cursor: zoom-in;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

#postFormImages li > img {
    height: 125px;
    cursor: initial;
}

#postFormImages li > button {
    position: absolute !important;
    margin-left: -20px;
    margin-top: 5px;
}

#postFormImages li > button:hover {
    background-color: red !important;
    opacity: 0.7;
}

.dropdown-menu {
    border: solid 1px var(--color-primary);
    padding: 0;
}

.batify-mobile .dropdown-menu {
    border: solid 6px var(--color-primary);
}

.dropdown-item {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.batify-mobile .dropdown-item {
    padding-top: 20px;
    padding-bottom: 20px;
}

.dropdown-item:hover {
    background-color: var(--color-primary-light);
}

.dropdown-item > span {
    margin-right: 10px;
    vertical-align: middle;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* POSTS COMMENTS                                               */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.post-comments {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 15px;
}

.comment {
    display: flex;
    width: 100%;
}

.comment-container {
    width: 100%;
}

.post-comments .comment {
    margin-bottom: 10px;
}

.post-comments .comment:last-of-type {
    margin-bottom: 15px;
}

.comment-author-pp {
    margin-right: 10px;
}

.comment-content-container {
    width: fit-content;
}

.comment-content-container, .comment-input {
    background-color: var(--background-primary);
    border-radius: 10px;
    padding: 5px 10px;
}

.comment-author-name {
    font-weight: bold;
    font-size: 13px;
}

.comment-content {
    font-size: 14px;
    line-height: 18px;
}

.comment-footer {
    font-size: 12px;
    opacity: 50%;
    margin-top: 2px;
    padding-left: 5px;
}

.comment-footer span {
    margin-right: 10px;
}

.comment-footer span.clickable:hover {
    opacity: 100%;
    text-decoration: underline;
    font-weight: bold;
}

.comment-input {
    width: 100% !important;
    min-width: 540px;
    border: none;
    color: initial !important;
    font-weight: initial !important;
    padding-top: 7px;
    padding-bottom: 7px;
    resize: none;
    font-size: 16px !important;
    overflow: hidden;
}

.comment-input:focus {
    outline: none;
    color: initial !important;
    border: none !important;
}

.comment-input:read-only {
    color: var(--color-badge-default) !important;
}

.comment-btn {
    width: 9%;
    height: 80px !important;
    position: absolute
}

.comment-btn-send {
    background: var(--color-primary);
    color: white;
}

.comment-btn-sending {
    background-color: darkgrey;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* COMMENTS LOADING ANIMATION                                   */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.wrapper-cell {
    display: flex;
    margin-bottom: 20px;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #F6F6F6;
    background: linear-gradient(to right, #F6F6F6 8%, #e1e1e1 18%, #F6F6F6 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}

.image {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

.text {
    margin-left: 10px
}

.text-line {
    height: 10px;
    margin: 4px 0;
}

.text-line-l {
    width: 560px;
}

.text-line-m {
    width: 460px;
}

.text-line-s {
    width: 360px;
}

.wrapper > .batify-card.batify-post {
    margin-left: 0;
    margin-right: 0;
    padding: 12px 16px;
    margin-top: 0;
}

.wrapper > .batify-card.batify-post > .wrapper-cell:not(:first-of-type) .text {
    margin-left: 0 !important;
}

.wrapper > .batify-card.batify-post > .wrapper-cell:not(:first-of-type) {
    margin-bottom: 0 !important;
}

.wrapper > .batify-card.batify-post .image {
    height: 50px;
    width: 50px;
}

/* -------------- RETURN BUTTON -------------- */

.return-btn {
    position: fixed;
    top: 120px;
    right: calc(700px + ((100% - 700px) / 2) + 10px);
}

@media only screen and (max-width: 1100px) {
    .return-btn {
        left: calc(700px + ((100% - 700px) / 2) + 10px);
        right: initial;
    }

}

/* -------------- BACK TO TOP BUTTON -------------- */

.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    left: calc(720px + ((100% - 650px) / 2) + 40px);
    display: none;
    width: 55px;
    padding: 0 !important;
}

/* -------------- POSTS LIST -------------- */

.batify-posts-list-search-container {
    text-align: center;
}

.batify-posts-list-search-container > span {
    cursor: pointer;
    margin-left: 10px;
    font-size: 28px;
}

.batify-posts-list-search-container > span:hover {
    color: var(--color-primary-dark);
}

.active-search-option {
    color: var(--color-primary);
}

.search-input-group {
    margin-bottom: 10px;
    padding: 0 !important;
    margin-top: 10px;
}

.posts-list-search-input {
    height: 60px;
    border-radius: 10px 0 0 10px;
    width: calc(100% - 60px) !important;
    min-width: 540px;
    border: none;
    color: initial !important;
    font-weight: initial !important;
    padding: 10px 10px 10px 15px;
    font-size: 16px !important;
    overflow: hidden;
}

.search-tags-list {
    margin-top: 15px;
}

.search-tags-list > span {
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.16);
}

.batify-mobile .search-tags-list .badge {
    padding-right: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.search-input-group .input-group-append {
    width: 60px !important;
    margin-left: 0;
}

.search-input-group .autocomplete-items {
    border: solid 1px var(--color-primary) !important;
}

.search-input-group .input-group-append > button {
    width: 100%;
    border: none !important;
}

.search-input-group .input-group-append > button > span {
    vertical-align: top;
}

.posts-list-search-input:focus {
    outline: none;
    color: initial !important;
    border: none !important;
}

.posts-list-search-input:read-only {
    color: var(--color-badge-default) !important;
}

/* -------------- POST REPORT -------------- */

.post-report-modal {
    padding: 20px !important;
}

.post-report-modal > div:not(:last-of-type) {
    margin-bottom: 20px;
}

.post-reports {
    position: absolute;
    right: 70px;
}

.post-reports > span {
    cursor: pointer;
}

.post-reports > span:hover {
    color: var(--color-primary);
}

/* =================================================== */
/* =================================================== */
/* TASKS */
/* =================================================== */
/* =================================================== */

.task-header > div:last-child {
    margin-left: auto;
}

.task-header {
    padding-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.task-content {
    margin-left: 20px;
    margin-right: 20px;
}

.task-name > a {
    font-size: 24px;
    font-weight: bold;
}

.task-name div {
    display: flex;
    opacity: 50%;
}

.task-name > div {
    display: flex;
    opacity: 1;
    position: relative;
    width: 480px;
}

.task-name > div > div:not(:last-of-type) {
    text-align: left;
    padding-top: 3px;
}

.task-name > div > div:last-of-type {
    text-align: right;
    margin-left: auto;
    display: block;
}

.task-tags-list {
    margin-left: 110px;
    margin-bottom: 20px;
}

/* TASK STATUS */

.task-list-title {
    position: fixed;
    top: 160px;
    width: 651px;
    padding-top: 17px;
    padding-bottom: 10px;
    transform: translateX(-50%);
    left: 50%;
    right: 50%;
}

.batify-tasks-list-mobile .task-list-title {
    display: none;
}

.batify-tasks-list #tasksList {
    padding-bottom: 200px;
    padding-top: 30px;
    max-height: calc(100vh - 300px);
    min-height: calc(100vh - 300px);
    overflow-x: hidden;
    overflow-y: scroll;
}

.batify-tasks-list-mobile #tasksList {
    padding-bottom: 250px;
}

.tasks-search-status-filters {
    margin-bottom: 10px;
}

.tasks-search-status-filters .task-not-started {
    background-color: #7b7b7b !important;
}

.tasks-search-status-filters .task-in-progress {
    background-color: #ff9800 !important;
}

.tasks-search-status-filters .task-on-standby {
    background-color: #a668cf !important;
}

.tasks-search-status-filters .task-done {
    background-color: #2e7d32 !important;
    text-decoration: none !important;
}

.tasks-search-status-filters {
    display: flex;
    gap: 10px;
}

.tasks-search-status-filters > div {
    display: flex;
    padding: 5px 10px;
    color: white !important;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
}

.tasks-search-status-filters > div:hover {
    color: white !important;
}

.tasks-search-status-filters span {
    font-size: 18px;
    margin-right: 5px;
}

.batify-tasks-list-mobile .tasks-search-status-filters span {
    font-size: 120px;
}

.batify-tasks-list .task-header {
    margin-bottom: 10px;
}

.batify-tasks-list-mobile .task-header {
    margin-bottom: 80px;
    display: inline-flex;
}

.batify-tasks-list-mobile .task-header > div:last-child {
    position: relative;
    right: 40px;
    margin-top: -5px;
}

.batify-tasks-list .task-name > a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 490px;
    display: inline-block !important;
}

.batify-tasks-list-mobile .task-name > a {
    font-size: 1.1em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(65vw);
    display: inline-block !important;
}

.batify-tasks-list-mobile .task-name > div > div:last-of-type {
    margin-right: 10px;
}

.batify-tasks-list-mobile .post-badge-text {
    font-size: 32px !important;
}

.batify-tasks-list-mobile .post-badge-icon {
    font-size: 36px !important;
}

.batify-tasks-list-mobile .search-tags-list .badge {
    padding-right: 20px;
}

.batify-tasks-list-mobile .task-status-icon span {
    font-size: 120px !important;
}

.batify-tasks-list-mobile .task-name > div {
    width: 80% !important;
    font-size: 36px !important;
}

.batify-tasks-list-mobile .task-name > div > div:not(:last-of-type) {
    margin-top: -10px;
}

.batify-tasks-list-mobile .task-tags-list {
    margin-left: 20px;
}

.batify-tasks-list-mobile .task-menu > a > span {
    font-size: 80px;
}

.task-status-icon span {
    font-size: 80px;
    margin-right: 10px;
}

.task-status-label {
    opacity: 1 !important;
    font-weight: bold !important;
}

.task-not-started {
    color: #7b7b7b !important;
}

.task-in-progress {
    color: #ff9800 !important;
}

.task-on-standby {
    color: #a668cf !important;
}

.task-done {
    color: #2e7d32 !important;
    background: none !important;
    text-decoration: none !important;
}

.task-badge-tag:hover {
    background: var(--color-secondary-dark);
}

.task-badge-tag,
.batify-mobile .task-badge-tag:hover {
    background: var(--color-badge-default);
}

.task-badge-tag-active,
.batify-mobile .task-badge-tag-active {
    background: var(--color-secondary) !important;
}

.inactive-filter:hover {
    color: var(--color-primary) !important;
    opacity: 1;
}

.inactive-filter,
.batify-mobile .inactive-filter:hover {
    color: #ff0011 !important;
    opacity: 0.4;
}

.task-tags-list .badge-pill {
    margin-right: 10px;
}

.batify-mobile h3 {
    font-size: 42px;
}

.batify-mobile label {
    font-size: 36px;
}

.batify-mobile .card-title {
    font-size: 40px;
    color: var(--color-primary);
}

.batify-mobile .card-subtitle {
    font-size: 36px;
}

.batify-mobile .card-text {
    font-size: 32px;
}

.modal-height-big {
    height: calc(80vh);
}

.batify-mobile .document-models-list {
    max-height: 100%;
}

/* ==================================================================================================== */
/* ==================================================================================================== */
/* CONTACTS LIST                                                                                        */
/* ==================================================================================================== */
/* ==================================================================================================== */

.batify-contacts-list {
    overflow-y: scroll;
    max-height: calc(100vh - 160px);
    max-width: 650px;
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    margin-top: 0;
    padding-bottom: 40px;
    min-width: 680px;
}

.batify-contacts-list > div:last-of-type {
    margin-top: 0;
}

/* HEADER */

.contact-header > div:last-child {
    margin-left: auto;
}

.contact-header {
    padding-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.contact-pp {
    margin-right: 10px !important;
}

.contact-pp img {
    background: lightgray;
    border-radius: 50%;
}

.contact-name > a {
    font-size: 16px;
}

.contact-name div {
    font-size: 14px;
    display: flex;
    opacity: 50%;
}

.contact-menu {
    text-align: right;
}

/* FOOTER */

.contact-footer {
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: 5px;
}

.contact-footer [class*="col-"] {
    vertical-align: middle;
    padding: 10px 0 10px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
}

.contact-footer [class*="col-"]:hover {
    background-color: var(--background-primary);
    font-weight: bold;
}

.contact-footer [class*="col-"] span {
    font-size: 20px !important;
    vertical-align: middle;
    margin-right: 10px;
}

.contact-footer a {
    color: #212529;
}

.contact-footer .text-accent {
    color: var(--color-primary) !important;
}

/* ==================================================================================================== */
/* ==================================================================================================== */
/* CONVERSATIONS                                                                                        */
/* ==================================================================================================== */
/* ==================================================================================================== */

.batify-conversation-container {
    max-width: 650px;
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    margin-top: 0;
    min-width: 680px;
}

.messages-list {
    height: calc(100vh - 200px);
    padding-top: 120px;
    overflow-y: scroll;
    width: 680px;
    padding-bottom: 20px;
}

.message-input-container {
    padding: 20px 20px 40px 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
    display: flex;
    margin-bottom: 20px;
    position: fixed;
    width: 680px;
    max-width: 680px;
    min-width: 680px;
    bottom: 0;
}

.message-input-container textarea {
    align-self: center;
    border-radius: 7px;
    background-color: var(--color-primary-light-20);
    min-height: 46px;
    padding-top: 9px;
}

.message-input-container button {
    margin-left: 20px;
    background: var(--color-primary);
    color: white;
    border-radius: 10px;
    border: none !important;
    align-self: end;
}

.message-input-container button:hover {
    background: var(--color-primary-dark);
    border: none !important;
}

.message-input-container button:focus {
    background: var(--color-primary);
    border: none !important;
}

.message-input-container button span {
    vertical-align: middle;
    padding: 10px;
}

.message-container {
    margin-bottom: 5px;
    display: flex;
}

.message-container .message-content {
    padding: 10px 15px 10px 15px;
    border-radius: 10px;
    margin-bottom: 2px;
    font-weight: initial;
    max-width: 90%;
    word-break: break-word;
}

.message-container.sender .message-content {
    background: var(--color-primary);
    color: white;
}

.message-container.sender {
    flex-direction: row-reverse;
}

.message-container.recipient .message-content {
    border: 1px solid var(--color-secondary);
    background-color: white;
    color: initial;
}

.message-container:hover .message-sent-ago, .message-container:hover .message-action {
    display: initial;
}

.message-deleted {
    background-color: white !important;
    border: none !important;
    color: darkgray !important;
    font-weight: initial !important;
    font-style: italic !important;
}

.message-sent-ago {
    color: var(--text-primary);
    opacity: 0.3;
    width: fit-content;
    display: none;
    align-self: center;
}

.message-action {
    color: grey;
    width: fit-content;
    padding-right: 10px;
    padding-left: 10px;
    display: none;
    align-self: center;
}

.message-action span {
    vertical-align: middle;
}

.batify-post.message-container {
    opacity: 0.7;
}

.batify-post.message-container.recipient {
    width: 40%;
    background: var(--color-secondary);
}

.batify-post.message-container.sender {
    width: 40%;
    background: var(--color-primary);
    margin-left: auto;
}

.batify-post.message-container.sender .wrapper-cell, .batify-post.message-container.recipient .wrapper-cell {
    margin-bottom: 0;
    width: 25%;
}

.batify-post.message-container.sender {
    flex-direction: initial;
}

.message-container .text-line-l {
    width: 220px;
}

.message-container .text-line-m {
    width: 180px;
}

.message-container .text-line-s {
    width: 140px;
}

.message-help {
    position: fixed;
    bottom: 34px;
    font-size: 12px;
    opacity: 0.5;
    padding-left: 5px;
}

/* ======================================================== */
/* ======================================================== */
/* CONTACTS                                                 */
/* ======================================================== */
/* ======================================================== */

.contacts-main-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: calc(100vh - 120px);
    width: 100% !important;
    min-width: 1280px;
    padding: 0 40px 40px 160px;
}

.contacts-main-container > div {
    height: 100%;
}

.batify-mobile .contacts-main-container {
    padding: 0;
    height: calc(100vh);
    width: calc(100vw);
}

@media only screen and (min-width: 1650px) {
    body:not(.batify-mobile) .contacts-main-container {
        padding-left: 160px;
    }
}

/* ======================================================== */
/* CONTACT CARDS                                            */
/* ======================================================== */

.contacts-list {
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 7px 0 0 7px;
    width: 450px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.batify-mobile .contacts-list {
    width: calc(100vw);
}

.contact-card {
    height: 110px;
    border-bottom: 1px solid gray;
    cursor: pointer;
    display: flex;
    width: 447px;
}

.batify-mobile .contact-card {
    width: calc(100vw);
    height: 250px;
}

.contact-card-pp {
    align-self: center;
    padding: 20px;
}

.contact-card-pp > img {
    height: 65px;
    width: 65px;
    object-fit: cover;
    border-radius: 100%;
    background: lightgray;
}

.batify-mobile .contact-card-pp > img {
    height: 150px;
    width: 150px;
}

.contact-card-content {
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 310px;
}

.batify-mobile .contact-card-content {
    width: 700px;
}

.contact-card-name {
    font-size: 16px;
}

.batify-mobile .contact-card-name {
    font-size: 40px;
}

.contact-card-company {
    font-size: 12px;
    opacity: 0.75;
    font-weight: initial;
}

.batify-mobile .contact-card-company {
    font-size: 32px;
}

.contact-card-message {
    font-size: 14px;
    font-weight: initial;
    margin-top: 5px;
}

.batify-mobile .contact-card-message {
    font-size: 38px;
}

.contact-card-message-preview {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 200px;
    display: inline-block !important;
    vertical-align: text-bottom;
}

.batify-mobile .contact-card-message-preview {
    max-width: 400px;
}

.contact-card-message-date {
    vertical-align: text-bottom;
    opacity: 0.75;
}

.contact-card-badge-container {
    padding-top: 10px;
}

.batify-mobile .contact-card-badge-container {
    padding-top: 40px;
}

.contact-card-badge {
    background: var(--color-primary);
    border-radius: 100%;
    width: 15px;
    height: 15px;
    display: none;
}

.batify-mobile .contact-card-badge {
    width: 50px;
    height: 50px;
}

.contact-card.unseen .contact-card-name,
.contact-card.unseen .contact-card-message {
    color: var(--color-primary);
}

.contact-card.unseen .contact-card-message {
    font-weight: bold;
}

.contact-card.unseen .contact-card-badge {
    display: flex;
}

.contact-card.active {
    background: var(--color-primary);
    color: white;
}

.batify-mobile .contact-card.active {
    background: white !important;
    color: black !important;
}

.contact-card.active .contact-card-name,
.contact-card.active .contact-card-message {
    color: white;
}

.batify-mobile .contact-card.active .contact-card-name,
.batify-mobile .contact-card.active .contact-card-message {
    color: black;
}

.contact-card.active .contact-card-company {
    color: white;
    opacity: 0.9;
}

.batify-mobile .contact-card.active .contact-card-company {
    color: black;
    opacity: 0.75;
}

.contact-card.active .contact-card-badge {
    display: none;
}

.contact-card.active .contact-card-message {
    font-weight: initial;
}

.contact-card:hover {
    background: var(--color-primary-dark);
    color: white;
}

.contact-card:hover .contact-card-name,
.contact-card:hover .contact-card-message {
    color: white;
}

.batify-mobile .text-line {
    height: 30px;
}

.batify-mobile .contact-card .image {
    height: 150px;
    width: 150px;
}

.batify-mobile .text-line-s {
    width: 500px;
}

/* ======================================================== */
/* CONVERSATION                                             */
/* ======================================================== */

.contacts-conversation-container {
    border: 2px solid var(--color-primary);
    border-left: none;
    width: 100%;
    border-radius: 0 7px 7px 0;
    max-width: calc(100vw - 660px);
    min-width: 620px;
    backdrop-filter: blur(2px);
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.contacts-conversation-container > div {
    width: 100%;
}

.batify-mobile .contacts-conversation-container {
    max-width: none;
    width: calc(100vw);
    min-width: calc(100vw);
}

/* ======================================================== */
/* CONVERSATION HEADER                                      */
/* ======================================================== */

.conversation-header {
    background: white;
    border-bottom: solid 2px var(--color-primary);
    height: 70px;
    border-radius: 0 7px 0 0;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 16%);
}

.batify-mobile .conversation-header {
    height: 140px;
}

.conversation-header > div,
.conversation-header > a {
    align-self: center;
}

.conversation-header-pp {
    margin-right: 10px;
}

.batify-mobile .conversation-header-pp {
    margin-right: 30px;
}

.conversation-header-pp > img {
    height: 45px;
    width: 45px;
    object-fit: cover;
    border-radius: 100%;
    background: lightgray;
}

.batify-mobile .conversation-header-pp > img {
    height: 90px;
    width: 90px;
}

.conversation-header-user {
    display: flex;
    flex-direction: column;
}

.conversation-header-name {
    font-size: 16px;
    color: var(--color-primary);
}

.batify-mobile .conversation-header-name {
    font-size: 38px;
}

.conversation-header-company {
    font-size: 12px;
    opacity: 0.75;
    font-weight: initial;
}

.batify-mobile .conversation-header-company {
    font-size: 34px;
}

.conversation-header-call {
    margin-left: auto;
}

.conversation-header-detail {
    margin-left: 20px;
}

.batify-mobile .conversation-header-detail {
    margin-left: 40px;
}

.conversation-header-back-btn {
    margin-right: 30px;
}

.conversation-header-back-btn > span,
.conversation-header-call > span,
.conversation-header-detail > span {
    color: var(--color-primary);
    font-size: 30px;
    cursor: pointer;
    padding: 7px;
    border-radius: 7px;
}

.contacts-conversation-container-loader .conversation-header-call > span,
.contacts-conversation-container-loader .conversation-header-detail > span {
    color: gray;
    font-size: 30px;
    cursor: default;
    padding: 7px;
    border-radius: 7px;
}

.batify-mobile .conversation-header-back-btn > span,
.batify-mobile .conversation-header-call > span,
.batify-mobile .conversation-header-detail > span,
.batify-mobile .contacts-conversation-container-loader .conversation-header-back-btn > span,
.batify-mobile .contacts-conversation-container-loader .conversation-header-call > span,
.batify-mobile .contacts-conversation-container-loader .conversation-header-detail > span {
    font-size: 80px;
}

.conversation-header-call:hover > span,
.conversation-header-detail:hover > span {
    color: white;
    background: var(--color-primary-dark);
}

.contacts-conversation-container-loader .conversation-header-call:hover > span,
.contacts-conversation-container-loader .conversation-header-detail:hover > span {
    color: gray;
    background: none;
}

/* ======================================================== */
/* CONVERSATION MESSAGES                                    */
/* ======================================================== */

.conversation-messages {
    height: calc(100vh - 304px);
    overflow-y: scroll;
    padding: 20px;
}

.batify-mobile .conversation-messages {
    height: calc(100vh - 287px);
}

.message-container .text-line-l {
    width: 500px;
}

.message-container .text-line-m {
    width: 400px;
}

.message-container .text-line-s {
    width: 300px;
}

.batify-mobile .message-container {
    font-size: 38px;
}

.batify-mobile .message-action span {
    font-size: 56px;
}

.batify-mobile .message-container .dropdown-item {
    font-size: 38px;
}

.batify-mobile .message-container .dropdown-item span {
    font-size: 46px;
    vertical-align: sub;
}

/* ======================================================== */
/* CONVERSATION FOOTER                                      */
/* ======================================================== */

.conversation-footer {
    background: white;
    border-top: solid 2px var(--color-primary);
    height: 70px;
    border-radius: 0 0 7px 0;
    display: flex;
    padding-right: 20px;
    padding-left: 20px;
}

.batify-mobile .conversation-footer {
    height: 140px;
    padding-right: 30px;
}

.conversation-footer > div {
    align-self: center;
}

.conversation-footer-input {
    width: 100%;
}

.conversation-footer-send-btn {
    margin-left: 10px;
}

.batify-mobile .conversation-footer-send-btn {
    margin-left: 30px;
}

.conversation-footer-send-btn > span {
    color: var(--color-primary);
    font-size: 30px;
    cursor: pointer;
    padding: 7px;
    border-radius: 7px;
}

.conversation-footer-send-btn:hover > span {
    color: white;
    background: var(--color-primary-dark);
}

.contacts-conversation-container-loader .conversation-footer-send-btn > span {
    color: gray;
    font-size: 30px;
    cursor: default;
    padding: 7px;
    border-radius: 7px;
}

.batify-mobile .conversation-footer-send-btn > span {
    font-size: 60px;
}

.contacts-conversation-container-loader .conversation-footer-send-btn:hover > span {
    color: gray;
    background: none;
}

.batify-mobile .conversation-footer-input input {
    height: 120px !important;
    font-size: 38px !important;
}

/* ==================================================================================================== */
/* ==================================================================================================== */
/* SIDE MENU                                                                                        */
/* ==================================================================================================== */
/* ==================================================================================================== */

.side-menu-container {
    width: 86px;
    position: absolute;
    top: 120px;
    left: 20px;
    padding: 10px;
    background: white;
    border-radius: 5px;
    z-index: 10;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}

.side-menu-container.expanded {
    width: auto;
}

.side-menu-item {
    width: max-content;
    padding: 20px;
    display: flex;
    cursor: pointer;
    background: white;
    border-radius: 5px;
}

.side-menu-container.expanded .side-menu-item {
    width: auto;
}

.side-menu-item:not(:last-of-type) {
    margin-bottom: 10px;
}

.side-menu-item:last-of-type {
    margin-top: 10px;
}

.side-menu-item {
    color: black !important;
}

.side-menu-text {
    margin-left: 20px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.side-menu-container.expanded .side-menu-text {
    color: initial;
}

.side-menu-item.active .side-menu-text,
.side-menu-item:hover .side-menu-text {
    color: white;
}

.side-menu-item.active {
    background: var(--color-primary);
    color: white !important;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}

.side-menu-item:hover {
    background: var(--color-primary-dark);
    color: white !important;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}

.side-menu-item.workspace-changer {
    background: white;
    color: var(--color-secondary) !important;
}

.side-menu-item.workspace-changer.active {
    background: var(--color-secondary);
    color: white !important;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}

.side-menu-item.workspace-changer:hover {
    background: var(--color-secondary);
    color: white !important;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}


.side-menu-container .side-menu-text {
    display: none;
    margin-left: 20px;
}

.side-menu-container.expanded .side-menu-text, .side-menu-item:hover .side-menu-text {
    display: initial;
}

.side-menu-container .side-menu-expand-btn {
    display: initial;
}

.side-menu-container .side-menu-shrink-btn {
    display: none;
}

.side-menu-container.expanded .side-menu-expand-btn {
    display: none;
}

.side-menu-container.expanded .side-menu-shrink-btn {
    display: initial;
}

/* ==================================================================================================== */
/* ==================================================================================================== */
/* NOTIFICATION CENTER                                                                                        */
/* ==================================================================================================== */
/* ==================================================================================================== */

.notification-center {
    position: absolute;
    top: 79px;
    max-height: calc(100vh - 79px);
    height: max-content;
    box-shadow: 0 6px 6px rgb(0 0 0 / 16%);
    border-radius: 0 0 0 5px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: white;
    z-index: 5;
    width: 400px;
    border-bottom: solid 1px var(--color-primary);
    border-left: solid 1px var(--color-primary);
    -webkit-transition: max-height 0.25s linear;
    -moz-transition: max-height 0.25s linear;
    -ms-transition: max-height 0.25s linear;
    -o-transition: max-height 0.25s linear;
    transition: max-height 0.25s linear;
}

.notifications-list {
    max-height: calc(100vh - 126px);
    overflow-y: scroll;
    border-bottom: solid 1px var(--color-primary);
    margin-right: -5px;
}

.notification-center.expanded {
    max-height: calc(100vh - 79px);
    right: 0;
}

.notification-center.collapsed {
    max-height: 0;
    right: 5px;
}

.notification-button > span:first-of-type {
    background: none;
    border-radius: 5px;
    padding: 7px;
    color: white;
}

.notification-button:hover > span {
    background: var(--color-primary-dark);
    color: white;
}

.notification-button.active {
    box-shadow: 0 6px 6px rgb(0 0 0 / 16%);
}

.notification-button.active > span {
    background: white;
    color: var(--color-primary);
}

.notification-button.active:hover > span {
    background: white;
    color: var(--color-primary-dark);
}

.notification-center-item {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: solid 1px lightgray;
    font-weight: initial;
    cursor: pointer;
}

.notification-icon {
    padding: 10px;
}

.notification-icon > span {
    font-size: 30px;
    vertical-align: middle;
    color: var(--text-primary);
    opacity: 50%;
}

.notification-content {
    display: grid;
    align-content: center;
    color: var(--text-primary);
}

.notification-date {
    font-size: 12px;
    font-weight: initial;
    opacity: 75%;
}

.notification-message {
    font-size: 14px;
}

.notification-center-item:hover {
    background-color: var(--color-primary-light-20);
}

.notification-center-item.unseen .notification-message {
    font-weight: bold;
}

.notification-center-item.unseen .notification-icon > span {
    color: var(--color-primary);
    opacity: 100%;
}

.notification-center-clear {
    height: 35px;
    text-align: center;
    margin: 5px;
    padding: 5px;
    font-size: 14px;
    border-radius: 5px;
    background-color: white;
    color: initial;
    cursor: pointer;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.notification-center-clear > span:first-of-type {
    vertical-align: bottom;
    font-size: 20px;
    margin-right: 3px;
}

.notification-center-clear > span:not(:first-of-type) {
    vertical-align: text-top;
}

.notification-center-clear:hover {
    background-color: var(--color-primary);
    color: white;
}

.new-notification-badge {
    position: absolute;
    top: 10px;
    left: 40px;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

.no-notification {
    padding: 10px;
    font-weight: initial;
    opacity: 50%;
    text-align: center;
    display: block;
}

/* ==================================================================================================== */
/* ==================================================================================================== */
/* FLOATING MENU                                                                                        */
/* ==================================================================================================== */
/* ==================================================================================================== */

.floating-menu {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    padding: 10px;
    border-radius: 7px;
    display: flex;
    box-shadow: 0 0 15px rgb(0 0 0 / 16%);
    border: solid 1px var(--color-primary);
    z-index: 10;
}

.floating-menu-item {
    cursor: pointer;
    display: grid;
    text-align: center;
    padding: 10px;
    border-radius: 7px;
    color: black;
    font-weight: bold;
}

.floating-menu .floating-menu-item:not(:last-of-type) {
    margin-right: 10px;
}

.floating-menu .floating-menu-item.floating-menu-cancel {
    margin-left: 10px;
    margin-right: 0;
}

.floating-menu .floating-menu-item span:first-of-type {
    font-size: 32px;
}

.floating-menu-item span:last-of-type {
    font-size: 14px;
}

.floating-menu-item:hover {
    color: white !important;
    background-color: var(--color-primary-dark);
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.16);
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
    .batify-mobile .floating-menu-item {
        font-size: 24px !important;
    }
}

.vertical-rule {
    border-left: 1px solid lightgray;
}

.form-check-label {
    margin-left: 5px;
}

.document-models-list {
    max-height: 600px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 10px;
}

.batify-mobile .document-models-list {
    max-height: none;
}

.document-models-list .card {
    height: 100%;
}

/* ================================================================================================================== */
/* ================================================================================================================== */
/* DMS */
/* ================================================================================================================== */
/* ================================================================================================================== */

.folder-content {
    font-size: 1rem;
    margin-left: 20px;
    margin-right: 0;
    padding: 0;
    max-width: min-content;
    position: relative;
}

.folder-content > div {
    margin-left: auto;
    margin-right: auto;
}

.folder-content > div:first-of-type {
    margin-top: -40px;
}

.batify-breadcrumb {
    position: relative;
    width: 650px;
    padding: 10px;
    font-size: 1.3rem;
    margin: 0 0 20px !important;
}

.batify-breadcrumb .breadcrumb {
    background: none;
    margin: 0;
}

.batify-breadcrumb a {
    color: var(--color-primary);
}

.batify-breadcrumb a:hover {
    color: var(--color-primary-dark);
}

/* CONTENT */

.folder-content-item {
    box-shadow: 0 6px 6px rgb(0 0 0 / 16%);
    width: 650px;
    /*margin: 0 auto 13px;*/
    margin-bottom: 13px;
    font-weight: initial;
    padding: 5px 10px;
    border-radius: max(0px, min(8px, ((100vw - 4px) - 100%) * 9999)) 8px;
    background: white;
    cursor: pointer;
    font-size: 20px;
}

.folder-content-item.folder-content-item-folder {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.folder-content-item.folder-content-item-file {
    border: 2px solid var(--color-secondary);
    color: var(--color-secondary) !important;
}

.folder-content-item.folder-content-item-folder:hover {
    border: 2px solid var(--color-primary-dark);
    color: var(--color-primary-dark);
}

.folder-content-item.folder-content-item-file:hover {
    border: 2px solid var(--color-secondary-dark);
    color: var(--color-secondary-dark) !important;
}

.folder-content-item > div:first-of-type {
    width: 100%;
}

.folder-content-item span:first-of-type {
    vertical-align: middle;
    font-size: 36px;
    margin-right: 15px;
}

.folder-content-item > span:first-of-type {
    margin-right: 0;
}


.folder-content-item button {
    vertical-align: sub !important;
    right: 35px;
    margin-top: 7px;
    position: absolute !important;
}

.folder-content-item span:not(:first-of-type) {
    vertical-align: middle;
}

.folder-content-item {
    display: flex;
}

.folder-content-item > span:last-of-type {
    color: var(--color-primary);
    font-size: 38px;
    position: relative;
}

.folder-content-item.folder-content-item-file > span:last-of-type {
    color: var(--color-secondary);
    font-size: 38px;
    position: relative;
}

.folder-content-item > span {
    align-self: center;
}

.table-checkable td {
    background-color: white;
    cursor: pointer;
    height: inherit;
}

.table-checkable th {
    background-color: lightgoldenrodyellow !important;
}

.table-checkable td > span {
    visibility: hidden;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    font-size: 36px;
}

.table-checkable td.checked > span,
.table-checkable td:hover > span {
    visibility: visible;
}

.table-checkable td.checked {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.table-checkable td:hover {
    background-color: var(--color-primary-dark) !important;
    color: white !important;
}

.table-checkable td.checked > span, .table-checkable td:hover > span {
    display: block;
}

.table-checkable * {
    border-width: 2px !important;
}

table th {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-primary-dark);
}

.batify-mobile table th {
    font-size: 38px;
}

.batify-mobile .table-checkable td:not(.checked):hover {
    visibility: hidden;
}

.batify-mobile .table-checkable td.checked:hover {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.batify-mobile .table-checkable td > span {
    font-size: 60px;
    padding: 20px;
}

/* TREE VIEW */

.treeview-animated a {
    color: gray !important;
}

.treeview-animated {
    margin-left: 0 !important;
    transition: margin-left 0.5s;
    background: white;
    z-index: 5;
    width: 300px;
    margin-top: 0 !important;
    height: fit-content;
    position: relative;
}

@media (min-width: 1600px) {
    .treeview-animated {
        margin-left: -480px !important;
    }
}

@media (min-width: 1430px) {
    .treeview-animated {
        margin-left: -280px !important;
    }
}

.treeview-animated .open {
    color: white !important;
}

.treeview-animated .treeview-animated-list .treeview-animated-items .open {
    background-color: var(--color-primary-dark);
    border-radius: 5px;
}

.treeview-animated .treeview-animated-list .treeview-animated-items .closed:hover {
    background-color: var(--color-primary);
    color: white !important;
}

.treeview-animated .treeview-animated-list .treeview-animated-element:hover {
    background: none;
    color: white !important;
}

.treeview-animated .treeview-animated-list .treeview-animated-element.opened:hover {
    background-color: var(--color-primary-dark);
    color: white !important;
}

.treeview-animated .treeview-animated-list .treeview-animated-element.opened {
    background-color: var(--color-primary-dark);
    color: white !important;
    border-radius: 5px;
}

.treeview-animated .treeview-animated-list .treeview-animated-items .open:hover {
    background-color: var(--color-primary-dark);
    color: white !important;
}

.treeview-animated .treeview-animated-list .treeview-animated-items .nested::before {
    width: 3px;
    background-color: lightgray;
}

.treeview-animated ul {
    position: relative;
    padding-left: 1em;
    list-style: none;
    margin-top: 5px;
}

.treeview-animated {
    border-radius: 10px;
    box-shadow: 0 6px 6px rgb(0 0 0 / 16%);
}

.treeview-animated-items.not-root > a,
.treeview-animated-items.not-root > a > span {
    color: gray !important;
    background: none !important;
}

.treeview-animated-items.not-root > a:hover {
    background-color: var(--color-primary-dark) !important;
    color: white !important;
}

.treeview-animated-items.not-root > a:hover > span {
    color: white !important;
}

.hashtag-btn {
    margin: 0;
    border: 1px solid var(--color-primary);
    font-size: 14px;
    width: 30px;
    background: #f0f0f0;
}

.folder-content-items {
    padding-right: 10px;
    padding-bottom: 150px;
    max-height: calc(100vh - 210px);
    overflow-y: scroll;
}

.batify-mobile .folder-content-item {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

.batify-mobile .wrapper > .batify-card.batify-post {
    width: 96% !important;
    margin-left: auto;
    margin-right: auto;
}

.batify-mobile .batify-breadcrumb {
    left: 2%;
    right: 2%;
    width: 96%;
}

.folder-content .wrapper {
}

.document-models-list .card .card-body .card-text {
    margin-bottom: 60px;
}

.document-models-list .btn-accent-small {
    position: absolute;
    bottom: 15px;
    width: 84%;
}

.btn-accent-small {
    background: var(--color-primary);
    color: white;
    font-size: 0.9em;
}

.btn-accent-small:hover {
    background: var(--color-primary-dark);
    color: white;
}

.tree-view-select .list-group-item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white !important;
}


.batify-mobile .batify-breadcrumb {
    width: calc(95vw);
    font-size: 40px;
    display: inline-flex;
    margin-bottom: 50px;
    position: relative;
    top: 0;
    margin-top: 0 !important;
}

.batify-mobile .breadcrumb-item span {
    font-size: 45px;
}

.batify-mobile .folder-content {
    max-height: calc(100vh);
}

.batify-mobile .folder-content-item {
    width: calc(95vw);
    font-size: 42px;
    height: 120px;
    align-items: center;
}

.batify-mobile .folder-content-item.folder-content-item-file:hover,
.batify-mobile .folder-content-item.folder-content-item-folder:hover {
    font-weight: bold;
}

.batify-mobile .folder-content-item:hover {
    border-width: 6px;
}

.folder-content-item span:not(.material-icons-outlined) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 90%;
    display: inline-block !important;
}

.batify-mobile .folder-content-item span:not(.material-icons-outlined) {
    width: calc(70vw);
}

.batify-mobile .folder-content > div:first-of-type {
    margin-top: -40px;
}

.batify-mobile .folder-content-item span:first-of-type {
    font-size: 60px;
}

.batify-mobile .folder-content-item .dropdown-item {
    font-size: 32px;
}

.batify-mobile .floating-menu {
    bottom: 0;
    width: calc(100vw);
    justify-content: space-around;
    font-size: 32px;
}

.batify-mobile .floating-menu span {
    font-size: 32px !important;
}

.batify-mobile .floating-menu .material-icons-outlined {
    font-size: 60px !important;
}

.batify-mobile .btn-accent {
    font-size: 40px;
    padding: 40px !important;
    height: 100px;
    width: 100%;
}

.batify-mobile .form-control-file {
    font-size: 32px !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* SYSTEM EVENTS                                                                                                      */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

.batify-system-event {
    display: flex;
    padding: 20px;
    border: solid 4px var(--color-primary);
}

.batify-system-event strong {
    font-weight: bold;
}

.batify-system-event small {
    font-size: 12px;
    color: gray;
    vertical-align: middle;
}

.batify-system-event-icon {
    display: flex;
    margin-right: 20px;
}

.batify-system-event-icon span {
    font-size: 48px;
    align-self: center;
}

.batify-system-event-content {
    margin-right: 20px;
}

.batify-system-event-content-title {
    font-size: 18px;
    font-weight: bold;
}

.batify-system-event-content-message {

}

.batify-system-event-action {
    margin-left: auto;
    display: flex;
}

.batify-system-event-action span {
    font-size: 48px;
    color: var(--color-primary);
    align-self: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* SUBSCRIPTIONS                                                                                                      */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */


/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */
/* MOBILE                                                                                                             */
/* ------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------ */

.batify-mobile .modal-dialog {
    max-width: calc(90vw);
}

.batify-mobile .modal-title {
    font-size: 42px;
    padding-left: 10px;
}

.batify-mobile .modal-content {
    font-size: 36px;
}

.batify-mobile .modal-content input[type="radio"] {
    scale: 2;
    margin-top: 20px;
}

.batify-mobile .form-check-label {
    margin-left: 20px;
}

.batify-mobile .modal-footer > .btn-accent {
    font-size: 32px;
    padding: 20px;
}

.batify-mobile .is-small.modal-close,
.batify-mobile .is-small.close,
.batify-mobile .modal-header .close {
    scale: 2;
    right: 20px;
    top: 20px;
}

.batify-mobile .is-small.delete-btn {
    scale: 2.8;
    right: -23px;
    top: 14px;
}

.batify-mobile .form-control {
    font-size: 32px !important;
    height: 60px !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* POSTS */
/* ------------------------------------------------------------------------------------------------------------------ */

.batify-posts-list-mobile .post-form-footer [class*="col-"] {
    font-size: 1em; /* ~24px */
}

.batify-posts-list-mobile .post-form-footer [class*="col-"] {
    font-size: 34px;
}

.batify-posts-list-mobile .post-menu > .clickable > span {
    font-size: 80px;
}

.batify-posts-list-mobile .post-form-footer [class*="col-"] span {
    font-size: 38px !important;
    vertical-align: middle;
    margin-right: 10px;
}

.batify-posts-list-mobile .post-author-pp img {
    width: 125px;
    height: 125px;
}

.batify-posts-list-mobile .comment-author-pp img {
    width: 75px;
    height: 75px;
}

.batify-posts-list-mobile .post-author-name > a {
    font-size: 1.1em;
}

.batify-posts-list-mobile .post-content > .post-form-file > span:last-of-type, .batify-posts-list-mobile .post-content > .post-form-task > span:last-of-type {
    margin-left: auto;
    color: var(--color-primary);
    font-size: 48px;
}

.batify-posts-list-mobile .post-reactions {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    font-size: 36px;
    cursor: pointer;
}

.batify-posts-list-mobile .post-content {
    font-size: 42px;
    margin-top: 40px;
    margin-bottom: 40px;
    max-width: 1250px;
    word-break: break-word;
}

.batify-posts-list-mobile .post-reactions-icons > span {
    font-size: 1.2em;
}

.batify-posts-list-mobile .post-footer [class*="col-"] {
    font-size: 38px;
}

.batify-tasks-list-mobile .post-footer [class*="col-"] {
    font-size: 30px;
}

.batify-posts-list-mobile .post-footer [class*="col-"] span {
    font-size: 64px !important;
    vertical-align: text-top;
}

.batify-tasks-list-mobile .post-footer [class*="col-"] span {
    font-size: 64px !important;
}

.batify-posts-list-mobile .post-footer [class*="col-"] {
    padding: 20px !important;
    align-self: center;
}

.batify-posts-list-mobile .post-author-name div {
    font-size: 0.9em; /* ~24px */
    display: flex;
    opacity: 50%;
}

.batify-posts-list-mobile {
    overflow-y: scroll;
    max-height: 100%;
    font-size: 2.3em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

.batify-posts-list-mobile > div, .batify-posts-list-mobile > hr, .batify-posts-list-mobile > div, .batify-posts-list-mobile > hr {
    max-width: 100%;
}

.batify-posts-list-mobile .post-badge-icon {
    font-size: 1.1em !important; /* ~24px */
    vertical-align: middle;
}

.batify-posts-list-mobile .post-badge-text {
    font-size: 38px !important;
    vertical-align: middle;
}

.batify-posts-list-mobile .post-hashtags-list {
    padding-top: 10px;
}

.batify-posts-list-mobile .post-badge-action {
    font-size: 1.1em !important; /* ~26px */
    vertical-align: middle;
}

.batify-posts-list-mobile .post-reactions .material-icons-outlined {
    vertical-align: sub;
}

.batify-posts-list-mobile .post-reactions {
    margin-top: 30px;
    margin-bottom: 20px;
}

.batify-mobile .tooltip-inner {
    font-size: 36px;
    max-width: max-content;
}

.batify-posts-list-mobile .dropdown-item,
.batify-tasks-list-mobile .dropdown-item {
    font-size: 38px !important;
}

.batify-posts-list-mobile .dropdown-item > span,
.batify-tasks-list-mobile .dropdown-item > span {
    font-size: 36px;
    vertical-align: sub;
}

.batify-mobile .post-footer [class*="col-"] span {
    margin-right: 25px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* POST TASK */
/* ------------------------------------------------------------------------------------------------------------------ */

.batify-posts-list-mobile .post-form-task > span:first-child {
    font-size: 85px;
}

.batify-posts-list-mobile .post-form-task > span:last-child {
    font-size: 60px !important;
}

.batify-posts-list-mobile .post-form-task > span:not(:first-child):not(:last-child) > span:first-child {
    font-size: 42px;
}

.batify-posts-list-mobile .post-form-task > span:not(:first-child):not(:last-child) > span:last-child {
    font-size: 32px;
}

.batify-posts-list-mobile #postsList {
    background-color: gray;
}

.batify-posts-list-mobile .post-content-less::before {
    width: calc(93vw);
    height: 40px;
    margin-top: -40px;
    top: 220px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* POST MEDIA */
/* ------------------------------------------------------------------------------------------------------------------ */

.batify-posts-list-mobile .docs-pictures > li {
    width: calc(93vw / 3);
    height: 250px;
}

.batify-posts-list-mobile .docs-pictures > li > img {
    height: 250px;
}

.batify-posts-list-mobile .docs-pictures > li.gallery-info {
    margin-left: calc(-93vw / 3);
    background-color: rgba(0, 0, 0, 0.7);
    display: inline-table;
    cursor: zoom-in;
    margin-top: 1px;
}

.batify-posts-list-mobile .docs-pictures > li.gallery-info > span {
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    font-size: 36px;
}

.batify-posts-list-mobile .post-single-image > img {
    width: calc(93vw);
    object-fit: cover;
    object-position: top;
    max-height: 700px;
}

.plyr:not(.plyr--audio) {
    border-radius: 7px;
    box-shadow: 0 0 10px rgb(0 0 0 / 60%);
}

.batify-posts-list-mobile .post-content > .plyr {
    height: 500px;
}

.batify-mobile .plyr__controls {
    padding-top: 5px !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* POST COMMENTS */
/* ------------------------------------------------------------------------------------------------------------------ */

.batify-posts-list-mobile .comment-author-name {
    font-weight: bold;
    font-size: 32px;
}

.batify-posts-list-mobile .comment-content {
    font-size: 34px;
    line-height: 42px;
}

.batify-posts-list-mobile .comment-content-container {
    padding: 5px 15px 15px 15px;
}

.batify-posts-list-mobile .comment-footer {
    font-size: 0.9em;
    opacity: 50%;
    margin-top: 2px;
    padding-left: 5px;
}

.batify-posts-list-mobile .comment-input {
    font-size: 0.8em !important;
    height: 80px !important;
    padding-top: 15px;
}

.batify-posts-list-mobile .post-comments > .comment:first-child {
    margin-bottom: 30px !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/* POSTS SEARCH */
/* ------------------------------------------------------------------------------------------------------------------ */

.batify-posts-list-search-container.batify-posts-list-search-container-mobile > span {
    font-size: 50px;
}

.batify-mobile .batify-posts-list-search-container.batify-posts-list-search-container-mobile > span {
    font-size: 80px;
}

.search-input-group-mobile .posts-list-search-input {
    font-size: 38px !important;
    height: 100px;
}

.search-input-group-mobile .input-group-append span {
    font-size: 80px !important;
    right: 35px;
    position: inherit;
}

.xdsoft_calendar th {
    color: #999 !important;
}

.fc a {
    color: inherit !important;
    cursor: pointer;
}

.fc .fc-list-day-text {
    color: var(--color-primary) !important;
    font-weight: bold;
}

.fc-resource .fc-col-header-cell-cushion {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100%);
    display: inline-block !important;
    overflow: hidden;
}

.fc a.fc-list-day-side-text {
    color: var(--color-primary-dark) !important;
    font-weight: bold;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.popover-header {
    background-color: var(--color-primary);
    color: white;
    font-weight: bold;
}

.fc-full-description {
    margin: auto !important;
    text-align: start !important;
    visibility: visible !important;
}

.fc-full-description td:not(.xdsoft_date),
.fc-full-description th {
    height: 10px !important;
    padding: 5px !important;
    font-size: 12px !important;
    vertical-align: middle !important;
    white-space: break-spaces !important;
    text-align: start !important;
}

.fc-full-description td:not(.xdsoft_date) {
    color: black !important;
    border: solid 1px var(--color-primary-dark) !important;
}

.fc-full-description td:not(.xdsoft_date).fc-full-description-bold {
    font-weight: bold !important;
}

.fc-full-description th {
    color: white;
    background-color: var(--color-primary-dark) !important;
    font-weight: bold !important;
    border: solid 1px var(--color-primary) !important;
}

.fc-full-description tr {
    height: 20px;
}

.select-dropdown {
    position: absolute !important;
}


/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* FILE UPLOAD */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.fileUploadDropArea.highlight {
    border-color: var(--color-primary);
}

.border-file-upload-area {
    border: dashed 5px;
}

.border-accent {
    border-color: var(--color-primary-lighter) !important;
}

.border-accent-darker {
    border-color: var(--color-primary) !important;
}

.fileUploadDropArea.highlight {
    border-color: var(--color-primary);
}

.drag-and-drop-area {
    border: dashed 5px var(--color-primary-lighter);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.drag-and-drop-area.highlight {
    border-color: var(--color-primary);
}

.drag-and-drop-area p {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-primary);
    text-align: center;
}

.drag-and-drop-area p,
.drag-and-drop-area ul {
    margin-bottom: 0;
}

.drag-and-drop-area ul {
    margin-top: 20px;
}

.drag-and-drop-area button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.optgroup-title {
    background: var(--bg-color-fo);
}

.optgroup-title b {
    font-weight: bolder !important;
}

.table-sm th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.input-group-text > span {
    font-size: 1.5em;
    color: var(--color-primary-dark);
}

td .btn-sm span {
    font-size: 24px;
    margin: 0;
    vertical-align: middle;
}

td .btn-sm {
    padding: 0;
}

.insert-line-btn {
    margin: 0;
    color: green;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    width: 100%;
    background: white;
    padding: 5px;
    cursor: pointer;

    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.insert-line-btn span {
    font-size: 24px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    color: green;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.insert-line-btn:hover {
    background: green;
    color: white;

    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.insert-line-btn:hover span {
    color: white;
    transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
}

.tags-container {
    cursor: text;
}

.tags-container .badge-primary {
    background-color: var(--color-primary) !important;
    color: white !important;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* FORMS */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.elements-list {

}

.form-element {
    padding: 7px 0 7px 7px;

    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.form-element:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.form-element > div {
    padding: 5px;
    display: flex;
}

.form-element > div > div:last-child {
    display: flex;
    margin-left: auto;
}

.form-element-section {
    background: var(--color-primary);
    border-radius: 7px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: white !important;
}

.form-element-field {
    border-left: solid 2px var(--color-primary);
}

.form-element-field > div {
    background: white;
    border: solid 2px var(--color-primary);
    border-radius: 7px;
}

.form-element-field.active > div {
    background: var(--color-primary-dark);
    color: white;
}

.form-element > div > div:last-child > span:last-child {
    margin-left: 7px;
}

.form-element-field > div > div:last-child > span {
    cursor: pointer;
    color: var(--color-primary);
}

.form-element-field > div > div:last-child > span:hover {
    color: var(--color-primary-dark);
}

.form-element.active > div > div:last-child > span,
.form-element-section > div > div:last-child > span {
    cursor: pointer;
    color: white;
}

.form-element.active > div > div:last-child > span:hover,
.form-element-section > div > div:last-child > span:hover {
    color: var(--color-primary);
}

.form-element-section.active {
    background: var(--color-primary-dark);
}

#masterContainer {
    min-width: min-content;
}

/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */
/* PDF VIEWER */
/* ------------------------------------------------------------ */
/* ------------------------------------------------------------ */

.pdf-viewer-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    background: #323639;
    border-radius: 5px 5px 0 0;
}

.pdf-viewer-toolbar > div {
    display: flex;
    align-items: center;
}

.pdf-viewer-page-nav {
    margin-left: auto;
    margin-right: auto;
}

.pdf-viewer-page-nav > span {
    margin: 0 5px;
    color: white;
}

.pdf-viewer-page-nav > input {
    /*width: 40px;*/
    text-align: center;
    background: #191b1c;
    color: white !important;
    border: none !important;
}

.pdf-viewer-page-nav > input:focus {
    outline: none;
    background: #191b1c;
    color: white !important;
    border: none !important;
}

/* Chrome, Safari, Edge, Opera */
.pdf-viewer-page-nav > input::-webkit-outer-spin-button,
.pdf-viewer-page-nav > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.pdf-viewer-page-nav > input {
    -moz-appearance: textfield;
}

.unmovable {
    cursor: default;
}