body {
  margin: 0;
  user-drag: none;
  user-select: none;
  -moz-user-select: none;-webkit-user-drag: none;user-drag: none; user-select: none;
  -moz-user-select: none;-webkit-user-drag: none; -webkit-user-select: none;-ms-user-select: none;
   font-family: "Nunito,", sans-serif; /* font-family: "Work Sans", sans-serif;*/
}


input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}




::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

textarea {
		resize: none;
		padding: 3px 2px 1px 5px !important;
		text-align: left;
		/*font-family: "Playfair Display", serif;*/
  font-family: 'Nunito', sans-serif;
}

	#invitation-story-logo{
		background: transparent;
		padding: 1px;
		height: 50px;
		width: 100%;
		max-width:110px; 
		font-size: 24px;
    margin: -6px 1px 1px 5%;
    position: absolute;
	}
 
 

    
 
#gathering_ovelay {
  display: none;
  position: fixed;
  z-index: 150;

   left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%x;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}


#gathering-ovelay-message {
  position: relative;
  background-color: #fefefe;
    left: 25%;
  right: 0;
  top:  25%;
  bottom: 0;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
}


#gathering-spin {
  border: 16px solid #eaf4fb; 
  border-top: 16px solid #3498db; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*https://stackoverflow.com/questions/27766343/change-background-color-every-30s-fade-transition*/
@-webkit-keyframes newBackgroundHighlight {
  0% { background-color: #6bff3e; }
  50% { background-color: #a9ff87; }  
  100% { background-color: transparent; }
}


.new_text_line_highlight{
  animation: newBackgroundHighlight 1.5s linear forwards;
}

#design-header{
 display:block;
 top: -1px;
 width: 100%;
 height: 45px;
 background: #FFFFFF;/* linear-gradient(40deg, #D8B5FF, #92EFFD); /* PUEPLE TO LIGHT BLUE: #D8B5FF, #bd82ff, #92EFFD) ----  BABY BLUE: #A1C4FD, #C2E9FB --- LIGHT BLUE: #4E65FF, #92EFFD   --- LAVENDER BABY BLUE: #D8B5FF, #6FD6FF) */
 position: fixed;
 padding: 10px 0 1px 0;
 z-index: 70;
 -webkit-box-shadow: 0px 9px 15px -7px #dddddd;
 border-bottom: 2px solid #5973F7;
}


	#design_nav_bars{
		display: inline-block;
		position: relative;
		float: right;
		margin: 3px 40px 3px 2px;
  top: 16%;
	}
 


     /*  #theme_color_options_a, #theme_color_options_b {
    display: inline-block;
   }*/
/*
	#design_nav_bars{
		display: inline-block;
		position: relative;
		float: right;
		margin: 3px 40px 3px 2px;
  top: -100%;
	}
 */
/*
#design_nav_overlay{
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 1000;
   top: 0;
   right: 0;
   background-color:#FFFFFF; /*#ccffff; 32d7da
   overflow-x: hidden;
   transition: 0.3s;
   -khtml-opacity:.95; 
   -moz-opacity:.95; 
   -ms-filter:Óalpha(opacity=95)Ó;
   filter:alpha(opacity=95);
   filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.95);
   opacity:.95; 
}
*/
/*
#design_nav_menu{
  max-width: 80%;
  height: 100%;
  margin: 0 auto;
  padding-top: 100px;
  text-align: left;
  font-family: 'Questrial', sans-serif;
  font-size: 27px;
}
*/
/*
#design_nav_menu_closebtn{
  float: right;
  margin: 24px 21px 10px 1px;
  font-size: 14px;
  color: #FF69B4;
}

*/
#design_board{
  width: 100%;
  min-height: 630px;
  height: auto;
  margin: 5px auto 100px auto;
  top: 50px;
  background: transparent;
  position: absolute;
  scale: 100%;
}

#design-base-bar{
  background-color: #FFFFFF;
  position: absolute;
  width: 100%;
  height: 90px;
  bottom: -21px;
  /*border: 1px solid #cccccc;
  border-width: 1px 0 0 0; */
  border-top: 2px solid #5973F7;
}


#event-details-submit{
   background-color: transparent;
   position: relative;
   width: 15%;
   height: 40px;
   float: right;
   margin: 20px 2% 1px auto;
   display: inline-block;
   padding: 3px 0 0 0;
}

#design-save-box{
   background-color: transparent;
   position: relative;
   width: 15%;
   height: 40px;
   float: right;
   margin: 20px 2% 1px auto;
   display: inline-block;
   padding: 3px 0 0 0;
}

#new-text-wide{
   background-color: transparent;
   position: relative;
   width: 20%;
   height: 40px;
   float: right;
   margin: 20px 2% 1px auto;
   display: inline-block;
   padding: 3px 0 0 0;
}


.design_subsequent_options_button {
  background-color: #FFFFFF;/*background-color: #f0fbfe;*/
  border: 1px solid #eeeeee;
  color: #5973F7;
  padding:5px 15px;
  text-decoration: none;
  margin: 0 1px 1px 4px;
  height: 36px;
  cursor: pointer;
  border-radius: 30px;
  width: 85%;
  font-size: 94%;
  letter-spacing: 1px;
  font-family: 'Nunito', sans-serif;
 font-weight: 500;
 box-shadow: 0 5px 3px -2px #dddddd;
}

.bottom-bar-menus-wide {
   background-color: transparent;
   position: relative;
   width: 15%;
   height: 30px;
   float: left;
   margin: 5px 2% 1px auto;
   display: inline-block;
   padding: 3px 0 0 0;
}
/*
.bottom-bar-menus-wide {
  background-color: #FFFFFF;
  position: relative;
  min-width: 40px;
  width: 10%;
  min-height: 67px;
  float: left;
  left: 1%;
  margin-top: 10px;
}
*/
.backrounds_button_wide_button {
  background-color: #FFFFFF;/*background-color: #f0fbfe;*/
  border: 1px solid #eeeeee;
  color: #5973F7;
  padding:5px 15px;
  text-decoration: none;
  margin: 15px 1px 1px 30%;
  height: 36px;
  cursor: pointer;
  border-radius: 30px;
  width: 90%;
  font-size: 95%;
  position: relative;
  letter-spacing: 1px;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  box-shadow: 0 5px 3px -2px #dddddd;
  /*box-shadow: rgba(0,0,0,0.15) 0px 2px 3px, inset rgba(0,0,0,0.15) 0px -1px 2px;*/
}


.design_subsequent_options_button:hover, .backrounds_button_wide_button:hover {
 background-color: #5973F7;
 color: #FFFFFF;
}

.design_subsequent_options_button:active, .backrounds_button_wide_button:active {
 background-color: #000000;/*#69DEF9;*/
 color: #FFFFFF;
}

#design_subsequent_options_button {
 background: #5973F7;
 color: #FFFFFF;
 border: none;
 box-shadow: 0 5px 3px -2px #dddddd;
}


#design_subsequent_options_button:hover {
 background-color: #FFFFFF;
 color: #cccccc;
 border: 1px solid #cccccc;
}

#design_subsequent_options_buttonn:active {
 background-color: #000000;/*#69DEF9;*/
 color: #FFFFFF;
}



#backgrounds-bar{
  background-color: #FFFFFF;
  position: absolute;
  width: 99%;
  height: 135px;
  bottom: -60px;
  white-space: nowrap;
  overflow: hidden;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 5px 30px 1px 50px;
  display: none;  
}

::-webkit-scrollbar:horizontal{
  height: 12px;
  background-color: #cccccc;
}
::-webkit-scrollbar-thumb:horizontal{
        background: #999999;
        border-radius: 10px;
        
    }

.backgound-options {
  background-color: transparent;
  position: relative;
  width: 15%;
  height: 100px;
  display: inline-block;
  margin: 17px 1.5% 5px 0;
  border: 1px solid #555555;
  border-radius: 6px;
}

#close-backgrounds-wide {
 color: #999999; /*#ff0000;*/
 height: 10px;
 width: 30px;
 position:  absolute;
 top: 10%;
 right:10%;
 }

#close-backgrounds-wide:hover {
  color: #dddddd;
}

#close-backgrounds-wide:active {
  color: #000000;
}




#design-menu-wide{
  overflow: hidden;
  overflow-y: scroll;
  filter: blur(0.8px);
  -webkit-filter: blur(0.8px);
  filter: grayscale(100%);
  border: 1px solid #cccccc;
  pointer-events: none;
  display: none;
}

.remove_text_button {
 width: 27px;
 height: 27px;
 border-radius: 20px;
 overflow: hidden;
 float: right;
 margin: -1% 27px 10px 90%;
 clear: both;
 user-drag: none;
 -webkit-user-drag: none;
 border: 2px solid #E60000;
    -webkit-appearance: none;
 box-shadow: 0 5px 10px -2px #bbbbbb;
}

.remove_text_button:hover {
  filter: brightness(85%);
}

.remove_text_button:active {
  filter: brightness(150%);
}


#design-base-bar{
  display: none;
}

#main-mobile-bottom-menu {
   display: block;
}

.edit-element-title{
 font-family: inherit ;
 font-weight: 200;
 color: #333333;
 font-size: 14px;
 margin: 10px 1px -5px 7%;
}


#edit_content_box{
 width: 90%;
 padding: 0;
 position: relative;
 margin-top: 9px;
 margin-bottom: 27px;
}

#new_txt{
  left: 8%;
  position: relative;
  width: 93%;
  resize: none;
  padding: 0;
  text-align:left;
  border: 1px solid #dddddd;
  border-radius: 7px;
   -webkit-appearance: none;
 box-shadow: 0 5px 10px -2px #bbbbbb;
}

#new_txt_mobile-container {
  position: absolute;
  display: none;
  background: #f1f1f1;
  height: 100vh;
  top: 1px;
  width: 100%;
  padding: 70px 10px 10px 8%;
}

#new_txt_mobile{
  height: 40%;
  position: relative;
  width: 99%;
  resize: none;
  padding: 0;
  text-align:left;
  border: 1px solid #aaaaaa;
  border-radius: 7px;
}

#txt-action-buttons{
 position: relative;
 width: 85%;
 height: 10%;
 background: transparent;
 bottom: 1px;
 padding: 20px 5px 5px 5px;
 margin: 10px auto 1px 0;
}

#cancel_text_edit {
 background: #FFFFFF;
 color: #FF0000;
 height: 50%;
 width: 38%;
 border:2px solid #FF0000;
 border-radius: 30px;
 margin-left:1%;
 float: left;
 font-size: 20px;
}

#apply_text_edit {
 background: #5973F7;
 color: #FFFFFF;
 height: 50%;
 width: 38%;
 border:1px solid #5973F7;
 border-radius: 30px;
 float: right;
 font-size: 20px;
}

#font-size_mobile-container, #letter-spacing_mobile-container {

 background: #FFFFFF;
  display: none;
  position: absolute;
  width: 100%;
  height: 90px;
bottom: 0px;
padding-top: 3%;
  border: 1px solid #dddddd;
  border-width: 1px 0 0 0;
}

#font_size_mobile_display {
 height:20px;
 width:99%;
 background: #FFFFFF;
 position: absolute;
 text-align: center;
bottom: 15%;
padding-right: 50%;
}

#font-face_mobile-container{
 background: #FFFFFF;
 display: none;
  position: absolute;
  width: 100%;
  height: 90px;
bottom: 0px;
padding-top: 3%;
  border: 1px solid #dddddd;
  border-width: 1px 0 0 0;
}

#close-mobile-font-editor {
   color: #999999;
 background: #FFFFFF;
 height: 20px;
 width: 20%;
 position:  absolute;
 top:  1px;
 margin: 1px 0 0 0;
 left: 2%;
 float: left;
 padding: 3px 0 0 10px;
}
#edit_box_font_face-mobile{
 background: #FFFFFF;
 
  position: relative;
  width: 100%;
  height: 90px;

}


.mobile-edit-container {
 position: relative;
 width: 98%;
 padding: 5px 5px 10px 5px;
 z-index: 100;
 display: block;
}


#close-mobile-font-color-editor{
   color: #999999;
 background: #FFFFFF;
 height: 20px;
 width: 20%;
 position:  absolute;
 top:  1px;
 margin: 1px 0 0 0;
 left: 2%;
 float: left;
 padding: 3px 0 0 10px;

}
#mobile_edit_text_color_box {
  background-color: #FFFFFF;
  position: absolute;
  width: 100%;
  height: 90px;

  padding: 5px 5px 5px 5px;
  
 /* overflow-x: scroll; 
bottom: 0px;
    -webkit-overflow-scrolling: touch;
    
     overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            */
 display:none;

 
  display: none;
  position: absolute;
  width: 100%;
  height: 90px;
bottom: 0px;
padding-top: 3%;

  border: 1px solid #dddddd;
  border-width: 1px 0 0 0;
}


#mobile_edit_text_color_dots{
  background-color: #FFFFFF;
  position: relative;
  width: 85%;
  height: 40px;
  border: 0px solid #999999;
  padding: 5px 5px 10px 5px;
  float: right;
  left: 1px;
  bottom: -15px;
  overflow-x: scroll; 

    -webkit-overflow-scrolling: touch;
    
     overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap; 
}

  #text_color_spectrum_picker-mobile{

}

#mobile-color-picker{
  background-color: transparent;
  position: relative;
  width: 8%;
  height: 45px;
  float: left;
  left: 1%;
  top: 21%;
  border: none;
  border-radius: 10px;
  margin: -3px auto 2px auto;
  
}
.mobile-text-color-cat {
    display: inline-block;
    width: 80px;
    height: 100px;
    line-height: 50px;
    text-align: center;
    background: #FFFFFF;

    margin-right: 5px;
    position: relative;
 
      -webkit-overflow-scrolling: touch;
}



/* https://moderncss.dev/custom-select-styles-with-pure-css/ */
select {
  appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
}
        
:root {
  --select-border: #dddddd;
  --select-focus: blue;
  --select-arrow: var(--select-border);
  border-radius: 30px;
}
 
 
#edit_box_font_face  {
  min-width: 100px;
  max-width: 80%;
  border: 1px solid var(--select-border);
  border-radius: 7px;
  padding: 0.25em 0.5em;
  font-size: 14px;
  outline-width: 0;
  outline: none;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  margin: 10px auto 27px auto;
     -webkit-appearance: none;
 box-shadow: 0 5px 10px -2px #bbbbbb;
}

#close-mobile-font-size-editor {
   color: #999999;
 background: #FFFFFF;
 height: 20px;
 width: 20%;
 position:  absolute;
 top:  1px;
 margin: 1px 0 0 0;
 left: 2%;
 float: left;
 padding: 3px 0 0 10px;

}

#edit_box_font_face-mobile {
  min-width: 100px;
  max-width: 60%;
  border: 1px solid var(--select-border);
  border-radius: 7px;
  padding: 0.25em 0.5em;
  font-size: 14px;
  outline-width: 0;
  outline: none;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  margin: 5% auto 27px auto;
  height: 20px;
}


#edit_box_font_size {
  min-width: 100px;
  max-width: 80%;
  border: 1px solid var(--select-border);
  border-radius: 7px;
  padding: 0.25em 0.5em;
  font-size: 14px;
  outline-width: 0;
  outline: none;
  cursor: pointer;
  line-height: 1.1;
  background-color: #fff;
  background-image: linear-gradient(to top, #f9f9f9, #fff 33%);
  margin: 10px auto 12px auto;
       -webkit-appearance: none;
 box-shadow: 0 5px 10px -2px #bbbbbb;
}

#edit_box_font_face::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  outline-width: 0;
  outline: none;
}


#edit_box_font_face-mobile::after {
  content: "";
  width: 0.5em;
  height: 10px;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  outline-width: 0;
  outline: none;
}


#edit_box_font_size::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: end;
  top: 1px;
  outline-width: 0;
  outline: none;
}


#mobile_font_size_slider, #mobile_letter-spacing_slider{
  min-width: 100px;
  max-width: 53%;
  background: #FFFFFF;
  height: 15px;
  margin: 8% auto 27px 20%;
  position: relative;
  clear: both;
}

#edit_box_font_face, #edit_box_font_size, #edited_font_face-mobile {
  display: grid;
  grid-template-areas: "select";
  align-items: center; 
}

#edited_font_face, #edited_font_face-mobile{
  border: none;
}




select,
#edit_box_font_face:after, #edit_box_font_size:after  {
  grid-area: select;
  
}




/*
input[type='range'] {
   overflow: hidden;
   width: 180px;
   -webkit-appearance: none;
   background-color: #FFFFFF;
    border-radius: 10px;
}
*/




/*    
input[type='range']::-webkit-slider-runnable-track {
   height: 45px;
   -webkit-appearance: none;
   color: #13bba4;
   margin-top: 1px;
}
    
input[type='range']::-webkit-slider-thumb {
   width: 20px;
   -webkit-appearance: none;
   height: 13px;
   cursor: ew-resize;
   background: #434343;
   box-shadow: -85px 0 0 80px #69DEF9;
border-radius: 90px;
}
*/

#edit_box_font_size_slider, #edit_box_line_height_slider, #edit_box_letter_spacing_slider {
  min-width: 100px;
  max-width: 83%;
  background: transparent;
  height: 30px;
  margin: 10px auto 27px 17px;
}




#zoom_in_slider{
  position: relative;
  min-width: 90px;
  max-width: 20%;
  background: transparent;
  height: 15px;
  margin: -41px 7% 27px 5%;
  float: right;
}

#theme_color_options{
  width: 43%;
  max-width: 43%;
  
  min-height: auto;
  max-height: 70%;
  background:  transparent;
  margin: 0 auto 5px 27%;
  user-select: none;
  text-align: center;
  position: absolute;
  overflow-x: scroll; 
  bottom: 0px;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;

   /* border: 0px solid #dddddd;
  border-width: 1px 0  0 0;
  scrollbar-width: inherit;
  scrollbar-color:  #dddddd;*/
  
  
   
      border: 1px solid #dddddd;
      border-radius: 7px;
      position: absolute;
      top: 7px;

    
}


  .color-option-icon {
   display: inline-block;
  }
       
       
       #preview-icon-box{
        position: relative;
        float: right;
        right: 3%;top:16%;
        display: block;
       }
       
              #design_review_button {
        display: block;
       }
       
       #design_review_button-mobile {
        display: none;
       }

@media screen and (-webkit-min-device-pixel-ratio:0) {
   /*input[type='range'] */
    input[name="font_size_slider"], input[name="font_line_height_slider"], input[name="letter_spacing_slider"], input[name="zoom_slider"]{
       overflow: hidden;
       width: 78%;
       -webkit-appearance: none;
       background-color: #FFFFFF;
       border: 1px solid #aaaaaa;
       border-radius: 7px;
       float: left;
       left: 1px;
    }
    input[name="mobile_font_size_slider"], input[name="mobile_letter-spacing_slider"] {
       overflow: hidden;
       width: 58%;
       -webkit-appearance: none;
       background-color: #FFFFFF;
       border: 1px solid #aaaaaa;
       border-radius: 7px;
       float: left;
       left: 1px;
    }
    
    input[name="mobile_font_size_slider"]::-webkit-slider-runnable-track, input[name="mobile_letter-spacing_slider"]::-webkit-slider-runnable-track  {
       height: 15px;
       -webkit-appearance: none;
       color: #8a9df9;
       margin-bottom: 5px;
    }
    
    input[name="mobile_font_size_slider"]::-webkit-slider-thumb,  input[name="mobile_letter-spacing_slider"]::-webkit-slider-thumb    {
      width: 20px;
      -webkit-appearance: none;
      height: 20px;
      cursor: ew-resize;
      background: #777777;
      border-radius: 50px;
      box-shadow: -110px 0 0 100px #8a9df9; /* #69DEF9 69DEF9*/
    }
    

    input[name="font_size_slider"]::-webkit-slider-runnable-track, input[name="font_line_height_slider"]::-webkit-slider-runnable-track , input[name="letter_spacing_slider"]::-webkit-slider-runnable-track, input[name="zoom_slider"]::-webkit-slider-runnable-track   {
      height: 15px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: 0px;
    }
    
     input[name="font_size_slider"]::-webkit-slider-thumb,  input[name="font_line_height_slider"]::-webkit-slider-thumb,  input[name="letter_spacing_slider"]::-webkit-slider-thumb,  input[name="zoom_slider"]::-webkit-slider-thumb   {
      width: 15px;
      -webkit-appearance: none;
      height: 15px;
      cursor: ew-resize;
      background: #777777;
      border-radius: 50px;
      box-shadow: -110px 0 0 100px #8a9df9;
    }

}

#font_size_display, #show_font_line_height, #show_letter_spacing{
 height:20px;
 width:17%;
 border: 0px solid #FFFFFF;
 position: relative;
 font-size: 13px;
 float: right;
 left: 1px;
}



                             
                             /*
                             #edit_box_font_size_slider, #edit_box_line_height_slider {
                               min-width: 100px;
                               max-width: 83%;
                              background: transparent;
                              height: 30px;
                              margin: 10px auto 10px auto;
                             }
                             
                             input[type='range'] {
                               width: 100%;
                               --litters-range: 75%;
                               appearance: none;
                               outline: none;
                               height: 1vmin;
                               border-radius: 0.5vmin;
                               /*background: linear-gradient( to right, white var(--litters-range), rgba(87, 87, 87, 0.46) var(--litters-range));*******
                               background: blue ;
                                
                             }
                             input[type='range']::-webkit-slider-thumb {
                               cursor: pointer;
                               appearance: none;
                               width: 2vmin;
                               height: 2vmin;
                               background: white;
                               border-radius: 50%;
                               
                             }
                             
                             */

#main-mobile-bottom-menu {
  background-color: #FFFFFF;
  position: absolute;
  width: 100%;
  height: 95px;
  bottom: -3px;
  border: 1px solid #5973F7;
  border-width: 1px 0 0 0;
}

.design_subsequent_options_button_mobile {
  background-color: #5973F7;
  border: none;
  color: #FFFFFF;
  padding:5px 15px;
  text-decoration: none;
  margin: 0 1px 1px 4px;
  height: 36px;
  cursor: pointer;
  border-radius: 30px;
  width: 85%;
  font-size: 70%;
  letter-spacing: 1px;
  text-align: center; float: right;
  padding: 0 .7px 0 0;
}

#fold-cover-button-mobile {
  background-color: #5973F7;
  border: none;
  color: #FFFFFF;
  text-align: center;
  padding-bottom: 2px;
  text-decoration: none;
  border-radius: 30px;
  width: 90%;
  height: 36px;
}

#next-mobile-container {
  background-color: transparent;
  position: absolute;
  width: 34%;
  height: 40px;
  float: right;
  margin: 20px 1% 1px 1%;
  display: inline-block;
  padding: 3px 0 0 0;
}


#design-save-box-mobile {
   background-color: transparent;
   position: relative;
   width: 14%;
   height: 40px;
    text-align: center;
   float: right;
   margin: 20px 2% 1px -5px;
   display: inline-block;
   padding: 3px 0 0 0; float: left;
   
}



#backrounds-button-mobile{
   background-color: transparent;
   position: relative;
   width: 21%;
   height: 40px;
   text-align: center;
   float: left;
   margin: 20px 2px 1px auto;
   display: inline-block;
   padding: 3px 0 0 0;
}

.backrounds-button-mobile {
  background-color: #5973F7;
  border: none;
  color: #FFFFFF;
  padding:5px 15px;
  text-decoration: none;
  margin: 0 1px 1px 4px;
  height: 36px;
  cursor: pointer;
  border-radius: 30px;
  width: 70%;
  font-size: 8px;
  letter-spacing: 1px;
  text-align: center;
  padding: 1px 0 0 0;
}




#fold-button-mobile {
   background-color: transparent;
   position: relative;
   width: 12%;
   height: 35px;
   text-align: center;
   float: left;
   margin: 20px 2px 1px auto;
   display: inline-block;
   padding: 3px 1px 0 0;
}

.fold-button-mobile{
  background-color: #000000;
  border: none;
  color: white;
  padding:5px 15px;
  text-decoration: none;
  margin: 0 1px 1px 1px;
  height: 36px;
  cursor: pointer;
  border-radius: 10px;
  width: 70%;
  text-align: left;
  padding: 1px 0 0 0;
}

#close-mobile-backgrounds {
  color: #999999;
 background: #FFFFFF;
 height: 20px;
 width: 20%;
 position:  absolute;
 top:  1px;
 margin: 1px 0 0 0;
 left: 2%;
 float: left;
 padding: 3px 0 0 10px;
   /* border: 1px solid #dddddd;
  border-width: 1px 1px  0 1px;*/
}

#backgrounds-bar-mobile {
 /*
   background-color: #FFFFFF;/*brown*******
  position: absolute;
  width: 100%;
  height: 90px;
  bottom: 1px;
  border: 1px solid #dddddd;
  border-width: 1px 0 0 0;
 
   white-space: nowrap;
   overflow: hidden;
   overflow-x:auto;
   overflow-y:hidden;
   padding: 0;
   display: none;
   */
   
     background: #FFFFFF;
  position: absolute;
  width: 100%;
  height: 95px;
  padding-top: 50px
  overflow-x: scroll; 
  bottom: 0px;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
    display: none;
    border: 1px solid #dddddd;
  border-width: 1px 0  0 0;
}


#background-options-container-mobile {
    background: #FFFFFF;
    position: absolute;
    margin: 10px 0 0 0;
    width: 100%;
    height: 60%;
    bottom: 1px; 
}


.backgound-options-mobile {
    background: #FFFFFF;
    display: inline-block;
    width: 150px;
    height: 60px;
    line-height: 50px;
    text-align: center;
    margin-right: 5px;
    position: relative;
    bottom: 1px;
    -webkit-overflow-scrolling: touch;
}


#text-edit-button-mobile {
    background-color: transparent;
    position: relative;
    width: 15%;
    height: 40px;
    float: left;
    text-align: center;
    margin: 20px 1px 1px -10px;
    display: inline-block;
    padding: 3px 0 0 0;
}


#close-mobile-text-menu {
   color: #555555;
   background: #FFFFFF;
   height: 20px;
   width: 20%;
   position:  sticky;
   top:  1px;
   margin: 1px 0 0 0;
   left: 2%;
   float: left;
   padding: 3px 0 0 10px;
}

#mobile-text-edit-menu-container {
    background: #FFFFFF;
    position: absolute;
    width: 100%;
    height: 95px;
    padding-top: 50px
    overflow-x: scroll; 
    bottom: 0px;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap; 
    display: none;
    border: 1px solid #dddddd;
    border-width: 1px 0  0 0;
}

#mobile-text-edit-options{
   background: #FFFFFF;
   position: absolute;
   margin: 1px 0 0 0;
   width: 100%;
   height: 60%;
   bottom: 5px;
   padding-bottom: 2px;
}

.mobile-text-edit-cat {
  background: #FFFFFF;
  display: inline-block;
  width: 130px;
  height: 30px;
  line-height: 40px;
  text-align: center;
  margin-right: 5px;
  border: 1px solid #5973F7;
  color: #5973F7;
  border-radius: 30px;
  font-size: 14px;
  position: relative;
  bottom: 1px;
  padding: 0 0 10px 0;
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar for Chrome, Safari and Opera *
#modules::-webkit-scrollbar {
   /* display: none;
} */

#main-mobile-bottom-menu::-webkit-scrollbar {
    display:none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#main-mobile-bottom-menu {
 /* -ms-overflow-style: none;  /* IE and Edge *
  scrollbar-width: none;  /* Firefox *
   overflow-x: scroll; */
}


#invite_center_image {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  animation: showInvite 1.7s;     
  animation: scale 1.5s both; 
}

 
 
@media only screen and (max-width:360px) {
 
   #invite_container {
     margin: 50px auto 10px -57%;
     width:750px; /* width:384px 307px*/
     height: 514px; /*461px*/
     background: transparent; /*background: lavender;*/
     position: absolute;
     z-index: 30;
     padding: 5px 0 15px 0;
     scale: 67%;
     animation: showInvite 1.7s;  
   }
  
  
   #design-header{
     height: 68px;
   }

   #invitation-story-logo{
     height: 50px;
     width: 100%;
     max-width:100px; 
     margin: 6px 1px 1px 4%;
   }

   #theme_color_options{
      background: transparent;
      width: 33%;
      max-width: 33%;
      min-height: auto;
      max-height: 50%;
      left: 10%;
      top: 24%;
   }
                                                        
     .color-option-icon {
       width: 10px;
       height: 10px;
       display: inline-block;
       margin-right: 7px;
     }
     
     .color-option-icon img {
       max-height: 15px;
       max-width: 15px;
       object-fit: cover;
     }
                             
      #design_nav_bars{
       margin: 13px 15px 3px 2px;
       top: 5%;
     }
 
      #preview-icon-box{
       right: 3%;
       top:21%;
     }
       
     #design_review_button {
       display: none;
     }
     
     #design_review_button-mobile {
       display: block;
     }
                              
     #design-menu-wide{
       display: none;
     }
  
     #design-base-bar{
      display: none;
     }
       
     #design_board{
       width: 100%;
       position: fixed;
     }
  
     #main-mobile-bottom-menu {
      display: block;
     }
  
}



@media only screen and (max-width: 390px) and (min-width: 361px)  {
  
   #invite_container {
     margin: 20px auto 10px -47%;
     width:750px; /* width:384px 307px*/
     height: 514px; /*461px*/
     background: transparent; /*background: turquoise;*/
     position: absolute;
     z-index: 30;
     padding: 5px 0 15px 0;
     scale: 83%;
     animation: showInvite 1.7s;  
   }
   
   #design-header{
     height: 67px;
   }

   #invitation-story-logo{
     height: 55px;
     width: 100%;
     max-width:96px; 
     margin: 6px 1px 1px 4%;
   }

    #theme_color_options{
     background: transparent;
     width: 34%;
     max-width: 34%;
     min-height: auto;
     max-height: 56%;
     left: 8%;
     top: 24%;
   }
                             
                             
     #design_nav_bars{
      margin: 12px 20px 3px 2px;
      top: 12%;
    }
 
    #preview-icon-box{
     right: 3%;
     top:24%;
    }
    
    #design_review_button {
     display: none;
    }
    
    #design_review_button-mobile {
     display: block;
    }
                         
                             
     .color-option-icon {
       width: 21px;
       height: 21px;
       display: inline-block;
       margin-right: 9px;
     }
     
     .color-option-icon img {
        max-height: 25px;
        max-width: 25px;
        object-fit: cover;
     }
                             
                                      
                             
   #zoom_in_slider {
    display: none;
   }
 
   #design_board{
    width: 100%;
    position: fixed;
  }
 
   #design-menu-wide{
    display: none;
   }

  #design-base-bar{
   display: none;
  }

  #main-mobile-bottom-menu {
    display: block;
   }
}



@media only screen and (max-width: 431px) and (min-width: 391px)  {
  
    #invite_container {
      margin: 50px 50% 10px -40%;
      width:750px; /* width:384px 307px*/
      height: 514px; /*461px*/
      background: transparent; /*background: brown;*/
      position: absolute;
      z-index: 30;
      padding: 5px 0 15px 0;
      scale: 70%;
      animation: showInvite 1.7s;  
    }
    
    #design-header{
     height: 79px;
    }

    #invitation-story-logo{
      background: transparent;
      padding: 1px;
      height: 55px;
      width: 100%;
      max-width:110px; 
      position: absolute;
      margin: 7px 1px 1px 3%;
    }
    
    
     #design_nav_bars{
      margin: 10px 17px 3px 2px;
      top: 13%;
     }
   
     #theme_color_options{
       background: transparent;
       width: 40%;
       max-width: 40%;
       min-height: auto;
       max-height: 54%;
       left: 8%;
       top: 21%; 
     }
    
    
       #preview-icon-box{
        right: 3%;
        top:24%;
       }
       
       #design_review_button {
        display: none;
       }
       
       #design_review_button-mobile {
        display: block;
       }
    
     .color-option-icon {
       width: 15px;
       height: 15px;
       display: inline-block;
       margin-right: 15px;
      }
               
     .color-option-icon img {
       max-height: 25px;
       max-width: 25px;
       object-fit: cover;
     }
                             
    
    #zoom_in_slider{
      display: none;
   }
    
    #design_board{
      width: 100%;
      position: fixed;   
    }
    
    #design-menu-wide{
      display: none;
    }
    
    #design-base-bar{
      display: none;
    }
    
    #main-mobile-bottom-menu {
      display: block;
    }
  
}


@media only screen and (max-width: 828px) and (min-width: 634px)  {
       #design_review_button {
        display: none;
       }
       
       #design_review_button-mobile {
        display: block;
       }
}      
       
@media only screen and (max-width: 632px) and (min-width: 432px)  {
    
    #invite_container {
      margin: 1px 0 10px 1%;
      top:1%;
      left:-21%;
      width:750px; /* width:384px 307px*/
      height: 514px; /*461px*/
      background: transparent; /*background: orange;*/
      position: absolute;
      z-index: 30;
      padding: 5px 0 15px 0;
      scale: 65%;
      animation: showInvite 1.7s;  
    }
    
  
   
   #zoom_in_slider{
      display: none;
   }
   
   #design-header{
     background: transparent; 
     height: 50px;
     position: fixed;
     padding: 10px 0 1px 0;
     z-index: 70;
   } 

   #design_nav_bars{
    margin: 3px 40px 3px 2px;
    top: 12%;
   }
 

    #invitation-story-logo{
      background: transparent;
      padding: 1px;
      height: 50px;
      width: 100%;
      max-width:96px; 
      margin: -1px 1px 1px 3%;
      position: absolute;
    }
 
 
    #theme_color_options{
      background: transparent;
      min-height: auto;
      max-height: 65%;
    }
                             
                             
     .color-option-icon {
      width: 10px;
      height: 10px;
      display: inline-block;
      margin-right: 15px;
     }
     
     .color-option-icon img {
       max-height: 20px;
       max-width: 20px;
       object-fit: cover;
     }
                             
        #preview-icon-box{
        right: 3%;
        top:11%;
       }
       
       #design_review_button {
        display: none;
       }
       
       #design_review_button-mobile {
        display: block;
       }
                             
    
    #design_board{
      width: 100%;
      position: fixed;
      scale: 100%;
    }
    
    #design-menu-wide{
      width: 19%;
      min-height: 300px;
      max-height: 600px;
      margin: 5px 10px 100px auto;
      background: #FFFFFF;
      position: relative;
      right: 1%;
      top: 5%;
      scale: 100%;
      text-align:left;
      clear: both;
      z-index: 70;
      display: none;
    }
    
    #design-base-bar{
      display: none;
    }
    
    
    #design-menu-wide{
      width: 23%;
      top: 5%;
    }
    
    
    #main-mobile-bottom-menu {
      display: block;
    }

    #edit_box_font_size_slider{
      left: -7px;
    }
    
    input[name="font_size_slider"]{
      overflow: hidden;
      width: 75%;
    }
    
    #font_size_display{
     width:19%;
     font-size: 10px; 
    }
    
}


  
 /*@media only screen and (max-width: 826px) and (min-width: 432px)  {*/ 
@media only screen and (max-width: 826px) and (min-width: 632px)  {
    
    #invite_container {
      margin: 1px 0 10px v1%;
      top:1%;
      margin: 0 10% 0 -1%;
      width:750px; /* width:384px 307px*/
      height: 514px; /*461px*/
      background: transparent; /*background: yellow;*/
      position: absolute;
      z-index: 30;
      padding: 5px 0 15px 0;
      scale: 67%;
      animation: showInvite 1.7s;  
    }
    
   #zoom_in_slider{
      display: none;
   }
   
   #theme_color_options{
    background: transparent;
   }
   
   
   .color-option-icon {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 15px;
   }
   
   .color-option-icon img {
     max-height: 20px;
     max-width: 20px;
     object-fit: cover;
   }
                             
    
    #design_board{
      width: 100%;
      position: fixed;
      scale: 100%;
    }
    
    #design-menu-wide{
      width: 19%;
      min-height: 300px;
      max-height: 600px;
      margin: 5px 10px 100px auto;
      background: #FFFFFF;
      position: relative;
      right: 1%;
      top: 5%;
      scale: 100%;
      text-align:left;
      clear: both;
      z-index: 70;
      display: none;
    }
    
    #design-base-bar{
      display: none;
    }
    
    
    #design-menu-wide{
      width: 23%;
      top: 5%;
    }
    
    
    #main-mobile-bottom-menu {
      display: block;
    }

    #edit_box_font_size_slider{
      left: -7px;
    }
    
    input[name="font_size_slider"]{
      overflow: hidden;
      width: 75%;
    }
    
    #font_size_display{
     width:19%;
     font-size: 10px; 
    }
    
}
  
  
@media only screen and (max-width: 1099px) and (min-width: 827px)  {
  
  
  #design-header{
    background: transparent;/*background: orange;*/
   }


    #invite_container {
      margin: 1px auto 10px auto;
      top:1%;
      right: 20%;
      width:750px; /* width:384px 307px*/
      height: 514px; /*461px*/
      background: transparent; /*background: lightblue;*/
      position: absolute;
      z-index: 30;
      padding: 5px 0 15px 0;
      scale: 83%;
      animation: showInvite 1.7s;  
    }
    
    #design-menu-wide{
      width: 23%;
      min-height: 400px;
      max-height: 450px;
      margin: 5px 10px 100px auto;
      background: #FFFFFF;
      position: relative;
      right: 1%;
      top: 5%;
      scale: 100%;
      text-align:left;
      clear: both;
      z-index: 70;
      display: block;
      padding-bottom: 0;
    }
    
    #theme_color_options{
     background: transparent;/* background: red;*/
     /* top: 7px;*/
    }
    
    #design-base-bar{
      display: block;
    }
    
    #main-mobile-bottom-menu {
      display: none;
    }
    
    #close-mobile-backgrounds{
      display: none;
    }
    
    
    #edit_box_font_size_slider{
     left: -7px;
    }
    
    input[name="font_size_slider"]{
      overflow: hidden;
      width: 75%; 
    }
    
    #font_size_display{
      width:19%;
      font-size: 10px;
    }
    
    #new-text-wide{
     width: 24%;
    }
    
   .bottom-bar-menus-wide {
     position: relative;
     width: 17%;
     font-size: 85%;
    }
    
    .backrounds_button_wide_button {
      width: 85%;
      font-size: 82%;
    }


   .design_subsequent_options_button {
     height: 34px;
     width: 80%;
     font-size: 80%;
   }
  
}



@media only screen and (min-width:1100px) {
  
   #design-menu-wide{
      width: 21%;
      height: 450px;
      margin: 5px 10px 100px auto;
      background: #FFFFFF;               /* background:linear-gradient(40deg, #eeeeee, #FFFFFF);filter: blur(0.8px);*/
      position: absolute;
      right: 1%;
      top: 2%;
      scale: 100%;
      text-align:left;
      clear: both;
      z-index: 70;
      display: block;
      padding: 20px 0 0 0;
      border-radius: 6px;
   }
   
   #design-base-bar{
     display: block;
   }
   
   
   #main-mobile-bottom-menu {
      display: none;
   }
   
   #close-mobile-backgrounds{
      display: none;
    }
     
   #invite_container {
     /* margin: 1px 25% 10px 15%;*/
      width:750px; /* width:384px 307px*/
      top:1%;
      height: 514px; /*461px*/
      background: transparent;
      position: absolute;
      z-index: 40;
      padding: 5px 0 15px 0;
      scale: 100%;
      animation: showInvite 1.7s;  
   }
   
#theme_color_options{
position: absolute;
/*top: 7px;*/
    background: transparent;  /* background: turquoise;*/
     border: 0px solid #FFFFFF;
    }
    
}



@media only screen and (min-width:1100px) and (max-width: 1650px){
/* @media all and (min-width:1100px) and (max-width: 1020px) {*/
  
     
   #invite_container {
      margin: 1px 25% 10px 12%;
   }
   
}



  @media only screen and (min-width:1651px) {
     
   #invite_container {
      margin: 1px 25% 10px 27%;
   }
   
}
  
     
#the_invite {
    width: 376px; /* width:384px 307px*/
    height: 513px; /*461px*/
    background: #FFFFFF;
    overflow:hidden;
    z-index: 10;
    position: relative;
    margin: 1%  0 0px 25%;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-filter: drop-shadow(6px 6px 6px #999999);
    filter: drop-shadow(6px 6px 6px #999999);
    animation: showInvite 1.7s;    
    animation: scale 1.5s both; 
}



#invite_container {
  animation: showInvite 1.7s; 
}
/* DUPLICATE FROM ABOVE ???????????????????????
#the_invite {
  animation: showInvite 1.7s;    
  animation: scale 1.5s both;
}
*/

/* https://stackoverflow.com/questions/42632767/css-animation-grow-from-center-zoom-from-center-dot-to-full-container */

@keyframes showInvite {
  from {
    transform: scale(1);/*transform: scale(0.3);*/
  }
  to {
    transform: scale(1);
  }
}



@media screen and (min-width:700px) {
  
}


@media screen and (max-width:699px) {
 
}



#textbox1, #textbox2, #textbox3{
  z-index:10;
}
/*
#textbox1{
  z-index:10;
}
*/

.text_div{
   z-index: 150;
   position:relative;
   height:auto;
   padding: 1px;
   border: none;
    border: 1.5px solid transparent;
}

.text_div_border{
   border: 1.5px dashed blue;
}

           
.ui-resizable-handle {
  position: absolute;
  background: #FFFFFF;
  border-width: 0px;
  border-style: solid;
  border-color: blue;
  border-image: initial;
  border-radius:0px;
visibility: hidden;
}


#n{
   top: -4px;
   left: calc(50% - 10px);
   width: 15px; display: none;
}
  
#s{
   bottom: -4px;
   left: calc(50% - 10px);
   width: 15px;
}
  

#w0, #w1, #w2, #w3,#w4, #w5, #w6{
  left: -4px;
  top: calc(50% - 8px);
  height: 15px; border: 1px solid blue;
}
  
#e0,#e1,#e2, #e3,#e4,#e5,#e6{
   right: -3px;
   top: calc(50% - 8px);
   height: 15px; border: 1px solid blue;
}

#ne0,#ne1,#ne2,#ne3,#ne4,#ne5,#ne6 {
   right: -7px;
    border-radius: 50px;
   height: 15px;
   width: 15px; border: 1px solid blue;
}
  
#nw0,#nw1,#nw2,#nw3,#nw4,#nw5, #nw6      {
   left: -7px;
   top: -6px;
     border-radius: 50px;
   height: 15px;
   width: 15px; border: 1px solid blue;
}

#sw0,#sw1,#sw2,#sw3,#sw4,#sw5,#sw6 {
   left: -7px;
   bottom: -6px;
    border-radius: 50px;
   height: 15px;
   width: 15px; border: 1px solid blue;
}

#se0,#se1,#se2,#se3,#se4,#se5,#se6  {
   right:  -7px;
   bottom: -6px;
      border-radius: 50px;
   height: 15px;
   width: 15px;  border: 1px solid blue;
}
  
/*
.rotate-link {
   position: absolute;
   width: 1px;
   height: 15px;
   background-color: lime;
   top: -20px;
   user-select: none;
   left: calc(50% + 0.5px);
   z-index: -1;
}

*/

.rotator {
   height: 21px;
   width: 21px;
   background-color: blue;
   border-radius: 50%;
   position: absolute;
   user-select: none;
   top: -36px;
   left: calc(50% - 10px);
   display: none;
   border: 1px outset transparent;
   margin: 0;
}

/*
.rotator_show {

   display: block;
}
*/


.remover {
   height: 21px;
   width: 21px;
   border-radius: 50%;
   position: absolute;
   user-select: none;
   top: -36px;
   left: calc(50% - 70px);
}


#text_color_radios{
 width: 87%;
 height: 100px;
 background:  transparent;
 margin: 10px auto 30px auto;
 border: 1px solid #dddddd;
 border-radius: 7px;
 overflow: hidden;
 overflow-y: scroll;
 box-sizing: border-box;
    -webkit-appearance: none;
 box-shadow: 0 5px 10px -2px #bbbbbb;
}


.template_color_option_img{
 height: 23px;
  width: 23px;
border: 0px solid #dddddd;
border-radius: 15px;
 -webkit-filter: drop-shadow(3px 3px 3px #999999);
  filter: drop-shadow(3px 3px 3px #999999);
}

/*---Color Options Radios---*/
#c-255-255-255, #c-0-0-0, #c-96-94-95, #c-96-94-95, #c-149-156-161, #c-170-170-170, #c-90-61-28, #c-185-151-91, #c-191-173-140, #c-180-108-114, #c-221-169-164, #c-249-207-216,
#c-241-124-153, #c-177-76-157, #c-219-78-156, #c-189-26-141, #c-201-24-30, #c-165-0-52, #c-151-46-69, #c-114-62-145, #c-101-77-142, #c-229-209-230, #c-202-197-221, #c-142-150-185,
#c-209-190-202, #c-0-174-239, #c-78-107-255, #c-50-74-178, #c-38-52-130, #c-41-51-68, #c-120-148-162, #c-205-231-249, #c-0-139-139, #c-0-112-98, #c-0-154-68, #c-129-216-208,
#c-186-226-223, #c-132-152-12, #c-205-231-186, #c-229-255-229, #c-255-249-186, #c-255-242-45, #c-243-228-177, #c-230-221-149, #c-246-170-130, #c-237-193-150, #c-251-204-193, #c-251-204-19,
#c-253-226-207, #c-255-236-228, #c-255-117-72, #c-224-197-110, #c-192-192-192, #c-237-166-196, #c-185-94-62, #c-224-0-77, #c-247-206-215, #c-119-37-131, #c-208-183-213, #c-0-71-187, #c-185-217-235,
#c-252-200-155, #c-254-243-128, #c-0-134-117, #c-167-230-215,
#blue, #burgundy, #red, #pink, #purple, #lavender, #babyblue,  #peach,  #ivory,
#yellow,  #emerald,  #turquoise,  #mint,  #silver,  #gold,  #ivory, #black{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}


label[for=c-255-255-255], label[for=c-0-0-0], label[for=c-96-94-95], label[for=c-149-156-161], label[for=c-170-170-170], label[for=c-90-61-28], label[for=c-185-151-91], label[for=c-191-173-140], label[for=c-180-108-114], label[for=c-221-169-164], label[for=c-249-207-216], label[for=c-241-124-153],
label[for=c-177-76-157], label[for=c-219-78-156], label[for=c-189-26-141], label[for=c-201-24-30], label[for=c-165-0-52], label[for=c-151-46-69], label[for=c-114-62-145], label[for=c-101-77-142], label[for=c-229-209-230], label[for=c-202-197-221],
label[for=c-142-150-185], label[for=c-209-190-202], label[for=c-0-174-239], label[for=c-78-107-255], label[for=c-50-74-178], label[for=c-38-52-130], label[for=c-41-51-68], label[for=c-120-148-162], label[for=c-205-231-249], label[for=c-0-139-139],
label[for=c-0-112-98], label[for=c-0-154-68], label[for=c-129-216-208], label[for=c-186-226-223], label[for=c-132-152-12], label[for=c-205-231-186], label[for=c-229-255-229], label[for=c-255-249-186], label[for=c-255-242-45], label[for=c-243-228-177],
label[for=c-230-221-149], label[for=c-246-170-130], label[for=c-237-193-150], label[for=c-251-204-193], label[for=c-251-204-19], label[for=c-253-226-207], label[for=c-255-236-228], label[for=c-255-117-72], label[for=c-224-197-110], label[for=c-192-192-192],
label[for=c-237-166-196], label[for=c-224-0-77], label[for=c-247-206-215], label[for=c-119-37-131], label[for=c-208-183-213], label[for=c-0-71-187],
label[for=c-185-217-235], label[for=c-252-200-155], label[for=c-254-243-128], label[for=c-0-134-117 ], label[for=c-167-230-215],
label[for=blue], label[for=burgundy], label[for=red], label[for=pink], label[for=purple], label[for=lavender], label[for=babyblue], label[for=peach], label[for=ivory], label[for=yellow] , label[for=emerald] ,
label[for=turquoise], label[for=mint] , label[for=silver] , label[for=gold], label[for=black] { /* IMAGE STYLES */
	display:inline-block;
	margin-right: -3px;
	cursor:pointer;
	height: 10px;
	padding: 3px 0px 6px 4px;
	border:3px solid transparent; 
}



#c-255-255-255:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-0-0-0:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-96-94-95:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-149-156-161:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-170-170-170:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-90-61-28:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-185-151-91:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-191-173-140:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-180-108-114:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-221-169-164:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-249-207-216:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-241-124-153:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-177-76-157:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-219-78-156:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-189-26-141:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-201-24-30:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-165-0-52:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-151-46-69:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-114-62-145:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-101-77-142:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-229-209-230:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-202-197-221:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-142-150-185:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-209-190-202:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-0-174-239:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-78-107-255:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-50-74-178:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-38-52-130:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-41-51-68:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-120-148-162:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-205-231-249:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-0-139-139:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-0-112-98:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-0-154-68:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-129-216-208:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-186-226-223:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-132-152-12:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-205-231-186:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-229-255-229:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-255-249-186:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-255-242-45:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-243-228-177:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-230-221-149:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-246-170-130:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-237-193-150:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-251-204-19:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-253-226-207:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-255-236-228:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}
#c-255-117-72:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-224-197-110:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-192-192-192:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-237-166-196:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-185-94-62:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-167_230_215:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-224-0-77:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#c-247-206-215:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-119-37-131:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-208-183-213:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-0-71-187:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-185-217-235:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-252-200-155:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-254-243-128,:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-0-134-117:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#c-167_230_215:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}



#black:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#silver,:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#gold:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#blue:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#babyblue:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#burgundy:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#red:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

 #pink:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#purple:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#lavender:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#peach:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#ivory:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#yellow:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#emerald:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#turquoise:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}





#text_color_spectrum_picker_box{
 width: 85%;
 background: transparent;
 height: 20px;
 border: 1px solid #aaaaaa;
 border-radius: 7px;
 margin: -5px 0 27px 6%;
 overflow: hidden;
 padding: 0 0 4px 0;
}

#text_color_spectrum_picker{
 width: 100%;
margin: -3px auto 2px auto;
 height: 21px;
 color: #aaaaaa;
 border: none;
}



#mobile_edit_text_color_box{

}





#align_radios{
  max-width: 96%;
  min-height: 50px;
  height: auto;
  background:  transparent;
  margin: 10px auto 10px 7%;
  border: 1px solid #dddddd;
  border-radius: 7px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 4px 2px 10px 2px;
   -webkit-appearance: none;
  box-shadow: 0 5px 10px -2px #cccccc;
}



#left, #center, #right { /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

label[for=left], label[for=center], label[for=right] { /* IMAGE STYLES */
	display:inline-block;
	margin-right: 1px;
	cursor:pointer;
	height: 10px;
	padding: 3px 0px 6px 0px;
	border:3px solid transparent; 
}

#left:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


#center:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}

#right:checked + img{ 
  opacity: 0.2;
	filter: alpha(opacity=20);
}


.align-icon {
 width: 100%;
}




    

    #theme_color_options::-webkit-scrollbar{
      height: 7px;
      background-color:#f1f1f1;
      }
      
  #theme_color_options::-webkit-scrollbar-thumb{
    background:#999999;
    border-radius:5px;
  }
  

/*-----SPRITE ------- *

#the-sprite-container {
 position: absolute;
width:330px;
   height: 461px;
 background: green;
 z-index: 10;
 opacity: 1;
right:1%;
float: right;
}

#the-sprite {
 position: relative;
width:230px;
   height: 461px;
 background: orange;
 z-index: 20;
 opacity: 1;
right:1%;
text-align: center;
}
*/