/* STANDARD CLASSES */

/*Maybe like this for mobile */
.mobile-text-a { font-size: 32px; } 
.mobile-text-b { font-size: 24px; } 
.mobile-text-c { font-size: 17px; } 



/* END STANDARD CLASSES */
.templatephotoloading { position: fixed; width: 100%; height: 100%; text-align: center; top: 0; left: 0; z-index: 20000; background: rgba(0,0,0,.8); } 
.templatephotoloadinginner { position: fixed; left: 50%; margin-left: -24px; color: #FFFFFF; text-align: center; top: 50%;margin-top: -24px;  } 

.buttontip {
	background:#000000;
	border: solid 1px #000000;
	border-radius: 2px;
    padding:16px;
	display: none;
	text-shadow: 1px 1px 1px #0b9d59; 
	text-align: left;
	font-size: 13px !important;
	font-family : 'Roboto',Arial;
	color: #FFFFFF; 
	box-shadow: none; 
	text-shadow: none;
}

.loadingspinnertemplate {
  height: 48px;
  width: 48px;
  margin: auto;
  position: relative;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(255, 255, 255, .15);
  border-right: 6px solid rgba(255, 255, 255, .15);
  border-bottom: 6px solid rgba(255, 255, 255, .15);
  border-top: 6px solid rgba(255, 255, 255, .8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.editorcontainers { width: 700px; position: fixed; left: 50%; margin-left: -350px;  bottom: 0; font-family: 'Arial' !important; font-size: 13px !important; z-index: 20;  } 
.editorcontainers .inside { background: #272727; color: #c4c4c4; border: solid 1px #040404; box-shadow: 0px 0px 8px rgba(0,0,0,.6); padding: 8px 8px 16px 8px; } 
.editorcontainers .pc, .editorcontainers div, .editorcontainers label { font-family: 'Arial'; font-size: 13px; } 
.editorcontainers input, .editorcontainers select, .editorcontainers textarea { padding: 4px; font-size: 13px; font-family: 'Arial'; } 
.editorcontainers a { color: #ffffff; } 
.editorcontainers a:hover { text-decoration: underline; } 
.editorcontainers .the-icons, .editorcontainers .pc .the-icons, .editoroption div .the-icons { cursor: pointer; color: #eeeeee; text-shadow: none; } 

.optionscontainer { display: flex;  flex-flow: row  wrap; }
.optionscontainer .editoroption { width: 25%; padding: 8px 8px; box-sizing: border-box; } 
.optionscontainer .editoroption .name { font-weight: bold; margin-bottom: 8px; } 
.sliderrow { display: flex; } 
.sliderrow .slide { width: 90%; } 
.sliderrow .eye { width: 10%; text-align: right; } 

.editoroptiontoggle a, .editoroptiontoggle span { font-size: 15px; font-weight: bold; color: #f9f9f9; } 
.editoroptionlabel { margin-bottom: 12px; cursor: pointer;  font-size: 15px; font-weight: bold; color: #f9f9f9;} 
.editoroptionlabel:hover { text-decoration: underline; }
.buttonoption { margin-bottom: 16px; } 

.selectpage { max-width: 300px; } 
@media (max-width: 1024px) {
	.editorcontainers { margin-left: 0px; left: 0; width: 100%;} 
	.optionscontainer .editoroption { width: 50%; }
}

.rov .name .the-icons { font-size: 12px; color: #545454; } 


a.savetemplate { 
	background: #3a7fc5; 
	color: #FFFFFF; 
	padding: 8px; 
	border-radius: 4px; 
	margin: auto; 
	cursor: pointer;
	text-shadow: none; 
	opacity: 1; 
	transition: box-shadow 0.2s ease-out; 
	text-shadow: 1px 1px 1px #2667a7; 
	display: inline-block; 
	box-sizing:border-box; 
	
	} 
a.savetemplate:hover { background: #0261d6; color: #FFFFFF; text-decoration: none; } 

.donebutton { 

	background: #3a7fc5; 
	color: #FFFFFF; 
	padding: 6px; 
	border-radius: 4px; 
	margin: auto; 
	cursor: pointer;
	text-shadow: none; 
	opacity: 1; 
	transition: box-shadow 0.2s ease-out; 
	text-shadow: 1px 1px 1px #2667a7; 
	display: inline-block; 
	box-sizing:border-box; 


} 
.savetemplate .the-icons { color: #ffffff; text-shadow: none; } 

.donebutton:hover { background: #0261d6; color: #FFFFFF; text-decoration: none; } 

.bbmoreinfo { font-size: 12px;  font-style: italic; cursor: pointer; opacity: .8; } 
.brow { margin: 2px 0px 12px 0px; padding: 4px;  } 
.cursor { cursor: pointer; } 
.bbtitle { font-size: 17px; font-weight: bold; letter-spacing: -1px;  } 


.editing { border: dashed 4px #ffff00; box-shadow: 0px 0px 8px rgba(0,0,0,.6); box-sizing: border-box; } 

.edithover { position: absolute; width: 100%; height: 100%; text-align: center; top: 0; left: 0; z-index: 2; background: rgba(0,0,0,.5);  box-shadow: 0px 0px 8px rgba(0,0,0,.6);
    -webkit-box-shadow:inset 0px 0px 0px 4px #ff0;
    -moz-box-shadow:inset 0px 0px 0px 4px #ff0;
    box-shadow:inset 0px 0px 0px 4px #ff0;
	text-align: center;
} 
.edithoverinner {  width: 100%; box-sizing: border-box; padding: 16px; position: absolute; color: #FFFFFF; text-align: center; bottom: 8px; left: 0; font-family: 'Arial'; font-size: 13px; text-align: center;} 

.contentrow {  } 
.contentrowhover {overflow: hidden; position: absolute; width: 99%;  bottom: -70px; left: 0; z-index: 3; border: solid 1px #3a7fc5; border-top: solid 4px #3a7fc5; text-align: center; background: #d7e6f6;  } 
.contentrowhoverinner { padding: 16px; position: relative; color: #FFFFFF;  left: 0; font-family: 'Arial'; font-size: 13px; overflow: hidden; } 

.edithoverbutton { background: #3a7fc5; color: #FFFFFF; padding: 8px; border-radius: 4px; margin: 1px 2px; display: inline-block; cursor: pointer; text-shadow: none; opacity: 1; 
	transition: box-shadow 0.2s ease-out; 
	text-shadow: 1px 1px 1px #2667a7; 

} 
.edithoverbutton:hover { background: #569be1; 	box-shadow: 0px 0px 8px rgba(0,0,0,.6);  }

#templatehtmledit {  width: 1024px; position: fixed; left: 50%; margin-left: -512px;  bottom: 0; font-family: 'Arial' !important; font-size: 13px !important; z-index: 20; padding: 24px; background: #efefef; border: solid 1px #d4d4d4; } 

.editorcolrow { display: flex; margin-bottom: 8px; } 
.editorcol { box-sizing: border-box; width: 50%;padding: 4px; margin-right: 8px; } 
.editorcol .label  { margin-bottom: 4px; font-weight: bold; } 


.et { display: block; } /* To make text rows hover actions show when hovering over empty space around text */


.textshadowoptions div .the-icons { color: #EEEEEE; text-shadow: none; } 
.photo-text-overlay-textshadowoptions div .the-icons { color: #EEEEEE; text-shadow: none; } 


.templateselectrow { padding: 8px; border-bottom: solid 1px #333333; } 
.templateselectrow:hover { background: #121212; } 

#sortsl { list-style: none; margin: 0; padding: 0; } 

#uploadprogress {  background: #3a7fc5; height: 16px; width: 0px; transition: width .5s } 

.templateselectinputs { max-width: 200px; width: 100%; } 

#designelements { font-size: 13px; font-family: Arial; color: #e9e9e9; z-index: 10; } 
.dropherehighlight { background: #00800; } 
.drophere { height: 50px; background: #FFFF00; display: block; text-align: center; width: 100%; margin: 32px 0px;  } 

.designelementscontainer {  margin: 0; padding: 0;  width: 220px; background: #000000; height: 100VH;  position: fixed; top: 0; left: 0; overflow-y: scroll; } 
.designelements {  width: 100%; display: block; padding: 8px 16px; box-sizing: border-box;}

.designelement, .quickdesignelement { display: inline-block; background: #242424; border: solid 1px #454545; box-sizing: border-box; padding: 12px; margin: 2px; font-size: 13px;  -webkit-transition: background-color .2s;    transition: background-color .2s; } 
.designelements .designelement  {  width: 100%; } 
body .designelement, body .quickdesignelement { width: 160px; } 
.designelement:hover, .quickdesignelement:hover {  background: #444444; border: solid 1px #646464;  cursor: move ;} 



.designelementclose { display: inline-block; background: #000000; border: solid 1px #454545; box-sizing: border-box; padding: 12px; margin: 2px;   } 
.designelementclose {  width: 100%; } 
.designelementclose .the-icons { color: #ffffff; text-shadow: none; } 
.designelementclose:hover {  background: #242424; border: solid 1px #646464;  cursor: pointer; } 

.designelement .elementname { padding-bottom: 8px; text-align: center; color: #e4e4e4; } 
.designelement .elementicon { padding-bottom: 8px; text-align: center;  cursor: move ;} 
.designelement .elementicon .the-icons:hover  {cursor: move ;} 
.designelement .elementicon .the-icons { font-size: 21px; color: #545454; opacity: 1; text-shadow: none; cursor: default;  } 



.designelementsection {  width: 100%; display: inline-block; background: #242424; border: solid 1px #454545; box-sizing: border-box; padding: 12px; margin: 2px; cursor: pointer;  -webkit-transition: background-color .2s;    transition: background-color .2s; } 
.designelementsection .elementname { padding-bottom: 8px; text-align: center; color: #e4e4e4; } 
.designelementsection .elementicon { padding-bottom: 8px; text-align: center;  cursor: pointer ;} 
.designelementsection .elementicon .the-icons:hover  {cursor: pointer ;} 
.designelementsection .elementicon .the-icons { font-size: 21px; color: #545454; opacity: 1; text-shadow: none; cursor: default;  } 
.designelementsection:hover {  width: 100%; display: inline-block; background: #444444; border: solid 1px #747474; box-sizing: border-box; padding: 12px; margin: 2px; cursor: pointer;  } 


.designelementtop {   position: -webkit-sticky; position: sticky;top: 0;  background: #000000; }


.elementdescription { box-sizing: border-box; padding: 16px; margin: 2px; } 

#slidervaluecontainer { position: fixed; bottom: 0; width: 300px; left: 50%; margin-left: -150px; box-sizing: border-box; padding: 8x; background: #67A1A8; text-align: center; display: none; z-index: 2000; color: #FFFFFF; } 
#templates { max-height: 50VH; overflow-y: scroll; } 
.slide {   } 
.ui-slider {
    height: 80px;
}
.rov { float: left; margin-right: 16px; text-align: center;} 
.rov .name { margin-bottom: 16px; text-align: center; } 
.ui-slider-vertical { margin: auto; }
.jscolor { width: 16px; text-align: center; padding: 2px; margin: auto;} 
.sliderinput { width: 30px; } 
.eye { margin-top: 8px; } 

.redactor-editor a { color: #3485ff; }