#main-toolbar #activity-button {
  background-image: url(../activity/activity-icon.svg);
}

#main-toolbar #edit-undo {
  background-image: url(../icons/undo.svg);
}

#main-toolbar #edit-redo {
  background-image: url(../icons/redo.svg);
}

#main-toolbar #edit-copy {
  background-image: url(../icons/copy.svg);
}

#main-toolbar #edit-paste {
  background-image: url(../icons/paste.svg);
}

#main-toolbar #format-text {
  background-image: url(../icons/format-text.svg);
}

#main-toolbar #paragraph {
  background-image: url(../icons/paragraph.svg);
}

#main-toolbar #list {
  background-image: url(../icons/list-none.svg);
}

#main-toolbar #font-button {
  background-image: url(../icons/font-text.svg);
}

#main-toolbar #resize-inc{
  background-image: url(../icons/resize+.svg);
}

#main-toolbar #resize-dec{
  background-image: url(../icons/resize-.svg);
}

#main-toolbar #insert-picture {
  background-image: url(../icons/insert-picture.svg);
}

#main-toolbar #export {
  background-image: url(../icons/file-export.svg);
}

#main-toolbar #network-button {
  background-image: url(../lib/sugar-web/graphics/icons/actions/zoom-home.svg);
}

#private-button {
  background-image: url(../lib/sugar-web/graphics/icons/actions/zoom-home.svg);
  width: 47px;
  height: 47px;
  margin: 4px 2px;
  color: white;
  color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 5.5px;
}

#shared-button {
  background-image: url(../lib/sugar-web/graphics/icons/actions/zoom-neighborhood.svg);
  width: 47px;
  height: 47px;
  margin: 4px 2px;
  color: white;
  color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 5.5px;
}

#editor{
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
}

.palette-button {
  width: 47px;
  height: 47px;
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 0;
  border-radius: 5.5px;
  margin: 4px;
}

.palette-button-2 {
  width: 80px;
  height: 40px;
  margin-left: 25px;
  color: transparent;
  background-size: 59px;
  border: 0;
  border-radius: 5.5px;
  display: block;
}

.filter-item {
  color: white;
  font-size: 12pt;
}
.palette-button-notselected {
  background-color: transparent;
}

.colorpalette {
	z-index: 20;
}
.palette .colors {
  list-style-type: none;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 0;
}

.palette .colors button {
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: white;
  margin-left: 5.5px;
  margin-top: 5.5px;
}
.palette .colors tr:nth-last-child(1) button {
  margin-bottom: 5.5px;
}

.ql-font-arial {
  font-family: 'Arial';
}

.ql-font-Verdana {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.ql-font-comic {
  font-family: 'Comic Sans MS';
}


 #edit-undo,#edit-redo, #edit-copy, #edit-paste, #format-text , #paragraph ,#list,#font-button,#resize-inc,#resize-dec,#insert-picture,#insert-table,#export,#color-button-1,#color-button-2{
  display: none;
}


@media only screen and (min-width: 330px) {
  #color-button-1 {
    display: inline-block;
  }
}


@media only screen and (min-width: 385px) {
  #color-button-2 {
    display: inline-block;
  }
}

@media only screen and (min-width: 440px) {
  #format-text {
    display: inline-block;
  }
}

@media only screen and (min-width: 510px) {
  #paragraph {
    display: inline-block;
  }
}

@media only screen and (min-width: 570px) {
  #list {
    display: inline-block;
  }
}

@media only screen and (min-width: 715px) {
  #resize-inc {
    display: inline-block;
  }
  #font-button {
    display: inline-block;
  }
  #resize-dec {
    display: inline-block;
  }
}

@media only screen and (min-width: 800px) {
  #insert-picture {
    display: inline-block;
  }
}

@media only screen and (min-width: 880px) {
  #edit-undo {
    display: inline-block;
  }
  #edit-redo {
    display: inline-block;
  }
}

@media only screen and (min-width: 980px) {
  #edit-copy {
    display: inline-block;
  }
  #edit-paste {
    display: inline-block;
  }
}

@media only screen and (min-width: 1042px) {
  #export {
    display: inline-block;
  }
}