// Preloader
//––––––––––––––––––––––––––––––––––––––––––––––––––

.preloader {
    text-align: center;
    padding: 0.5em;
    width: 100%;
    color:@gray;
}

.preloader-overlay {
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: @z-index-8;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader-overlay__icon {
    width: 100px;
    height: 104px;
}

.preloader-overlay__icon::after {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1ce";
    color: #fff;
    font-size: 100px;
    -webkit-animation: preloader-spin 2s infinite linear;
    animation: preloader-spin 2s infinite linear;
    position: absolute;
    text-align: center;
}

.preloader-overlay-element::before {
    content: '';
    background-color: rgba(0,0,0,0.3);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: @z-index-8;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader-overlay-element::after {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1ce";
    color: #fff;
    font-size: 28px;
    -webkit-animation: preloader-spin 2s infinite linear;
    animation: preloader-spin 2s infinite linear;
    position: absolute;
    z-index: @z-index-9;
    top: ~"calc(50% - 14px)";
    left: ~"calc(50% - 14px)";
}

.preloader-overlay-element--clean::before {
    background-color: rgba(0,0,0,0.0);
}

.preloader-overlay-element--clean::after {
    color: rgba(0,0,0,0.3);
}

@-webkit-keyframes preloader-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }