/* Fond assombri */
.overlay {
position: fixed;
inset: 0;/*
background: rgba(0,0,0,0.35);*/
display: flex;/*
justify-content: center;*/
align-items: center;
flex-direction: column;
margin-top: 5%;
}


.header-devkits{
padding-bottom: 30px;
}



/* Modale */
.modal {
background: #ffffff;
width: 500px;
border-radius: 14px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 
0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

/* Header */
.modal-header {
padding: 12px 20px 12px 20px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}

.modal-header h2 {
margin: 0;
font-size: 1.25rem;
color: #1f2937;
}

.close {
font-size: 2.0rem;
cursor: pointer;
color: #9ca3af;
}

/* Body */
.modal-body {
padding: 0px 20px 0px 20px;
max-height: 230px;
overflow: auto;
}


.kit {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #e5e7eb;
}

.kit:last-child {
border-bottom: none;
}

.kit h3 {
margin: 0;
font-size: 1rem;
color: #111827;
}

.kit p {
margin: 4px 0 0;
font-size: 0.85rem;
color: #6b7280;
}


#form-dwn-devkits button{
margin-top: 16px;
}

#nodevkits{
width: 100%; 
text-align: center; 
color:#636363; 
padding: 25px;
font-size: 17px;}


/* Boutons */
.btn {
width: 120px;
padding: 10px 18px;
border-radius: 8px;
border: none;
font-weight: 600;
cursor: pointer;
}

.btn.primary {
background: #2563eb;
color: white;
}

/*
.close:hover{
color: #2563eb;
}
*/

.btn.primary:hover {
background: #1d4ed8;}


.btn.disabled {
background: #e5e7eb;
color: #636363;
cursor: not-allowed;}


.kit.expired h3 {
color: #636363;}



/* Footer */
.modal-footer {
padding: 16px;
border-top: 1px solid #e5e7eb;/*
width: 100%;*/
text-align: center;
display: flex;
justify-content: center;
}


.btn.logout{/*
width: 100%;*/
background: #e5e7eb;
color: #636363;}


.btn.logout:hover {
background: #d3d3d3;
color: #636363;}



/* MOBILES en mode portrait */
@media (max-width: 600px) and (orientation: portrait) 
{
    .overlay{
    position: relative;
    margin-top: 16%;
    align-items: center;}
    
    .modal{
    width: 360px;}

}

/* MOBILES en mode paysage */
@media (max-width: 1000px) and (orientation: landscape) 
{
    .overlay{
    position: relative;
    margin-top: 3%;
    align-items: center;}
    
   

}