body {
    font-family: Arial, Helevetica, Sans-serif;
    font-size: 12px;
    background: #e4e4e4 url('../../images/random_grey_variations.png') repeat center top fixed;
}

button {
	font-size: 12px !important;
	width: 30% !important;
	margin-left: 1% !important;
}

.content {
    width: 75%;
    height: 100%;
    float: left;
}

.dt-user-group {
    background: #8792a3 !important;
    color: #FFFFFF;
}

.fg-toolbar {
	background: #FFFFFF !important;
	border-radius: 0px !important;
	-moz-border-radius: 0px !important;
	-webkit-border-radius: 0px !important;
	
	border: 0px !important;
} 

.footer-bar {
    height: calc(5% - 2px);
    width: calc(100% - 2px);
    float: left;
}

.header-text {
    text-align: center;
    height: calc(5% - 2px);
    float: left;
    width: calc(100% - 2px);
}

.result-table {
    width: calc(100% - 2px);
    height: calc(85% - 2px);
    float: left;
	overflow-x: hidden;
	overflow-y: auto;
}

.sync-controls {
    width: 20%;
    float: left;
    height: 100%; 
}

.sync-control-buttons {
    height: 20%;
    
}

.sync-control-buttons > button {
    margin: 0% !important;
    width: 100% !important; 
    float: left !important;
    border-radius: 0px !important;
    text-align: left !important;
    padding-left: 5px;
}

.sync-control-header {
    height: calc(5% - 2px);
    width: calc(100% - 2px);
    text-align: center;
    float: left;
    line-height: 24px;
    min-height: 24px;
}

.sync-control-panel {
    width: calc(100% - 2px);
    height: calc(90% - 2px);
    float: left;
}

.sync-control-progress {
    height: 5%;
    width: 100%;
}

#sync-progress-counter {
    width:              calc(90% - 2px);
    height:             calc(100% - 2px);
    border-radius: 0px !important; 
    margin: auto;
}

#sync-progress-counter > .ui-progressbar-value{
    margin: 0px !important;
    height: calc(100% - 2px) !important;
    position: relative !important;
    top: -100% !important;
    z-index: 1000;
}

#sync-progress-label {
    color:              #000000;
    text-align:         center;
    line-height:        200%;
    height: 100%;
    z-index: 1001;
}


/* CSS for Special DT Search Filters 
 They are in the .search-controls area 
 Which is 20% height, */
.content-filters {
    width: 100%;
    height: 65%;
    float: left;
    overflow-x: hidden;
    overflow-y: scroll;
}

/* Container for search boxes */
.column-filter-widgets {
    width: 100%;
    height: 100%;
}

/* Container for each individual Search box */
.column-filter-widget {
    width: calc(100% - 2px);
    height: auto;
    float: left;
}

.filter-header {
	width: calc(100% - 2px);
	height: calc(5% - 2px);
	margin-top: 10%;
	text-align: center;
	line-height: 24px;
	min-height: 24px;
}

/* Filter Text under search (we are moving it) */
.filter-term {
    display: block;
    text-decoration: none; 
    padding-left: 10px; 
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: #0259C4;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-weight:lighter;
    font-size: 12px;
    margin-top: 3px;
    margin-left: 5px;
    width: 80% !important;
    float: left;
}

.filter-term:hover { 
    background-color: #FF0000; 
    color: #FFFFFF;
} 

.filter-term-box {
    width: 100%;
}

.filter-term-close {
    float: left;
    margin-top: 5px;   
    margin-left: 5px;   
}

select {
    padding:3px;
    margin: 5px;

    background: #ffffff;
    color:#0259C4;
    
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
    width: calc(100% - 10px);
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#0259C4;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#ffffff;
    position:absolute;
    pointer-events:none;
    display:block;
}