@charset "utf-8";
.sp_block_01{width: 100%; float: left; height: var(--sp-block-01)!important;}
.sp_block_02{width: 100%; float: left; height: var(--sp-block-02)!important;}
.sp_block_03{width: 100%; float: left; height: var(--sp-block-03)!important;}
.sp_block_04{width: 100%; float: left; height: var(--sp-block-04)!important;}
.sp_block_05{width: 100%; float: left; height: var(--sp-block-05)!important;}
.sp_block_06{width: 100%; float: left; height: var(--sp-block-06)!important;}
.sp_block_07{width: 100%; float: left; height: var(--sp-block-07)!important;}
.sp_block_08{width: 100%; float: left; height: var(--sp-block-08)!important;}
.sp_block_09{width: 100%; float: left; height: var(--sp-block-09)!important;}
.sp_block_10{width: 100%; float: left; height: var(--sp-block-10)!important;}
.sp_block_11{width: 100%; float: left; height: var(--sp-block-11)!important;}
.sp_block_12{width: 100%; float: left; height: var(--sp-block-12)!important;} 


.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999; }
.modal-box { background: #fff; padding:0px; border-radius: 10px; width: 90%; max-width:1000px;   height: 500px; overflow-y: auto; position: relative ; padding-top: }
.modal-title { font-size: 20px; font-weight: bold; text-align: center;  width: 100%; position: sticky; left: 0px; top: 0px; background-color: #333; color: #fff; height: auto; text-align: left;  padding: 20px 20px; }
.modal-title .close{ position: absolute; top: 10px; right: 20px;  background-color:transparent}
.modal-title .close i{color: #fff; font-size: 30px; }


.modal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 20px;  width: 100%; float: left; padding: 30px}



.widget-sample { border: 1px solid #ccc; border-radius: 8px; padding: 10px; cursor: pointer; text-align: center; transition: all 0.2s ease; }
.widget-sample:hover { border-color: #007BFF; background: #f0f8ff; }
.widget-sample img { width: 100%; height: auto; border-radius: 4px; }
.btn-add-block { background: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 5px; font-size: 14px; cursor: pointer; }
.block-delete-btn, .block-move-btn { padding: 6px 12px; font-size: 13px; border: none; border-radius: 4px; cursor: pointer; }
.block-delete-btn { background: #dc3545; color: #fff; }
.block-delete-btn:hover { background: #c82333; }
.block-move-btn { background: #6c757d; color: white; margin-left: 5px; }
.block-move-btn:hover { background: #5a6268; }
	
	.block-insert-btn {
    text-align: center;
    margin: 20px 0;
}
.block-insert-btn button {
    background-color: #28a745;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}
.block-insert-btn button:hover {
    background-color: #218838;
}

.block-admin-controls{ position: absolute; right: 0px;  bottom: 0px}


.block-admin_btnbox{width: 100%; float: left; display: flex;flex-direction: row;justify-content: center; grid-gap: 20px}
.block-admin_btnbox .total_save{width: auto; float: left; }

#block-container{background-color:var(--sub-body-color); width: 100%; float: left}