/*___Reset_______________________________________*/

embed { vertical-align: top; }

.clear:before, .clear:after { content: " "; display: table; }
.clear:after { clear: both; }


.left { float: left !important; }
.right { float: right !important; }

.en-font { font-family: verdana,sans-serif !important; font-size: 0.9em !important; }
/*___End of Reset________________________________*/



.section-title { border-bottom: 2px solid orange; color: orange; font-weight: bold; margin: 0 0.1%; padding: 0.4%; }

.main-content { }

.tbl { width: 100%; border-collapse: collapse; border-spacing: 0; }
    .tbl thead th { background: #555; color: #fff; }
    .tbl tbody tr { }
    .tbl td, .tbl th { padding: 5px; border: 1px solid #ccc; }
    .tbl tbody tr:nth-child(2n) { background: #f9f9f9; }
    .tbl tbody tr:hover { background: #eee; }
    .tbl tbody tr td.option { text-align: center; }
        .tbl tbody tr td.option a { margin: 0 3px; }

/* Message Box Styles ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.messageResult { position: fixed; top: 0; left: 0; padding: 10px; width: 100%; display: none; direction: rtl; z-index: 1000; color: #fff; }
.success { background-color: yellowGreen; }
.error { background-color: red; }
.warning { background-color: orange; }
    .success p, .error p, .warning p { font-size: 15px; margin: 5px 40px; font-size: 20px; }
/* End of Message Box Styles ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */

.add-content { }
    .add-content:after { content: attr(title); }

.form-container { width: 85%; margin-bottom: 40px; }
.form-detail-container { background: none repeat scroll 0 0 rgba(1, 1, 1, 0.5); color: #fff; margin-bottom: 20px; }
    .form-detail-container ul { padding: 1%; }
.control-container { background: rgba(1, 1, 1, 0.6); border-right: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); color: #fff; height: 100%; left: 0; position: fixed; top: 0; width: 15%; }
    .control-container li { border-bottom: 1px dashed rgba(255, 255, 255, 0.17); padding: 2px 2.5%; }
        .control-container li a { cursor: pointer; }
        .control-container li:hover { background: rgba(1,1,1,.1); }
.form-fields-container { padding: 0 0.5%; }
    .form-fields-container li { padding: 1% 0; border-bottom: 2px dashed #aaa; background: #fff; }
        .form-fields-container li:last-child { border-bottom: none; }
        .form-fields-container li .remove-field { }

.btn-container { background: rgba(0, 0, 0, 0.45); bottom: 0; height: 40px; padding: 3px; position: fixed; right: 0; text-align: left; width: 85%; }

.lstItems { width: 150px; }
    .lstItems li { border-bottom: 1px dashed #ccc; padding: 1px 5px; }

.required { color: red; font-size: 0.7em; vertical-align: super; }

.sortable-placeholder { border: 2px dashed orange !important; background: #fbf9ee !important; opacity: 50; height: 10em; }

.search-container { min-height: 100px; }
    .search-container li { border-bottom: 1px solid #e8e8e8; padding: 7px 3px; }
        .search-container li .remove { cursor: pointer; border: 1px solid #ccc; border-radius: 50%; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); color: #444; font-size: 0.7em; padding: 0 7px; margin-top: 7px; }
            .search-container li .remove:hover { background: #ccc; color: #fff; }

.sortable li{ line-height: 1.7em; border-top:1px solid #ccc;cursor:move;}
.ui-state-highlight { height: 1.5em; line-height: 1.7em; }