body {
    font-family: Verdana,helvetica,arial,sans-serif;
    padding:20px;
    font-size:11px;
    margin:0;
}
h2 {
    font-size:18px;
    font-weight:bold;
    margin:0;
    margin-bottom:15px;
}
.demo-info{
	padding:0 0 12px 0;
}
.demo-tip{
	display:none;
}
.label-top{
    display: block;
    height: 22px;
    line-height: 22px;
}

.fontsize10{
	font-size: 10px;
}

.datagrid-header .datagrid-cell span{
    font-weight: bold;
    font-size:12px;
}
.datagrid-cell {
    font-size:12px;
}
.datagrid-cell-rownumber{
    font-size:12px;
}
.textbox-readonly .textbox-text{
    background: #AED0EA;
}
.makecolumn2 {
    float: left;
    width: 50%;
}
.makecolumn3 {
    float: left;
    width: 33.33%;
}
.textbox .textbox-text{
    font-size: 11px;
}  
.textbox-label{
    font-size: 11px;
}
.l-btn-text {
    font-size: 11px;
}


.panel-body {
    background-color: #F3F7FB;
    font-size: 11px;
}
.panel-title {
    font-size: 11px;
}
.textbox .textbox-prompt {
    font-size: 11px;
}
.combobox-item,
.combobox-group,
.combobox-stick {
  font-size: 11px;
}
.tabs-title {
    font-size: 11px;
}
.datagrid-cell,
.datagrid-cell-group,
.datagrid-header-rownumber,
.datagrid-cell-rownumber {
 font-size:11px;;
}
.datagrid-header .datagrid-cell span {
   font-size:11px;;
}
.datagrid-view .datagrid-editable-input {
   font-size:11px;;
}
.pagination .pagination-num {
   font-size:11px;;
}
.pagination-page-list {
   font-size:11px;;
}
.pagination-info {
   font-size:11px;;
}
.pagination span {
   font-size:11px;;
}
.calendar table {
   font-size:11px;;
}
.calendar table td,
.calendar table th {
 font-size:11px;;
}
.calendar-title span {
   font-size:11px;;
}
.calendar-menu {
   font-size:11px;;   
}
.calendar-menu-year {
   font-size:11px;;
}
.datebox-button a {
   font-size:11px;;
}
.progressbar-text {
   font-size:11px;;
}
.slider-tip {
   font-size:11px;;
}  
.slider-rulelabel span {
   font-size:11px;;
}
.menu {
   font-size:11px;;
}
.menu-inline {
   font-size:11px;;
  }
.menu-text {
   font-size:11px;;
}
.menu-item {
   font-size:11px;;
}
.menu-text span {
    font-size: 12px;
}
.switchbutton {
    font-size: 11px;
}
.switchbutton-on,
.switchbutton-off,
.switchbutton-handle {
 font-size:11px;;
}
.tree-title {
    font-size: 11px;
} 
.tree-node-proxy {
    font-size: 11px;
}
.tree-editor {
    font-size: 11px;
}
.tooltip-content {
    font-size: 11px;
}
.numberbox .textbox-text {
    text-align: right !important;
}
.datebox .textbox-text {
    text-align: right !important;
}
.textbox-icon {
    margin-left:5px;
    opacity: 0.7;
    filter: alpha(opacity=70);
}









/*summary*/
    .dashboard {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        width: 80%;
 padding: 20px;
    }
   .summary-card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
        transition: transform 0.3s ease, border 0.3s ease;
        border: 2px solid transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .summary-card:hover {
        transform: translateY(-10px);
        border: 2px solid #3498db;
    }
    
    .summary-card h2 {
        margin: 10px 0;
        font-size: 1.2em;
        color: #333;
text-transform:uppercase;
    }
    
    .summary-value {
        margin-top: 10px;
        font-size: 1.5em;
        font-weight: bold;
        color: #27ae60;
    }
    
    .icon {
        font-size: 2.5em;
        color: #3498db;
        margin-bottom: 10px;
    }
    
    .summary-card.large {
        grid-column: span 2;
        grid-row: span 2;
    }
    
    .summary-card.medium {
        grid-column: span 2;
    }
    
    .summary-card.small {
        grid-column: span 1;
    }