@import url('https://fonts.googleapis.com/css?family=Open+Sans::100,200,300,400,400i,600,700,800,900,1000');

body {
  font-family: Open Sans;
  font-size: 80%;
  /*zoom: 90%;*/
/*  overflow-y:scroll; 
  color: #e7e8ea; */
}

h1,h2,h3,h4,h5,h6 {
  font-weight: bold;

}



h1.Organy {
  color: #FFF;
  text-align: left;
  font-weight: normal;
  font-family: Open Sans;
  margin-top:10px;

}

h2.Organy,h3.Organy,h4.Organy,h5.Organy {
  margin-top:5px;
  margin-bottom:5px;
  font-size: 90%;
  font-weight: 600;

}

.toppanel2-text {
  position: relative;
  color: rgb(153, 153, 153);
/*  top: 12px; */
  font-size: 14px;
  font-weight: 700;
}

.toppanel2-dropdown {
  padding-top: 5px;
  padding-bottom: 5px;
  color: #666;
  line-height: 55px;
  font-size:14px;
  position:relative;
}

/* //////////////////////////////////////////
///////
///////     FIELDS
///////
///////////////////////////////////////////*/

.databaseSidePanel {
  font-size: 15px;
  color: #c3c1ca;
  /*text-shadow:0px 0px 3px #AAA;*/
  top: 0px;
  position:absolute;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  /*background-color:#FFF;*/
  background-color: #3c3846;
  background-color: #2f2a3bff;
  width:100%;
  overflow-y:auto;
  bottom:0px
}




.graphTitleClass {
  font-size: 1.1rem;
  text-align: left !important;
  font-weight: 500;
}

.graphSettingsField {
  display: flex;
  flex-direction: column;
  max-width: 200px;
}

.indicatorText {
  font-size: 2rem;
  font-weight: 300;
  width: 100%;
  height: -webkit-fill-available;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0px 25px;
}

input {
  border: none;
}


input[type=checkbox] {
  margin:10px;
}

textarea {
  color: #333;
  border:0px;
  width:100%;
  height:auto;
}



.completed {
  background-color: #CED7C8;
  text-decoration: line-through;
}

.form-control-title {
  font-size: 120%;
  font-weight:700;
}

.list-group {
  margin-top: 10px;
}


/* //////////////////////////////////////////
///////
///////     CARDS
///////
///////////////////////////////////////////*/

.card {
  background-color:#FEFEFE;
  border:none;
  padding: 6px;
  box-shadow: 0px 0px 10px #0003;
  margin: 10px;
  color: #666;
  font-size:14px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card.rounded {
  padding: 20px;
  border-radius:  25px;
}


.card.calendarBlob {
  padding: 10px;
  border-radius:  10px;
  display: flex;
  flex-direction: column;
}

.card:hover {

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 25px rgba(0,0,0,0.23);
}


.card.base {
  background-color:#FEFEFE;
  border:none;
  padding: 10px;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  /* margin: 10px;*/

  color: #666;
    /*cursor:pointer;*/
    font-size:14px;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    /* for the new look */
    margin: 5px;
    max-height:100%;
    overflow-y: hidden;
    overflow-x: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

.card.sidebarcard {
  width:250px;

}

.card.transparent {
  background-color:rgba(0,0,0,0);
  border:1px solid #DDD;
   padding: 10px;
  box-shadow:none;
  margin: 10px;
 /* width:250px; */
  color: #999;
}

.card.transparent:hover {
  background-color:rgba(255,255,255,1);
   padding: 10px;
  box-shadow:none;
  margin: 10px;


}

.card.transparent.active {
   background-color:rgba(255,255,255,1);
   padding: 10px;
  box-shadow:none;
  margin: 10px;

}

.card.transparent.selected {
  background-color:#727272;
  border:1px solid #DDD;
   padding: 10px;
  box-shadow:0px 0px 5px 2px #DDD;
  margin: 10px;
  color: #FFF;
}


.card.listItem {
  margin:10px 5px;
  padding: 10px;
  border-radius:3px
}

.cardGrid {
  background: #FFF;
  border-radius: 20px;
  font-weight: 200;
  min-height: 150px;
  box-shadow: 0px 0px 10px #ccc;
  padding: ;
  max-height:  400px;
  overflow-y: hidden;
}

.panelFieldTextGrid {
  font-size:12px;
  font-weight: 200;
  padding: 20px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  width: 100%;
}


.storageHeaderGrid {
/*  background-color: #805F8D; */
  /*background-color: #727272;*/
  background:#EFEFEF;
  /*
  background: -webkit-linear-gradient(#e54d78, #e54d79);
  background: linear-gradient(#e54d78, #e54d79);
  background: url(../landingpage/img/bg-pattern.png), #E12359;
  background: url(../landingpage/img/bg-pattern.png), -webkit-linear-gradient(to left, #e54d78, #e54d79);
  background: url(../landingpage/img/bg-pattern.png), linear-gradient(to left, #e54d78, #e54d79);
  color: #FFF;
  */
  color: #333;
  padding: 15px;
  font-size: 125%;
  cursor: pointer;
  border-radius: 20px 20px 0px 0px;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  user-select:none; 
  /*height: 87px;*/
  overflow-y: hidden;

}


.hoverdropsite {
  border: 3px dashed #eee;
  background: #FAFAFA;
  box-shadow: none;
  border-radius: 3px;
  color:#ccc;
  cursor: pointer;
  margin-bottom:25px;
}

.hoverdropsite:hover {
  border: 3px dashed #ccc;
  background: #FAFAFA;
  box-shadow: none;
  border-radius: 3px;
  color:#aaa;
  cursor: pointer;
}

.cardListItem {
  margin: 10px;
  /* border-bottom: 1px solid #CCC;*/
  /*box-shadow: none;*/
  border-radius: 5px;
  
}

.cardListItem:hover {
  /*box-shadow: none;*/
  scale: 1.02;
  color:#E12359;
  background: #f1eff5;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.selectedCard {
  color: #E12359;
}

.cardListItem.selected {
  color: #FFF;
  background: #E12359;
}

.card.indexSticker {
  padding:15px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  cursor: pointer;
}

.card.indexSticker.active {
  color: #FFF;
  background: #3c3846;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.card.indexSticker:hover {
  color: #e12359;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 25px rgba(0,0,0,0.23);
}

.card.indexSticker.active:hover {

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 25px rgba(0,0,0,0.23);
}


.assignUserPopup {
  position: absolute;
  background: #FFF;
  z-index: 8000;
  margin-top: 25px;
  width: 250px;
  right:40px;
  border-radius: 3px;
  box-shadow: 0px 0px 5px 0px #666;
}
/* //////////////////////////////////////////
///////
///////     TABLE VIEW STUFF
///////
///////////////////////////////////////////*/


.tableMain {
  position:fixed;
  z-index:900;
  border-bottom:#666;
  bottom:-16px;
  top:106px ;
  overflow-x:scroll;
  left:275
}

.tableBodycontainer {
  left:0px;
  position:absolute;
  bottom:0px;
  top:49px;
  overflow-y:scroll;
  overflow-x:hidden;
}

.tableHeader {
  width:250px;
  min-width:250px;
  border-right:1px solid #666;
}

.tableCellField {
  background-color: #FEFEFE;
  border: 1px solid #DDD;
  border-radius: 0px;
  margin:0px;
  min-width:150px;
  padding:15px;
  max-width:250px;
  overflow-x:hidden;
  /*text-overflow:ellipsis;*/
  width:250px
}

.selectedCell {
  background-color: #ffe6e6;
}

.tableGroupHeader {
  /*background-color: #CCC;*/
  padding:10px;
  font-size: 14px;
  font-weight: 700;
  vertical-align: bottom;
}

.tableChildLink {
    padding: 5px;
    max-height:30px;
    cursor: pointer;
    background-color: #CCC;
    border: 1px solid #666;
    margin-right: 5px;
    border-radius: 3px;
}

.tableChildLink:hover {
    padding: 5px;
    cursor: pointer;
    background-color: #d9e3ec;
    border: 1px solid #82a2ff;
    margin-right: 5px;
    border-radius: 3px;
}


/* //////////////////////////////////////////
///////
///////     ADD ITEM FIELD
///////
///////////////////////////////////////////*/

.newCategoryStorageField {
  background-color: #DDD;
  padding: 1px 5px;
  border-radius: 3px;
}

.addItemField {
	background-color: #F9F9F9;
  padding:10px;
  border: 1px solid #DDD;
  border-radius: 3px;
  margin: 5px;

  outline: none;
}

.addItemField:focus {
  border: #e12359 solid 1px;
}

.aggregationTableField {
  background-color: #F9F9F9;
  height:100%;
  border: 1px solid #DDD;
  border-radius: 3px;
}

.aggregationTableField:focus {
  border: #e12359 solid 1px;
}

.compact {
  margin-bottom:5px;
  max-width:200px;
}

.expanded {
  padding: 6px 20px;
}

.addItemFieldDashboardTitle {
  background-color: #EFEFEF;
  padding:10px;
  border: none;
  font-weight: 300;
  font-size:150%;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom:0px;
  margin-left:-30px;
  outline: none;
}

.addItemField-addon {
	width:1%;
	display: table-cell;
}

.addItemField-button {
  background-color: #FEFEFE;
  padding:10px;
  border: 1px solid #DDD;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom:5px;
  text-align: left;
}

.addItemField-button:hover {
  background-color: #EFEFEF;
  padding:10px;
  border: 1px solid #DDD;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom:5px;
  box-shadow: 0px 0px 3px #CCC;
}

.addItemField-small {
    background-color: #F9F9F9;
    padding:10px;
    border: 1px solid #DDD;
    border-radius: 3px;
    margin-bottom: 0px;
    margin-top: 0px;
    height: 30px;
    font-size: 11px;
}

.row.compact {
  margin-top: 0px;
  margin-bottom: 0px;
}

.addItemHeader {
    height: 100px;
    padding: 40px 50px 50px 90px;
    background-color: #3f3f3f; /*rgb(112, 88, 122); */
    color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(204, 204, 204);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 90px;
    margin:-10px;
    font-weight: 700;
    font-size:150%;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.addItemHeader:hover {
  opacity:1;
}


.filterFieldPanelItem {
  padding:5px;
  cursor: pointer;
  margin: 5px 5px 5px 10px;
}

.filterFieldPanelItem:hover {
  background-color: #FEFEFE;
}

.filterFieldPanelItemLabel {
  font-size:100%;
  padding:7px;

}

.assignUserCircle {
  border: 0px none;
  border-radius: 100%;
  font-size: 10px;
  font-weight:700;
  width: 25px;
  height: 25px;
  margin:3px;
  color:#3f3f3f;
  position:relative;
  top:-5px;
  right:-30px;
  box-shadow: 0px 0px 9px #666;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.assignUserCircle:hover {
  background-color: #FEFEFE;
}

.itemHeader-maintext {
  padding:4px 9px;
  font-size:14px;
  font-weight:600;
}


/* //////////////////////////////////////////
///////
///////     BIG BOX BUTTONS
///////
///////////////////////////////////////////*/

.big-box-button {
  position: relative;
  width:225px;
  height:190px;
  text-align: center;
  font-size: 15px;
  font-weight:500;
  background-color: #FEFEFE;
  /*border:1px solid #BBB;*/
  padding: 10px;
  box-shadow:0px 0px 5px 2px #DDD;
  /*margin: 25px;*/
  margin: 25px 10px;
  color: #777;
  cursor:pointer;
  border-radius:20px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
  background: #FAFAFA;
  margin-top: 0px;
}

.big-box-button-special {
  position: relative;
  width:100px;
  height:100px;
  text-align: center;
  font-size: 13px;
  font-weight:500;
  /*background-color: rgb(225, 35, 89);*/
  background: linear-gradient(#E12359, #e87394);
  background: url(../landingpage/img/bg-pattern.png), #E12359;

  /*border:1px solid rgb(225, 35, 89);*/
  padding: 10px;
  box-shadow:0px 0px 5px 2px #DDD;
  margin: 10px;
  color: #FFF;
  cursor:pointer;
  /*border-radius:50%;*/
  border-radius: 5px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0px 0px 10px 0px #333;

}

.big-box-button-special:hover {
 /* box-shadow:0px 0px 4px 4px rgb(225, 35, 89);*/
  box-shadow: 0px 0px 10px 5px #00A;
  color: #FFF;
}

.big-box-button:hover {
  /*box-shadow:0px 0px 4px 4px rgb(225, 35, 89);*/
  background-color: #F9F9F9;
  color: rgb(225, 35, 89);
  background-color: #fefefe;

}

.big-box-button:hover .big-box-button-child {
  background-color:#3c3846;
  color:#ffb11e;

}

.containerDescription {
  padding: 65px 10px 10px 10px;
  font-size: 14px;
  height:100%;
  width:100%;
  text-align: left;
  color: #888;
}

.containerDescription:hover {
  color:#553f51;
}


.cardTitle {
  display:table-cell;
  vertical-align: middle;
  font-size: 14px;
  font-weight: 700;
  margin: auto;
  left: 0;
  right: 0;
  padding: 10px 10px 10px 20px;
  position: absolute;
  top: 0px;
  bottom: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.selected {
  color:rgb(225, 35, 89);
  background-color: rgba(0,0,0,0);
}

.big-box-button-child {
  background-color: rgba(0,0,0,0);
  position:absolute;
  padding-left: 10px;
  padding-right: 10px;
  top:0px;
  left:0;
  right:0;
  width:100%;
  font-weight: 600;
  font-size: 14px;
  background: url(../landingpage/img/bg-pattern.png),linear-gradient(to bottom right,#e12359CC, #e80f4dDD);
  color: #FFF;
  border-radius: 3px 3px 0px 0px;
  border: none;
  height: 70px;
  color: #FFF;
  border-radius: 3px 3px 0px 0px;
  border: none;
  height: 60px;
  text-align: left;
  border-bottom: 1px solid #CCC;
  background: #666271;
}


.big-box-button-child.selected {
  background: #e12359;
  color:#FFF;
}

.cardIconInset {
      font-size: 25px;
    position: absolute;
    top: 44px;
    left: 100px;
    border: 1px solid #CCC;
    width: 50px !important;
    height: 50px;
    border-radius: 50%;
    padding: 5px;
    background: white;
    color: #666;
    box-shadow: 0px 0px 3px #AAA;
    padding-top: 8px;
}

.groupFolderMenu {
  font-size: 14px;
  /*color: #666;*/
  color:#c3c1ca;
  border-radius: 3px;
  cursor:pointer;
  padding:10px;
}

.groupFolderItem {
  font-size: 14px;
  /*color: #666;*/
  color:#c3c1ca;
  border-radius: 15px;
  cursor:pointer;
  padding:10px;
}

.groupFolderMenu:hover {
  /*font-size: 15px;*/
  background-color: #FFF1;
  /*color:#E12359;*/
  color:#ffb11e;
}

.groupFolderItem:hover {
  /*font-size: 15px;*/
  background-color: #FFF1;
  /*color:#E12359;*/
  color:#ffb11e;
}


.groupFolderMenu.selected {
  color:#E12359;
}

.groupFolderItem.selected {
  color:#E12359;
}


.big-box-button-child-special {
  background-color: none;
  position:absolute;
  padding-left: 10px;
  padding-right: 10px;
  top:0;
  bottom:25px;
  left:0;
  right:0;
  width:100%;
  height:30%;
  margin:auto;
  font-weight: 600;
  font-size: 14px;
}


.btn {
  margin:10px;
}

.filterButton {
	border: 1px solid #CCC;
	padding-left:10px;
	padding-right:10px;
	border-radius: 5px;
  font-size: 75%;
}

.sectionHeading {
  background-color:#B0346A;
  border-bottom:1px solid #DDD;

  padding: 10px;
  box-shadow:0px 0px 5px 2px #DDD;
  margin:0px;

  color:#FFF;
}

.listHeading {

  border-bottom:1px solid #DDD;
  font-size:125%;
  padding: 10px;
  box-shadow:0px 0px 5px 2px #DDD;
  margin:0px;
  font-weight: 700;

  color:#444;
}



/* //////////////////////////////////////////
///////
///////     ITEM - HEADER, BODY AND FOOTER
///////
///////////////////////////////////////////*/

.dropMergeValue {
  padding:10px;
  width:30px;
  height:30px;
  border-radius: 3px;
  border: 1px solid #999;
}

.dropMergeValue .dndDragover {

  border: 2px solid rgb(225, 35, 89) !important ;
}

.dropMergeValue .dndPlaceholder {
  display:none !important ;
}

.collectionItem {
  background-color: #FAFAFA;
    position: relative;
    padding: 10px 5px;
    color: #666;
    font-size: 15px;
    cursor: pointer;
    border-bottom:1px solid #CCC;
}

.collectionItem:hover {
  color:rgb(225, 35, 89);
  background-color: #f1eff5;
  
}

.storageHeader {
/*  background-color: #805F8D; */
  /*background-color: #727272;*/
  background:#EFEFEF;
  /*
  background: -webkit-linear-gradient(#e54d78, #e54d79);
  background: linear-gradient(#e54d78, #e54d79);
  background: url(../landingpage/img/bg-pattern.png), #E12359;
  background: url(../landingpage/img/bg-pattern.png), -webkit-linear-gradient(to left, #e54d78, #e54d79);
  background: url(../landingpage/img/bg-pattern.png), linear-gradient(to left, #e54d78, #e54d79);
  color: #FFF;
  */
  color: #333;
  margin-top: -10px;
  margin-left: -10px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 6px;
  margin-bottom: -10px;
  font-size: 125%;
  cursor: pointer;
  border-radius: 14px;
  opacity: 0.8;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  user-select: none;
}

.storageHeader:hover {
  opacity: 1;

}

.storageItem {
  cursor: pointer;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid #CCC;
  cursor: pointer;
}

.itemHeader {
/*  background-color: #805F8D; */
  /*background-color: #727272;*/
  background: -webkit-linear-gradient(#E12359, #7b4397);
  background: linear-gradient(#E12359, #7b4397);
    background: url(../landingpage/img/bg-pattern.png), #E12359;
    background: url(../landingpage/img/bg-pattern.png), -webkit-linear-gradient(to left, #656f77, #818a91);
    background: url(../landingpage/img/bg-pattern.png), linear-gradient(to left, #656f77, #818a91);

  color: #FFF;
  margin-top: -10px;
  margin-left: -10px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 6px;
  margin-bottom: -10px;
  font-size: 125%;
  cursor: pointer;
  border-radius: 14px;

}

.itemHeaderExpandedView {
/*  background-color: #805F8D; */
  background-color: #727272;
  color: #444;
  margin-top: -6px;
  margin-left: -6px;
  margin-right: -6px;
  padding: 10px;
  font-size: 125%;
  cursor: pointer;
  border-radius: 14px;
  border-radius: 3px;
  border-bottom-left-radius:0px;
  border-bottom-right-radius:0px;
}

.itemBodyExpandedView {
  padding: 5%;

}




.itemBody {
  position: absolute;
    top: 100px;
    bottom: 80px;
    width: 100%;

    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 75px;
    padding-right: 75px;



    overflow-y: auto;

    background-color: #FFF;

    cursor: initial;
}


.itemBody.editItem {
    position: absolute;
    top: 100px;
    bottom: 80px;
    width: 100%;

    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 75px;
    padding-right: 75px;



    overflow-y: auto;

    background-color: #FFF;

    cursor: initial;
}

.itemBodyBlock {
  display: flex;
  align-items: center;
  padding:10px;
}

.itemBodySubBlock {
  display: flex;
  align-items: center;
  padding:0px 10px;
}

.itemBodyBlockField {
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #DDD;
  background: #F9F9f9;
  width: auto;
}

.itemFooter {
    background-color: #FFF;
    color: #FFF;

    position:absolute;
    bottom:0px  ;

    height: 80px;
    width:100%;

    padding: 10px;

    font-size: 100%;

    border-top: 1px solid rgb(222, 222, 222);
    border-radius: 0px 0px 15px 15px;
}
/*
.itemFooter.active {
  background-color: rgb(245, 245, 245);
color: #FFF;
margin-bottom: -10px;
margin-left: -10px;
margin-right: -10px;
padding: 10px;
margin-top: 10px;
font-size: 100%;
border-top: 1px solid rgb(222, 222, 222);
}
*/








/* //////////////////////////////////////////
///////
///////     MORE BUTTONS
///////
///////////////////////////////////////////*/

.comingSoonLabel {
  position: relative;
  position: absolute;
  top: 0;
  padding:5px;
  bottom: 25px;
  left: -10px;
  width: 120%;
  height: 30%;
  margin: auto;
  font-weight: 600;
  font-size: 14px;
  background: red;
  opacity: 1;
  z-index: 1000;
  transform: rotate(-6deg);
  box-shadow: 0px 0px 5px 1px #666;
}

.closebutton {
  background: none;
  /*color: #FFF;*/
  border: 0px solid #FFF;
  cursor: pointer;
  color: #CCC;

}

.closebutton:hover {
  background: none;
  /*color: #FFF;*/
  border: 0px solid #FFF;
  cursor: pointer;
  color: #333;

}

.newElementButton {
  background: none;
  color: rgba(255,255,255,0.6);
  border: 0px solid #FFF;

}

.closebuttonDark {
  background: none;
  color: #666;
  border: 0px solid #FFF;
}

.closebutton.dark {
  background: none;
  color: #B73379;
  border: 0px solid #FFF;
  padding:0px;
  margin:0px;
  margin-top:-4px;
  font-size: 150%;
}

.closebutton.dark2 {
  background: url(../landingpage/img/bg-pattern.png),linear-gradient(to bottom right,#e12359CC, #e80f4dDD);
  color:#FFF;
  border: 0px solid #FFF;
  padding: 10px 20px;
  /*margin:0px;
  margin-top: -9px;*/
  font-size:14px;
  font-weight:700;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #BBB;
}

.closebutton.dark2.disabled {
  background: url(../landingpage/img/bg-pattern.png),linear-gradient(to bottom right,#999, #CCC);
  color:#FFF;
  border: 0px solid #FFF;
  padding: 10px 20px;
  margin:0px;
  margin-top: -9px;
  font-size:14px;
  font-weight:700;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #BBB;
}

.closebutton.dark2:hover {
  background: url(../landingpage/img/bg-pattern.png),linear-gradient(to bottom right,#e12359CC, #e80f4dDD);
  color:#FFF;
  border: 0px solid #FFF;
  font-size:14px;
  font-weight:700;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #BBB, 0px 0px 10px #999;
}

.closebutton.default {
  background: none;
  color: #CCC;
  border: 0px solid #FFF;
  padding:0px;
  margin:0px;
  margin-top:-4px;
  font-size: 150%;

}

.closebutton.itemFooterBtn {
 	background: #2fb62f;
color: rgb(243, 243, 243);
border: 1px solid #FFF;
font-size: 150%;
padding-left: 15px;
padding-right: 15px;
border-radius: 5px;
padding-top: 3px;
padding-bottom: 3px;

}

@media only screen and (max-width: 999px) {
  .closebutton.itemFooterBtn {
    background: none;
    color: rgb(110, 110, 110);
    border: 0px solid #FFF;
    font-size: 200%;
  }

}

.storageEntry {
  background-color: #F6F6F6;
  width:100%;
  padding:3px;
  border: solid 1px #F0F0F0;
  margin: 2px;
}



.sidebar {

    bottom: 0px;
    position: fixed;
    top: 50px;
    padding-top:75px;
    background-color: #FAFAFA;
    z-index:2000;

   /* border-right:1px solid #CCC;*/


}

.sidebar2 {

    bottom: 0px;
    position: fixed;
    top: 50px;
    padding-top:15px;
    background-color: #F9F9F9;
    z-index:2000;
   /* border-right:1px solid #CCC;*/


}

.borderbox {
  padding: 5px;
  border: 1px solid #AAA;
  color: #999;
  border-radius: 3px;
  width: 50%;
}

.graphThumbnail {
  position:relative;
  width:100%;
  height: 150px;
  background: #FFF;
  padding: 10px;
  margin-bottom: 15px;
  box-shadow: 0px 0px 10px #DDD;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #CCC;
}

.searchHighlight {
  font-weight: bolder;
  background: yellow;
}

.searchToolContainer {
  width: 400px;
  background: #FFF;
  height: 500px;
  top: 45px;
  position:absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  color: #666;
  border-radius: 10px;
  box-shadow: 0px 10px 30px #000A;
}

.searchToolResultHeading {
  border-top: 2px solid #666271;
  margin-top: 5px;
  color: #ffffff;
  margin-bottom: 5px;
  padding: 5px;
  background: #666271;
}

.searchResultBasic {
  background-color: #FEFEFE;
  cursor: pointer;
  padding:5px;
  border-bottom: 1px solid #CCC;
  /*padding: 10px;
  border-left: 10px solid #666;
  
  border-bottom: 1px solid #CCC;*/
}

.searchResultBasicEmpty {
  background-color: #FEFEFE;
  padding:5px;
  /*padding: 10px;
  border-left: 10px solid #666;
  
  border-bottom: 1px solid #CCC;*/
}

.searchResultBasic:hover {
  background-color: #f1eff5;
}

.searchResult {
  background-color: #FEFEFE;
  padding: 10px;
  border-left: 10px solid #666;
  cursor: pointer;
  border-bottom: 1px solid #CCC;
}

.searchResult:hover {
  background-color:#f1eff5;
}

.viewItemFieldDataContainer {
  padding: 10px 0px;
}

.viewItemFieldName {
  padding: 0px 0px;
  width: 175px;
  max-width:175px;
  min-width:175px;
  text-align: right;
  padding-right: 25px;
  border-right: 4px solid #CCC;
  margin-right: 15px;
  font-size:80%;
  font-weight: 400;
  text-transform: uppercase;
  hyphens: auto;
  word-wrap: break-word;

}

.viewItemFieldData {
  width: -webkit-fill-available;
  background: #F3F3F3;
  padding: 5px;
  border-radius: 5px;
  color: #333
}

/*
.sidebar:hover {

    overflow-y:auto;

}

.sidebar.ng-leave {

    bottom: 0px;
    position: fixed;
    top: 125x;
    left:0px;
    background-color: #EFEFEF;
      transition:0.5s linear all;



}



.sidebar.ng-leave.ng-leave-active {
  left:-500px;
}


.sidebar.ng-enter {

    bottom: 0px;
    position: fixed;
    top: 50px;
    left:-100%;
    background-color: #F9F9F9;
      transition:0.5s linear all;



}



.sidebar.ng-enter.ng-enter-active {
  left:0px;
}
*/


.sidebar-right {

    bottom: 0px;
    position: fixed;
    top: 50px;
    border-left:1px solid #CCC;
    background-color:#F9F9F9;
    padding:30px;
    padding-top: 75px;


}

.sidebar-left {

    bottom: 0px;
    position: fixed;
    top: 105px;
    width:250px;
    /*border-right:1px solid #CCC;*/

    padding:10px;
    /*padding-right:10px;*/
    box-shadow: 0px 0px 30px 0px #0003;
    position: fixed;
    background: #eeeeef;
    padding-bottom: 25px;



}

.graphFormTitle {
    color: #e34d76;
    font-weight: 600;
    position: relative;
    top: 10px;
    left: 5px;
    font-size: 12px;
}

.toppanel {

  height:50px;
  position:fixed;
  z-index: 1049;

/* original look */
  /*background: #3e3e3e;*/
  /*background: url(../landingpage/img/bg-pattern.png), linear-gradient(to left, #e54d78, #e54d79);*/
  /* box-shadow:0px 0px 10px 0px #333;*/

/* new look */
  /*background: #FFF;*/
  /*background: #553f51;*/
  background: #3c3846;
  background: #2f2a3bff;
  color:#FFF;
  /*border-bottom: 1px solid #EEE;*/
  border-bottom: 1px solid #676373;

}

.topbutton {
  font-size: 200%;
}

.toppanel-nav-buttons {
  font-weight:400;
  font-size: 14px;
  /*padding-bottom:8px; */
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 10px;
  margin-right:40px;
  background: transparent none repeat scroll 0% 0%;
  border: none;
  /*top:-5px;*/

  /*color: rgba(255, 255, 255,0.8); */
  /*color: #666;*/
  color:#FFF;
  cursor: pointer;

}



.toppanel-nav-buttons:hover {
  font-weight:400;
  color:#ffb11e;
  /*color: #e12359; */
}

.toppanel-nav-buttons-active {
  font-weight:600;
  font-size:14px;
  /*padding-bottom:8px; */
  padding-left: 5px;
  padding-right: 5px;
  margin-left: 10px;
  margin-right:40px;
  background: transparent none repeat scroll 0% 0%;
  border: none;
  /*top:-5px;*/

  /*color: rgba(255, 255, 255,1); */
  /*color: #666;*/
  color:#FFF;

  cursor: pointer;
  /*border-bottom:solid medium rgb(225, 35, 89) */
}
.toppanel-nav-buttons-active:hover {
  color:#ffb11e;
}

.toppanel2 {
  position: fixed;
  background: rgb(254, 254, 254) none repeat scroll 0% 0%;
  z-index: 1000;
  top: 50px;
  height:55px;
  border-bottom: 1px solid rgb(179, 179, 179);
  padding-left:0px;
  padding-right:0px;
}

.toppanel2-button, .toppanel2-button2 {
  position: relative;
  border: 1px solid #CCC;
  background: #EEE none repeat scroll 0% 0%;
  color: #666;
  cursor: pointer;
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
  box-shadow: 0px 0px 10px #CCC;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.toppanel2-button-transparent {
  position: relative;
  color: rgb(153, 153, 153);
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  box-shadow: none;
  border: none;
  background-color: #FFF;
  font-size: 18px;
}


.toppanel2-button2.saved {
  position: relative;
  border: 1px solid #CCC;
  background: #FFF none repeat scroll 0% 0%;
  color: #E12359;
  cursor: pointer;
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
  box-shadow: 0px 0px 10px #CCC;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.dropdown-item.saved {
  position: relative;
  background: #E12359 none repeat scroll 0% 0%;
  color: #FFF;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.assignUserList {

}

.assignUserListItem {
  background-color: #FEFEFE;
  padding: 10px;
  cursor: pointer;
}

.assignUserListItem:hover {
  background-color: #EFEFEF;
  color:#E12359;
}


.toppanel2-button:hover {
  color: rgb(225, 35, 89);
  background-color: #FFF;
  box-shadow: 0px 0px 10px #CCC, 0px 1px 8px #AAA;

}

.toppanel2-button.selected {
  color: rgb(225, 255, 255);
  background-color: #E12359;
  box-shadow: 0px 0px 10px #CCC, 0px 1px 8px #AAA;

}

.toppanel2-button2:hover {
  color: rgb(225, 255, 255);
  background-color: #E12359;
  box-shadow: 0px 0px 10px #CCC, 0px 1px 8px #AAA;

}

.toppanel2-button2.selected {
  color: rgb(225, 255, 255);
  background-color: #E12359;
  box-shadow: 0px 0px 10px #CCC, 0px 1px 8px #AAA;

}

.toolbarpanel2-button {
  position: relative;
  border: 1px solid #CCC;
  background: #EEE none repeat scroll 0% 0%;
  color: rgb(153, 153, 153);
  width: 45px;
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
  box-shadow: 0px 0px 10px #CCC;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.toolbarpanel2-button:hover {
  color: rgb(225, 35, 89);
  background-color: #FFF;
  box-shadow: 0px 0px 10px #CCC, 0px 1px 8px #AAA;

}

.modalLinkSelectButton {
  position: relative;
  border: none;
  background: none;
  color: rgb(153, 153, 153);
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}


.modalBackground {
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  z-index:4500;
  background: rgba(0,0,0,0.2);
  width:100%;
}

.basicModal {
  box-shadow: 0px 0px 30px 0px #000000AA;
  margin: auto;
  width: 40%;
  height:55%;
  right: 0px;
  bottom: 0px;
  left: 0px;
  top: 0px;
  position: absolute;
  color: #666;
  font-size:14px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: #FCFCFC;


  /* from card
  background-color:#FEFEFE;
  border:none;
  padding: 6px;

  box-shadow: 0px 0px 10px #CCC;
  margin: 10px;
  color: #666;

    font-size:14px;

    */

    /* from newEntry


  border:none;
  border-radius:5px;
  box-shadow:none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  */


}

.toppanel2-button-inverse {
  position: relative;
  border: medium none;
  background: transparent none repeat scroll 0% 0%;
  color: rgb(153, 153, 153);

  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
}

.toppanel2-button-inverse:hover {

  background-color: #505050;
  color:#EEE;
}

.toppanel2-button-pink {
  position: relative;
  border: medium none;
  background: transparent none repeat scroll 0% 0%;
  color: rgb(153, 153, 153);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
}

.toppanel2-button-pink:hover {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: rgb(225, 35, 89);
  box-shadow: 0px 0px 3px rgb(225, 35, 89);
  color: #FFF;

}

.toppanel2-button-pink:active {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: rgb(225, 35, 89);
  color: #FFF;

}

.toppanel2-button-pink:focus {
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  background-color: rgb(225, 35, 89);
  color: #FFF;

}


.big-box-button-control-button {
  position: relative;
  /*border: 1px solid #FFF;*/
  background: #FFF;
  color: #666;
  top: 10px;
  right: 10px;
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 50%;
  /*box-shadow: 0px 0px 10px #CCC;*/
  transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}

.big-box-button-control-button:hover {
  color:rgb(225, 35, 89);
  background: #FFF;
}

.big-box-button-control-button-2 {
  position: relative;
  /*border: 1px solid #FFF;*/
  background: #EEE;
  color: #AAA;
  top: 5px;
  right: 5px;
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 50%;
  /*box-shadow: 0px 0px 10px #CCC;*/
  transition: all 0.4s cubic-bezier(.25,.8,.25,1);
}

.big-box-button-control-button-2:hover {
  color:rgb(225, 35, 89);
  /*background: #FFF9;*/
}

.showMore {
  width: 100%;
  text-align: center;
  font-style: italic;
  font-weight: 600;
  padding: 4px;
  cursor: pointer;
}

.showMore:hover {
  background: #EFEFEF;
}

.toppanel3 {
  position: fixed;
  background: rgba(255, 255, 255,0);
  color:#000;
  z-index: 1005;
  top: 105px;
  height:55px;
  border-bottom: none;
  padding-left:0px;
  padding-right:0px;
}

.filterPanel {
  position:fixed;
  top:105px;
  width:16.666667%;
  z-index:1040;
  bottom:0px;
  overflow-y: auto;
  background-color:#fefefe;
  padding:25px;
}

.filterBox {
  margin: 5px 0px;
  border: 1px solid #CCC;
  padding: 5px;
  background-color: #FAFAFA;
  border-radius: 3px;
}

.filterUsersPanel {
  position:absolute;
  right:0px;
  top:0px;
  width:100%;
  background-color:#FAFAFA;
  bottom:0pc;
  z-index:999;
  border-left: 1px solid #CCC;
}

.filterUsersPanelFooter {
  position: absolute;
  right: 0px;
  width: 100%;
  background-color: rgb(239, 239, 239);
  padding: 10px;
  bottom: 0px;
  height: 150px;
  overflow-y: none;
  z-index: 2500;
  border-top: 1px solid #CCC;
  /*border-left: 1px solid #CCC;*/
}

.userSubPanel {
  overflow-y: scroll;
  position: absolute;
  top: 52px;
  height: 130px;
  overflow-x: hidden;
  width: 100%;
  background: #f3f3f3;
}

.userSubPanelUser {
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  margin: 5px 0px;
  width: 100%;
  border-bottom: 1px solid #CCC;
  padding: 15px;
}

.userSubPanelTitle {
  position: absolute;
  top: 0px;
  background: #FFF;
  height: auto;
  width: 100%;
  border-bottom: 1px solid #CCC;
  color: #666;
}

.userSubPanelTitleContent {
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
}


.chatSubPanel {
  overflow-y: scroll;
  position: absolute;
  top: 233px;
  bottom: 150px;
  overflow-x: hidden;
  width: 100%;
  padding: 10px;
  background: #f3f3f3;
}

.chatSubPanelTitle {
  position: absolute;
  top: 180px;
  border-top: 1px solid #CCC;
  width: 100%;
  background: #FFF;
  border-bottom: 1px solid #CCC;
  font-weight: 600;
  color: #666;
  height:53px;
}

.expandedSubPanelTitle {
  top:0px;
  height:55px;
  border-top:none;
}

.expandedSubPanel {
  top:52px;
}

.mention {
  color: #E12359;
}

.attachment-content {
  margin:0px;
  display:inline-flex;
}

figure {
  margin:0px;
  display:inline-flex;
}

.filter-button {
   position: relative;
  border: medium none;
  background: transparent none repeat scroll 0% 0%;
  color: rgb(153, 153, 153);
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
}

.filter-button:hover {
  background-color: #eee;
  box-shadow:0px 0px 5px 0px #bbb;
}

.special-message-container {
  border:1px solid #666;
}

.special-message {
  background-color: #FEFEFE;
}

.setSettingsHeader {

    height: 100px;
    padding: 25px 50px;
    /* background-color: #3f3f3f; /* rgb(112, 88, 122); */
    background: linear-gradient(#E12359, #e87394);
    background: url(../landingpage/img/bg-pattern.png), #E12359;
    background: url(../landingpage/img/bg-pattern.png), -webkit-linear-gradient(to left, #7b4397, #E12359);
    background: url(../landingpage/img/bg-pattern.png), linear-gradient(to left, #e54d78, #e54d79);

    color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(204, 204, 204);
/*    border-radius: 5px 5px 0px 0px;*/
    padding-left: 50px;

    font-weight: 600;
    background: rgb(239, 239, 239);
    color: #666;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.modalContextHeading {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.modalContextSubheading {
  font-weight:400;
  font-size: 16px;
}

.overflowElipsis {
  text-overflow: ellipsis;
  text-wrap: nowrap;
  overflow-x: hidden;
  padding-right: 15px;
}

.previousStorage {
    text-align: center;
    background-color: #EFEFEF;
    padding: 20px;
    padding-top: 25px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    margin: auto;
    width: 10%;
    height: 160px;
    left: 5%;             /* <-- opposite of nextStorage */
    bottom: 0;
    z-index: 3001;
    box-shadow: 0px 0px 30px #333;
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.previousStorage:hover {
    box-shadow: rgb(255, 255, 255) 0px 0px 10px 2px;
    opacity: 1;
}


.nextStorage {
    text-align: center;
    padding: 20px 20px 20px 20px;
    background-color: #EFEFEF;
    padding-top:25px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    font-weight: 700;
    font-size:14px;
    cursor: pointer;
    margin: auto;
    width: 10%;
    height: 160px;
    right: 5%;
    bottom: 0;
    z-index:3001;
    box-shadow: 0px 0px 30px #333;
    position: fixed;
     display: flex;
    flex-direction: column;
    justify-content: center;

}

.nextStorage:hover {
    box-shadow: rgb(255, 255, 255) 0px 0px 10px 2px;
    opacity: 1;

}

.collectionSettingsMenuBarContainer {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 45px;
  background-color: #3c3846;
}

.collectionSettingsMenuBar {
  background-color: #3c3846; 
  width: 100%; 
  padding-left: 25px; 
  z-index:1000; 
  /*border-bottom: 1px solid #CCC;*/
  color:#FFF;
  font-weight: 500;
  font-size:16px;
}

.setSettingsButton {
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 8px;
  padding-left: 5px;
  padding-right: 60px;
  background: transparent none repeat scroll 0% 0%;
  color: #FFF;
  border: none;
  border-bottom: none;
  padding-top: 12px;
  display: inline-flex;
  cursor:pointer;
  padding-left:25px;
  height: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.setSettingsButton:hover {
  font-size: 14px;
  font-weight: 500;
  /* padding-bottom: 8px; */
  background: #FFF1;
  color: #ffb11e;
  border: none;
  border-bottom: 3px solid #ffb11e;
}

.setSettingsButton.active {
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 8px;
  border: none;
  border-bottom:solid medium #e12359;
  background: #f1eff5;
  color: #e12359;
}

.setSettingsButton.active:hover {
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 8px;
  background: #FFF1;
  border: none;
  border-bottom: solid medium rgb(225, 35, 89);
  color: #ffb11e;
}

.setFieldSettingsButton {
  position: relative;
  border: medium none;
  background: transparent none repeat scroll 0% 0%;
  color: rgb(153, 153, 153);
  /* top: 10px; */
  padding:5px;
  padding-left:10px;
  padding-right:10px;
  border-radius: 3px;
  font-size: 16px;
}

.setFieldSettingsButton:hover {

  background-color: #eee;

}


.fieldSettingsBody-collectionSettings {
  overflow-y: hidden;
  overflow-x: hidden;
  padding: 0px;
  padding-right: 50px;
  position: absolute;
  top: 80px;
  bottom: 0px;
  right: 0px;
  padding-left: 30px;
}

.fieldSettingsBody-tableView {
  /*overflow-y: scroll;*/
  overflow-x: hidden;
  padding: 15px;
  /*padding-right: 50px;
  margin-right: -50px;
  position: absolute;
  top: 30px;
  bottom: 60px;
  right: 0px;
  padding-left: 30px;*/
}



.storageLink:hover {
  font-weight: 800;
  color: #333;
}

.ALINe {
  background-color: darkred;
}

.mainsection {
  top:105px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  position: absolute;

}

.strong {
  font-weight: 700;
}

a {
  color:rgb(225, 35, 89);
  font-weight:600;
}

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

input {
  width:-webkit-fill-available;
  background:none;
}

textarea {
  max-height: 300px;
  min-height:200px;
}

select {
  width: -webkit-fill-available;
  border:1px solid #FFF;
  margin:1px;
}

.inputAdd {
  width:70%;
}

.searchpanel {
  padding:20px;
  color:rgb(112, 88, 122) ;
}

.searchInput {
  padding: 5px 15px;
  border: 1px solid #d3d1da;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 500;
  outline: none;
  background: #f1eff5;
  border-radius: 14px;
  max-width: 500px;
  min-width: 50%
}

.form-control {
  border-radius: 0px;
/*  background-color: rgb(112, 88, 122); */
background-color: #F6F6F6;
  color: #222;
  border: none;
}

.newProjectButton {
  font-weight: 700;
}

.newEntry {

  background-color: #FCFCFC;
  border:none;
  border-radius:5px;
  box-shadow:none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}

input.form-control::-webkit-input-placeholder {
   color: #FFF;
}

input.form-control:-moz-placeholder { /* Firefox 18- */
   color: #FFF;
}

input.form-control::-moz-placeholder {  /* Firefox 19+ */
   color: #FFF;
}

input.form-control:-ms-input-placeholder {
   color: #FFF;
}

.cardsearch {
  background-color: rgb(179, 179, 179);
  border-radius: 5px;
}

.topbarFirstName {
  font-size: 50%;
  padding: 30px;
  padding-left:30px;
  font-weight: bold;
}

@media only screen and (max-width: 999px) {
  .topbarFirstName {
    font-size: 50%;
    padding: 30px;
    padding-left:30px;
    font-weight: bold;
  }
}

.icon-30px {
  font-size: 30px;
  box-shadow: 0px 0px 3px 3px #000A;
}

.quickGroupLink {
  color:#999;
  cursor:pointer;
}

.quickGroupLink:hover {
  color:#eee;
}

.sidebarGroup {
  display:flex;
  flex-direction:column;
  margin-bottom: 10px;
}

.groupLink {
  box-shadow: none;
  border: 0px none !important;
  color: #727272;
  font-weight: 600;
  /*margin-top:10px;
  margin-left:10px;*/
  /*width:100%;*/
  background: rgb(239, 239, 239);
  padding: 10px;
  border-radius: 2px 2px 0px 0px;
  cursor:pointer;
  font-size: 12px
}

.quota-indicator {
  padding:50px;
  height: 100px;
  width: 200px;
  background: #666271;
  border-radius: 3px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  font-size:1.2em;
  font-weight:500;
  color: white;
}

.groupLink.header {
  font-size: 14px;
  font-weight:600;

  /*padding-right: 20px;*/
  /*background: rgb(227, 227, 227);*/
  /*background: #3c3846;
  background: #bebbc3;
  color: #EFEFEF;*/
  background: #4a4455;
  color: #EFEFEF;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.groupLink.header:hover {
  /*background-color: #DDD;*/
  background: #3c3846;
  color:#ffb11e;
}

.groupLink.header.filtersActive {
  color: #E12359;
}


.sidepanelgroup {
  background-color: #dcdcdc;
  padding: 5px;
  border: 1px solid #bfbfbf;
}

.uploadedFile {

  box-shadow: none;
  border: 1px solid #E3E3E3;
  color: #999;
  font-weight: bold;
  margin-top:10px;
  width:100%;
  background-color: #FFF;
  padding: 10px;
  border-radius: 3px;
  cursor:pointer;
}

.fileSection {
  top-padding:20px;
  border-top: 1px #E3E3E3 solid;
}



.white  {
  background-color: #EFEFEF;
  margin-top:2px;
  margin-bottom:2px;
  padding:5px;
}

.white:hover  {
  background-color: #FFF;
  margin-top:2px;
  margin-bottom:2px;
  padding:5px;
}

.indent10 {
  margin-left:10px;
  margin-right: 0px;
}

.indent20 {
  margin-left:20px;
}

.groupLinkUser {
  box-shadow: none;
  border: 0px none !important;
  color: #999;
  font-weight: bold;
  margin-top:10px;

  background-color: #F3E2D6;
  padding: 10px;
  border-radius: 3px;
  cursor:pointer;
}

.tag {
  margin:5px;
  color:#717171;
  padding: 5px;
  background-color: #FEFEFE;
  border-radius: 2px;
  white-space: nowrap;
}

.multiOptionTag {
  padding:5px 10px !important;
  background-color:#DDD;
  border: 0px solid #999;
  border-radius:10px !important;
  margin:5px 10px 5px 0px;
  /*line-height: 36px;*/
  display: flex;
  align-items: center;
  width: max-content;

}

.ts-dropdown-content {
  padding: 0px 5px;
}

.ts-control {
  padding: 5px 5px
}


.cardGroupHeader {
  margin-top: 5px;
  font-size: 18px;
  color: rgb(231, 76, 122);
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-weight:600;

  /*text-shadow: 0px 0px 6px #CCC;*/
  padding-bottom: 10px;

  /*border-bottom: solid 1px #D2D2D2;*/
  border-bottom: solid 1px #CCC;
}

/*
    padding-left: 5px;
    padding-top: 13px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    font-weight: 600;
    border-bottom: 1px solid rgb(187, 187, 187);
    font-size: 18px;
    text-shadow: 0px 0px 6px #CCC;
*/

.cardGroupHeader.cardView {
  margin-top: 5px;
  font-size: 0.9rem;
  color: #666;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-weight: 700;
  border-bottom:none;
  padding-top:25px;
  position: sticky;
  top: 70px;
  width:20%;
  text-align: right;
  display:inline-block;

}


.cardGroupHeader.listView {
  margin-top: 5px;
  font-size: 15px;
  color: rgba(111,111,111,1);
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-weight:600;

  /*text-shadow: 0px 0px 6px #CCC;*/

  /*border-bottom: solid 1px #D2D2D2;*/
  border-bottom: solid 1px #CCC;

}

.settingsfield {
  font-size: 14px;
  padding: 10px;
  margin-bottom: -15px;

}

.ta-scroll-window {
  width: 100%;
  min-height:30px;
  max-height: 500px;
  overflow-y: auto;
  background-color: rgb(250, 250, 250);
  border-top: 1px solid rgb(218, 218, 218);
}

.ta-bind {
    min-height:30px;
}

.commentpanel {

    background-color: rgb(252, 252, 252);
    border: 1px solid rgb(238, 238, 238);
    padding: 10px;
    margin: 20px 0px;
}

.comments.header {
  color:#BBB;
}


.gantt-project-row {
  font-weight: 600;
  font-size: 125%;
}

.card.active {
    box-shadow:0px 0px 6px 1px rgba(225, 35, 89,0.5);
  }



.trashcan {
  font-size:100px !important ;
}
.trashcan .dndDragover {
  font-size:100px !important ;
  color:rgb(225, 35, 89) !important ;
}

.trashcan .dndPlaceholder {
  display:none !important ;
}

.fa.fa-trash.trashcan {
  font-size:100px !important;
  color:#ccc !important ;
}

.fa.fa-trash.trashcan:hover {
  font-size:100px !important;
  color:rgb(225, 35, 89) !important ;
}

.fa.fa-trash.trashcan.dndDragover {
  font-size:100px !important ;
  color:rgb(225, 35, 89) !important ;
}

.fa.fa-trash.trashcan.dndPlaceholder {
  display:none !important ;
}


// upload buttons

            .my-drop-zone { border: dotted 3px lightgray; }
            .nv-file-over { border: dotted 3px red; } /* Default class applied to drop zones on over */
            .another-file-over-class { border: dotted 3px green; }

// delete the below?

.uploadedFile {

  box-shadow: none;
  border: 0px none !important;
  color: #999;
  font-weight: bold;
  margin-top:10px;
  margin-left:10px;
  width:100%;
  background-color: #E3E3E3;
  padding: 10px;
  border-radius: 3px;
  cursor:pointer;
}

.drop-box {
  border: 3px dashed rgb(204, 204, 204);
  background: rgb(238, 238, 238) none repeat scroll 0% 0%;
  padding: 10px;
}

.dragover {
  /*border: 3px dashed rgb(197, 103, 186);*/
  border: 10px solid red;
}

.dndPlaceholder {
  background-color: #FAFAFA;
  border: 2px dashed #DDD;
  height: 60px;
  border-radius: 4px;
  white-space: nowrap;
}

.dndPlaceholder2 {
  background-color: #FAFAFA;
  border: 2px dashed #DDD;
  height: 60px;
  border-radius: 4px;
  white-space: nowrap;
}

.flowchart {
  color:red;
}

.flowLine {
  stroke: #DDD;
  stroke-width: 10px;
}

.selectedElement {
  stroke: #E12359AA;
  stroke-width: 10px;
}

.arrowheads path.selected {
  fill: #E12359AA;
}

.dndDraggingSource {
  opacity: 0.5;
}

.noShadow {
	box-shadow: none;
	margin-top:0px;
}

.linkButton {
	color: #DDD;
	background-color: rgba(200,200,200,0);
	padding:7px;
	border-radius: 50%
}

.linkButton:hover {
	color: #888;
	background-color: rgba(200,200,200,0.5);
	padding:7px;
	border-radius: 50%

}

.childCard {
	border: 1px SoLID #DDD;
	padding: 5PX;
}

.childCardTitle {
	font-weight: 700;
}

.childCardDetail {
	font-weight: strong;
}

.childcard.table.row {
  border: 1px solid #333;
}

.childcard.table.cell {
  border: 1px solid #333;
}

.childListItem {
  padding: 10px;
  margin-top: 5px;
  color: #8A8A8A;
  font-weight: 600;
  border: none !important;
  margin: 10px;
  margin-bottom: 10px !important;
  background-color: #FFF !important;
  box-shadow: 0px 0px 6px #0000001a;
  border-radius: 10px;
}




[fixed-first-column] {position:relative}
[fixed-first-column]>.table-responsive {margin-left:250px;}
[fixed-first-column]>.table-responsive .table {}

[fixed-first-column]>.table-responsive .table>thead>tr>td:first-child,
[fixed-first-column]>.table-responsive .table>tbody>tr>td:first-child,

[fixed-first-column]>.table-responsive .table>tbody>tr>th:first-child {
    position: absolute;
    min-width: 250px;
    width: 250px;
    border-right: 1px solid #ddd !important;
    border-bottom:1px solid #f5f5f5 !important;
  left:0;
  top:auto;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

[fixed-first-column]>.table-responsive .table>thead>tr>th:first-child {
    position: absolute;
    min-width: 250px;
    width: 250px;
    border-right: 1px solid #ddd !important;
    border-bottom:1px solid #f5f5f5 !important;
  left:0;
  top:auto;
  padding-top:0 !important;
  padding-bottom:0 !important;
}


[fixed-first-column] > .table-responsive .table > thead > tr > td:first-child > div,
[fixed-first-column] > .table-responsive .table > tbody > tr > td:first-child > div,
[fixed-first-column] > .table-responsive .table > thead > tr > th:first-child > div,
[fixed-first-column] > .table-responsive .table > tbody > tr > th:first-child > div {
  padding-top: 10px;
  padding-bottom: 10px;
  position:relative;
}

[fixed-first-column] .tableGroupHeader  {
    position: absolute;
    min-width: 250px;
    width: 100%;
    border-right: 0px solid #ddd !important;
    border-bottom:0px solid #f5f5f5 !important;
  left:0;
  top:auto;
  padding-top:25 !important;
  padding-bottom:0 !important;
}

[fixed-first-column] td {
    min-width:250px; /* default width */
  max-width:300px;
}


.grid {
    width: 100%;
    height: 844px;
  }

.ui-grid-top-panel {
  overflow: visible;
}

.ui-grid-header-viewport {
  overflow: visible;
}

.ui-grid-cell > .ui-grid-cell-contents {
  overflow: visible;
  padding:10px;
  text-overflow:ellipsis;
}

.uiGridRowHeaderGrouped {
  height: 40px;
  padding: 10px;
  font-weight: 700;
  color: #FFF;
}

.uiGridDropdown {
  height: 40px !important;
  padding: 10px !important;
}

.uiGridDropdown:focus {
    outline: none !important;
    background-color: #FFF !important;
    border-color: rgb(225, 35, 89) !important;
    -moz-box-shadow:    inset 0 0 10px rgb(225, 35, 89) !important;
    -webkit-box-shadow: inset 0 0 10px rgb(225, 35, 89) !important;
    box-shadow:         inset 0 0 10px rgb(225, 35, 89) !important;

}

.ui-grid-cell-focus {
  outline: none !important;
  background-color: #e6f1fa !important;
  border-color: #9ecaed !important;
    -moz-box-shadow:    inset 0 0 10px #9ecaed !important;
    -webkit-box-shadow: inset 0 0 10px #9ecaed !important;
    box-shadow:         inset 0 0 10px #9ecaed !important;

}

.ui-grid-cell-focus {
    background-color: transparent;
}

.ui-grid-treebase-header {
  color:#666;
}

.ui-grid-cell-contents.ui-grid-custom-selected,
.ui-grid-cell-contents.ui-grid-custom-selected {
    /*background-color: rgba(0,119,204, 0.15);*/
}

.ui-grid-custom-selected-scrolling .ui-grid-cell-contents.ui-grid-custom-selected {
    background-color: transparent;
}

.ui-grid-custom-selection-input {
  position: absolute;
  bottom:   -10px;
  left:   -10px;
  width:    10px;
  height:   10px;
  display:  block;
  font-size:  1;
  z-index:  -1;
  color:    transparent;
  background: transparent;
  overflow: hidden;
  border:   none;
  padding:  0;
  resize:   none;
  outline:  none;
  -webkit-user-select: text;
  user-select: text; /* Because for user-select:none, Safari won't allow input */
}

.ui-grid-selection-row-header-buttons {
  color: #666;
  padding:5px;
}

.formBody {
  position: relative;
    /*top: 100px;
    bottom: 100px;*/
    width: 100%;

    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 75px;
    padding-right: 75px;

    overflow-y: auto;

    background-color: #FFF;

    cursor: initial;
    border-left:1px solid rgb(222, 222, 222);
}


.formBody.editItem {
    position: relative;
    /*top: 100px;
    bottom: 100px;*/
    width: 100%;

    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 75px;
    padding-right: 75px;


    overflow-y: auto;

    background-color: #FFF;
    border-left:1px solid rgb(222, 222, 222);
    cursor: initial;

}

.formFooter {
    background-color: #FFF;
    color: #FFF;

    position:relative;
    bottom:0px  ;
    height: 100px;
    width:100%;

    padding: 10px;

    font-size: 100%;

    border-top: 1px solid rgb(222, 222, 222);
    border-left:1px solid rgb(222, 222, 222);
    border-radius: 0px 0px 15px 15px;
}

.collectionGroup {
    /*border: 1px solid #ccc;*/
    width: 100%;
    display: inline-block;
    border-radius: 5px;
}

.collectionGroup:hover {
  background-color: #FEFEFE;
}

.setSettingsHeaderForm {

    height: 100px;
    padding: 20px 50px 50px 90px;
    background-color: #3f3f3f; /* rgb(112, 88, 122); */
    color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(204, 204, 204);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 50px;
    font-weight: 700;
    font-size:140%;
    border-left:1px solid rgb(222, 222, 222);


}

.contextualHelp {
  background: white;
  border: 1px solid #CCC;
  padding: 15px;
  font-size: 12px;
  padding-bottom: 0px;
  border-radius: 3px;
  box-shadow: 0px 3px 5px #CCC;

}

.contextualHelpTitle {
  color:rgb(225, 35, 89);
}

.contextualHelpHeading {
  color:rgb(225, 35, 89);
}

.contextualHelpButton {
 cursor:pointer;
 text-shadow: 0px 0px 10px #AAA;
 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.contextualHelpButton:hover {
  text-shadow: 0px 0px 10px #AAA, 0px 2px 8px #888;
  transform: scale(1.2);
}

.helptextHeader {
  font-weight:600;
  color: rgb(225, 35, 89);
}

.helptextBody {
  font-weight:300;
  font-size:16px;
}

.helpScreenshot {
  border: 1px solid #CCC;
  margin-bottom: 10px
}

.helptextTextbox {
  background-color: lightpink;
  font-weight:300;
  padding:20px;
  border-radius: 20px;
  font-size: 18px;
}

.helpContentsNavItem {
  padding:10px;
  background-color: #e6e6e6;
  border-radius: 5px;
  margin: 10px 0px;
  box-shadow: 0px 0px 5px #CCC;
}

.helpContentsNavItem:hover {
  background-color: rgb(225, 35, 89);
  color:#FFF;
  font-weight:600;
}

.helpContentsNavItem:hover > a{
  /*(background-color: rgb(225, 35, 89);*/
  color:#FFF;
  font-weight:600;
}

.sidebar-miniButton {
    display: inline-block;
    padding: 1px 5px;
    border: 0px;
    background: #D3d3d3;
    border-radius: 2px;
    margin-left: 7px;
    color: #666;
}

.conceptG {
  stroke-width:0.5px;
  stroke: rgb(102,102,102);
  rx:5px;
}

.conceptG.selectedNodeRect {
  stroke-width:3px;
  /*stroke: red;*/
}

.nodeCategoryButton {
  width: 10px;
  height: 10px;
  stroke-width: 0.5px;
  stroke: #333;
  rx: 3.5px;
  opacity: 1;
  fill: #f3f3f3;
  cursor: pointer;
}

.link.selectedNode {
  stroke-width:3px;
  stroke: red;
}

.nodetext {
  stroke: none;
}

.nodeG {
  /*transition: transform 0.5s ease-in-out;*/
}
.selectedNode {
  stroke-width:3px;
  stroke: red;
}

.conceptG text {
  stroke-width:0px;
}

.profile-subheading {
  font-size:18px;
  color: #666;
  margin-bottom:5px;
  margin-top: 40px;
}

.groupFolder {
  margin: 5px;
  padding: 10px;
  /*background-color: white;
  border: 1px solid #CCC;*/
  border-radius: 3px;
  color: #666;
  font-size: 16px;
  display: flow-root;
}

.dropdown-toggle::after {
    display:none
}

.smallHeading {
  font-size:18px;
  padding-left:10px;
  padding-top:10px;
  color:#999;
}

.panelText {
 font-size:14px;
 padding-left:10px;
 padding-bottom:25px;
 color: #AAA;
}


.quicklinkHeading {
  font-size:14px;
  padding-left:0px;
  font-weight:400;
}



.quicklinkText {
 font-size:14px;
 padding-left:0px;
 color: #AAA;
}

.btn-danger {
  background: #f1eff5;
  border:#3c3846;
  color:#3c3846;
}

.btn-danger:hover {
  background: #e12359;
  border:#3c3846;
  color:#3c3846;
}

.btn-primary {
  background: #e12359;
  border: #7b4397 ;
  color: white;

}

.btn-primary:hover {
  background: #f0ad4e;
  border: #f0ad4e ;
  width: auto !important;
}

.userlist {
  padding-top:15px;
  color: #666;
  border-bottom: 1px solid #DDD;
  background:#FFF;
  height:75px;
  font-size:15px;
}

.trix-editor {
  max-height: 500px;
  overflow-y: scroll;
}


.button-light-grey {
  padding: 10px;
  background: #EEE;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 5px;
  margin:2px;
}

.button-light-grey:hover {
  color:#E12359;
}

.button-light-grey.selected {
  color:#E12359;
}

.pageItem trix-toolbar {
  padding:10px;
}

.pageItem .trix-button {
  border:none;
  border-bottom: none;
}

.pageItemHeader {
  font-weight: 600;
  font-size: 14px;
  color:#666;
  width:100%;
  margin:0px;
  padding:15px;
  min-height:50px;
  border-bottom: solid 1px #CCC;
  background: #3c3846;
  color: white;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

trix-toolbar .trix-button.trix-active {
  background: #e5e1e8;
  color: #E12359;
  border:0px;
}

trix-toolbar .trix-button {
  border: none;
}

.pageItem .trix-button-group {
  border:none;
}

trix-toolbar .trix-button-group {
  border: none;

}

.folder {
    width: 150px;
    height: 105px;
    margin: 0 auto;
    margin-top: 50px;
    position: relative;
    background-color: #708090;
    border-radius: 0 6px 6px 6px;
    box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}

.folder:before {
    content: '';
    width: 50%;
    height: 12px;
    border-radius: 0 20px 0 0;
    background-color: #708090;
    position: absolute;
    top: -12px;
    left: 0px;
}

.testimonial-inner {
  background: url(../landingpage/img/bg-pattern.png), #E12359;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border:1px solid #BBB;
  border-radius: 3px;
  color: #FFFFFFAA;
    /* padding: 30px; */
    /* display: block; */
  margin: 15px;
  margin-top:35px;
    /* position: relative; */
  box-shadow: 0px 0px 5px 2px #DDD;
  cursor:pointer;
  width: 175px;
  height: 119px;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.testimonial-inner:after {
     top: -8px;
    left: 15px;
    border: solid transparent;
    content: " ";
    height: 15px;
    width: 75px;
    position: absolute;
    pointer-events: none;
    /* border-color: rgba(255, 255, 255, 0); */
    /* border-top-color: #fff; */
    background: url(../landingpage/img/bg-pattern.png), #E12359;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}

.testimonial-inner:hover:after {
     top: -8px;
    left: 15px;
    border: solid transparent;
    content: " ";
    height: 15px;
    width: 75px;
    position: absolute;
    pointer-events: none;
    /* border-color: rgba(255, 255, 255, 0); */
    /* border-top-color: #fff; */
    background: url(../landingpage/img/bg-pattern.png), #E12359;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);

}


.testimonial-inner:before {
    content: '';
    position: absolute;
    /* transform: rotate(45deg); */
    width: 75px;
    height: 36px;
    top: -8px;
    z-index: -1;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    /* left: 9px; */
}



.testimonial-inner:hover {
  box-shadow:0px 4px 12px 2px #666;
  background: url(../landingpage/img/bg-pattern.png), #E12359;
  color: #FFF;
  border: none;
/*  background-color: #fefefe;*/
}

.testimonial-inner:hover:before {
    box-shadow:0px 4px 12px 0px #666;
  background: url(../landingpage/img/bg-pattern.png), #E12359;
  color: rgb(225, 35, 89);
}

.host {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.tags {
  background-color: #f9f9f9 !important;
  box-shadow: none !important;
  padding:5px !important;
  border:none !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: -webkit-fill-available;
}

tags-input .tags .tag-item {
    margin: 3px;
    padding: 0 0px;
    display: inline-block;
    float: left;
    font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    min-height: 26px;
    line-height: inherit;
    border: none;
    border-radius: none;
    background: none;
}

.tags-left-panel {
  width:35px;
  margin-right:15px;
}

.tags-left-panel-image {
  width: 100%;
  border-radius: 50%;
}

.tags-right-panel {
  color: #666;
  font-size:14px;
}

.messageCard {
  font-size: 12px;
  font-weight: 700;
  padding: 10px;
  background-color: #f7f7f7;
  width: 100%;
  margin: 5px 0px;
  box-shadow: 0px 0px 10px #ccc;
  border-radius: 10px;
}

.messageCard.messageSelf {
  align-self:flex-end;
  background: #f1eff5;
}

.flashMessage {
  position:fixed;
  top:75px;
  right: -500px;
  height: 150px;
  width:300px;
  background-color: white;
  border:solid 1px #CCC;
  z-index:5000;
  transition: all 0.5s cubic-bezier(.25,.8,.25,1);
  opacity: 0
}

.notificationItem {
  width:400px;
  padding:20px 25px;
  border-bottom: 1px solid #EEE;
}

.notificationTitle {
  font-size: 14px;
  font-weight: 600;
  color:#e12359;
}

.notificationDate {
  font-style: italic;
  color:#999;
}

.notificationMessage {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

.notificationCreatedBy {
  font-size: 14px;
  font-weight: 500;
}

.notificationAction {
  font-size: 12px;
  font-weight: 500;
  color: #AAA;
  padding-top: 10px;
  cursor:pointer;
  text-align: right;
}

.notificationAction:hover {
  color: #E12359;

}


/* toggle switches */
/*
input[type=checkbox]{
  height: 0;
  width: 0;
  visibility: hidden;
}

label {
  cursor: pointer;
  text-indent: -9999px;
  width: 200px;
  height: 100px;
  background: grey;
  display: block;
  border-radius: 100px;
  position: relative;
}

label:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 90px;
  height: 90px;
  background: #fff;
  border-radius: 90px;
  transition: 0.3s;
}

input:checked + label {
  background: #bada55;
}

input:checked + label:after {
  left: calc(100% - 5px);
  transform: translateX(-100%);
}

label:active:after {
  width: 130px;
}

// centering
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
*/

.attachment img {
  width:300px;
  height:auto;
}

.row.buttonRow {
  cursor: pointer;
  padding-top:5px;
  padding-bottom:15px;

}

.row.buttonRow:hover {
  background: #FAFAFA;
}


.progressContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
  margin: 30px 0px 50px 0px;
}

.progressBar {
  width: 90%;
  height:1px;
  background:#CCC;
  position: absolute;
  top: 23px;
  z-index: 1;
}

.progressStep {
  cursor: pointer;
  z-index:1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.progressBubble {
  width:48px;
  height:48px;
  background: #CCC;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
}


.progressBubble.progressSelected {
  width:48px;
  height:48px;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  background: #E12359;
  font-weight: 600;
  color: #FFF;
}

.progressText {
  color: #666;
  text-align: center;
}

.progressText.progressSelected {
  color: #666;
  font-weight: 600;;
  text-align: center;
}

.extra {
    background: #FFF0 !important;
    color: #FFF0 !important;
    box-shadow: 0px 0px #FFF0 !important;
    border: none !important;
    cursor:pointer;
}

.extra:hover {
  background: #FFF !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;
  color: #666 !important;
  cursor:pointer;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 90%;
  color: #205c85;
  background-color: #EEE;
  padding: 3px;
}

.panelFieldText {
  font-size:12px;
  padding: 20px 5px 5px 5px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  width: 100%;
  user-select: text;
}

.panelFieldTitle {
  margin-bottom: 5px;
}

.sidebarmenu {
  font-weight:500;
  border-radius:2px;
  font-size: 14px;
  cursor: pointer;
  color: rgb(85, 63, 81);
}

.sidebarmenu:hover {
  color:#e12359;
}

.docNav {
  padding: 10px;
  color:#666;
}

.docNavGroup {
  font-weight: 700;
}

.docNavGroup:hover {
  font-weight: 700;
  color: #E12359;
  cursor: pointer;
}

.docNavItem {
  font-weight: 500;
  padding-left: 10px;

}

.docNavItem:hover {
  font-weight: 500;
  padding-left: 10px;
  color: #E12359;
  cursor: pointer;

}

.docNavItem.selected {
  color: #E12359;
  font-size: 700;
}

.childItemBadge {
  padding: 3px 9px;
  max-width: 150px;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 100%;
  text-align: center;
  font-size: xx-small;
  color: rgb(74, 74, 74);
  border-radius:7px;
  box-shadow:-2px 0px 5px -1px #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: -2px;
  position: relative;
  right: -3px;
  background:rgb(220, 220, 220);
  margin-left: 20px;
}




.storageHeaderTags {
  width:15px;
  background:#666;
  height:10px;
  margin-right:6px;
  border-radius:2px;
}

.storageHeaderTagsNew {
  width:15px;
  background:#666;
  height:10px;
  margin-right:6px;
  border-radius:2px;
  font-size: 7px;
  border: 1px solid #333;
  background: #FFF;
  text-align: center;
}

.storageHeaderTagList {
  padding: 5px 9px;
  display: flex;
  flex-direction: row-reverse;
  background: white;
  margin: -6px;
/*  height: 15px; */
  margin-bottom: 2px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: 1px #CCC solid;
}


.gantt-row-height {
  height: 4em !important;
  position: relative;
  background: #FAFAFA66;
  border-bottom: 1px solid #DDD;
}

.gridster-item {
  border-radius: 5px;
  background-color: #FFF;
  border-radius: solid 1px #DDD;
}

.gridsterPlaceholder {
    background-color: #EEE;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-color: #c1c1c1;
    border-style: dashed;
    color: #666;
    font-size: 16px;
    font-weight: 600;
}


.handsontable .htCheckboxRendererInput {
    margin: 0 5px 0 0;
    vertical-align: middle;
    height: 1em;
    margin-right: 10px;
    width: unset;
}

.input-group {
  padding-left: 25px;
  position: relative;
  width: 100%;
  display: table;
  border-collapse: separate;
}

.standardTable {
  width:100%;

}

.standardTableHead {
  background:#EEE;
  font-weight:800;

}

.standardTableHeadCell {
  padding: 8px
}

.standardTableRow {

}

.standardTableCell {
  padding: 8px
}

.modal {
  top: 0px;
}

.modal-backdrop {
  top: 0px;
}

.simpleListItem {
  display:inline-block;
  height:auto;
  width:100%;
  text-align: left; 
  padding: 10px; 
  border: 1px solid #DDD;
  margin-bottom: 20px;
  cursor: pointer;
}

.simpleListItem:hover {
  background-color: #f1eff5;
}

.simplerListItem {
  padding: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.simplerListItem:hover { 
  background-color: #f1eff5;
}


                .rotate0, .rotate1, .rotate2, .rotate3 {
                    transform-origin: 325px 325px; /* Center of the second rectangle */
                    animation: rotate 2s linear infinite;
                }
            
                .rotate0 {
                    animation-duration: 1.5s;
                }
                
                .rotate1 {
                    animation-duration: 2;
                }
            
                .rotate2 {
                    animation-duration: 0.8s;
                }
            
                .rotate3 {
                    animation-duration: 1s;
                }
            
                @keyframes rotate {
                    from {
                        transform: rotate(0deg);
                    }
                    to {
                        transform: rotate(360deg);
                    }
                }
                
              
/* Add this to styles.css */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  scale: 0.6;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #e12359;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.datetimepicker .switch {
  width: 100%;
  display: table-cell;
  scale: 1;
}


.colorpickerdiv {
  border-radius:0px; 
  border: 1px solid #333;
  width:75px; 
  height:15px;
}

.CodeMirror {
  z-index:999999;
}

.CodeMirror-hints.default {
  z-index:9999999;
}

.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border: 1px solid #DDD;
  border-radius: 3px;
  background: #f9f9f9;
  font-family: inherit;
  font-size: inherit;
  margin: 5px;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
  height:auto !important;
}


.handsontable .htColumnHeader .colHeader .columnMenuButton {
  position: relative;
  right: 10px; /* Adjust this value to your needs */
  z-index: 1;
  background: #fff; /* Optional: To ensure the button stands out */
}

.handsontable .htColumnHeader .colHeader {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px; /* Adjust this value as needed */
}

.handsontable .htColumnHeader .colHeader {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px; /* Adjust this value as needed */
}

.handsontable .htColumnHeader .colHeader:hover::after {
  content: attr(data-original-title);
  position: absolute;
  white-space: normal;
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  z-index: 10;
  top: 100%;
  left: 0;
  transform: translateY(5px);
}

.colHeader.columnSorting.sortAction {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

trix-editor::-webkit-scrollbar, .organy-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

trix-editor::-webkit-scrollbar-thumb, .organy-scrollbar::-webkit-scrollbar-thumb {
  background: #2f2a3b;
  border-radius: 10px;
  border: 2px solid #FFF;
}

trix-editor::-webkit-scrollbar-track, .organy-scrollbar::-webkit-scrollbar-track {
  background: #FAFAFA;
}

.deleteFieldValue {
  margin:5px;
  cursor:pointer;
}

.deleteFieldValue:hover {
  color: #E12359;
}

.profilePicModal {
  display: block;
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1050;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profilePicModal-content {
  text-align: center;
}

.profile-pic-cropper-modal {
  position: fixed; /* Make it fixed to the viewport */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Shift the element to center */
  z-index: 1000; /* Ensure it appears above other content */
  background-color: white; /* Set a background color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  border-radius: 8px; /* Rounded corners for aesthetics */
  padding: 20px; /* Add padding inside the modal */
  max-width: 50%; /* Ensure it doesn't exceed the viewport width */
  max-height: 50%; /* Ensure it doesn't exceed the viewport height */
  overflow: auto; /* Enable scrolling if the content overflows */
}

.modal-overlay {
  position: fixed; /* Covers the entire screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
  z-index: 999; /* Just below the modal */
}

select optgroup {
  color: #E12359;
  background: #EFEFEF;
  padding:5px;
}

select optgroup option {
  color: #333;
  background: #FFF;
  padding:2px;
}

.highlight {
  background-color: yellow;
  cursor: pointer;
  border-radius: 3px;
  padding: 2px;
}

.comment-highlight {
  background-color: rgba(255, 200, 0, 0.3);
  border-bottom: 1px dashed orange;
}


.comment-highlight.active-comment {
  background-color: rgba(255, 150, 0, 0.5);
}

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
  background: #EFEFEF;
  padding: 10px;
  border: 1px #CCC solid;
  margin: 10px;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
.ProseMirror [draggable][contenteditable=false] { user-select: text }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

/* Protect against generic img rules */

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}


.ProseMirror-textblock-dropdown {
  min-width: 3em;
}

.ProseMirror-menu {
  margin: 0 -4px;
  line-height: 1;
}

.ProseMirror-tooltip .ProseMirror-menu {
  width: -webkit-fit-content;
  width: fit-content;
  white-space: pre;
}

.ProseMirror-menuitem {
  margin-right: 3px;
  display: inline-block;
}

.ProseMirror-menuseparator {
  border-right: 1px solid #ddd;
  margin-right: 3px;
}

.ProseMirror-menu-dropdown, .ProseMirror-menu-dropdown-menu {
  font-size: 90%;
  white-space: nowrap;
}

.ProseMirror-menu-dropdown {
  vertical-align: 1px;
  cursor: pointer;
  position: relative;
  padding-right: 15px;
}

.ProseMirror-menu-dropdown-wrap {
  padding: 1px 0 1px 4px;
  display: inline-block;
  position: relative;
}

.ProseMirror-menu-dropdown:after {
  content: "";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .6;
  position: absolute;
  right: 4px;
  top: calc(50% - 2px);
}

.ProseMirror-menu-dropdown-menu, .ProseMirror-menu-submenu {
  position: absolute;
  background: white;
  color: #666;
  border: 1px solid #aaa;
  padding: 2px;
}

.ProseMirror-menu-dropdown-menu {
  z-index: 15;
  min-width: 6em;
}

.ProseMirror-menu-dropdown-item {
  cursor: pointer;
  padding: 2px 8px 2px 4px;
}

.ProseMirror-menu-dropdown-item:hover {
  background: #f2f2f2;
}

.ProseMirror-menu-submenu-wrap {
  position: relative;
  margin-right: -4px;
}

.ProseMirror-menu-submenu-label:after {
  content: "";
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid currentColor;
  opacity: .6;
  position: absolute;
  right: 4px;
  top: calc(50% - 4px);
}

.ProseMirror-menu-submenu {
  display: none;
  min-width: 4em;
  left: 100%;
  top: -3px;
}

.ProseMirror-menu-active {
  background: #eee;
  border-radius: 4px;
}

.ProseMirror-menu-disabled {
  opacity: .3;
}

.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu, .ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
  display: block;
}

.ProseMirror-menubar {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  position: relative;
  min-height: 1em;
  color: #666;
  padding: 5px 5px;
  top: 0; left: 0; right: 0;
  border-bottom: 1px solid silver;
  background: white;
  z-index: 10;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow: visible;
  min-height: unset !important;
}

.ProseMirror-icon {
  display: inline-block;
  line-height: .8;
  vertical-align: -2px; /* Compensate for padding */
  padding: 2px 8px;
  cursor: pointer;
}

.ProseMirror-menu-disabled.ProseMirror-icon {
  cursor: default;
}

.ProseMirror-icon svg {
  fill: currentColor;
  height: 1em;
}

.ProseMirror-icon span {
  vertical-align: text-top;
}

li > p {
  margin-bottom: 0px
}

.pm-editor-container ul,
.pm-editor-container ol {
  margin-top: 0.25em;   /* tighten up */
  margin-bottom: 0.25em;
  padding-left: 1.5em;  /* control indent */
}

.pm-editor-container li {
  margin: 0.1em 0;      /* less vertical space between bullets */
}

.compact-datepicker {
  font-size: 14px;
  padding: 5px;
  border-radius: 4px;
}

.compact-date-dropdown {
  min-width: 250px;
  border-radius: 5px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  padding: 10px;
}

.input-group-addon {
  background: #f0f0f0;
  border: 1px solid #ccc;
  cursor: pointer;
}

.datetimepicker {
  width: 250px;
  font-size: 12px;
}

.datetimepicker .table td {
  padding:0rem;
}

.datetimepicker .left {
  border: 1px solid #CCC;
  padding: 0px 10px;
  background-color: #4a4455;
}

.datetimepicker .right {
  border: 1px solid #CCC;
  padding: 0px 10px;
  background-color: #4a4455;
}

.datetimepicker .switch {
  border: 1px solid #CCC;
  background: #FAFAFA;
}

.datetimepicker .table td, .datetimepicker .table th {
  border: 0;
  border-radius: 4px;
  text-align: center;
  padding: 8.2px;
}

.annotationComment {
  font-weight:700;
}

.annotationSourceText {
  background-color: #EFEFEF;
  padding: 5px;
}

.grid-stack-item-content {
  box-shadow: 0px 0px 15px #0002;
}

.map-uploader {
  border: 2px dashed #bbb; border-radius: 8px; padding: 2rem;
  text-align: center; cursor: pointer;
  transition: border-color .2s;
}
.map-uploader.dragging { border-color: #4a90e2; }
.progress { position: relative; height: 8px; background: #eee; border-radius: 4px; overflow: hidden; margin-top: 1rem; }
.progress-bar { position: absolute; top:0; left:0; bottom:0; width:0; background:#4a90e2; }
.error { color: #d33; margin-top: .5rem; }

/* Wrapper takes full available area and stacks header + scrollable body */
.map-table-wrapper {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  padding: 15px;
  background: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

/* Header row: contains only the close button, no scroll */
.map-table-header {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* Close button sized to its content */
.map-table-close {
  padding: 4px 8px;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

/* Scroll container for the table body */
.table-scroll {
  flex: 1 1 auto;     /* fill remaining height */
  overflow-y: auto;
}

/* Full-width table with collapsed borders */
.map-table {
  border-collapse: separate;   /* don’t share borders */
  border-spacing: 0;           /* keep cells adjacent */
}

/* Sticky headers */
.map-table th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;                           /* sit above the tbody rows */
  border: 1px solid #ddd;               /* full border */
  border-bottom: 1px solid #999 !important;        /* slightly darker bottom edge */
  box-sizing: border-box;
  background: white;
}

/* Body cells match header padding & border */
.map-table td {
  padding: 4px 8px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  border-top: none;     /* avoid overlapping the header’s bottom border */
}

/* Zebra stripes for readability */
.map-table tbody tr:nth-child(even) {
  background: #f7f7f7;
}


/* Root should fill whatever the card gives it */
.echart-root { width: 100%; height: 100%; box-sizing: border-box; position: relative; }

/* ECharts’ inner wrapper should ALSO fill the root */
.echart-root > div:first-child { width: 100% !important; height: 100% !important; }


/* Ternary: keep a square area; width 100%, height comes from aspect-ratio */
.echart-root.is-square { aspect-ratio: 1 / 1; height: auto; } 


.handsontable .ht_clone_left td:last-child {
  border-right: 2px solid #E12359 !important;
}


.handsontable .ht_clone_top_left_corner .ht__highlight {
  border-right: 2px solid #E12359 !important;
}

.organy-ai-response h1 {
    font-size: 1.15rem;
}
.organy-ai-response h2 {
    font-size: 1rem;
}