/* ===================== */
/* Spinner Loader */
/* ===================== */

.loading-rofile,
.loading-rofile div,
.loading-rofile div:after {
    box-sizing: border-box;
}

.loading-rofile {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.loading-rofile div {
    animation: loading-rofile 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.loading-rofile div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7.2px;
    height: 7.2px;
    border-radius: 50%;
    background: currentColor;
    margin: -3.6px 0 0 -3.6px;
}

.loading-rofile div:nth-child(1) {
    animation-delay: -0.036s;
}

.loading-rofile div:nth-child(1):after {
    top: 62.62742px;
    left: 62.62742px;
}

.loading-rofile div:nth-child(2) {
    animation-delay: -0.072s;
}

.loading-rofile div:nth-child(2):after {
    top: 67.71281px;
    left: 56px;
}

.loading-rofile div:nth-child(3) {
    animation-delay: -0.108s;
}

.loading-rofile div:nth-child(3):after {
    top: 70.90963px;
    left: 48.28221px;
}

.loading-rofile div:nth-child(4) {
    animation-delay: -0.144s;
}

.loading-rofile div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.loading-rofile div:nth-child(5) {
    animation-delay: -0.18s;
}

.loading-rofile div:nth-child(5):after {
    top: 70.90963px;
    left: 31.71779px;
}

.loading-rofile div:nth-child(6) {
    animation-delay: -0.216s;
}

.loading-rofile div:nth-child(6):after {
    top: 67.71281px;
    left: 24px;
}

.loading-rofile div:nth-child(7) {
    animation-delay: -0.252s;
}

.loading-rofile div:nth-child(7):after {
    top: 62.62742px;
    left: 17.37258px;
}

.loading-rofile div:nth-child(8) {
    animation-delay: -0.288s;
}

.loading-rofile div:nth-child(8):after {
    top: 56px;
    left: 12.28719px;
}

@keyframes loading-rofile {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Set loader position to front when hover*/
/* .team-img .team-social { */
/* .layout-front-profile .loading-rofile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(68, 66, 90, 0.286);
    transition: .5s;
    z-index: 1;
    opacity: 0;
} */

/* .team-item:hover .team-social { */
/* .layout-main-profile:hover .loading-rofile {
    opacity: 1;
} */

/* 
<div class="team-item rounded overflow-hidden mb-2">
    <div class="team-img position-relative">
        <img class="img-fluid" src="<?= base_url('assets/icons/') ?>icon_profile_blank.png" alt="">
        <div class="team-social">
            <a class="btn btn-outline-light btn-square mx-1" href="#"><i class="fab fa-twitter"></i></a>
            <a class="btn btn-outline-light btn-square mx-1" href="#"><i class="fab fa-facebook-f"></i></a>
            <a class="btn btn-outline-light btn-square mx-1" href="#"><i class="fab fa-linkedin-in"></i></a>
        </div>
    </div>
    <div class="bg-secondary p-4">
        <h6>Ust. Usman Abdul Majid</h6>
        <p class="m-0">Ketua Pembangunan</p>
        <p class="m-0">0857-8220-6302</p>
    </div>
</div>
*/

/* ===== END Set loader position to front when hover*/
.colorPickers {
    background-color: #2cbf5d;
    background-color: #d4426b;
    background-color: #74960e;
    background-color: #886be0;
    background-color: #c47131;
}

.loading-rofile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(68, 66, 90, 0.286);
    transition: .5s;
    border-radius: 12px;
    z-index: 1;
    opacity: 1;
}

/* ===================== */

/* ==========RESPOSIVE PADDING MARGIN=========== */
.padding-xs {
    padding: .25em;
}

.padding-sm {
    padding: .5em;
}

.padding-md {
    padding: 1em;
}

.padding-lg {
    padding: 1.5em;
}

.padding-xl {
    padding: 3em;
}

.padding-x-xs {
    padding: .25em 0;
}

.padding-x-sm {
    padding: .5em 0;
}

.padding-x-md {
    padding: 1em 0;
}

.padding-x-lg {
    padding: 1.5em 0;
}

.padding-x-xl {
    padding: 3em 0;
}

.padding-y-xs {
    padding: 0 .25em;
}

.padding-y-sm {
    padding: 0 .5em;
}

.padding-y-md {
    padding: 0 1em;
}

.padding-y-lg {
    padding: 0 1.5em;
}

.padding-y-xl {
    padding: 0 3em;
}

.padding-top-xs {
    padding-top: .25em;
}

.padding-top-sm {
    padding-top: .5em;
}

.padding-top-md {
    padding-top: 1em;
}

.padding-top-lg {
    padding-top: 1.5em;
}

.padding-top-xl {
    padding-top: 3em;
}

.padding-right-xs {
    padding-right: .25em;
}

.padding-right-sm {
    padding-right: .5em;
}

.padding-right-md {
    padding-right: 1em;
}

.padding-right-lg {
    padding-right: 1.5em;
}

.padding-right-xl {
    padding-right: 3em;
}

.padding-bottom-xs {
    padding-bottom: .25em;
}

.padding-bottom-sm {
    padding-bottom: .5em;
}

.padding-bottom-md {
    padding-bottom: 1em;
}

.padding-bottom-lg {
    padding-bottom: 1.5em;
}

.padding-bottom-xl {
    padding-bottom: 3em;
}

.padding-left-xs {
    padding-left: .25em;
}

.padding-left-sm {
    padding-left: .5em;
}

.padding-left-md {
    padding-left: 1em;
}

.padding-left-lg {
    padding-left: 1.5em;
}

.padding-left-xl {
    padding-left: 3em;
}

.margin-xs {
    margin: .25em;
}

.margin-sm {
    margin: .5em;
}

.margin-md {
    margin: 1em;
}

.margin-lg {
    margin: 1.5em;
}

.margin-xl {
    margin: 3em;
}

.margin-x-xs {
    margin: .25em 0;
}

.margin-x-sm {
    margin: .5em 0;
}

.margin-x-md {
    margin: 1em 0;
}

.margin-x-lg {
    margin: 1.5em 0;
}

.margin-x-xl {
    margin: 3em 0;
}

.margin-y-xs {
    margin: 0 .25em;
}

.margin-y-sm {
    margin: 0 .5em;
}

.margin-y-md {
    margin: 0 1em;
}

.margin-y-lg {
    margin: 0 1.5em;
}

.margin-y-xl {
    margin: 0 3em;
}

.margin-top-xs {
    margin-top: .25em;
}

.margin-top-sm {
    margin-top: .5em;
}

.margin-top-md {
    margin-top: 1em;
}

.margin-top-lg {
    margin-top: 1.5em;
}

.margin-top-xl {
    margin-top: 3em;
}

.margin-right-xs {
    margin-right: .25em;
}

.margin-right-sm {
    margin-right: .5em;
}

.margin-right-md {
    margin-right: 1em;
}

.margin-right-lg {
    margin-right: 1.5em;
}

.margin-right-xl {
    margin-right: 3em;
}

.margin-bottom-xs {
    margin-bottom: .25em;
}

.margin-bottom-sm {
    margin-bottom: .5em;
}

.margin-bottom-md {
    margin-bottom: 1em;
}

.margin-bottom-lg {
    margin-bottom: 1.5em;
}

.margin-bottom-xl {
    margin-bottom: 3em;
}

.margin-left-xs {
    margin-left: .25em;
}

.margin-left-sm {
    margin-left: .5em;
}

.margin-left-md {
    margin-left: 1em;
}

.margin-left-lg {
    margin-left: 1.5em;
}

.margin-left-xl {
    margin-left: 3em;
}

/* ==========RESPOSIVE PADDING MARGIN=========== */