/* ============================================================================
 *  Footer · Side tabs (checklist / personal notifications)
 *  Fixed left-edge tabs and their slide-in/out animations.
 *  Originally defined only in /plank theme; centralized here for every area.
 * ============================================================================ */

div#main_newpersnot {
    display: block;
    position: fixed;
    left: 0;
    background: #e71d73;
    top: 9rem;
    border-radius: 0px 50px 50px 0px;
    z-index: 101;
    margin-left: 0rem;
    width: fit-content;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

div#main_checklist {
    display: block;
    position: fixed;
    left: 0;
    background: #2d2e83;
    top: 14rem;
    border-radius: 0px 50px 50px 0px;
    z-index: 101;
    margin-left: 0rem;
    width: fit-content;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

/* ----------------------------------------------------------------------------
 *  Linguette trascinabili lungo il bordo sinistro (solo su/giu').
 * ------------------------------------------------------------------------- */
div#main_newpersnot.sidetab-dragging,
div#main_checklist.sidetab-dragging {
    cursor: grabbing;
}

.num_newpersnot {
    display: block;
    vertical-align: middle;
    min-width: 3rem;
    font-size: 2rem;
    color: #e71d73;
    font-family: 'Roboto';
    border: 3px solid #e71d73;
    border-radius: 50px;
    margin-left: 0rem;
    text-align: center;
    background: white;
    width: fit-content;
    padding-right: 1rem;
    padding-left: 1rem;
    cursor: pointer;
}

.num_newpersnot:hover {
    box-shadow: 0px 0px 10px 2px #e71d73;
}

.bell_checklist {
    vertical-align: middle;
    min-width: 3rem;
    font-size: 2rem;
    color: #2d2e83;
    font-family: 'Roboto';
    border: 3px solid #2d2e83;
    border-radius: 50px;
    margin-left: 0rem;
    text-align: center;
    background: white;
    width: fit-content;
    padding-right: 1rem;
    padding-left: 1rem;
    cursor: pointer;
}

.slide-in-left {
    -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-out-left {
    -webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-in-left {
  0%   { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; }
  100% { -webkit-transform: translateX(0);        transform: translateX(0);        opacity: 1; }
}
@keyframes slide-in-left {
  0%   { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; }
  100% { -webkit-transform: translateX(0);        transform: translateX(0);        opacity: 1; }
}

@-webkit-keyframes slide-out-left {
  0%   { -webkit-transform: translateX(0);       transform: translateX(0);       opacity: 1; }
  100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; }
}
@keyframes slide-out-left {
  0%   { -webkit-transform: translateX(0);       transform: translateX(0);       opacity: 1; }
  100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0; }
}