html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font:13px/1.231 sans-serif; font-family: Helvetica, sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; -webkit-font-smoothing: antialiased; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
b, strong, th { font-weight: bold; }
td { vertical-align: top; }
em {
    font-style: italic;
}

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; cursor: pointer; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #DDD; color:#000; text-shadow: none; }
::selection { background:#DDD; color:#000; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #DDD; text-decoration: none; }

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

body, select, input, textarea {  color: #444; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; }
a, a:active, a:visited, .link, .link:active, .link:visited { color: #607890; }
a:hover, .link:hover { color: #036; }

/*
	// ========================================== \\
   ||                                              ||
   ||              General styles !                ||
   ||                                              ||
	\\ ========================================== //
*/

html {
	min-height: 100%;
	overflow: auto;
	background-color: #E9E9E9;
}

body {
	/*width: 990px;*/
	margin: 0 auto;
	padding-top: 36px;
}

body.app-ui-panel-open {
    overflow: hidden;
}

h1 {
	padding: 35px 0 5px 0;
	text-align: center;
	font-size: 1.5em;
	font-weight: normal;
	text-shadow: 1px 1px 0 white;
}

h2 {
	font-size: 1.3em;
	font-weight: normal;
	text-align: center;
	padding: 15px 0 5px 0;
}

input[type=text], input[type=password], input[type=email], textarea {
	height: 15px;
	width: 310px;
	padding: 5px;
	line-height: 15px;
	margin: 0;
	border: 1px solid #DDD;
	background-color: #FEFEFE;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#FEFEFE));
	border-radius: 4px;
}

input[type=text][readonly=readonly], input[type=password][readonly=readonly], input[type=email][readonly=readonly], textarea[readonly=readonly] {
	color: #999;
}

input[type=button], input[type=submit], .form-button {
	display: inline-block;
	vertical-align: middle;
	padding: 6px 14px;
	border:1px solid #6a8c20;
	border-radius:4px;
	background-color: #70a201;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(rgba(255, 255, 255, 0.15)),
		to(rgba(255, 255, 255, 0.0))
	);
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.05em;
	
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
	box-shadow: inset 0px 0px 2px rgba(255, 255, 255, 0.4), 0px 1px 4px rgba(70, 70, 70, 0.5);
	-webkit-transition: background-color 150ms ease-out;

	cursor: pointer;
}

input[type=button]:hover, input[type=submit]:hover, .form-button:hover {
	background-color: #88b721;
	box-shadow: inset 0px 0px 2px rgba(255, 255, 255, 0.4), 0px 1px 6px rgba(70, 70, 70, 0.5);
}

.form-button.negative:hover {
	background-color: #ab3a17;
}

input[type=button]:active, input[type=submit]:active, .form-button:active {
	background-color: #70a201;
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0.0)));

}

input[type=button][disabled], input[type=submit][disabled], .form-button.disabled, .form-button.negative {
	border:1px solid #777;
	background-color: #999;
}

input[type=button][disabled]:active, input[type=submit][disabled]:active, .form-button.disabled:active, .form-button.negative:active {
	background-color: #999;
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0.0)));

}

.link {
	color: #607890;
	cursor: pointer;
}

.link:hover {
	color: #036;
}

.search {
	text-align: center;
	margin: 10px 0 20px 0;
}

.search input {
	width: 180px;
	padding: 4px 3px 3px 18px;
	font-size: 0.89em;
	border-radius: 15px;
	background-repeat: no-repeat;
	background-position: 6px 6px;
	background-image: url(/ui/graphics/search-field-icon.png);
	box-shadow: 0 0px 2px rgba(70, 70, 70, 0.1), inset 0 2px 10px rgba(70, 70, 70, 0.1);
}

.search input::-webkit-input-placeholder {
	font-weight: 300;
	font-style: italic;
}

.search input:focus {
	outline: none;
	border-color: #94BDD1;
	box-shadow: 0 0 5px #94BDD1, inset 0 2px 10px rgba(70, 70, 70, 0.1);
}

#initial-loading {
	color: #999;
    background-color: #E9E9E9;
	font-size: 1.2em;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: -o-flex;
	display: flex;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	-ms-flex-pack: center;
	-o-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	-o-align-items: center;
	align-items: center;
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility 0s ease-in-out 1s, opacity 1s ease-in-out;
	-moz-transition: visibility 0s ease-in-out 1s, opacity 1s ease-in-out;
	-o-transition: visibility 0s ease-in-out 1s, opacity 1s ease-in-out;
    transition: visibility 0s ease-in-out 1s, opacity 1s ease-in-out;
}

#initial-loading.hide {
    opacity: 0;
    visibility: hidden;
}

#version {
	z-index: -1;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 10px 20px;
	color: #999;
}

#poweredby {
	z-index: -1;
	position: fixed;
	bottom: 10px;
	right: 20px;
	width: 152px;
	height: 18px;
	background-image: url(/ui/graphics/powered-by-dicentia@2x.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
}

#content {
    max-width: 990px;
    margin: auto;
}

#menu {
	position: fixed;
	top: 0;
    left: 5px;
    right: 5px;
	height: 40px;
	z-index: 3;
	line-height: 38px;
	font-size: 0.8rem;
	color: #999;
	background: -moz-linear-gradient(top, rgba(233,233,233,1) 0%, rgba(233,233,233,0.9) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(233,233,233,1)), color-stop(100%,rgba(233,233,233,0.9))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(233,233,233,0.9) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(233,233,233,0.9) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(233,233,233,1) 0%,rgba(233,233,233,0.9) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(233,233,233,1) 0%,rgba(233,233,233,0.9) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9e9e9', endColorstr='#e6e9e9e9',GradientType=0 ); /* IE6-9 */
}

#menu .header-shadow {
	position: absolute;
	width: 100%;
	height: 36px;
	height: 65px;
	background-image: url(/graphics/header-shadow.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	top: 0;
	opacity: 0;
	-webkit-transition: opacity 200ms linear;
}

#menu.show-shadow .header-shadow {
	opacity: 1;
}

#menu .user-settings {
	float: left;
	font-size: 0.7rem;
}

    #menu .user-settings-account {
        background-color: #ccc;
        padding: 3px;
        border-radius: 5px;
    }

#menu .user-settings-account, #menu .user-settings-company {
	display: inline;
	font-weight: bold;
	color: #666;
}

#menu .user-settings-account-name {
        display: inline;
    }

#menu .user-settings .user-settings-item {
	display: inline-block;
	padding: 0 5px;
}

#user-settings a:hover {
	color: #444;
}

#menu .menu-toggle {
	float: right;
    background-image: url('/ui/graphics/menu.png');
    background-repeat: no-repeat;
    background-size: 40px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

#menu .sections {
	position: absolute;
    display: none;
    left: 0;
    background-color: rgba(233,233,233,0.9);
    right: 0;
    padding: 10px;
}

@media (min-width: 767px) {
    #menu .menu-toggle {
        display: none;
    }

    #menu .sections {
        display: block;
        float: right;
        position: static; 
        background: none;
        padding: 0px;
    }
    
    #menu .sections .section {
	    display: inline-block;
	    padding: 0 10px;
	    cursor: pointer;
    }

    #menu .sections .section .section-inner {
	    border-bottom: 2px solid transparent;
	    transition: border-bottom-color 150ms ease-out;
    }

    #menu .sections .section:hover .section-inner {
	    border-bottom-color: #D3D8DF;
    }

    #menu .sections .section.active .section-inner {
	    border-bottom-color: #8EA8C2;
    }

    #menu .sections .section.active:hover .section-inner {
	    border-bottom-color: #869AAD;
    }
}

#menu .maintenance-item {
    color: red;
    background-color: #ccc;
    opacity: 0.8;
    float: left;
    padding: 0px 10px 0px 10px;
}

/*
*
* PANELS
*
*/
.panel {
	text-align: center;
	padding-bottom: 90px;
}

.panel.main-panel {
	margin-top: 30px;
    float: right;
    min-height: 500px;
    width: 720px;
}

.panel-description {
	height: 30px;
	color: #999;
	text-shadow: 1px 1px 0 #FEFEFE;
}

.panel-content {
	padding: 10px;
	background-color: #FEFEFE;
	text-align: left;
	border-radius: 4px;
	border: 1px solid #D5D5D5;
}

html.no-borderimage .panel-content {
	border: none;
	padding: 10px;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(70, 70, 70, 0.5);
}

.panel-content.loading {
	background-position: center center;
	background-repeat: no-repeat;
	background-image: url(/ui/graphics/loading.gif);
}

.panel-content .list-view .list-view-item {
    background-color: #F7F7F7;
    border-bottom: 1px solid #f0f0f0;
}

    .panel-content .list-view .list-view-item:nth-child(odd) {
        background-color: #FEFEFE;
    }

    .panel-content .list-view .list-view-item:last-child {
        border-bottom-style: none;
    }

.panel-content .list-view .show-more {
    display: inline-block;
    margin-top: 10px;
    width: 100%;
    height: 37px;
    text-align: center;
}

    .panel-content .list-view .show-more.active {
        background-color: #efefef;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(0.49, rgba(255, 255, 255, 0.4)), color-stop(0.50, rgba(255, 255, 255, 0.2)), to(rgba(255, 255, 255, 0)));
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(70, 70, 70, 0.5);
        cursor: pointer;
    }

        .panel-content .list-view .show-more.active:hover {
            background-color: #CBE0EC;
        }

        .panel-content .list-view .show-more.active:active {
            box-shadow: inset 0 1px 3px rgba(70, 70, 70, 0.5);
        }

    .panel-content .list-view .show-more .show-more-title {
        margin-top: 10px;
        color: #999;
    }

    .panel-content .list-view .show-more.active .show-more-title {
        margin-top: 5px;
        color: #444;
    }

    .panel-content .list-view .show-more .show-more-subtitle {
        color: #607890;
        font-size: 0.85em;
    }

    .panel-content .list-view .show-more:hover .show-more-subtitle {
        color: #036;
    }

.panel-bar {
	height: 32px;
	line-height: 32px;
}

.panel-bar .panel-title {
	font-size: 1.2em;
}

.panel-bar .panel-subtitle {
	font-size: 1.2em;
	color: #999;
}

.panel-bar .item {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	padding: 0 10px;
	color: #333;
	text-shadow: 1px 1px 0 #FEFEFE;
	cursor: pointer;
	opacity: 0.4;
	-webkit-transition: opacity 150ms ease;
}

.panel-bar .item:hover {
	opacity: 1;
}

.panel-bar .item:active {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#E0E0E0), to(#F9F9F9));
	border-radius: 4px;
	box-shadow: inset 0 1px 3px rgba(70, 70, 70, 0.5);
}

.panel-tabs {
	height: 26px;
	line-height: 26px;
}

.panel-tabs .tab {
	padding: 5px 10px;
	background-color: #fefefe;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	margin: 0 0px;
	display: inline-block;
	box-shadow: 0 1px 3px rgba(70, 70, 70, 0.5);
}

    .tab-panel .panel-content {
        width: 690px;
        display: inline-block;
        min-height: 540px;
        position: relative;
    }

    .tab-panel .message {
        margin-top: 35%;
        text-align: center;
        color: #999;
    }

        .tab-panel .message .title {
            font-size: 22px;
            margin-bottom: 5px;
        }

    .tab-panel .panel-content .panel-view {
        min-height: 500px;
    }

        .tab-panel .panel-content .panel-view .description {
            margin-bottom: 20px;
            text-align: center;
            font-size: 0.7rem;
            color: #999;
        }

    .tab-panel .panel-bar .tabs {
        line-height: 31px;
        position: relative;
        bottom: -1px;
        z-index: 1;
    }

        .tab-panel .panel-bar .tabs .tab {
            display: inline-block;
            padding: 0 10px;
            padding-left: 11px;
            color: #666;
            cursor: pointer;
            transition: background-color 150ms ease-out, color 150ms ease-out, padding-bottom 150ms ease-out;
            border-top: 1px solid #D5D5D5;
            border-right: 1px solid #D5D5D5;
            background-color: #efefef;
        }

            .tab-panel .panel-bar .tabs .tab:first-child {
                border-top-left-radius: 4px;
                border-left:1px solid #D5D5D5;
            }

            .tab-panel .panel-bar .tabs .tab:last-child {
                border-top-right-radius: 4px;
            }

            .tab-panel .panel-bar .tabs .tab:hover {
                background-color: #f6f6f6;
                color: #444;
            }

            .tab-panel .panel-bar .tabs .tab.selected {
                background-color: #fff;
                color: #444;
                padding-bottom: 1px;
                padding-left: 10px;
            }

            .tab-panel .panel-bar .tab .note {
	            font-size: 0.7em;
	            color: #fff;
	            position: absolute;
	            right: -17px;
                top: -12px;
	            font-family: Verdana;
                background-color: #ccc;
                background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
	            /*background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
	            background-image: -moz-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
	            background-image: -ms-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
	            background-image: -o-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));*/
	            border-radius: 30px;
	            border: 2px solid white;
	            box-shadow: 0 1px 3px rgba(70, 70, 70, 0.6);
	            height: 20px;
	            min-width: 12px;
	            line-height: 20px;
	            padding: 0 4px;
	            z-index: 2;
	            font-weight: bold;
	            text-shadow: 0 1px 1px rgba(70, 70, 70, 0.5);
            }

            .tab-panel .panel-bar .tab .note-container {
                position: relative;
            }

            .tab-panel .panel-bar .tab .note-red {
                background-color: #D02525;
            }

/*
*
* FORMS
*
*/
.form-element {
	margin-bottom: 10px;
}
.form-label {
	font-size: 0.9em;
	margin-bottom: 2px;
	margin-left: 1px;
	color: #999;
}
.form-text-field, .form-password-field {
	
}
.form-checkbox-element label {
	position: relative;
	top: 1px;
	margin-left: 3px;
}

/*
*
* LOADING
*
*/

.loadingMaskContainer {
	position: relative;
}

.loadingMaskContainer .loadingMask {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-color: rgba(255, 255, 255, 0.8);
	z-index: 1;
	border-radius: 4px;
}

.loadingMaskContainer .loadingMask .box {
	position: absolute;
	width: 100%;
	top: 50%;
	height: 1.8em;
	margin-top: -0.9em;
	text-align: center;
}

.loadingMaskContainer .loadingMask .text {
	text-align: center;
	font-size: 1.15em;
	color: #888;
	color: #333;
	background-color: #EEE;
	border: 1px solid #ddd;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
	display: inline-block;
	padding: 5px 10px;
	border-radius: 4px;
}


/*
*
* ERROR
*
*/

#error {
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 1000;
}

#error .container {
	/* Center Vertically */
	position: relative;
	top: 50%;

	/* Center Horizontally */
	width: 320px;
	margin: 0 auto;

	/* Styles */
	border: 2px solid red;
	border-radius: 4px;
	background-color: #fff;
	padding: 10px;
	z-index: 10000;
	text-align: left;

	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#error .title {
	color: red;
	font-size: 1.5em;
}

#error .content {
	padding-top: 5px;
}


/*
*
* ANIMATIONS
*
*/

.shake {
	-webkit-animation: shake-no 450ms linear;
	animation: shake-no 450ms linear;
}

@-webkit-keyframes shake-no {
	0% {
		-webkit-transform: translateX(0px);
	}
	16.6% {
		-webkit-transform: translateX(10px);
	}
	33.3332% {
		-webkit-transform: translateX(-10px);
	}
	49.9998% {
		-webkit-transform: translateX(10px);
	}
	66.6664% {
		-webkit-transform: translateX(-10px);
	}
	83.333% {
		-webkit-transform: translateX(10px);
	}
	100% {
		-webkit-transform: translateX(0px);
	}
}

@keyframes shake-no {
	0% {
		transform: translateX(0px);
	}
	16.6% {
		transform: translateX(10px);
	}
	33.3332% {
		transform: translateX(-10px);
	}
	49.9998% {
		transform: translateX(10px);
	}
	66.6664% {
		transform: translateX(-10px);
	}
	83.333% {
		transform: translateX(10px);
	}
	100% {
		transform: translateX(0px);
	}
}


.gpu-accelerate {
	-webkit-transform: translate3d(0,0,0);
}


.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.user-companies-dropdown {
        -webkit-appearance: none;
        -moz-appearance: none;
        backface-visibility: hidden;
        border: none;
        background: #ccc url() no-repeat right center;            
        vertical-align:inherit;
        border-radius: 5px;
    }
.user-companies-dropdown::-ms-expand {
    display: none;
}