.loader-container{
    background: #ffffffc9;
    height: 100vh;
    z-index: 1000000;
    display: flex;
    position: fixed;
    width: 100vw;
    justify-content: center;
    align-items: center;
}
.loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    /* margin-left: 50%; */
    /* margin-top: 40vh; */
    transform: translate(-25px, -25px);
    /* align-items: center; */
    /* display: flex; */
}

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

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

.bottom-bar-loader {
    background: #ffffffc9;
    height: 100vh;
    z-index: 1000000;
    display: flex;
    position: fixed;
    width: 100vw;
    justify-content: center;
    align-items: center;
    left: 0;
    top: 0;
}
.bottom-bar-loader .loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: spin1 2s linear infinite;
    animation: spin1 2s linear infinite;
    /* margin-left: 50%; */
    /* margin-top: 40vh; */
    transform: translate(-25px, -25px);
    /* align-items: center; */
    /* display: flex; */
}

/* Safari */
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}



.load-more-loader {
    background: #ffffffc9;
    /* height: 100vh; */
    z-index: 1000000;
    display: flex;
    position: fixed;
    width: 100vw;
    justify-content: center;
    align-items: center;
    bottom: 0;
    left: calc(11vw);
    /* background: red; */
}
.load-more-loader .loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: spin2 2s linear infinite;
    animation: spin2 2s linear infinite;
    /* margin-left: 50%; */
    /* margin-top: 40vh; */
    transform: translate(-25px, -25px);
    /* align-items: center; */
    /* display: flex; */
}

/* Safari */
@-webkit-keyframes spin2 {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


.small-loader-container {
    position: relative; /* Ensure the loader positions relative to this container */
}

.small-loader {
    background: #ffffffc9;
    z-index: 1000000;
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;            
}

.small-loader .loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: spin2 2s linear infinite;
    animation: spin2 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin2 {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}






.sidebar-loader-container{
    background: #ffffffc9;
    height: 80vh;
    z-index: 1000000;
    display: flex;
    position: fixed;
    width: 360px;
    justify-content: center;
    align-items: center;
}
.sidebar-loader {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: sidebarSpin 2s linear infinite;
    animation: sidebarSpin 2s linear infinite;
    /* margin-left: 50%; */
    /* margin-top: 40vh; */
    transform: translate(-25px, -25px);
    /* align-items: center; */
    /* display: flex; */
}

/* Safari */
@-webkit-keyframes sidebarSpin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes sidebarSpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}