* {
  font-size: 10px;
  color: black;
}
#exp{
  background-image: url('Capture3.PNG'),url('Capture4.PNG');
    background-repeat: no-repeat,no-repeat;
     background-size: 250px 95px,300px 120px;
     background-position: left,right;
     padding-left: 10px;
     margin-top: 10px;

}

ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

button {
  border-radius: 15px;
}

.collab-button{
  float: right;
}
#logo{

height:100%;
width:100%;
}



.project-box{

}
.project-comb:nth-child(4n){

  color: black;
  background-color: #aed581;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(2n){

  color: black;
  background-color: #a67de0;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(1){

  color: black;
  background-color: #85ade5;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(3n){

  color: black;
  background-color: #aed581;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(5n){

  color: black;
  background-color: #15af97;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(6n){

  color: black;
  background-color: #6bb5b4;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(7n){

  color: black;
  background-color: #85ade5;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(8n){

  color: black;
  background-color: #15af97;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-comb:nth-child(9n){

  color: black;
  background-color:#a67de0;
      margin: 40px;
  float:left;
  border-radius: 5px;
  justify-content: center;
  height: 250px;
text-align: center;
      width: 400px;
}
.project-box:hover{
  color: white;
}
.delete-project{

position: sticky;

}
#new_pro{
  border: 5px solid #546e7a;
color: #546e7a;
border-radius: 5px;
padding: 1.8em;
margin-top: 2.8em;
margin-bottom: 3.2em;
width: 100%;
height: 100%;

  /* bring your own prefixes */

font-size: 1.25em;
transition: 0.2s all;
    display: block;
    justify-content: center;
}


.anchor-button {


  text-decoration: none;
  cursor: default;
  margin: 5px 5px 5px 5px;
  padding: 3px;
  border-radius: 10px;
}

.tag-elem{
  padding: 0;
  list-style-type: none;
  display: inline;
}

.tag-button{
  color: green;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

div #idea-div {
  display: flex;

}

div.comment-footer{
  margin-top: 40px;
}

.comment-elem{
  list-style-type:none;
  align-content: left;

  text-align: left;
  padding: 5px 5px 5px 10px;

  border-radius: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
  background: rgb(235,235,235);
}

.resolved{
  background: rgb(195,195,195);
  font-style: oblique;
  color: rgb(30,30,30);
}

textarea.idea-input{
  width: 90%;
  height: 4em;
  border-radius: 4px;
  resize: none;
}

button.resolve-comments{
  float: left;
}

button.delete-comment{
  float:center;
  margin-left: 20px;
}

#idea-field {
}
#delete-idea{
 float:left;
}


#comment-button{
  float: left;
}


#main-idea-div{
  margin-bottom: 10%;
}

.idea-container{
  margin-top: 10px;
  margin-bottom: 100px;
}

#main-idea-buttons{
  bottom: 0;
  margin-left: 10px;

  margin-bottom: 10px;
}

#new-idea-button{
}

#new-tag-button{
  align:left;
  margin-left: 1px;
  float:left;
}
#yours{
  float: left;
}
.gridcontainer {
  display: grid;
 grid-template-columns: repeat(5, auto);
  grid-gap: 10px;

}

#imgt{
  background-image: url('Capture.PNG');
    background-repeat: no-repeat;
}
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-content: vertical;
  padding-left: 20px;
}

.flex-item {
  height: 100%;
  min-height: 100%;
  margin-bottom: 10px;
  text-align: vertical;
  border-radius: 10px;
  padding-left: 20px;
}

.flex-item h3{
  font-size: 18px;
}
.new-tag-button{
  color: white;
  float:left;

}
.main-idea-buttons{
  color:white;
}
.grid {

  display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px,1fr));

flex-grow: column;
}
.main-idea-buttons{

    display: inline-block;


}
.table{
  display:table;

}
.row{
  display: table-row;


}
.cell{
  display:table-cell;
border: 2px solid black;
}
/*.idea-flex-container-0{

background: #a67de0;
height: auto;
float:left;
  min-height: 70vh !important;
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);
}

.idea-flex-container-1{

  height: auto;
    min-height: 30vh !important;
    position: sticky;
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);
  background: #85ade5;
}

.idea-flex-container-2{
  height: auto;

    min-height: 30vh !important;
margin-top:25em;
transform: translate(-30em,30em);//
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);
margin-left: -30em;
margin-right: 30em;
  background: #8b99e0;
}
.idea-flex-container-3{
  margin-left:-30em;
  margin-right:30em;
  border-bottom: 40px solid #6bb5b4;
  height: auto;
    border-bottom: 40px solid rgba(0, 0, 0, 0.25);
    min-height: 70vh !important;
      background: #15af97;
}

.idea-flex-container-4{
  height: auto;
    position: relative;
    min-height: 30vh !important;
      border-bottom: 40px solid rgba(0, 0, 0, 0.25);
margin-left: -30em;
margin-right:30em;
  background: #a67de0;
}

.idea-flex-container-5{
  height: auto;
    position: relative;
    min-height: 30vh !important;
      border-bottom: 40px solid rgba(0, 0, 0, 0.25);
  margin-left: 89em;
  margin-right:-90em;
  margin-top:-25em;
  background: #aed581;
}

.idea-flex-container-6{
margin-top:-51em;
margin-right: 20em;
border-bottom: 40px solid rgba(0, 0, 0, 0.25);
height: 50em;
  background: #85ade5;
}
.idea-flex-container-7{
width: 50em;
margin-top:2em;
margin-right: 30em;
margin-left:-60em;
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);
  background: #85ade5;
}

.idea-flex-container-8{
  background: #aed581;
  height:30em;
    border-bottom: 40px solid rgba(0, 0, 0, 0.25);
}

.idea-flex-container-9{

  background:#a67de0;
    border-bottom: 40px solid rgba(0, 0, 0, 0.25);
}*/
/*sssssssss*/
.idea-flex-container-0{
display: table-cell;
background: #a67de0;
height: auto;
width: 300px;
max-height: 50%;
max-width: 100%;
  min-height: 70vh !important;
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);
}

.idea-flex-container-1{
display: table-cell;
    min-height: 70vh !important;
    width: 300px;

    max-width: 100%;
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);
  background: #85ade5;

  height:auto;

}

.idea-flex-container-2{

  height:auto;
  width: 300px;

  max-width: 100%;
    min-height: 70vh !important;

display: table-cell;
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);

  background: #8b99e0;
}
.idea-flex-container-3{
width:300px;
  max-width: 100%;
  height: auto;
    border-bottom: 40px solid rgba(0, 0, 0, 0.25);
    min-height: 70vh !important;
      background: #15af97;
      display: table-cell;
}

.idea-flex-container-4{
  height: auto;
width:auto;
    min-height: 70vh !important;
      border-bottom: 40px solid rgba(0, 0, 0, 0.25);
width: 300px;
max-width: 100%;
  background: #a67de0;
  display: table-cell;
}

.idea-flex-container-5{
  height: auto;
position:relative;
    min-height: 70vh !important;
      border-bottom: 40px solid rgba(0, 0, 0, 0.25);
width: 300px;
max-width: 100%;
  background: #aed581;
  display: table-cell;
}

.idea-flex-container-6{
float:left;
border-bottom: 40px solid rgba(0, 0, 0, 0.25);
height: auto;
width: 300px;
max-width: 100%;
  position: relative;
  min-height: 70vh !important;
  background: #85ade5;
  display: table-cell;
}
.idea-flex-container-7{
  height: auto;
    position: relative;
    min-height: 70vh !important;
float:left;
width: 300px;
max-width: 100%;
  border-bottom: 40px solid rgba(0, 0, 0, 0.25);
  background: #85ade5;
  display: table-cell;
}

.idea-flex-container-8{
float:left;
  height: auto;
width: 300px;
max-width: 100%;
    position: relative;
    min-height: 70vh !important;
    background: #aed581;
    border-bottom: 40px solid rgba(0, 0, 0, 0.25);
    display: table-cell;
}

.idea-flex-container-9{
  height: auto;
  float:left;
    position: relative;
width: 300px;
max-width: 100%;
    min-height: 70vh !important;
  background:#a67de0;
    border-bottom: 40px solid rgba(0, 0, 0, 0.25);
    display: table-cell;
}
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="idea-flex-container-"] {
        width: 230px;
        min-height: 20vh;
    }
}
.material-icons{
  padding-left: 1px;
}

.navbar-default
{

    text-align: center;
    background-color: #eceff1;
}

#saved_tags_row {
  width: 100%;
  margin-top: -1.14em;
  margin-right: auto;
  margin-bottom: 1.04em;
  margin-left: auto;
  background-color: #eceff1;
  border-radius: 5px;
  padding: 1em 1em 1em 1em;
}
#bar{
width: 100%;
margin-top: -1.14em;
margin-right: auto;
margin-bottom: 1.04em;
margin-left: auto;
background-color: #eceff1;
border-radius: 5px;
padding: 1em 1em 1em 1em;
align-items: center;
display: block;
}
#canvas-listt{
  text-align: center;
}
#lbreak{
  display: block;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left: auto;
   margin-right: auto;
   border-style: inset;
   border-width: 1px;
}
/* FROM https://vuejs.org/v2/examples/modal.html */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
