@import url(//fonts.googleapis.com/css?family=Open+Sans);

body {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	background-color: #191d21;
	color: #CCC;
	margin: 0;
	padding: 0;
	overflow-x: hidden;	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* HEADERS */

h1,h2,h3,h4,h5,h6{font-weight:normal; padding: 0px 0px 0px 0px; margin: 0px 0px 20px 0px; }
h1{font-size:1.8em;line-height:1;}
h2{font-size:1.4em;}
h3{font-size:1.2em;line-height:1;}
h4{font-size:1em;line-height:1.25;}
h5{font-size:1em;}
h6{font-size:1em;}

hr {
	border: 1px groove #ccc;
}

.hand {
	cursor: pointer;
}

.hint {
	color: #8E8E8E;
	font-style: italic;
}

.sys_alert {
	background-color: #A20E00;
    padding: 10px;
    position: absolute;
    left: 45%;
    border-radius: 5px;
    top: 5px;
}

#preload_images {
	display: none;
}

/* top search */
.topsearch {
	float: left;
	width: 200px;
	margin-left: 44px;
}
.search_wrapper input {
	margin-top: 10px !important;
	background-color: #f6f6f6 !important;
	border-radius: 5px;
}

/* tags */
.tag-editor { background: #272B33; font-size: 12px; width: 245px; border: none; color: #ccc;}
.tag-editor .tag-editor-tag {
    color: #fff; background: #555;
}
.tag-editor .tag-editor-spacer { width: 7px; }
.tag-editor .tag-editor-delete { background-color: #1A1B1F; padding: 1px; }

/* cannot override input=text in combination with tag-editor?!?! */
input[type=text].tag-input {
	width: auto;
	min-height: auto;
	font-size: 14px;
	padding: 0;
	margin-top: 3px;
}



/* LINKS */

a {
	text-decoration: none;
	color: #1ba1e2;
}

a:hover {
	text-decoration: none;
	color: #999;
}

.clear {
	clear: both;
}


/* all other browser support blur */
.blur-filter {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
	opacity:0.3;
}
/*IE10+ detection */
@media screen and (-ms-high-contrast: active) {
	.blur-filter { filter: blur(0); opacity: 0.1; }
}
/* IE Edge detection */
@supports (-ms-accelerator:true) {
	.blur-filter { filter: blur(0); opacity: 0.1; }
}



/* GENERIC POPUPS */
.popup {
	background-color: #f6f6f6;
	position: fixed;
	
	/*left: 50%;
	top: 50%; 
	transform: translate(-50%, -52%); */	/* 52% to fix blurry content bug */
	
	width: 70%;
	left: 15%;
	
	height: 70%;
	top: 15%;
	
	display: none;
	border-radius: 5px;
	z-index: 1000;
}

.popup .popup_title {
	background-color: #1ba1e2;
	color: #FFF;
	padding: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 32px;
	font-size: 26px;
}

.popup .popup_content {
	padding: 10px;
	color: #272b33;
	overflow-y: auto;
	height: 85%;
}

.popup .popup_close {
	float: right;
    position: relative;
    margin-top: -46px;
    margin-right: -10px;
    color: #fff;
    background-color: #1577A7;
    padding: 8px;
    border-top-right-radius: 5px;
    height: 36px;
}

.popup_close {
	cursor: pointer;
}


/*confirm popup */
.confirm_popup {
	background-color: #272B33;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: none;
	border-radius: 5px;
	z-index: 1000;
}

.confirm_popup .popup_title {
	background-color: #1ba1e2;
	color: #FFF;
	padding: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 32px;
	font-size: 26px;
}

.confirm_popup .popup_content {
	padding: 10px;
	color: #999;
}

.confirm_popup .popup_close {
	float: right;
    position: relative;
    margin-top: -46px;
    margin-right: -10px;
    color: #fff;
    background-color: #1577A7;
    padding: 8px;
    border-top-right-radius: 5px;
    height: 36px;
}

#confirm_popup_question {
	float: left;
    padding: 10px;
    height: 64px;
	width: 400px;
}
.confirm_question_icon {
	float: left;
    font-size: 64px !important;
    padding: 10px;
    background-color: #3C4752;
    border-radius: 10px;
    margin: 0 10px 0 0;
}


/* project */
#project_settings_open {
	cursor: pointer;
	width: 24px;
	float: left;
}
#project_settings_open:hover {
	color: #1ba1e2;
}
.edit_project {
	background-color: #FFF;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 550px;	
	display: none;
	border-radius: 5px;
	z-index: 100;
}

.edit_project .popup_title {
	background-color: #1ba1e2;
	color: #FFF;
	padding: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 32px;
	font-size: 26px;
}

.edit_project .popup_content {
	padding: 10px;
	color: #272b33;
}

.edit_project .popup_close {
	float: right;
    position: relative;
    margin-top: -46px;
    margin-right: -10px;
    color: #fff;
    background-color: #1577A7;
    padding: 8px;
    border-top-right-radius: 5px;
    height: 36px;
}

.edit_project .create_button {
	width: 300px;
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
	background-color: #a4c400;
}
.edit_project .delete_button {
	width: 150px;
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
	background-color: #e51400;
}


.box_divider {
	background-color: #aecad8;
	position: relative;
	margin-top: 20px;
	padding: 5px;
}


/* add project member box */
.add_project_member {
	background-color: #FFF;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 500px;	
	display: none;
	border-radius: 5px;
	z-index: 100;
}

.add_project_member .popup_title {
	background-color: #1ba1e2;
	color: #FFF;
	padding: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 32px;
	font-size: 26px;
}

.add_project_member .popup_content {
	padding: 0;
	margin: 0;
	color: #272b33;
}

.add_project_member .popup_close {
	float: right;
    position: relative;
    margin-top: -46px;
    margin-right: -10px;
    color: #fff;
    background-color: #1577A7;
    padding: 8px;
    border-top-right-radius: 5px;
    height: 36px;
}

.add_project_member .create_button {
	width: 100%;
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
}

.add_project_member .found_user {
	padding: 5px;
	background-color: #dddddd;
	border: 1px solid #CCC;
	list-style: none;	
	width: 97%;
	float: left;
	margin-bottom: 4px;
}
.add_project-member.found_user:hover {
	background-color: #e0eaf1 !important;
}

#add_project_member_search { 
	width: 420px; 
	padding: 10px;
	margin-left: 20px;
	font-size: 18px;
	background-color: #e0eaf1;
	color: #222429;
}

.apm_loader {
	display: none;
	text-align: center;
	margin-top: 25%;
}

.add_project_member_email .email_address {
	width: 70%;
	float: left;
}

.add_project_member_email .email_valid {
	width: 30%;
	float: right;
}

.button.invite_via_email {
	width:100%;
}

.add_project_member_email {
	margin-bottom: 10px;
	height: 9px;
}

.add_project_member_results {
	height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

/* edit folder popup */
.project_new_folder .popup_content .box_divider {
	margin-top: 50px;
	clear: both;
}
.project_new_folder {
	background-color: #FFF;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	/*height: 500px;	*/
	height: 75%;
	display: none;
	border-radius: 5px;
	z-index: 100;
}

.project_new_folder .popup_title {
	background-color: #1ba1e2;
	color: #FFF;
	padding: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 32px;
	font-size: 26px;
}

.project_new_folder .popup_content {
	padding: 10px;
	color: #272b33;
	/*height: 410px;*/
	height: 85%;
	overflow: auto;
}

.project_new_folder .popup_close {
	float: right;
    position: relative;
    margin-top: -46px;
    margin-right: -10px;
    color: #fff;
    background-color: #1577A7;
    padding: 8px;
    border-top-right-radius: 5px;
    height: 36px;
}


/* edit project meta popup */
#project_meta_open {
	float: left;
	margin-left: 10px;
	cursor: pointer;
}
#project_meta_open:hover {
	color: #1ba1e2;
}
.edit_project_meta {
	background-color: #FFF;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 500px;	
	display: none;
	border-radius: 5px;
	z-index: 100;
}

.edit_project_meta .popup_title {
	background-color: #1ba1e2;
	color: #FFF;
	padding: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	height: 32px;
	font-size: 26px;
}

.edit_project_meta .popup_content {
	padding: 10px;
	color: #272b33;
	height: 410px;
	overflow: auto;
}

.edit_project_meta .popup_close {
	float: right;
    position: relative;
    margin-top: -46px;
    margin-right: -10px;
    color: #fff;
    background-color: #1577A7;
    padding: 8px;
    border-top-right-radius: 5px;
    height: 36px;
}

.edit_project_meta .create_button {
	width: 100%;
    margin-top: 20px;
    color: #fff;
    text-transform: uppercase;
}

.edit_project_meta .popup_content.add,
.edit_project_meta .popup_content.assign {
	display: none;
	position: absolute;
	width: 560px;
	padding: 20px;
}

.edit_project_meta .k { width: 160px; }

.user_meta_wrapper {
	width: 525px;
    background-color: #444;
    padding: 10px;
    margin-bottom: 2px;
    border-radius: 5px;
    color: #fff;
	height: 25px;
}
.user_meta_wrapper:hover {
	background-color: #46799B;
}

.user_meta_key {
	float: left;
	width: 50%;
}
.user_meta_type {
	position: absolute;
	left: 350px;
	width: 100px;
	text-transform: uppercase;
	color: #8E8E8E;
}
.user_meta_public {
	float: left;
	font-size: 24px !important;
	margin-right: 10px;
}
.user_meta_remove {
	float: right;
    font-size: 25px !important;
    margin-left: 10px;
    background-color: #333;
    padding: 10px;
    margin-top: -10px;
    margin-right: -10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
	cursor: pointer;
}
.user_meta_remove:hover {
	background-color: #e51400;
}

.user_meta_edit {
	float: right;
    font-size: 25px !important;
    margin-left: 10px;
    background-color: #333;
    padding: 10px;
    margin-top: -10px;
    margin-right: -10px;
	cursor: pointer;	
}
.user_meta_edit:hover {
	background-color: #1BA1E2;
}

.user_meta_assign {
	float: left;
    font-size: 25px !important;
    margin-left: 10px;
    background-color: #333;
    padding: 10px;
    margin-top: -10px;
    margin-right: 10px;
	cursor: pointer;
	margin-left: -10px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.user_meta_assign:hover {
	background-color: #1BA1E2;
}

.user_meta_wrapper.public {
	background-color: #612D28;
}
.user_meta_wrapper.public:hover {
	background-color: #46799B;
}



/* Key/Value/Box */

.k {
	float: left;
	width: 200px;
	margin-top: 5px;
}

.v {
	float: left;
}

.box {
	clear: both;
	padding: 10px;
}

/* FORMS */

input[type=text], input[type=password], textarea {
	width: 250px;
	min-height: 30px;
	font-size: 16px;
	font-family:  "Segoe UI", "Segoe WP", "Helvetica Neue", "RobotoLight", sans-serif;
	border: none;
	background-color: #272B33;
	padding: 2px 5px 2px 5px;
	margin-top: 5px;
	color: #9C9C9C;
	-webkit-appearance: none;
}

select {
	min-height: 30px;
	font-size: 16px;
	font-family:  "Segoe UI", "Segoe WP", "Helvetica Neue", "RobotoLight", sans-serif;
	border: none;
	background-color: #272B33;
	padding: 2px 5px 2px 5px;
	margin-top: 5px;
	color: #9C9C9C;
	/*-webkit-appearance: none;*/
}

textarea {
	color: #9C9C9C;
	background-color: #272B33;
}

label {
	min-width: 150px;
	float: left;
	margin-top: 10px;
}

input[type=submit], input[type=button], .button {
	border: none;
	padding: 10px;
	font-size: 16px;
	background-color: #999;
	cursor: pointer;
	color: #333;
	-webkit-appearance: none;
	margin-right: 20px;
}

input[type=checkbox] {
	border: 1px solid #CCC;
	margin-top: 15px;
	/*-webkit-appearance: none;*/
}


@-webkit-keyframes login_startup {
	0%:		{ top: 150px; display: none; opacity: 0;}
	100%:	{ top: 0; display: block; opacity: 1;}
}

@-moz-keyframes login_startup {
  0%   { top: 150px; display: none; opacity: 0; }
  100% { top: 0; display: block; opacity: 1; }
}

@keyframes login_startup {
  0%   { top: 150px; display: none; opacity: 0; }
  100% { top: 0; display: block; opacity: 1; }
}


/* COLORS */
.bgcolor_head {
	font-size: 26px;
	text-align: center;
}




/* DEBUG */
#debug {
	margin-top: 20px;
}

/* MESSAGE */
.jsmessage_content {
	position: fixed;
    z-index: 100;
    width: 500px;
    bottom: 10px;
	right: 20px;
}

.jsmessage_content a {
	color: #FFFFFF;
}

.message {
	margin: 10px 0px;
	padding:6px;
	position: absolute;
    z-index: 100;
    width: 500px;
    border-radius: 10px;
	bottom: 10px;
	right: 20px;
}

.jsmessage {
	color: #e4e4e4;
    background-color: #46799b;
    border: 3px solid #90bbd0;
	border-radius: 10px;
	padding: 6px;
	margin: 10px 0px;
}

.jsmessage.error {
	background-color: #e51400;
	border: 3px solid #a20025;
}


.message_icon {
	float: left;
	margin-right: 20px;
	/*margin-top: -15px;*/
}

.message.info {
	color: #e4e4e4;
    background-color: #46799b;
    border: 3px solid #90bbd0;
}

.message.error {
	color: #dcdcdc;
    background-color: #983d3d;
    border: 3px solid #793434;
}

.message.warning {
	color: #000000;
	background-color: #F0A30A;
	border: 3px solid #F0A30A;
}

.message_icon i {
	margin:10px 22px;
    font-size:2em;
    vertical-align:middle;
}


/* HEADER, MENU */
.header {
	height: 50px;
    background-color: #252b31;
    padding-left: 10px;
	padding-right: 20px;
	z-index: 9999;
	position: fixed;
	width: 100%;
}

.logo {
	float: left;
    margin-right: 26px;
    margin-top: 10px;
    margin-left: 0px;
	width: 120px;
}

.logo .fa-arrow-left {
	color: #ffffff;
	margin-left: 10px;
}

.teamplaza_text {
	font-size: 18px;
	margin-top: 17px;
}


.topmenu {
	float: left;
}

.topmenu ul li {
	display: inline-block;
	padding: 0;
	border: 0;
	margin-left: 15px;
}

nav.sysmenu {
	
}

nav.sysmenu a{
	color: #fff;
}

nav.sysmenu ul {
	list-style-type: none;
	margin-top: -20px;
	padding: 0;
}


nav.sysmenu ul li {
	display: inline-block;
	position: relative;
}

/* sub nav */
nav.sysmenu li ul {
	background-color: #fff;
    position: absolute;
    left: 0;
    top: 51px;
    width: 200px;
    text-align: left;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
}

nav.sysmenu li li {
    position: relative;
    margin: 0;
    display: block;
    padding: 4px 10px 4px 10px;
    font-size: 15px;
}
nav.sysmenu li li:hover {
	background-color: #ccc;
}
nav.sysmenu li li ul {
    position:absolute;
    top:0;
    left:200px; /* make this equal to the width of the sub nav above */
    margin:0;
}
nav.sysmenu ul.sub-menu {
	display: none;
	overflow: hidden;
}

nav.sysmenu ul ul li a {
	color: #2b2b2b;
}


/* CONTENT */
.content {
	display: inline-block;
	width: 100%;
	margin-top: 50px;
	padding: 0 10px 0 10px;
}

/* DIV TABLES */
.div-table{
  display:table;         
  width:auto;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
  background-color: #222;
  padding: 5px 0 5px 0;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width: 250px;
  padding: 5px;
}

/* TABLES */
table th {
	text-align: left;
	padding: 0 15px 0 15px;
}

table td {
	text-align: left;
	padding: 0 15px 0 15px;
}

/*
** GRID ELEMENTS
*/
.grid {
	padding-bottom: 10px;
}

.grid_element {
	margin: 5px;
	padding: 0 5px 6px 5px;
	float: left;
	background-color: #444;
}

.wide {
	width: 300px;
}


.col_left {
	float: left;
	width: 20%;
	margin: 0;
}

.col_content {
	float: right;
	width: 80%;
	margin: 0;
}

.col_left li {
	list-style: none;
	padding: 3px;
}

/* font awesome */
i.fa {
	margin-right: 10px;
}

/* scrollbars */
::-webkit-scrollbar {
    width: 12px;
	border: none;
}
::-webkit-scrollbar-track {
}
::-webkit-scrollbar-thumb {
    background-color: #31343a;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #4E5667;
	
}

/* switches */
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

/* on off */
input.cmn-toggle-round-flat + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:before,
input.cmn-toggle-round-flat + label:after {
  display: block;
  position: absolute;
  content: "";
}
input.cmn-toggle-round-flat + label:before {
  top: 2px;
  left: 2px;
  bottom: 2px;
  right: 2px;
  background-color: #fff;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 52px;
  background-color: #dddddd;
  border-radius: 52px;
  transition: margin 0.4s, background 0.4s;
}
input.cmn-toggle-round-flat:checked + label {
  background-color: #8ce196;
}
input.cmn-toggle-round-flat:checked + label:after {
  margin-left: 60px;
  background-color: #8ce196;
}
/* YESNO */
input.cmn-toggle-yes-no + label {
  padding: 2px;
  width: 60px !important;
  height: 30px !important;
  min-width: 0 !important;
}
input.cmn-toggle-yes-no + label:before,
input.cmn-toggle-yes-no + label:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 29px;
}
input.cmn-toggle-yes-no + label:before {
  background-color: #999;
  content: attr(data-off);
  transition: transform 0.5s;
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no + label:after {
  background-color: #60a917;
  content: attr(data-on);
  transition: transform 0.5s;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
input.cmn-toggle-yes-no:checked + label:before {
  transform: rotateY(180deg);
}
input.cmn-toggle-yes-no:checked + label:after {
  transform: rotateY(0);
}


input.jscolor {
	border: 0;
	padding: 3px;
	width: 60px;
}

.noscroll {
	overflow: hidden;
}

#ipage_overlay {
	top: 50px;
	position: fixed;
	z-index: 99;
	height: 100%;
	width: 100%;
	border: 0;
}

#page_overlay {
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 99999;
	
}


#dragHere {
	width: 100%;
	height: 100%;
	position: absolute;
}


.h_box_right {
	background-color: #3c4752;
	float: right;
    border-radius: 5px;
    padding: 5px;
    height: 20px;
    margin-top: 10px;
	margin-left: 10px;
	color: white;
	text-align: center;
	vertical-align: middle;
}

.usermenu li {
	list-style: none;
	cursor: pointer;
}

.usermenu_sub {
	display: none;
	
}

#testmode {
	background-color: #e51400;
    color: #fff;
    font-weight: bold;
}

.package_upgrade_button {
	background-color: #ff9900;
	color: #222;
}