/* WRAPPER */

.materials-wrapper{
width:100%;
max-width:100%;
margin:0;
padding:30px 15px;
background:#232532;
border-radius:15px;
box-sizing:border-box;
}

.elementor-widget-endermania_material_list{
width:100%;
max-width:100%;
}

.elementor-widget-endermania_material_list .elementor-widget-container{
width:100%;
max-width:100%;
padding:0 !important;
margin:0 !important;
}

/* TITLE */

.material-title{
font-family:'Barlow',sans-serif;
font-size:32px;
font-weight:700;
color:white;
text-align:center;
margin:10px 0 8px 0;
text-transform:uppercase;
}

/* SUBTEXT */

.material-subtitle{
font-family:'Barlow',sans-serif;
font-size:8px;
font-weight:500;
color:#b8b8b8;
text-align:center;
margin-bottom:28px;
text-transform:uppercase;
letter-spacing:0.5px;
}

/* GRID */

.material-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding:0;
}

/* TWO COLUMNS DESKTOP */

@media(min-width:992px){

.material-grid{
grid-template-columns:1fr 1fr;
gap:18px;
}

}

/* MATERIAL CARD */

.material-card{
display:flex;
align-items:center;
justify-content:space-between;
background:#ebebeb;
border-radius:24px;
padding:15px;
gap:16px;
cursor:pointer;
transition:.2s;
}

/* LEFT SIDE */

.material-left{
display:flex;
align-items:center;
gap:14px;
flex:1;
min-width:0;
}

/* IMAGE */

.material-card img{
width:42px;
height:42px;
object-fit:contain;
flex-shrink:0;
}

/* NAME */

.material-name{
font-family:'Barlow',sans-serif;
font-size:18px;
font-weight:600;
color:#111111;
white-space:normal;
word-break:break-word;
line-height:1.2;
}

/* AMOUNT */

.material-amount{
font-family:'Barlow',sans-serif;
font-size:18px;
font-weight:700;
color:#8b8b8b;
background:#f7f7f7;
padding:10px 16px;
border-radius:14px;
margin-left:16px;
flex-shrink:0;
white-space:nowrap;
}

/* CHECKED */

.material-card.checked{
opacity:.45;
}

.material-card.checked .material-amount{
color:#ca45f7;
}

/* BUTTON */

.material-toggle{
display:block;
width:calc(100% - 10px);
margin:18px auto 5px;
padding:16px;
border:none;
border-radius:24px;
background:black;
color:white;
font-family:'Barlow',sans-serif;
font-size:16px;
font-weight:700;
cursor:pointer;
}

/* MOBILE */

@media(max-width:767px){

.material-card{
padding:14px 16px;
}

.material-card img{
width:38px;
height:38px;
}

.material-name{
font-size:16px;
}

.material-amount{
font-size:16px;
}

}