/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/*
.checkbox-purple input[type="checkbox"] {
    transform: scale(1.5); /* Aumenta le dimensioni del checkbox 
}

    .checkbox-purple input[type="checkbox"]:checked,
    .checkbox-purple input[type="checkbox"]:focus {
        outline: none; /* Rimuove l'outline quando il checkbox è selezionato o in focus 
    }

.checkbox-purple label {
    color: purple; /* Imposta il colore del testo del checkbox su viola 
}*/

.checkbox-purple input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
   
    width: 14px;
    height: 14px;
    border: 2px solid #808080;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
}

    .checkbox-purple input[type="checkbox"]:checked {

        background-color:  #ffd703;
        list-style-type: circle;
        border: 2px solid #808080;
    }

.checkbox-purple .form-check-input[type="checkbox"] + .flag-icon {
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
}



.spinner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 15px solid #f3f3f3;
    border-top: 15px solid #4cff00;
    animation: spin 1s linear infinite;
    background-color: white;
   
}

.outer-spinner {
    width: 100px;
    height: 100px;
   
    background-color: white;
    position: absolute;
    top: 25%;
    left: 25%;
    display: block;
    
}

.container-spinner {
    width: 200px;
    height: 200px;
    border-radius: 10%;
    border: 2px solid #808080;    
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
   display:none;
    padding: 5px 5px 5px 5px;
}


.bleft  {
    position:relative;
    
}


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

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


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }
    .body-content {
        padding: 0;
    }
}


.pagination {
    display:contents;
    justify-content: center;
    padding:auto;
    margin: auto;
}

    /* Stile per i pulsanti numerici */
    .pagination td td a {
        color: #333;
        background-color: #fff;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 6px 12px;
        text-decoration: none;
    }

    .pagination td td span {
        background-color: #dcecf7;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        color: #333;
        padding: 6px 12px;
        text-decoration: none;
        
    }


   

    /* Stile per il pulsante al passaggio del mouse */
    .pagination a:hover {
        background-color: #faf9e3; /* Colore hover personalizzato (btn-warning) */
        
        color: #333; /* Colore del testo hover (ripristinato a predefinito) */
    }


    .pagination tr > td:first-child span {
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .pagination tr > td:last-child span {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        border-right: 1px solid #ccc;
    }

    .pagination tr > td:first-child a {
        border-bottom-left-radius: 4px;
        border-top-left-radius: 4px;
    }

    .pagination tr > td:last-child a {
        border-bottom-right-radius: 4px;
        border-top-right-radius: 4px;
        border-right: 1px solid #ccc;
    }

    .pagination td:hover {
       background-color:white;
    }

    .pagination td:first-child
    {
        border-top:1px solid white;
    }

.gridviewB {
    position: fixed;
    top: 100px;
    right: 0px;
    width: 50%; /* Larghezza al 100% per adattarsi alla larghezza del contenitore */
    z-index: 1;
}




.dragin {
    background-color: rgb(36,52,83);
    padding: 1rem;
    border: 1px solid black;
}



/* layout.css Style 
.upload-drop-zone*/

.upload-drop-zone {
    height: 100px;
    border: dashed red 4px;
    margin: 20px;
    background-color:white;
    border-radius:25px;
    text-align:center;
    vertical-align:center;
    font-weight:bold;
}

/*skin.css Style */
drop-zone .upload-drop-zone {
    color: #ccc;
    border-style: dashed;
    border-color: red;
    line-height: 200px;
    text-align: center;
}

.upload-drop-zone.drop {
    color: #222;
    border-color: #222;
}

.drop-area.active {
    color: #222;
    border-color: #222;
}

.upload-drop-zone.active {
    color: #222;
    border-color: #222;
}

#progress-bar {
    margin: 20px 150px;
    padding: 15px 10px;
    width: 400px;
}

.progress {
    margin: 10px 10px 10px 10px;
}


.list.section {
    text-align:left;
    margin:0px 35px;
    padding-bottom:10px;
}

.list-section li {
    display:flex;
        margin:0px 0px;
        border-radius:8px;
}

.list-section li:hover {
    box-shadow: dodgerblue 0px 0px 4px, #dcecf7 0px 12px 16px 0px;
    
}

    .list-section li .col {
        flex: 0.1;
    }

        .list-section li .col:nth-child(1) {
            flex: 0.15;
            text-align: center;
            text-align: center;
            font-size: 2em;
            margin-top: 10px;
            color: #337ab7;
        }

        .list-section li .col:nth-child(2) {
            flex: 0.75;
            text-align: left;
          //  font-size: 1rem;
            color:dodgerblue;
            padding: 8px 10px;
        }

        .list-section li .col:nth-child(2) div.name{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
            max-width:250px;
            display:inline-block;
        }


        .list-section li .col .file-name span {
            color: dodgerblue;
            float:right;

        }

        .list-section li .col .file-progress {
            width:100%;
            height:5px;
            margin-top:8px;
            border-radius:8px;
            background-color:white;

        }

        .list-section li .col .file-progress span {
            width: 0%;
            height: 100%;
            display:block;
            border-radius: 8px;
            background-image: linear-gradient(120deg, #6B99fd, #9385ff);
            transition-duration:0.4s;
        }

            .list-section li .col .file-size {
               font-size: 1.2rem;
             //  margin-top:3px;
               color: #707EA0;

            }


        .list-section li .col .cross,
        .list-section li .col .tick {
            position:relative;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            
           border-radius:50%;

        }


        .list-section li .col .cross {
            
            color: #8694b2;
            background:#dee6fd;
            width:16px;

        }

        .list-section li .col .tick {
            color: green;
            background-color:transparent;
        }


    .list-section li.complete span,
    .list-section li.complete .file-progress,
    .list-section li.complete div.cross {
        display:none;
    }

    .list-section li.in-prog .file-size,
    .list-section li.in-prog .tick {
        display: none;
    }