/*
generic css
 */

body
{
    background-color:    #cccccc !important;
    height:              100% !important;
    background-position: center !important;
    background-repeat:   no-repeat !important;
    background-size:     cover !important;
    overflow-y:          hidden !important;
    overflow-x:          hidden !important;
}

/*
alert section css
 */

.alert_bab_container
{
    position:            relative;
    width:               100%;
    display:             flex;
    z-index:             100001;
    justify-content:     center;
    align-items:         center;
    animation:           fade-out-div 0.4s ease-in-out;
    -webkit-animation:   fade-out-div 0.4s ease-in-out;
    -moz-animation:      fade-out-div 0.4s ease-in-out;
    animation-fill-mode: forwards;
    animation-delay:     6s;
}

.alert_bab
{
    position:   absolute;
    margin-top: 112px;
    max-width:  349px;
    word-wrap:  break-word;
    text-align: left;
}

.alert_bab_user
{
    position:   fixed !important;
    max-width:  30em !important;
    width:      auto !important;
    min-width:  11em !important;
    margin-top: 10em !important;
    word-wrap:  break-word !important;
    text-align: left !important;
    display:    inline-block !important;
}

/*
loading bar
 */

#total_overlay
{
    background-color: rgba(65, 60, 60, 0.9) !important;
    display:          none;
    position:         absolute;
    width:            100%;
    height:           100%;
    z-index:          1000001;
}

.loader
{
    width:               64px;
    height:              64px;
    position:            relative;
    background-image:    linear-gradient(#FFF 16px, transparent 0),
                         linear-gradient(#067ff3 16px, transparent 0),
                         linear-gradient(#03b6de 16px, transparent 0),
                         linear-gradient(#FFF 16px, transparent 0);
    background-repeat:   no-repeat;
    background-size:     16px 16px;
    background-position: left top, left bottom, right top, right bottom;
    animation:           rotate 1s linear infinite;
    right:               0;
    left:                0;
    top:                 42%;
    display:             none;
    z-index:             1000001;
    margin:              auto;
}

@keyframes rotate
{
    0%
    {
        width:     64px;
        height:    64px;
        transform: rotate(0deg)
    }
    50%
    {
        width:     30px;
        height:    30px;
        transform: rotate(180deg)
    }
    100%
    {
        width:     64px;
        height:    64px;
        transform: rotate(360deg)
    }
}


/*
end loading bar
 */
.icons
{
    width:  30px !important;
    height: 30px !important;
    cursor: grab;
}

.icons:hover
{
    background-color: rgba(218, 218, 218, 0.84);
    cursor:           grab;
    width:  33px !important;
    height: 33px !important;
}

:root
{
    --primary-color:    #3498db;
    --background-color: #f5f7fa;
    --text-color:       #333;
    --border-color:     #e0e0e0;
    --success-color:    #2ecc71;
    --font-family:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.fileindownload
{
    z-index:          1000001;
    width:            30%;
    position:         absolute;
    top:              55%;
    right:            0;
    left:             0;
    margin:           auto;
    background-color: #d1d1d1;
    border-radius:    8px;
    padding:          16px;
    box-shadow:       0 2px 4px rgba(0, 0, 0, 0.05);
    font-family:      var(--font-family);
}

.fileindownload:hover
{
    transform: translateY(-2px);
}

.fileindownload_name
{
    font-size:     0.9rem;
    font-weight:   500;
    margin-bottom: 1rem;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.progress_download_bar
{
    position:         relative;
    height:           4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius:    2px;
    overflow:         hidden;
}

.fileindownload_bar_text
{
    position:    absolute;
    right:       0;
    top:         -1.5rem;
    font-size:   0.75rem;
    font-weight: 600;
}

.bar_download_bar_status
{
    position:         absolute;
    left:             0;
    top:              0;
    height:           100%;
    background-color: var(--accent-color);
    transition:       width 0.3s ease, background-color 0.3s ease;
}

.download-complete .bar_download_bar_status
{
    background-color: var(--success-color);
}

aside
{
    width: 30%;
}

main
{
    width: 100%;
}

/*
scrollbar css
 */

::-webkit-scrollbar
{
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track
{
    background:    transparent;
    margin-bottom: 1em;
}

/* Handle */
::-webkit-scrollbar-thumb
{
    background:    #9E9E9E;
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover
{
    background: #555;
}

/*
text ellipsis class
 */
.ellipsis
{
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    margin:        auto;
}

/*
css per html-skeleton
 */

body
{
    background:  #dae1e7;
    margin:      0;
    padding:     0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
    color:       #333;
}

@keyframes loading
{
    100%
    {
        transform: translateX(100%);
    }
}

/*
fine css per html-skeleton
 */