Correct shadows

Correct shadows

/* === Modals === */
@modalBgColor:#fff;
@modalButonColor : #4285f4;
@modalButonBg: @modalBgColor;
@modalDuration:400ms;
@actionsModalDuration:300ms;
@popoverDuration: 300ms;
@popupDuration: 400ms;
.modal-overlay, .preloader-indicator-overlay, .popup-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10600;
    visibility: hidden;
    opacity: 0;
    .transition(@modalDuration);
    &.modal-overlay-visible {
        visibility: visible;
        opacity: 1;
    }
}
.popup-overlay {
    z-index: 10200;
}
.modal {
    width: 280px;
    position: absolute;
    z-index: 11000;
    left: 50%;
    margin-left: -140px;
    margin-top: 0;
    top: 50%;
    border-radius: 3px;
    opacity: 0;
    .transform(translate3d(0,0,0) scale(1.185));
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    color:#757575;
    display: none;
    background: #fff;
    font-size: 16px;
    .depth(5);
    &.modal-in {
        opacity: 1;
        .transition(@modalDuration);
        .transform(translate3d(0,0,0) scale(1));
    }
    &.modal-out {
        opacity: 0;
        z-index: 11000-1;
        .transition(@modalDuration);
        .transform(translate3d(0,0,0) scale(0.815));
    }
}
.modal-inner {
    padding: 24px 24px 20px;
    position: relative;
}
.modal-title {
    font-weight: 500;
    font-size: 20px;
    color:#212121;
    line-height: 1.3;
    +.modal-text {
        margin-top: 20px;
    }
}
.modal-text {
    line-height: 1.5;
}
.modal-buttons {
    height: 48px;
    padding: 6px 8px;
    overflow: hidden;
    box-sizing:border-box;
    .flexbox();
    .justify-content(flex-end);
    &.modal-buttons-vertical {
        display: block;
        height: auto;
        padding: 0 0 8px 0;
        .modal-button {
            margin-left: 0;
            text-align: right;
            height: 48px;
            line-height: 48px;
            border-radius: 0;
            padding-left: 16px;
            padding-right: 16px;
        }
    }
}
.modal-button {
    .button;
    &.modal-button-bold {
        font-weight: 700;
    }
    + .modal-button {
        margin-left: 4px;
    }
    .modal-buttons-vertical & {
        // &:last-child {
        // }
    }
}
.modal-no-buttons {
    .modal-buttons {
        display: none;
    }
}
// Action sheet
.actions-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 11000;
    width: 100%;
    background: #fff;
    .transform(translate3d(0,100%,0));
    &.modal-in {
        .transition(@actionsModalDuration);
        .transform(translate3d(0,0,0));
    }
    &.modal-out {
        z-index: 11000-1;
        .transition(@actionsModalDuration);
        .transform(translate3d(0,100%,0));
    }
}
.actions-modal-group {
    position: relative;
    .hairline(bottom, #d2d2d6);
    &:last-child {
        .hairline-remove(bottom);
    }
}
.actions-modal-button, .actions-modal-label {
    width: 100%;
    font-weight: normal;
    margin: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 0 16px;
    a {
        text-decoration: none;
        color: inherit;
        display: block;
    }
    b {
        font-weight: 500;
    }
    &.actions-modal-button-bold {
        font-weight: 500;
    }
    &.actions-modal-button-red {
        color: @red;
    }
    &.disabled {
        opacity: 0.95;
        color:@gray;
    }
}
.actions-modal-button {
    cursor: pointer;
    line-height: 48px;
    font-size: 16px;
    color: rgba(0,0,0,0.87);
    .transition(300ms);
    a, & {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    html:not(.watch-active-state) &:active, &.active-state {
        .transition(0ms);
        background: rgba(0,0,0,0.1);
    }
}
.actions-modal-label {
    font-size: 16px;
    color: rgba(0,0,0,0.54);
    min-height: 56px;
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
    .flexbox();
    .justify-content(flex-start);
    .align-items(center);
}
// Prompt
input.modal-text-input {
    box-sizing:border-box;
    height: 36px;
    background: #fff;
    margin: 0;
    margin-top: 15px;
    padding: 0;
    border: none;
    width: 100%;
    font-size: 16px;
    font-family: inherit;
    display: block;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    .transition(200ms);
    &::-webkit-input-placeholder {
       color: rgba(0,0,0,0.35);
    }
    + input.modal-text-input {
        margin-top: 16px;
    }
}
// Popover
.popover {
    width: 320px;
    background: #fff;
    z-index: 11000;
    margin: 0;
    top: 0;
    opacity: 0;
    left: 0;
    border-radius: 3px;
    position: absolute;
    display: none;
    .depth(2);
    .transform(scale(0.9, 0.7));
    -webkit-transition-property: opacity, -webkit-transform;
    -moz-transition-property: opacity, -moz-transform;
    transition-property: opacity, transform;
    &.popover-on-top {
        .transform-origin(center bottom);
    }
    &.popover-on-bottom {
        .transform-origin(center top);
    }
    &.modal-in {
        .transform(scale(1));
        .transition(@popoverDuration);
        opacity: 1;
    }
    .list-block {
        margin: 0;
        &:first-child:last-child ul {
            .hairline-remove(top);
            .hairline-remove(bottom);
        }
        ul {
            background: none;
            .hairline-remove(top);
        }
        &:first-child {
            ul {
                border-radius: 3px 3px 0 0;
            }
            li:first-child a {
                border-radius: 3px 3px 0 0;
            }
        }
        &:last-child {
            ul {
                .hairline-remove(bottom);
                border-radius: 0 0 3px 3px;
            }
            li:last-child a {
                border-radius: 0 0 3px 3px;
            }
        }
        &:first-child:last-child {
            li:first-child:last-child a, ul:first-child:last-child {
                border-radius: 3px;
            }
        }
    }
}
.popover-inner {
    .scrollable();
}
.actions-popover {
    .list-block {
        margin: 0;
    }
}
.actions-popover-label {
    padding: 8px 16px;
    color:rgba(0,0,0,0.54);
    font-size: 16px;
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    .hairline(bottom, #d2d2d6);
    &:last-child {
        .hairline-remove(bottom);
    }
}
// Popup
.popup, .login-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10400;
    background: #fff;
    box-sizing:border-box;
    display: none;
    .scrollable();
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    .translate3d(0,100%,0);
    &.modal-in, &.modal-out {
        .transition(@popupDuration);
    }
    &.modal-in {
        .translate3d(0,0,0);
    }
    &.modal-out {
        .translate3d(0,100%,0);
    }
}
.login-screen.modal-in, .login-screen.modal-out {
    display: block;
}
// iPad Popup
@media all and (min-width:630px) and (min-height:630px) {
    .popup:not(.tablet-fullscreen) {
        width: 630px;
        height: 630px;
        left: 50%;
        top: 50%;
        margin-left: -315px;
        margin-top: -315px;
        box-shadow: 0px 20px 44px rgba(0,0,0,0.5);
        border-radius: 3px;
        .translate3d(0,1024px,0);
        &.modal-in {
            .translate3d(0,0,0);
        }
        &.modal-out {
            .translate3d(0,1024px,0);
        }
    }
}
html.with-statusbar-overlay {
    // iPhone with statusbar overlay
    @media all and (max-width:629px), (max-height:629px) {
        .popup {
            height: ~"-webkit-calc(100% - 20px)";
            height: ~"calc(100% - 20px)";
            top: 20px;
        }
        .popup-overlay {
            z-index: 9800;
        }
    }
    .login-screen, .popup.tablet-fullscreen {
        height: ~"-webkit-calc(100% - 20px)";
        height: ~"calc(100% - 20px)";
        top: 20px;
    }
}

//Preloaders modals
.modal-preloader {
    .modal-title, .modal-inner {
        text-align: center;
    }
}
.modal .preloader {
    width: 36px;
    height: 36px;
}
.preloader-indicator-overlay {
    visibility: visible;
    opacity: 0;
    background: none;
}
.preloader-indicator-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 8px;
    margin-left: -25px;
    margin-top: -25px;
    background: rgba(0,0,0,0.8);
    z-index: 11000;
    border-radius: 4px;
    .preloader {
        display: block;
        width: 36px;
        height: 36px;
    }
}

// Picker Modal
.picker-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 260px;
    z-index: 11500;
    display: none;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    background: #fff;
    .translate3d(0,100%,0);
    &.modal-in, &.modal-out {
        .transition(400ms);
    }
    &.modal-in {
        .translate3d(0,0,0);
    }
    &.modal-out {
        .translate3d(0,100%,0);
    }
    .picker-modal-inner {
        height: 100%;
        position: relative;
    }
    .toolbar {
        position: relative;
        width: 100%;
        + .picker-modal-inner {
            height: ~"-webkit-calc(100% - @{toolbarSize})";
            height: ~"-moz-calc(100% - @{toolbarSize})";
            height: ~"calc(100% - @{toolbarSize})";
        }
    }
    &.picker-modal-inline, .popover & {
        display: block;
        position: relative;
        background: none;
        z-index: inherit;
        .translate3d(0,0,0);
        .toolbar {
            .hairline(bottom, #929499);
        }
    }
    .popover & {
        width: auto;
        .toolbar {
            border-radius: 2px 2px 0 0;
        }
    }
}

/* === Modals === */
@modalBgColor:#fff;
@modalButonColor : #4285f4;
@modalButonBg: @modalBgColor;
@modalButonActiveBg:#d4d4d4;
@modalDuration:400ms;
@actionsModalDuration:300ms;
@actionsModalActiveButtonBg:#dcdcdc;
@popoverDuration: 300ms;
@popupDuration: 400ms;
.modal-overlay, .preloader-indicator-overlay, .popup-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10600;
    visibility: hidden;
    opacity: 0;
    .transition(@modalDuration);
    &.modal-overlay-visible {
        visibility: visible;
        opacity: 1;
    }
}
.popup-overlay {
    z-index: 10200;
}
.modal {
    width: 280px;
    position: absolute;
    z-index: 11000;
    left: 50%;
    margin-left: -140px;
    margin-top: 0;
    top: 50%;
    border-radius: 3px;
    opacity: 0;
    .transform(translate3d(0,0,0) scale(1.185));
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
    color:#757575;
    display: none;
    background: #fff;
    font-size: 16px;
    box-shadow: 0px 12px 24px rgba(0,0,0,0.5);
    &.modal-in {
        opacity: 1;
        .transition(@modalDuration);
        .transform(translate3d(0,0,0) scale(1));
    }
    &.modal-out {
        opacity: 0;
        z-index: 11000-1;
        .transition(@modalDuration);
        .transform(translate3d(0,0,0) scale(0.815));
    }
}
.modal-inner {
    padding: 24px 24px 20px;
    position: relative;
}
.modal-title {
    font-weight: 500;
    font-size: 20px;
    color:#212121;
    line-height: 1.3;
    +.modal-text {
        margin-top: 20px;
    }
}
.modal-text {
    line-height: 1.5;
}
.modal-buttons {
    height: 48px;
    padding: 6px 8px;
    overflow: hidden;
    box-sizing:border-box;
    .flexbox();
    .justify-content(flex-end);
    &.modal-buttons-vertical {
        display: block;
        height: auto;
        padding: 0;
        .modal-button {
            margin-left: 0;
            text-align: right;
            height: 48px;
            line-height: 48px;
            border-radius: 0;
            padding-left: 16px;
            padding-right: 16px;
        }
    }
}
.modal-button {
    .button;
    &.modal-button-bold {
        font-weight: 700;
    }
    + .modal-button {
        margin-left: 4px;
    }
    .modal-buttons-vertical & {
        // &:last-child {
        // }
    }
}
.modal-no-buttons {
    .modal-buttons {
        display: none;
    }
}
// Action sheet
.actions-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 11000;
    width: 100%;
    background: #fff;
    .transform(translate3d(0,100%,0));
    &.modal-in {
        .transition(@actionsModalDuration);
        .transform(translate3d(0,0,0));
    }
    &.modal-out {
        z-index: 11000-1;
        .transition(@actionsModalDuration);
        .transform(translate3d(0,100%,0));
    }
}
.actions-modal-group {
    position: relative;
    .hairline(bottom, #d2d2d6);
    &:last-child {
        .hairline-remove(bottom);
    }
}
.actions-modal-button, .actions-modal-label {
    width: 100%;
    font-weight: normal;
    margin: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 0 16px;
    a {
        text-decoration: none;
        color: inherit;
        display: block;
    }
    b {
        font-weight: 500;
    }
    &.actions-modal-button-bold {
        font-weight: 500;
    }
    &.actions-modal-button-red {
        color: @red;
    }
    &.disabled {
        opacity: 0.95;
        color:@gray;
    }
}
.actions-modal-button {
    cursor: pointer;
    line-height: 48px;
    font-size: 16px;
    color: rgba(0,0,0,0.87);
    a, & {
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    html:not(.watch-active-state) &:active, &.active-state {
        background: @actionsModalActiveButtonBg;
    }
}
.actions-modal-label {
    font-size: 16px;
    color: rgba(0,0,0,0.54);
    min-height: 56px;
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
    .flexbox();
    .justify-content(flex-start);
    .align-items(center);
}
// Prompt
input.modal-text-input {
    box-sizing:border-box;
    height: 36px;
    background: #fff;
    margin: 0;
    margin-top: 15px;
    padding: 0;
    border: none;
    width: 100%;
    font-size: 16px;
    font-family: inherit;
    display: block;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    .transition(200ms);
    &::-webkit-input-placeholder {
       color: rgba(0,0,0,0.35);
    }
    + input.modal-text-input {
        margin-top: 16px;
    }
}
// Popover
.popover {
    width: 320px;
    background: #fff;
    z-index: 11000;
    margin: 0;
    top: 0;
    opacity: 0;
    left: 0;
    border-radius: 3px;
    position: absolute;
    display: none;
    box-shadow: 0px 3px 8px rgba(0,0,0,0.45);
    .transform(scale(0.9, 0.7));
    -webkit-transition-property: opacity, -webkit-transform;
    -moz-transition-property: opacity, -moz-transform;
    transition-property: opacity, transform;
    &.popover-on-top {
        .transform-origin(center bottom);
    }
    &.popover-on-bottom {
        .transform-origin(center top);
    }
    &.modal-in {
        .transform(scale(1));
        .transition(@popoverDuration);
        opacity: 1;
    }
    .list-block {
        margin: 0;
        &:first-child:last-child ul {
            .hairline-remove(top);
            .hairline-remove(bottom);
        }
        ul {
            background: none;
            .hairline-remove(top);
        }
        &:first-child {
            ul {
                border-radius: 3px 3px 0 0;
            }
            li:first-child a {
                border-radius: 3px 3px 0 0;
            }
        }
        &:last-child {
            ul {
                .hairline-remove(bottom);
                border-radius: 0 0 3px 3px;
            }
            li:last-child a {
                border-radius: 0 0 3px 3px;
            }
        }
        &:first-child:last-child {
            li:first-child:last-child a, ul:first-child:last-child {
                border-radius: 3px;
            }
        }
    }
}
.popover-inner {
    .scrollable();
}
.actions-popover {
    .list-block {
        margin: 0;
    }
}
.actions-popover-label {
    padding: 8px 16px;
    color:rgba(0,0,0,0.54);
    font-size: 16px;
    line-height: 1.3;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
    .hairline(bottom, #d2d2d6);
    &:last-child {
        .hairline-remove(bottom);
    }
}
// Popup
.popup, .login-screen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10400;
    background: #fff;
    box-sizing:border-box;
    display: none;
    .scrollable();
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    .translate3d(0,100%,0);
    &.modal-in, &.modal-out {
        .transition(@popupDuration);
    }
    &.modal-in {
        .translate3d(0,0,0);
    }
    &.modal-out {
        .translate3d(0,100%,0);
    }
}
.login-screen.modal-in, .login-screen.modal-out {
    display: block;
}
// iPad Popup
@media all and (min-width:630px) and (min-height:630px) {
    .popup:not(.tablet-fullscreen) {
        width: 630px;
        height: 630px;
        left: 50%;
        top: 50%;
        margin-left: -315px;
        margin-top: -315px;
        box-shadow: 0px 20px 44px rgba(0,0,0,0.5);
        border-radius: 3px;
        .translate3d(0,1024px,0);
        &.modal-in {
            .translate3d(0,0,0);
        }
        &.modal-out {
            .translate3d(0,1024px,0);
        }
    }
}
html.with-statusbar-overlay {
    // iPhone with statusbar overlay
    @media all and (max-width:629px), (max-height:629px) {
        .popup {
            height: ~"-webkit-calc(100% - 20px)";
            height: ~"calc(100% - 20px)";
            top: 20px;
        }
        .popup-overlay {
            z-index: 9800;
        }
    }
    .login-screen, .popup.tablet-fullscreen {
        height: ~"-webkit-calc(100% - 20px)";
        height: ~"calc(100% - 20px)";
        top: 20px;
    }
}

//Preloaders modals
.modal-preloader {
    .modal-title, .modal-inner {
        text-align: center;
    }
}
.modal .preloader {
    width: 36px;
    height: 36px;
}
.preloader-indicator-overlay {
    visibility: visible;
    opacity: 0;
    background: none;
}
.preloader-indicator-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 8px;
    margin-left: -25px;
    margin-top: -25px;
    background: rgba(0,0,0,0.8);
    z-index: 11000;
    border-radius: 4px;
    .preloader {
        display: block;
        width: 36px;
        height: 36px;
    }
}

// Picker Modal
.picker-modal {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 260px;
    z-index: 11500;
    display: none;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -ms-transition-property: -ms-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    background: #fff;
    .translate3d(0,100%,0);
    &.modal-in, &.modal-out {
        .transition(400ms);
    }
    &.modal-in {
        .translate3d(0,0,0);
    }
    &.modal-out {
        .translate3d(0,100%,0);
    }
    .picker-modal-inner {
        height: 100%;
        position: relative;
    }
    .toolbar {
        position: relative;
        width: 100%;
        + .picker-modal-inner {
            height: ~"-webkit-calc(100% - @{toolbarSize})";
            height: ~"-moz-calc(100% - @{toolbarSize})";
            height: ~"calc(100% - @{toolbarSize})";
        }
    }
    &.picker-modal-inline, .popover & {
        display: block;
        position: relative;
        background: none;
        z-index: inherit;
        .translate3d(0,0,0);
        .toolbar {
            .hairline(bottom, #929499);
        }
    }
    .popover & {
        width: auto;
        .toolbar {
            border-radius: 2px 2px 0 0;
        }
    }
}


table list link style updated

table list link style updated

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/shine-js/shine-react.git/'


Exposed captions should be always black

Exposed captions should be always black

/* === Photo Browser === */
.photo-browser {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    body > & {
        opacity: 0;
        display: none;
        .transform(translate3d(0,0,0));
        &.photo-browser-in {
            display: block;
            .animation(photoBrowserIn 400ms forwards);
        }
        &.photo-browser-out {
            display: block;
            .animation(photoBrowserOut 400ms forwards);
        }
        html.with-statusbar-overlay & {
            height: ~"-webkit-calc(100% - 20px)";
            height: ~"-moz-calc(100% - 20px)";
            height: ~"-ms-calc(100% - 20px)";
            height: ~"calc(100% - 20px)";
            top: 20px;
        }
    }
    .popup > &, body > & {
        .navbar, .toolbar {
            .transform(translate3d(0,0,0));
        }
    }

}
.photo-browser, .view[data-page="photo-browser-slides"] {
    .navbar, .toolbar {
        background: rgba(247,247,247,0.95);
        .transition(400ms);
    }
}

.view[data-page="photo-browser-slides"] .page[data-page="photo-browser-slides"]{
    .navbar, .toolbar {
        .transform(translate3d(0,0,0));
    }
}
.photo-browser-exposed {
    .navbar, .toolbar {
        opacity: 0;
        visibility: hidden;
        pointer-events:none;
    }
    .photo-browser-slider-container {
        background: #000;
    }
}
.photo-browser-captions {
    pointer-events:none;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 10;
    opacity: 1;
    .transition(400ms);
    &.photo-browser-captions-exposed {
        opacity: 0;
    }
}
.toolbar ~ .photo-browser-captions {
    bottom: 44px;
    .transform(translate3d(0, 0px, 0));
    .photo-browser-exposed & {
        .transform(translate3d(0, 44px, 0));
    }
    &.photo-browser-captions-exposed {
        .transform(translate3d(0, 0px, 0));
    }
}
.photo-browser-caption {
    .border-box();
    .transition(300ms);
    position:absolute;
    bottom:0;
    left:0;
    opacity: 0;
    padding:4px 5px;
    width:100%;
    text-align:center;
    color:#fff;
    background: rgba(0,0,0,0.8);
    &:empty {
        display: none;
    }
    &.photo-browser-caption-active {
        opacity: 1;
    }
    .photo-browser-captions-light & {
        background: rgba(255,255,255,0.8);
        color:#000;
    }
    .photo-browser-exposed & {
        color:#fff;
        background: rgba(0,0,0,0.8);
    }
}

.photo-browser-slider-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    .transition(400ms);
}
.photo-browser-slider-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    .flexbox();
}
.photo-browser-link-inactive {
    opacity: 0.3;
}
.photo-browser-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .flexbox();
    .justify-content(center);
    .align-items(center);
    .flex-shrink(0);
    .border-box();
    span {
        width: 100%;
        text-align: center;
        display: none;
    }
    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        display: none;
    }
    &.slider-slide-active, &.slider-slide-next, &.slider-slide-prev {
        span {
            display: block;
        }
        img {
            display: inline;
        }
    }
    iframe {
        width: 100%;
        height: 100%;
    }
}

.photo-browser-dark {
    .navbar, .toolbar {
        background: rgba(30,30,30,0.8);
        border: none;
        color:#fff;
        a {
            color:#fff;
        }
    }
    .photo-browser-slider-container {
        background: #000;
    }

}

@-webkit-keyframes photoBrowserIn {
    0% {
        -webkit-transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
}
@keyframes photoBrowserIn {
    0% {
        transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes photoBrowserOut {
    0% {
        -webkit-transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
}
@keyframes photoBrowserOut {
    0% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
}

/* === Photo Browser === */
.photo-browser {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
    body > & {
        opacity: 0;
        display: none;
        .transform(translate3d(0,0,0));
        &.photo-browser-in {
            display: block;
            .animation(photoBrowserIn 400ms forwards);
        }
        &.photo-browser-out {
            display: block;
            .animation(photoBrowserOut 400ms forwards);
        }
        html.with-statusbar-overlay & {
            height: ~"-webkit-calc(100% - 20px)";
            height: ~"-moz-calc(100% - 20px)";
            height: ~"-ms-calc(100% - 20px)";
            height: ~"calc(100% - 20px)";
            top: 20px;
        }
    }
    .popup > &, body > & {
        .navbar, .toolbar {
            .transform(translate3d(0,0,0));
        }
    }

}
.photo-browser, .view[data-page="photo-browser-slides"] {
    .navbar, .toolbar {
        background: rgba(247,247,247,0.95);
        .transition(400ms);
    }
}

.view[data-page="photo-browser-slides"] .page[data-page="photo-browser-slides"]{
    .navbar, .toolbar {
        .transform(translate3d(0,0,0));
    }
}
.photo-browser-exposed {
    .navbar, .toolbar {
        opacity: 0;
        visibility: hidden;
        pointer-events:none;
    }
    .photo-browser-slider-container {
        background: #000;
    }
}
.photo-browser-captions {
    pointer-events:none;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    z-index: 10;
    opacity: 1;
    .transition(400ms);
    &.photo-browser-captions-exposed {
        opacity: 0;
    }
}
.toolbar ~ .photo-browser-captions {
    bottom: 44px;
    .transform(translate3d(0, 0px, 0));
    .photo-browser-exposed & {
        .transform(translate3d(0, 44px, 0));
    }
    &.photo-browser-captions-exposed {
        .transform(translate3d(0, 0px, 0));
    }
}
.photo-browser-caption {
    .border-box();
    .transition(300ms);
    position:absolute;
    bottom:0;
    left:0;
    opacity: 0;
    padding:4px 5px;
    width:100%;
    text-align:center;
    color:#fff;
    background: rgba(15,15,15,0.8);
    &:empty {
        display: none;
    }
    &.photo-browser-caption-active {
        opacity: 1;
    }
    .photo-browser-captions-light & {
        background: rgba(255,255,255,0.8);
        color:#000;
    }
}

.photo-browser-slider-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    .transition(400ms);
}
.photo-browser-slider-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    .flexbox();
}
.photo-browser-link-inactive {
    opacity: 0.3;
}
.photo-browser-slide {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .flexbox();
    .justify-content(center);
    .align-items(center);
    .flex-shrink(0);
    .border-box();
    span {
        width: 100%;
        text-align: center;
        display: none;
    }
    img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        display: none;
    }
    &.slider-slide-active, &.slider-slide-next, &.slider-slide-prev {
        span {
            display: block;
        }
        img {
            display: inline;
        }
    }
    iframe {
        width: 100%;
        height: 100%;
    }
}

.photo-browser-dark {
    .navbar, .toolbar {
        background: rgba(30,30,30,0.8);
        border: none;
        color:#fff;
        a {
            color:#fff;
        }
    }
    .photo-browser-slider-container {
        background: #000;
    }

}

@-webkit-keyframes photoBrowserIn {
    0% {
        -webkit-transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
}
@keyframes photoBrowserIn {
    0% {
        transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes photoBrowserOut {
    0% {
        -webkit-transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
}
@keyframes photoBrowserOut {
    0% {
        transform: translate3d(0,0,0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate3d(0,0,0) scale(0.5);
        opacity: 0;
    }
}


Fixed plus sign absolute positioning...

Fixed plus sign absolute positioning...

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/DellGDC/dell-ui-components.git/'


fixed uk-animation-bottom-center

fixed uk-animation-bottom-center

// Name:            Animation
// Description:     Provides a useful set of keyframe animations
//
// Component:       `uk-animation-*`
//
// Modifiers:       `uk-animation-fade`
//                  `uk-animation-scale-up`
//                  `uk-animation-scale-down`
//                  `uk-animation-slide-top`
//                  `uk-animation-slide-bottom`
//                  `uk-animation-slide-left`
//                  `uk-animation-slide-right`
//                  `uk-animation-scale`
//                  `uk-animation-shake`
//                  `uk-animation-reverse`
//                  `uk-animation-10`
//                  `uk-animation-top-left`
//                  `uk-animation-top-center`
//                  `uk-animation-top-right`
//                  `uk-animation-middle-left`
//                  `uk-animation-middle-right`
//                  `uk-animation-bottom-left`
//                  `uk-animation-bottom-center`
//                  `uk-animation-bottom-right`
//
// Uses:            Scrollspy
//
// Used by:         Dropdown
//                  Icon
//                  Search
//                  Datepicker
//                  Slideshow
//
// ========================================================================

/* ========================================================================
   Component: Animation
 ========================================================================== */

[class*='uk-animation-'] {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Hide animated element if scrollspy is used */
@media screen {

    [data-uk-scrollspy*='uk-animation-'] { opacity: 0; }

}

/*
 * Fade
 */

.uk-animation-fade {
    -webkit-animation-name: uk-fade;
    animation-name: uk-fade;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/*
 * Fade with scale
 */

.uk-animation-scale-up {
    -webkit-animation-name: uk-fade-scale-02;
    animation-name: uk-fade-scale-02;
}

.uk-animation-scale-down {
    -webkit-animation-name: uk-fade-scale-18;
    animation-name: uk-fade-scale-18;
}

/*
 * Fade with slide
 */

.uk-animation-slide-top {
    -webkit-animation-name: uk-fade-top;
    animation-name: uk-fade-top;
}

.uk-animation-slide-bottom {
    -webkit-animation-name: uk-fade-bottom;
    animation-name: uk-fade-bottom;
}

.uk-animation-slide-left {
    -webkit-animation-name: uk-fade-left;
    animation-name: uk-fade-left;
}

.uk-animation-slide-right {
    -webkit-animation-name: uk-fade-right;
    animation-name: uk-fade-right;
}

/*
 * Scale
 */

.uk-animation-scale {
    -webkit-animation-name: uk-scale-12;
    animation-name: uk-scale-12;
}

/*
 * Shake
 */

.uk-animation-shake {
    -webkit-animation-name: uk-shake;
    animation-name: uk-shake;
}

/* Direction modifiers
 ========================================================================== */

.uk-animation-reverse {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

/* Duration modifiers
========================================================================== */

.uk-animation-10 {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

/* Origin modifiers
========================================================================== */

.uk-animation-top-left {
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
}

.uk-animation-top-center {
     -webkit-transform-origin: 50% 0;
     transform-origin: 50% 0;
}

.uk-animation-top-right {
     -webkit-transform-origin: 100% 0;
     transform-origin: 100% 0;
}

.uk-animation-middle-left {
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
}

.uk-animation-middle-right {
     -webkit-transform-origin: 100% 50%;
     transform-origin: 100% 50%;
}

.uk-animation-bottom-left {
     -webkit-transform-origin: 0 100%;
     transform-origin: 0 100%;
}

.uk-animation-bottom-center {
     -webkit-transform-origin: 50% 100%;
     transform-origin: 50% 100%;
}

.uk-animation-bottom-right {
     -webkit-transform-origin: 100% 100%;
     transform-origin: 100% 100%;
}

/* Keyframes: Fade
 * Used by dropdown, datepicker and slideshow component
 ========================================================================== */

@-webkit-keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Keyframes: Fade with slide
 ========================================================================== */

/*
 * Top
 */

@-webkit-keyframes uk-fade-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom
 */

@-webkit-keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Left
 */

@-webkit-keyframes uk-fade-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Right
 */

@-webkit-keyframes uk-fade-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes: Fade with scale
 ========================================================================== */

/*
 * Scale by 0.2
 */

@-webkit-keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.5
 * Used by slideshow component
 */

@-webkit-keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.8
 */

@-webkit-keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Keyframes: Slide
 * Used by slideshow component
 ========================================================================== */

/*
 * Left
 */

@-webkit-keyframes uk-slide-left {
    0% { -webkit-transform: translateX(-100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/*
 * Right
 */

@-webkit-keyframes uk-slide-right {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/*
 * Left third
 */

@-webkit-keyframes uk-slide-left-33 {
    0% { -webkit-transform: translateX(33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left-33 {
    0% { transform: translateX(33%); }
    100% { transform: translateX(0); }
}

/*
 * Right third
 */

@-webkit-keyframes uk-slide-right-33 {
    0% { -webkit-transform: translateX(-33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right-33 {
    0% { transform: translateX(-33%); }
    100% { transform: translateX(0); }
}

/* Keyframes: Scale
 ========================================================================== */

@-webkit-keyframes uk-scale-12 {
    0% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1); }
}

@keyframes uk-scale-12 {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Keyframes: Rotate
 * Used by icon and search component
 ========================================================================== */

@-webkit-keyframes uk-rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); }
}

@keyframes uk-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* Keyframes: Shake
 ========================================================================== */

@-webkit-keyframes uk-shake {
    0%, 100% { -webkit-transform: translateX(0); }
    10% { -webkit-transform: translateX(-9px); }
    20% { -webkit-transform: translateX(8px); }
    30% { -webkit-transform: translateX(-7px); }
    40% { -webkit-transform: translateX(6px); }
    50% { -webkit-transform: translateX(-5px); }
    60% { -webkit-transform: translateX(4px); }
    70% { -webkit-transform: translateX(-3px); }
    80% { -webkit-transform: translateX(2px); }
    90% { -webkit-transform: translateX(-1px); }
}

@keyframes uk-shake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-9px); }
    20% { transform: translateX(8px); }
    30% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}

/* Keyframes: Fade with slide fixed
 * Used by dropdown and search component
 ========================================================================== */

/*
 * Top fixed
 */

@-webkit-keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom fixed
 */

@-webkit-keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

// Hooks
// ========================================================================

.hook-animation-misc;

.hook-animation-misc() {}

// Name:            Animation
// Description:     Provides a useful set of keyframe animations
//
// Component:       `uk-animation-*`
//
// Modifiers:       `uk-animation-fade`
//                  `uk-animation-scale-up`
//                  `uk-animation-scale-down`
//                  `uk-animation-slide-top`
//                  `uk-animation-slide-bottom`
//                  `uk-animation-slide-left`
//                  `uk-animation-slide-right`
//                  `uk-animation-scale`
//                  `uk-animation-shake`
//                  `uk-animation-reverse`
//                  `uk-animation-10`
//                  `uk-animation-top-left`
//                  `uk-animation-top-center`
//                  `uk-animation-top-right`
//                  `uk-animation-middle-left`
//                  `uk-animation-middle-right`
//                  `uk-animation-bottom-left`
//                  `uk-animation-bottom-center`
//                  `uk-animation-bottom-right`
//
// Uses:            Scrollspy
//
// Used by:         Dropdown
//                  Icon
//                  Search
//                  Datepicker
//                  Slideshow
//
// ========================================================================

/* ========================================================================
   Component: Animation
 ========================================================================== */

[class*='uk-animation-'] {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* Hide animated element if scrollspy is used */
@media screen {

    [data-uk-scrollspy*='uk-animation-'] { opacity: 0; }

}

/*
 * Fade
 */

.uk-animation-fade {
    -webkit-animation-name: uk-fade;
    animation-name: uk-fade;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/*
 * Fade with scale
 */

.uk-animation-scale-up {
    -webkit-animation-name: uk-fade-scale-02;
    animation-name: uk-fade-scale-02;
}

.uk-animation-scale-down {
    -webkit-animation-name: uk-fade-scale-18;
    animation-name: uk-fade-scale-18;
}

/*
 * Fade with slide
 */

.uk-animation-slide-top {
    -webkit-animation-name: uk-fade-top;
    animation-name: uk-fade-top;
}

.uk-animation-slide-bottom {
    -webkit-animation-name: uk-fade-bottom;
    animation-name: uk-fade-bottom;
}

.uk-animation-slide-left {
    -webkit-animation-name: uk-fade-left;
    animation-name: uk-fade-left;
}

.uk-animation-slide-right {
    -webkit-animation-name: uk-fade-right;
    animation-name: uk-fade-right;
}

/*
 * Scale
 */

.uk-animation-scale {
    -webkit-animation-name: uk-scale-12;
    animation-name: uk-scale-12;
}

/*
 * Shake
 */

.uk-animation-shake {
    -webkit-animation-name: uk-shake;
    animation-name: uk-shake;
}

/* Direction modifiers
 ========================================================================== */

.uk-animation-reverse {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

/* Duration modifiers
========================================================================== */

.uk-animation-10 {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

/* Origin modifiers
========================================================================== */

.uk-animation-top-left {
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
}

.uk-animation-top-center {
     -webkit-transform-origin: 50% 0;
     transform-origin: 50% 0;
}

.uk-animation-top-right {
     -webkit-transform-origin: 100% 0;
     transform-origin: 100% 0;
}

.uk-animation-middle-left {
     -webkit-transform-origin: 0 50%;
     transform-origin: 0 50%;
}

.uk-animation-middle-right {
     -webkit-transform-origin: 100% 50%;
     transform-origin: 100% 50%;
}

.uk-animation-bottom-left {
     -webkit-transform-origin: 0 100%;
     transform-origin: 0 100%;
}

.uk-animation-bottom-center {
     -webkit-transform-origin: 50% 100%;
     transform-origin: 0 100%;
}

.uk-animation-bottom-right {
     -webkit-transform-origin: 100% 100%;
     transform-origin: 100% 100%;
}

/* Keyframes: Fade
 * Used by dropdown, datepicker and slideshow component
 ========================================================================== */

@-webkit-keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes uk-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Keyframes: Fade with slide
 ========================================================================== */

/*
 * Top
 */

@-webkit-keyframes uk-fade-top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom
 */

@-webkit-keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-fade-bottom {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Left
 */

@-webkit-keyframes uk-fade-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*
 * Right
 */

@-webkit-keyframes uk-fade-right {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes uk-fade-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes: Fade with scale
 ========================================================================== */

/*
 * Scale by 0.2
 */

@-webkit-keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.2);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-02 {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.5
 * Used by slideshow component
 */

@-webkit-keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-15 {
    0% {
        opacity: 0;
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*
 * Scale by 1.8
 */

@-webkit-keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        -webkit-transform: scale(1.8);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@keyframes uk-fade-scale-18 {
    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Keyframes: Slide
 * Used by slideshow component
 ========================================================================== */

/*
 * Left
 */

@-webkit-keyframes uk-slide-left {
    0% { -webkit-transform: translateX(-100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/*
 * Right
 */

@-webkit-keyframes uk-slide-right {
    0% { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
}

/*
 * Left third
 */

@-webkit-keyframes uk-slide-left-33 {
    0% { -webkit-transform: translateX(33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-left-33 {
    0% { transform: translateX(33%); }
    100% { transform: translateX(0); }
}

/*
 * Right third
 */

@-webkit-keyframes uk-slide-right-33 {
    0% { -webkit-transform: translateX(-33%); }
    100% { -webkit-transform: translateX(0); }
}

@keyframes uk-slide-right-33 {
    0% { transform: translateX(-33%); }
    100% { transform: translateX(0); }
}

/* Keyframes: Scale
 ========================================================================== */

@-webkit-keyframes uk-scale-12 {
    0% { -webkit-transform: scale(1.2); }
    100% { -webkit-transform: scale(1); }
}

@keyframes uk-scale-12 {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Keyframes: Rotate
 * Used by icon and search component
 ========================================================================== */

@-webkit-keyframes uk-rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(359deg); }
}

@keyframes uk-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(359deg); }
}

/* Keyframes: Shake
 ========================================================================== */

@-webkit-keyframes uk-shake {
    0%, 100% { -webkit-transform: translateX(0); }
    10% { -webkit-transform: translateX(-9px); }
    20% { -webkit-transform: translateX(8px); }
    30% { -webkit-transform: translateX(-7px); }
    40% { -webkit-transform: translateX(6px); }
    50% { -webkit-transform: translateX(-5px); }
    60% { -webkit-transform: translateX(4px); }
    70% { -webkit-transform: translateX(-3px); }
    80% { -webkit-transform: translateX(2px); }
    90% { -webkit-transform: translateX(-1px); }
}

@keyframes uk-shake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-9px); }
    20% { transform: translateX(8px); }
    30% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }
}

/* Keyframes: Fade with slide fixed
 * Used by dropdown and search component
 ========================================================================== */

/*
 * Top fixed
 */

@-webkit-keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-top-fixed {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Bottom fixed
 */

@-webkit-keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes uk-slide-bottom-fixed {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

// Hooks
// ========================================================================

.hook-animation-misc;

.hook-animation-misc() {}


Style figcaptions.

Style figcaptions.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hobarrera/www.git/'


change messages to float layout to fix flexbox bug

/* === Messages === */
.messages-content {
    background: #fff;
}
.messages {
    clear: both;
    overflow: hidden;
}
.messages-date {
    text-align: center;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    margin: 10px 15px;
    color: #8e8e93;
    float: left;
    width: 100%;
    span {
        font-weight: 400;
    }
}
.message {
    margin: 1px 10px 0;
    max-width: 70%;
    float: left;
    clear: both;
    &:first-child {
        margin-top: 10px;
    }
    .message-text {
        .border-box();
        border-radius: 16px;
        padding: 6px 16px 9px;
        min-width: 48px;
        min-height: 35px;
        font-size: 17px;
        line-height: 1.2;
        word-break: break-word;
    }
    &.message-pic {
        .message-text {
            padding: 0;
            background: none;
        }
        img {
            display: block;
            height: auto;
            max-width: 100%;
            border-radius: 16px;
        }
    }
}
.message-name {
    font-size: 12px;
    line-height: 1;
    color: #8e8e93;
    margin-bottom: 2px;
    margin-top: 7px;
    .message-hide-name & {
        display: none;
    }
}
.message-label {
    font-size: 12px;
    line-height: 1;
    color: #8e8e93;
    margin-top: 4px;
    .message-hide-label & {
        display: none;
    }
}
.message-avatar {
    width: 29px;
    height: 29px;
    border-radius: 100%;
    margin-top: -29px;
    position: relative;
    top: 1px;
    background-size: cover;
    opacity: 1;
    .transition(400ms);
    .message-hide-avatar & {
        opacity: 0;
    }
}
.message-sent {
    float: right;
    .message-name {
        margin-right: 16px;
    }
    .message-label {
        margin-right: 6px;
    }
    &.message-with-avatar {
        .message-text {
            margin-right: 29px;
        }
        .message-name {
            margin-right: 45px;
        }
        .message-label {
            margin-right: 34px;
        }
    }
    .message-text {
        padding-right: 22px;
        background-color: #00d449;
        color: white;
        margin-left: auto;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
    }
    &.message-last, &.message-with-tail {
        .message-text {
            border-radius: 16px 16px 0 16px;
            -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
        }
        &.message-pic img{
            border-radius: 16px 16px 0 16px;
        }
    }
}
.message-received {
    -ms-flex-item-align: start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    .align-items(flex-start);
    .message-text {
        padding-left: 22px;
        background-color: #e5e5ea;
        color: #000;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
    }
    .message-name {
        margin-left: 16px;
    }
    .message-label {
        margin-left: 6px;
    }
    &.message-with-avatar {
        .message-text {
            margin-left: 29px;
        }
        .message-name {
            margin-left: 45px;
        }
        .message-label {
            margin-left: 34px;
        }
    }
    &.message-last, &.message-with-tail {
        .message-text {
            border-radius: 16px 16px 16px 0;
            -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
        }
        &.message-pic img{
            border-radius: 16px 16px 16px 0;
        }
    }
}
.message-last {
    margin-bottom: 8px;
}
.message-appear {
    -webkit-animation: messageAppearFromBottom 400ms;
    animation: messageAppearFromBottom 400ms;
}
.new-messages-first .message-appear {
    -webkit-animation: messageAppearFromTop 400ms;
    animation: messageAppearFromTop 400ms;
}
.messages-auto-layout {
    .message-name, .message-label {
        display: none;
    }
    .message-avatar {
        opacity: 0;
    }
    .message-first {
        .message-name {
            display: block;
        }
    }
    .message-last {
        .message-avatar {
            opacity: 1;
        }
        .message-label {
            display: block;
        }
    }
}

.toolbar.messagebar {
    .toolbar-inner {
        display: block;
        margin: 0 55px 0 50px;
        width: auto;
        left: 0;
        right: 0;
        padding: 0;
    }
    a {
        display: block;
        float: left;
        text-align: center;
    }
    .toolbar-inner a.icon-only {    //high priority
        padding: 12px 4px;
        font-size: 20px;
        margin-left: -50px;
    }
    textarea {
        display: block;
        position: absolute;
        top: 9px;
        width: 100%;
    }
    textarea + a {
        float: right;
        margin: 0;
        margin-right: -46px;
    }
}
html.retina.ios-6 {
    .message, .message.message-pic img {
        -webkit-mask-box-image:none;
        border-radius: 16px;
    }
}
@-webkit-keyframes messageAppearFromBottom {
    from {
        -webkit-transform: translate3d(0,100%,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes messageAppearFromBottom {
    from {
        transform: translate3d(0,100%,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes messageAppearFromTop {
    from {
        -webkit-transform: translate3d(0,-100%,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes messageAppearFromTop {
    from {
        transform: translate3d(0,-100%,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}

/* === Messages === */
.messages-content {
    background: #fff;
}
.messages {
    .flexbox();
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.messages-date {
    text-align: center;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    margin: 10px 15px;
    color: #8e8e93;
    span {
        font-weight: 400;
    }
}
.message {
    .border-box();
    margin: 1px 10px 0;
    max-width: 70%;
    .flexbox();
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    &:first-child {
        margin-top: 10px;
    }
    .message-text {
        .border-box();
        border-radius: 16px;
        padding: 6px 16px 9px;
        min-width: 48px;
        min-height: 35px;
        font-size: 17px;
        line-height: 1.2;
        word-break: break-word;
    }
    &.message-pic {
        .message-text {
            padding: 0;
            background: none;
        }
        img {
            display: block;
            height: auto;
            max-width: 100%;
            border-radius: 16px;
        }
    }
}
.message-name {
    font-size: 12px;
    line-height: 1;
    color: #8e8e93;
    margin-bottom: 2px;
    margin-top: 7px;
    .message-hide-name & {
        display: none;
    }
}
.message-label {
    font-size: 12px;
    line-height: 1;
    color: #8e8e93;
    margin-top: 4px;
    .message-hide-label & {
        display: none;
    }
}
.message-avatar {
    width: 29px;
    height: 29px;
    border-radius: 100%;
    margin-top: -29px;
    position: relative;
    top: 1px;
    background-size: cover;
    opacity: 1;
    .transition(400ms);
    .message-hide-avatar & {
        opacity: 0;
    }
}
.message-sent {
    -ms-flex-item-align: end;
    -webkit-align-self: flex-end;
    align-self: flex-end;
    .align-items(flex-end);
    .message-name {
        margin-right: 16px;
    }
    .message-label {
        margin-right: 6px;
    }
    &.message-with-avatar {
        .message-text {
            margin-right: 29px;
        }
        .message-name {
            margin-right: 45px;
        }
        .message-label {
            margin-right: 34px;
        }
    }
    .message-text {
        padding-right: 22px;
        background-color: #00d449;
        color: white;
        margin-left: auto;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 56% 46% 42%;
    }
    &.message-last, &.message-with-tail {
        .message-text {
            border-radius: 16px 16px 0 16px;
            -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m84 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m96 70c-6-2-12-10-12-19v-16l-14 27s8 8 26 8z'/></svg>") 50% 56% 46% 42%;
        }
        &.message-pic img{
            border-radius: 16px 16px 0 16px;
        }
    }
}
.message-received {
    -ms-flex-item-align: start;
    -webkit-align-self: flex-start;
    align-self: flex-start;
    .align-items(flex-start);
    .message-text {
        padding-left: 22px;
        background-color: #e5e5ea;
        color: #000;
        -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/></svg>") 50% 42% 46% 56%;
    }
    .message-name {
        margin-left: 16px;
    }
    .message-label {
        margin-left: 6px;
    }
    &.message-with-avatar {
        .message-text {
            margin-left: 29px;
        }
        .message-name {
            margin-left: 45px;
        }
        .message-label {
            margin-left: 34px;
        }
    }
    &.message-last, &.message-with-tail {
        .message-text {
            border-radius: 16px 16px 16px 0;
            -webkit-mask-box-image: url("data:image/svg+xml;charset=utf-8,<svg height='35' viewBox='0 0 96 70' width='48' xmlns='http://www.w3.org/2000/svg'><path d='m96 35c1 7-5 37-42 35-37 2-43-28-42-35-1-7 5-37 42-35 37-2 43 28 42 35z'/><path d='m0 70c6-2 12-10 12-19v-16l14 27s-8 8-26 8z'/></svg>") 50% 42% 46% 56%;
        }
        &.message-pic img{
            border-radius: 16px 16px 16px 0;
        }
    }
}
.message-last {
    margin-bottom: 8px;
}
.message-appear {
    -webkit-animation: messageAppearFromBottom 400ms;
    animation: messageAppearFromBottom 400ms;
}
.new-messages-first .message-appear {
    -webkit-animation: messageAppearFromTop 400ms;
    animation: messageAppearFromTop 400ms;
}
.messages-auto-layout {
    .message-name, .message-label {
        display: none;
    }
    .message-avatar {
        opacity: 0;
    }
    .message-first {
        .message-name {
            display: block;
        }
    }
    .message-last {
        .message-avatar {
            opacity: 1;
        }
        .message-label {
            display: block;
        }
    }
}
html.retina.ios-6 {
    .message, .message.message-pic img {
        -webkit-mask-box-image:none;
        border-radius: 16px;
    }
}
@-webkit-keyframes messageAppearFromBottom {
    from {
        -webkit-transform: translate3d(0,100%,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes messageAppearFromBottom {
    from {
        transform: translate3d(0,100%,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}
@-webkit-keyframes messageAppearFromTop {
    from {
        -webkit-transform: translate3d(0,-100%,0);
    }
    to {
        -webkit-transform: translate3d(0,0,0);
    }
}
@keyframes messageAppearFromTop {
    from {
        transform: translate3d(0,-100%,0);
    }
    to {
        transform: translate3d(0,0,0);
    }
}


force add widgets back

force add widgets back

// dynamically adds references to the widgets less files
// during the gulp build process

/* inject:imports */
/* endinject */

error: pathspec 'UI/src/app/css/widgets.less' did not match any file(s) known to git


Added right-input-button classes

Added right-input-button classes

fatal: unable to access 'https://github.com/Fabio-Gambacorta/aniem-abruzzo.git/': The requested URL returned error: 403


* add small nav style.

* add small nav style.

//
// Navs
// --------------------------------------------------

// Base style

.nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  > a {
    flex: 0 0 auto;
    display: flex;
    min-width: (40*@rem);
    opacity: .8;
    padding: 0 @padding-base-horizontal;
    align-items: center;
    justify-content: center;
    height: (40*@rem);

    &.active {
      opacity: 1;
      font-weight: bold;
    }
  }
}

// Secondary nav

.nav-secondary {
  box-shadow: inset 0 (-1*@rem) 0 rgba(0,0,0,.1);

  > .active {box-shadow: inset 0 (-2*@rem) 0 @color-white;}

  &.primary-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-primary;}
  &.success-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-success;}
  &.danger-pale > .active    {box-shadow: inset 0 (-2*@rem) 0 @color-danger;}
  &.warning-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-warning;}
  &.important-pale > .active {box-shadow: inset 0 (-2*@rem) 0 @color-important;}
  &.special-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-special;}
}

// Skin options

.nav.circle {border-radius: (20*@rem)}

.nav.outline {
  > a {
    border-right: @border-width solid transparent;
    border-right-color: inherit;

    &:last-child {border-right: none}

    &.active {
      color: @color-fore;
      background-color: @color-back;
    }
  }
}

// Large navs

.nav-lg {> a {height: (48*@rem);}}

.nav-sm {
  > a {
    height: (30*@rem);
    min-width: (30*@rem);
    padding: 0 @padding-small-horizontal;
  }
}

// Affix navs

.nav.affix {
  background-color: @color-back;
  &:extend(.nav-lg all);
}

.with-nav-top                   {padding-top: (48*@rem);}
.with-nav-bottom                {padding-bottom: (48*@rem);}
.with-heading-top.with-nav-top  {
  padding-top: (48*@rem)*2;

  > .nav.affix.dock-top {top: (48*@rem)}
}

.in-scroll.scroll-down {
  &.with-heading-top, .with-heading-top {
    > .nav.dock-top {
      // Yes, not 100%! The magic 99% to prevent bug in safari
      transform: translate(0, -100%);
      &.dock-auto {
        // Yes, not 200%! The magic 199% to prevent bug in safari
        transform: translate(0, -199%);
      }
    }
  }
}

.in-scroll > .dock-top .nav-secondary {.shadow-0()}

//
// Navs
// --------------------------------------------------

// Base style

.nav {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;

  > a {
    flex: 0 0 auto;
    display: flex;
    min-width: (40*@rem);
    opacity: .8;
    padding: 0 @padding-base-horizontal;
    align-items: center;
    justify-content: center;
    height: (40*@rem);

    &.active {
      opacity: 1;
      font-weight: bold;
    }
  }
}

// Secondary nav

.nav-secondary {
  box-shadow: inset 0 (-1*@rem) 0 rgba(0,0,0,.1);

  > .active {box-shadow: inset 0 (-2*@rem) 0 @color-white;}

  &.primary-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-primary;}
  &.success-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-success;}
  &.danger-pale > .active    {box-shadow: inset 0 (-2*@rem) 0 @color-danger;}
  &.warning-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-warning;}
  &.important-pale > .active {box-shadow: inset 0 (-2*@rem) 0 @color-important;}
  &.special-pale > .active   {box-shadow: inset 0 (-2*@rem) 0 @color-special;}
}

// Skin options

.nav.circle {border-radius: (20*@rem)}

.nav.outline {
  > a {
    border-right: @border-width solid transparent;
    border-right-color: inherit;

    &:last-child {border-right: none}

    &.active {
      color: @color-fore;
      background-color: @color-back;
    }
  }
}

// Large navs

.nav-lg {> a {height: (48*@rem);}}

// Affix navs

.nav.affix {
  background-color: @color-back;
  &:extend(.nav-lg all);
}

.with-nav-top                   {padding-top: (48*@rem);}
.with-nav-bottom                {padding-bottom: (48*@rem);}
.with-heading-top.with-nav-top  {
  padding-top: (48*@rem)*2;

  > .nav.affix.dock-top {top: (48*@rem)}
}

.in-scroll.scroll-down {
  &.with-heading-top, .with-heading-top {
    > .nav.dock-top {
      // Yes, not 100%! The magic 99% to prevent bug in safari
      transform: translate(0, -100%);
      &.dock-auto {
        // Yes, not 200%! The magic 199% to prevent bug in safari
        transform: translate(0, -199%);
      }
    }
  }
}

.in-scroll > .dock-top .nav-secondary {.shadow-0()}


Adds input groups theme

Adds input groups theme

error: pathspec 'input-groups.less' did not match any file(s) known to git


Delete icons.less

Delete icons.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/19smitgr/19smitgr.github.io.git/'


Update cursor z-index

Update cursor z-index

@import "ui-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

.editor.react {
  .underlayer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
  }

  .lines {
    min-width: 100%;
  }

  .cursor {
    z-index: 4;
    pointer-events: none;
  }

  .editor-contents.is-focused .cursor {
    visibility: visible;
  }

  .cursors.blink-off .cursor {
    visibility: hidden;
  }

  .horizontal-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 3;

    .scrollbar-content {
      height: 15px;
    }
  }

  .vertical-scrollbar {
    overflow-x: hidden;
  }

  .scrollbar-corner {
    position: absolute;
    overflow: auto;
    bottom: 0;
    right: 0;
  }

  .scroll-view {
    overflow: hidden;
    z-index: 0;
  }

  .scroll-view-content {
    position: relative;
    width: 100%;
  }

  .gutter {
    .line-number {
      white-space: nowrap;
      padding-left: .5em;

      .icon-right {
        padding: 0 .4em;
        &:before {
          text-align: center;
        }
      }
    }
  }
}

.editor, .editor-contents {
  overflow: hidden;
  cursor: text;
  display: -webkit-flex;
  -webkit-user-select: none;
  position: relative;
  z-index: 0;
  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier;
  line-height: 1.3;
}

.editor .gutter .line-number.cursor-line {
  opacity: 1;
}

.editor .gutter {
  overflow: hidden;
  text-align: right;
  cursor: default;
  min-width: 1em;
  box-sizing: border-box;
}

.editor .gutter .line-number {
  padding-left: .5em;
  opacity: 0.6;
}

.editor .gutter .line-numbers {
  position: relative;
}

.editor .gutter .line-number.folded.cursor-line {
  opacity: 1;
}

.editor .gutter .line-number .icon-right {
  .octicon(chevron-down, 0.8em);
  display: inline-block;
  visibility: hidden;
  padding-left: .1em;
  padding-right: .5em;
  opacity: .6;
}

.editor .gutter:hover .line-number.foldable .icon-right {
  visibility: visible;

  &:before {
    content: @chevron-down;
  }

  &:hover {
    opacity: 1;
  }
}

.editor .gutter, .editor .gutter:hover {
  .line-number.folded .icon-right {
    .octicon(chevron-right, 0.8em);
    visibility: visible;

    &:before { // chevron-right renders too far right compared to chevron-down
      position: relative;
      left: -.1em;
      content: @chevron-right;
    }
  }
}

.editor .fold-marker:after {
  .icon(0.8em, inline);
  content: @ellipsis;
  padding-left: 0.2em;
}

.editor .line.cursor-line .fold-marker:after {
  opacity: 1;
}

.editor.is-blurred .line.cursor-line {
  background: rgba(0, 0, 0, 0);
}

.editor .invisible-character {
  font-weight: normal !important;
  font-style: normal !important;
}

.editor .indent-guide {
  display: inline-block;
  box-shadow: inset 1px 0;
}

.editor .vertical-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 15px;
  overflow-y: auto;
  z-index: 3;
}

.editor .scroll-view {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex: 1;
  min-width: 0;
  position: relative;
}

.editor.soft-wrap .scroll-view {
  overflow-x: hidden;
}

.editor .underlayer {
  z-index: 0;
  position: absolute;
  min-height: 100%;
}

.editor .lines {
  position: relative;
  z-index: 1;
}

.editor .overlayer {
  z-index: 2;
  position: absolute;
}

.editor .line {
  white-space: pre;
}

.editor .line span {
  vertical-align: top;
}

.editor .cursor {
  position: absolute;
  border-left: 1px solid;
}

.editor .cursor,
.editor.is-focused .cursor.blink-off {
  visibility: hidden;
}

.editor.is-focused .cursor {
  visibility: visible;
}

.cursor.hidden-cursor {
  display: none;
}

.editor .hidden-input {
  padding: 0;
  border: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}

.editor .selection .region {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.editor.mini {
  height: auto;
  line-height: 25px;

  .cursor {
    width: 2px;
    line-height: 20px;
    margin-top: 2px;
  }

  .gutter {
    display: none;
  }

  .scroll-view {
    overflow: hidden;
  }

  .placeholder-text {
    color: @text-color-subtle;
  }
}

@import "ui-variables";
@import "octicon-utf-codes";
@import "octicon-mixins";

.editor.react {
  .underlayer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -2;
  }

  .lines {
    min-width: 100%;
  }

  .cursor {
    z-index: 2;
    pointer-events: none;
  }

  .editor-contents.is-focused .cursor {
    visibility: visible;
  }

  .cursors.blink-off .cursor {
    visibility: hidden;
  }

  .horizontal-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 3;

    .scrollbar-content {
      height: 15px;
    }
  }

  .vertical-scrollbar {
    overflow-x: hidden;
  }

  .scrollbar-corner {
    position: absolute;
    overflow: auto;
    bottom: 0;
    right: 0;
  }

  .scroll-view {
    overflow: hidden;
    z-index: 0;
  }

  .scroll-view-content {
    position: relative;
    width: 100%;
  }

  .gutter {
    .line-number {
      white-space: nowrap;
      padding-left: .5em;

      .icon-right {
        padding: 0 .4em;
        &:before {
          text-align: center;
        }
      }
    }
  }
}

.editor, .editor-contents {
  overflow: hidden;
  cursor: text;
  display: -webkit-flex;
  -webkit-user-select: none;
  position: relative;
  z-index: 0;
  font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier;
  line-height: 1.3;
}

.editor .gutter .line-number.cursor-line {
  opacity: 1;
}

.editor .gutter {
  overflow: hidden;
  text-align: right;
  cursor: default;
  min-width: 1em;
  box-sizing: border-box;
}

.editor .gutter .line-number {
  padding-left: .5em;
  opacity: 0.6;
}

.editor .gutter .line-numbers {
  position: relative;
}

.editor .gutter .line-number.folded.cursor-line {
  opacity: 1;
}

.editor .gutter .line-number .icon-right {
  .octicon(chevron-down, 0.8em);
  display: inline-block;
  visibility: hidden;
  padding-left: .1em;
  padding-right: .5em;
  opacity: .6;
}

.editor .gutter:hover .line-number.foldable .icon-right {
  visibility: visible;

  &:before {
    content: @chevron-down;
  }

  &:hover {
    opacity: 1;
  }
}

.editor .gutter, .editor .gutter:hover {
  .line-number.folded .icon-right {
    .octicon(chevron-right, 0.8em);
    visibility: visible;

    &:before { // chevron-right renders too far right compared to chevron-down
      position: relative;
      left: -.1em;
      content: @chevron-right;
    }
  }
}

.editor .fold-marker:after {
  .icon(0.8em, inline);
  content: @ellipsis;
  padding-left: 0.2em;
}

.editor .line.cursor-line .fold-marker:after {
  opacity: 1;
}

.editor.is-blurred .line.cursor-line {
  background: rgba(0, 0, 0, 0);
}

.editor .invisible-character {
  font-weight: normal !important;
  font-style: normal !important;
}

.editor .indent-guide {
  display: inline-block;
  box-shadow: inset 1px 0;
}

.editor .vertical-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 15px;
  overflow-y: auto;
  z-index: 3;
}

.editor .scroll-view {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-flex: 1;
  min-width: 0;
  position: relative;
}

.editor.soft-wrap .scroll-view {
  overflow-x: hidden;
}

.editor .underlayer {
  z-index: 0;
  position: absolute;
  min-height: 100%;
}

.editor .lines {
  position: relative;
  z-index: 1;
}

.editor .overlayer {
  z-index: 2;
  position: absolute;
}

.editor .line {
  white-space: pre;
}

.editor .line span {
  vertical-align: top;
}

.editor .cursor {
  position: absolute;
  border-left: 1px solid;
}

.editor .cursor,
.editor.is-focused .cursor.blink-off {
  visibility: hidden;
}

.editor.is-focused .cursor {
  visibility: visible;
}

.cursor.hidden-cursor {
  display: none;
}

.editor .hidden-input {
  padding: 0;
  border: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
}

.editor .selection .region {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.editor.mini {
  height: auto;
  line-height: 25px;

  .cursor {
    width: 2px;
    line-height: 20px;
    margin-top: 2px;
  }

  .gutter {
    display: none;
  }

  .scroll-view {
    overflow: hidden;
  }

  .placeholder-text {
    color: @text-color-subtle;
  }
}


completely revised font-size and line-height, using percentage size and units for line-height

fatal: unable to access 'https://github.com/dedalozzo/pit-bootstrap.git/': The requested URL returned error: 403