button[disabled]
{
filter: grayscale();
opacity: 0.5;
}

.field_cap
{
font-size: 13px;
font-weight: bold;
display: block;
letter-spacing: 0.5px;
width: 100%;
margin-bottom: 4px;
position: relative;
}

.field_cap.must_fill
{
padding-left: 10px;    
color: red;
box-sizing: border-box;
}

.field_cap.must_fill::before
{
content: '*';
color: red;
display: block;
position: absolute;
left: 0;
top: 2px;
}

.field_cap .val
{
font-weight: normal;    
}

.field_property
{
width: 100%;
position: relative;
}

.el.string.input input,
.el.email.input input,
.el.password.input input,
.el.int.input input,
.el.datetime.el input,
.el.mobile.input input
{
border: 1px solid #cdcdcd;
border-radius: 8px;
padding: 10px 16px;
width: 100%;
box-sizing: border-box;
outline: none;
font: 14px 'DefaultFont', sans;
}

.el.textarea textarea
{
border: 1px solid #cdcdcd;
border-radius: 8px;
padding: 10px 16px;
width: 100%;
height: 400px;
box-sizing: border-box;
outline: none;
font: 14px 'DefaultFont', sans;    
resize: none;
}

.el.string.input .datalist
{
max-height: 280px;    
border: 1px solid #cdcdcd;    
border-radius: 8px;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
}

.el.string.input .datalist div
{
    padding: 10px 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid #cdcdcd;    
}

.el.string.input .datalist div:last-of-type
{
    border-bottom: none;    
}

.el.datetime.el > input
{
width: 180px;
cursor: pointer;
}

.el.filelink
{
display: flex;    
gap: 8px;
}

.el.filelink > .preview
{
width: 273px;
height: 273px;
border-radius: 8px;
background-color: #f5f5f5;
border: 1px #cdcdcd solid;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.el.filelink > .preview > img
{
object-fit: cover;
display: block;
width: 100%;
}

.el.filelink > .preview > video,
.el.filelink > .preview > audio
{
width: 100%;    
}

.el.filelink .el.filelink.input
{
display: none;    
}

.el.filelink .data .field_cap
{
display: flex;
flex-direction: column;
}

.el.filelink .data .field_cap:last-of-type
{
position: absolute;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 4px;
bottom: 4px;
left: 64px;
display: flex;
flex-direction: row;
gap: 24px;
width: 138px;
justify-content: center;
align-items: baseline;
background: #fff;
border-radius: 8px;
border: 1px solid #cdcdcd;
margin-top: 0 !important;
}

.el.filelink .data .field_cap > a
{
display: flex;
}

.el.filelink .data .field_cap ~ .field_cap
{
margin-top: 8px;    
}

.el.filelink .data .field_cap .val
{
font-size: 14px;    
}

.el input[readonly],
.el textarea[readonly]
{
background: #f0f0f1;
}

.field_property ~ .field_cap
{
margin-top: 8px;
}

.checkbox_item label,
.checkbox_item.el label
{
display: flex;
}

.checkbox_item.el label
{
gap: 2px;
}

.checkbox_item input
{
padding: 0;
margin: 0;    
cursor: pointer;
}

.el.select
{
position: relative;
display: flex;
flex-direction: column;
text-align: left;
padding: 0;
}

.el.select select 
{
display: none;
}

.el.select .optionlist_container
{
display: none;
border: 1px solid #cdcdcd;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
max-height: 286px;
overflow: hidden;
margin-top: 3px;
background: #fff;
position: absolute;
z-index: 3;
top: 37px;
left: 0;
right: 0;
}

.el.select .optionlist
{
margin: 8px;
padding: 0;
list-style: none;
z-index: 12;
background-color: white;
display: none;
overflow: auto;
scrollbar-width: thin;
max-height: 270px;
display: flex;
flex-direction: column;    
padding-right: 8px;
}

.el.select .optionlist .option
{
padding: 10px 16px;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;   
border-bottom: 1px solid #cdcdcd 
}

.el.select .optionlist .option:last-of-type
{
border-bottom: none;    
}

.el.select .optionlist .option:hover
{
background: #e5f3ff !important;     
}

.el.select input
{
border: 1px solid #cdcdcd;
border-radius: 8px;
padding: 10px 32px 10px 16px;
width: 100%;
box-sizing: border-box;
outline: none;
font: 14px 'DefaultFont', sans;
}    

.el.select .dropbutton 
{
border: none;
outline: none;
background-color: transparent;
position: absolute;
width: 32px;
height: 32px;
top: 3px;
right: 0;
background-image: url(../img/down-select.svg);
background-repeat: no-repeat;
background-size: 6px 12px;
background-position: center;
cursor: pointer;
}

.field_cap.edit,
.field_cap.folder,
.field_cap.search
{
display: flex;
gap: 4px;    
}

.field_cap > a
{
display: block;
height: 16px;
width: 16px;
}

.field_cap.edit > a
{
    background: url(/_modules/filesystem/img/svg1/pencil.svg) top left no-repeat;
    background-size: 16px 16px;
}

.field_cap.folder > a
{
    background: url(/_modules/filesystem/img/svg1/folder.svg) top left no-repeat;
    background-size: 16px 16px;
}

.field_cap.search > a
{
background: url(/_modules/filesystem/img/svg1/search.svg) top left no-repeat;
background-size: 16px 16px;
}

.field_cap.add_option
{
display: flex;
gap: 4px;
padding: 16px 0 16px 8px;
background-color: #fafafa;
margin-top: 16px;
margin-left: -64px;
width: auto; 
}

.field_cap.add_option > a
{
background: url(/_modules/filesystem/img/svg1/plus.svg) top left no-repeat;    
background-size: 16px 16px;
}

/* #################################################################################### */
/* ###################################### 661 - 1024 ################################## */
/* #################################################################################### */

@media (max-width: 1024px)  
{

}

/* #################################################################################### */
/* ###################################### <= 660 ###################################### */
/* #################################################################################### */

@media (max-width: 660px)  
{
    .el.filelink 
    {
    flex-direction: column;
    align-items: center;
    }

    .el.filelink .data
    {
    width: 100%;        
    }

    .el.filelink .data .field_cap:last-of-type
    {
    bottom: auto;
    top: 254px;
    left: 50%;
    transform: translate(-50%, -50%);
    }
   
}