/*button*/
span.button{
    width: 40px;
    height: 40px;
    display: inline-block;
    overflow: hidden;
    font-size: 40px;
    text-align: center;
    border-left: 1px solid white;
    color: white;
    cursor: pointer;
    box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
}

span.button[f4m_show_if_no_edit="true"], span[f4m_show_if_no_edit="true"], img[f4m_show_if_no_edit="true"], div[f4m_show_if_no_edit="true"]{
    display: none;
}

span.button:hover{
    color: #000000 !important;
    opacity: 0.4;
}

span.button > i {
  position: relative;
  top: -2px;
  left: 2px;
  font-size: 32px;
}

@media only screen and (max-width: 1024px) {
        span.button:hover{
                color: white !important;
                opacity: 1 !important;
        } 
}
/**/
img[src="pipe"]{
  position: relative;
  width: 1px;
  height: 40px;
  border-left: 1px solid white;
  vertical-align: middle;
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gwGEwQi2K87PQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=')
}

img[src="spacer"]{
  position: relative;
  width: 1px;
  height: 34px;
  border-left: 1px dashed rgba(255,255,255,0.5);
  vertical-align: middle;
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gwGEwQi2K87PQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAC0lEQVQI12NgAAIAAAUAAeImBZsAAAAASUVORK5CYII=')
}
img[src="pipe"].add_rt{
    margin-right: 3px;
    display: inline-block;
}
img[src="spacer"].add_rt{
    margin-right: 3px;
    display: inline-block;
}

/*type of button*/
span.button.dot i {
  top: -2px;
  left: 0px;
  font-size: 33px !important;
}
span.button.save i {
  top: 0px;
  left: 0px;
  font-size: 35px !important;
}
span.button.close i {
  top: 0px;
  left: 1px;
  font-size: 40px !important;
}
span.button.delete i {
  top: 0px;
  left: 1px;
  font-size: 40px !important;
}
span.button.lock i {
  top: -3px;
  left: 1px;
}


/*to relation*/
div.sub_menu div.btn span.button{
	color: #019abc;
}
div.sub_menu div.btn span.button i{
  top: -3px;
  left: 3px;
  font-size: 36px !important;
}
div.sub_menu img[src="spacer"]{
  border-left: 1px dashed rgba(1,154,188,0.5);
}
@media only screen and (max-width: 1024px) {
        div.sub_menu div.btn span.button:hover{
                color: #019abc !important;
                opacity: 1 !important;
        } 
}

div.sub_menu div.btn span.button.sqr_plus i{
  left: 0px;
}
/**/
div.sub_title div.btn span.button{
	color: #019abc;
}
div.sub_title div.btn span.button {
    width: 24px;
    height: 24px;
    display: inline-block;
    overflow: hidden;
    font-size: 24px;
    text-align: center;
    border-left: 1px solid rgba(0,0,0,0.6);
    border-top: 1px solid rgba(0,0,0,0.6);
}
div.sub_title div.btn span.button > i {
  position: relative;
  top: -7px;
  left: 0px;
  font-size: 18px;
}
div.sub_title div.btn span.button.sqr_plus i{
  left: 0px;
}

/* */
span.lbl_fx{
  cursor: pointer;
  color: #61c2da;
}

/* EXTRA FONTAWESOME*/

.fa-rotate-45 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5)";
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.fa-rotate-135 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5)";
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}
.fa-rotate-225 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2.5)";
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}   
.fa-rotate-315 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3.5)";
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}
:root .fa-rotate-45,:root .fa-rotate-135,:root .fa-rotate-225,:root .fa-rotate-315 {
  -webkit-filter: none;
          filter: none;
}