/* This whole CSS file is for your to rewrite as you see fit.... it is only here for the purpose of the demo */

/*      body {	  padding: 2em;       } */

/* Override some of the site style sheets */
.redi-content.category-content  {
    padding-top: 30px;
}


/* ---- MAIN PAGE ------------ */

      .wrapper {
	  display: flex;  
	  flex-flow: row wrap;
	  font-weight: bold;
	  text-align: center; 
      }

      .wrapper > * {
	  padding: 10px;
	  flex: 1 100%;
      }

      .opttion-selection-area {
	  display: flex;
	  flex-direction: column;	  
	  font-weight: bold;
	  text-align: center; 
      }
      
      .add-to-cart-banner {
/*	  background: #E5EDEF; */
	  background: #FFC150;
	  padding: 5px;
	  font-weidht: normal;
	  font-size: 1em;
      }

      /* for the add to cart desktop banner */
      #desktop-qty-area div.redi-form-option {
	  margin: 0px;
	  padding-top: 0px;
      }
      #desktop-qty-area #qty {
	  padding: 5px;
	  padding-top:    10px;
	  padding-bottom: 10px;	  
      }

      #header-add-to-cart-item-desc {
	  text-align: right;
	  padding-right: 10px;
	  font-weight: normal;
      }

      #div-unit-price, #div-total-cost {
	  font-weight: normal;
      }

      
      /* on normal tablet / desktop display we HIDE the second qty (mobile_qty) input field */
      #mobile-qty-area  { display: none; }
      
      /* mobile phone adjustments */
      @media screen and (max-width: 670px) {            
	  #mobile-qty-area  { display: block; }
	  #desktop-qty-area { display: none;   }	  
      }

      
      
      .footer {
	  background: tomato;
      }

      .main {
	  text-align: left;
	  background: deepskyblue;
      }

      .image-preview-area {
	  /*  background: #f7f9d1;  */
      }

      .opttion-selection-area {
	 /*  background: #f2f9f9;  */
      }

      @media all and (min-width: 600px) {
	  .side { flex: 1 0 0; }
      }

      @media all and (min-width: 800px) {
	  .add-to-cart-banner { order: 1; }
	  .image-preview-area { order: 2; }
	  .opttion-selection-area { order: 3; }
      }

      @media screen and (max-width: 670px) {      
	  #header-add-to-cart-item-desc  {
	      display: none;
	  }
      }
      
      .add-to-cart-banner table  {
	  width: 100%;
      }
      
      .add-to-cart-banner table table td {
	  padding: 10px;
	  text-align: center;
      }
      
      #add-to-cart-button {
	  color:white;
	  font-weight:bold;
	  padding: 7px;
      }

      .redi-page-mode-header {
	  padding-bottom: 20px;
      }

      .redi-page-mode-header h1 {
	  font-size: 3.2rem;
	  font-weight: 500;
      }

      /* MOBILE PHONE DISPLAY - POPUP ADJUSTMENTS */
	@media screen and (max-width: 670px) {
	    .redi-page-mode-header h1 {
		font-size: 2.5rem;
	    }
	}
      
      
      .preview-image-responsive {
	  width: 100%;
	  height: auto;
      }

      


      /* OPTIONS SECTION (to the right of the page) */
      .popup-info2-bubble {
	  cursor: pointer;
      }

      
      .option-add-or-edit-icon {
	  cursor: pointer;
      }


      /* we load showing only the "Add" (i.e + sign) icon */
      .option-edit-icon {
	  display: none;
      }
      
      .redi-custom-option {
	  border: 1px solid;
	  border-width: thin;
	  border-left: none;
	  border-right: none;
	  border-top: none;	  	  
	  padding: 5px;
/*	  width: 90%;  */
	  margin-left: 15;

      }
      
      .popup-info2-bubble {
	  float: left;
	  padding: 5px;
	  padding-left: 10px;
	  font-size: 1.5em;
      }
      
      .option-header {
	  float: left;
	  padding: 5px;
	  padding-left: 10px;
	  font-weight: 400;
	  font-size: 1.1em;
      }

      .debug-toggle-2nd-line {
	  font-size: 0.6em;
	  font-weight: normal;
	  font-style: italic;
	  color: blue;
	  cursor: pointer;
	  display: none;
      }
      
      .option-header-small {
	  font-size: 0.75em;
	  font-style: italic;
      }
      
      .option-add-or-edit-icon {
	  float:right;
	  padding: 5px;
	  font-size: 1.5em;
      }

      .option-remove-selection-icon {
	  float: left;	  
	  padding: 5px;
	  padding-left: 15px;
	  font-size: 0.9em;
	  color: red;
	  cursor: pointer;	  
      }

      .option-selection-desc {
	  float: left;
	  padding: 5px;
	  padding-left: 10px;
	  text-align: left;
	  font-weight: normal;
	  /*  font-style: italic;  */
	  font-size: 0.9em;
      }
      
      .option-1st-line  {
	  /* background-color: lightgreen;  */
	  height: 40px;
      }
      .option-2nd-line  {
	  clear: left;      /*  Move this dive to a NEW line (it is the first on the left of its parent container)  */
	  /* background-color: pink;  */
	  /*  min-height: 20px;  */
	  overflow: auto;
      }

      
/*      .option-2nd-line-selection div {
	  background-color: yellow;
      }
*/
      
      .option-2nd-line-content-2x {
	  height: 80px;
      }

      .option-2nd-line-form-select {
	  float: left;
	  padding: 10px;
	  height: 25px;
	  /* background: orange; */
      }
      
	    
      /*  Background overlay and popup  */
	#overlay {
		display: none;
		/*
		  using fixed instead of absolute makes the positioning based on the viewport rather than the page.... i.e. overlay scrolls w page
		  position: absolute; */
		position: fixed;		
		top: 0;
		bottom: 0;
		background: #fff;
		width: 100%;
		height: 100%;
		opacity: 0.9;
		z-index: 1000100;   /* ridiculously high to guarantee overlay anything in the base css for the site */
	}

	#overlay2 {
	    display: none;
	    /*
	      using fixed instead of absolute makes the positioning based on the viewport rather than the page.... i.e. overlay scrolls w page
	      position: absolute; */
	    position: fixed; 
	    top: 0;
	    bottom: 0;
	    background: grey;
	    width: 100%;
	    height: 100%;
	    opacity: 0.3;   /*  Transparent layer between popup level1 and popup level2.  If clicked on, closes top popup and overlay2.  Used to allow clicking on level-1 popup, not just outside on #overlay   */
	    z-index: 1000225;
	}
	
	
	.popup {
	    display: none;

	    /*
	      using fixed instead of absolute makes the positioning based on the viewport rather than the page.... i.e. overlay scrolls w page
	      position: absolute; */
	    position: fixed;		    
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);

	    background: #fff;
	    width: 500px;
	    height: 60%;
	    z-index: 1000200;

	    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	}


	/* those are used for the info popups triggered by (i) info bubbles */
	.popup-level2 {
	    display: none;
	    /*
	      using fixed instead of absolute makes the positioning based on the viewport rather than the page.... i.e. overlay scrolls w page
	      position: absolute; */
	    position: fixed; 
	    background-color: #FFF;

	    
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);

	    border: 1px solid gray;
	    width: 320px;
	    height: 40%;

	    font-size: 1em;
	    font-weight: normal;

	    z-index: 1000260;  /* resides just ABOVE the regular popup but below the 2nd layer of popup */

	    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	}
 
			
	.popup-close {
		float: right;
		padding: 15px;
		cursor: pointer;
	}

	.popup-more-info {
	    float: right;
	    padding: 15px;
	    cursor: pointer;
	}
	
	.popup-content {
	    padding: 20px;
	    font-weight: normal;
	}

	.popup-content h3 {
	    padding-bottom: 10px;
	}

	

	/* DEBUG BUTTONS */
	.debug_button_row  button {
	    padding: 8px;
	    margin: 5px;
	}

	.debug_button_row {
	    width:100%;
	    /*  border-style:solid; */
	    display: flex;  
	    flex-flow: row wrap;
	}

	.debug_button_row.button {	
	    margin: 30px;
	}


	/* popup results table (for development and debugging only */

	.popup_results {
	    background-color: papayawhip;
	    width:90%;
	    margin-top: 20px;
	    border: 1px dashed;
	}
	
	.popup_results table td {
	    text-align: left;
	    font-weight:normal;
	    padding: 3px;
	}

	.popup_results table td:first-child {
	    text-align: right;
	    font-weight:bold;
	}
	
	
	
	/* GENERAL POPUPS:  */
	.popup-save-cancel-buttons	{
	    padding:20px;
	}

	.popup-save-cancel-buttons button {
	    padding:10px;
	}

	button.popup-cancel {
	    float: right;
	}
	
	

	/* ---- INDIVIDUAL POPUPS ------------ */
	#standard-size-popup {
	    width: 400px;
	    height: 80%;
	    overflow-y:auto;
	}

	
	#backingboard-plexi-combo-popup, #print-canvas-type-popup, #print-paper-type-popup, #print-size-popup  {
	    height: 400px;
	}


	#backingboard-selection-area, #print-canvas-type-selection-area, #print-paper-type-selection-area, #print-size-selection-area {
	    text-align: center;
	    padding: 20px;
	}


	/* MOBILE PHONE DISPLAY - POPUP ADJUSTMENTS */
	@media screen and (max-width: 670px) {
	    #backingboard-plexi-combo-popup, #print-canvas-type-popup, #print-paper-type-popup, #print-size-popup {
		height: 45%;
		width:  90%;
	    }
	}
		
	
	
	/* STANDARD Mat SIZE SELECTOR */
	table#redi_mat_size_selector_standard tr:nth-child(even) {
	    background-color: #f2f2f2;
	}

	table#redi_mat_size_selector_standard tr.change_on_over:hover td { background:#EDEDED; }

	table#redi_mat_size_selector_standard td {
	    padding: 10px;
	}

	table#redi_mat_size_selector_standard tr:hover {
	    box-shadow: inset 0 0 0 99999px rgba(0,0,0,0.2);;
	}



	
	/* Mat COLOR SELECTOR */
	#mat-color-popup, #double-mat-color-popup {
	    width: 80%;
	    max-width: 1100px;
	    height: 90%;
	    overflow-y:auto;
	}

	.mat-type-selection-header {
	    font-weight:bold;
	    padding-bottom: 10px;
	}

	#current_mat_type_name {
	    font-size: 3rem;
	    font-weight: 300;
	    padding-left: 30px;
	}

	.mat-material-selector-or-display-area {
	    padding-top:    20px;
	    padding-bottom: 30px;
	}

	.color-selector-area {
	    padding-top: 20px;
	}
	
	div.item-color-item-container {
	    width:100%;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    padding-bottom: 50px; 
	}

	div.color-item {
	    width: 150px;
	    height: 125px;
	    text-align: center;
	    margin: 5px;	    
	    padding: 5px;
	    padding-right: 0px;
	    padding-left:  0px;	    
	    /* border: 1px solid black;  */
	}

	

	
      @media screen and (max-width: 670px) {      
	div.color-item {
	    width: 125px;
	  }
      }

      
	div.item-color-swatch {
	    width:  120px;
	    height: 80px;
	    border: 1px solid  #DCDCDC;
	    margin: auto;
	    border-radius: 15%;
	}
		    
	div.item-name {
	    padding: 3px;
	    width: 90px;
	    /* height: 30px;  */
	    margin: auto;	    
	}


	div.color-item:hover > div.item-name {
	    /* background-color: yellow;  */
	    /*  border-bottom: 3px solid #FF8C00;  */
	}

	div.color-item:hover > div.item-color-swatch {
            /* border-width: 2px;       */
            /* border-color: #A9A9A9;   */
            /* border-color:  #FF8C00;  */


	    width:  145px;
	    height: 90px;
	}


	/* FRAME SELECTOR */
	#frames-popup {
	    width: 100%;
	    max-width: 1100px;
	    height: 90%;
	    overflow-y:auto;
	}

	div.all-frames-header {
	    margin-top: 40px;
	}
	
	.frame-type-selection-header {
	    font-weight:bold;
	    padding: 10px;
	}


	div.item-frame-item-container {
	    width:100%;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	}

	div.frame-item {
	    width: 160px;
	    height: 235px;
	    text-align: center;
	    margin: 6px;	    
	    padding: 15px;
	    padding-right: 0px;
	    padding-left:  0px;

	    /* invisible (white) frame so the item does not jiggle when you hover over it and add a 1px frame around it */
	    border: 1px solid #FFF; 
	}

	div.frame-item:hover {
	    border: 1px solid #FF8C00;
	    cursor: pointer;
	}

      @media screen and (max-width: 670px) {      
	div.frame-item {
	    width: 150px;
	  }
      }

      
	div.frame-item:hover  > div.frame-item-below  {
	    /* background-color: #FF8C00;  */
	}
	
	img.item-frame-img {
	    
	}

	div.frame-item  div.item-name {
	    font-weight: bold;
	    padding: 3px;
	    width: 150px;
	    /* height: 30px;  */
	    margin: auto;
	    font-size: 14px;
	}
	
	div.frame-item  div.item-desc {
	    font-size: 0.8em;
	    padding: 3px;
	    width: 145px;
	    margin: auto;	    
	}


	/*  CUSTOM SIZE SELECTOR */


	#custom-size-full-popup {
	    height: 700px
	}

	#custom-size-short-popup, #custom-size-opening-popup, #preview-artwork-upload-popup {
	    height: 350px;
	}

	#preview-artwork-upload-popup {	
	    height: 350px;
	}
	

	/* mobile phone adjustments */
	@media screen and (max-width: 670px) {      
	    #custom-size-full-popup {
		height: 90%;
		width:  90%;
	    }

	    #custom-size-short-popup, #custom-size-opening-popup, #preview-artwork-upload-popup {
		height: 50%;
		width:  90%;
	    }
		
	}
	
	
	#popup-inch-and-fraction { 
	    display: none;
	    /*
	      using fixed instead of absolute makes the positioning based on the viewport rather than the page.... i.e. overlay scrolls w page
	      position: absolute; */
	    position: fixed; 
	    background-color: #FFF;
	    
	    left: 50%;
	    top: 50%;
	    /*	    transform: translate(-50%, -50%);  */
	    transform: translate(-30px, -50%);	    

	    border: 2px solid black;
	    width: 320px;
	    height: 40%;
	    z-index: 1000260; /*  resides just ABOVE the regular popup but below the 2nd layer of popup	*/

	    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	    overflow-y:auto;	    
	}

	/* mobile phone adjustments */
	@media screen and (max-width: 670px) {      
	    #popup-inch-and-fraction {
		/* for mobile we center the box instead of pushing it to the right */
		transform: translate(-50%, -50%);
		height: 75%;
		width:  90%;
	    }
	}
	

	.popup-inch-and-fraction-header {
	    float: left;
	    margin: 15px;
	}
	.popup-inch-and-fraction-close {
		float: right;
		padding: 15px;
		cursor: pointer;
		margin-bottom: 10px;
	}


	/* Make alternating table white or light-grey background */
	.inch_and_fraction_collection table.inch_and_fraction_selector:nth-child(even) { 
	    background-color: #f2f2f2;
	}
	
	table.inch_and_fraction_selector {
	    padding: 10px;
	    margin-top: 20px;
	}

	table.inch_and_fraction_selector td:hover {
	    background-color: #DCDCDC;
	}
	
	td.integer_val  {
	    font-size: 1.5em;
	    text-align: center;
	    padding:     10px;
	    padding-top: 5px;
	    margin:      15px;
	    margin-top:  0px;	    
	    vertical-align: top;
	}
	
	td.fraction_val {
	    font-size: 0.9em;
	    font-style: italic;
	    text-align: center;
	    padding: 5px;
	}

	.switch-size-mode {
	    padding: 10px;
	}
	
	.outer-size-header, .inner-size-header, .bottom-offset-header, .v-groove-header {
	    font-weight: bold;
	    font-size: 0.9em;
	    text-align: center;
	    padding: 10px;
	    padding-bottom: 20px;
	}


	#outer-size-display, #inner-size-display, #print-and-frame-outer-size-display, #only-frame-size-display  {	    
	    height: 25px;
	    padding: 15px;
	    padding-top: 5px;	    
	    padding-bottom: 25px;	    
	    text-align: center;
	    margin-top: 5px;
	    margin-bottom: 15x;	    
	}

	/* mobile phone adjustment */
	@media screen and (max-width: 670px) {
	    #outer-size-display, #inner-size-display, #print-and-frame-outer-size-display, #only-frame-size-display  {
		padding: 0px;
		padding-top: 0px;
		margin-top: 0px;		
	    }
	}

	#outer-size-width-disp, #outer-size-height-disp, #inner-size-width-disp, #inner-size-height-disp, #print-and-frame-outer-size-width-disp, #print-and-frame-outer-size-height-disp, #only-frame-inner-size-width-disp, #only-frame-inner-size-height-disp {    
	    padding: 10px;
	    margin: 15px;	    
	 /*   border-bottom: 1px solid #000; */
	    cursor: pointer;	    
	}

	.x-separator {
	    font-weight: bold;
	    font-size: 1.2 em;
	}

	.down-carret {
	    font-weight: bold;
	    font-size: 1.2 em;
	}

	hr.measurement-separator {
	    width: 75%;
	    size: 1px;
	    color: #A9A9A9;
	    margin: 10px;
	}

	#bottom-offset-selector {
	    text-align: center;
	    padding: 10px;
	    text-align: center;
	    margin-top, margin-bottom: 25px;	    
	}

	/* mobile phone adjustments */
	@media screen and (max-width: 670px) {
	    #bottom-offset-selector {
		padding: 5px;				
		padding-bottom: 10px;
		margin-top, margin-bottom: 10px;	    
	    }
	}
	

	.save-custom-size-popup, .cancel-custom-size-popup {	    
	    border: none;
	    /* padding: 20px;  */
	    text-align: center;
	    text-decoration: none;
	    display: inline-block;
	    font-size: 16px;
	    margin: 4px 2px;
	    cursor: pointer;
	    border-radius: 4px;	    

	}
	    
	button.save-custom-size-popup {
	    background-color: #04AA6D; /* Green */
	    color: white;
	    float:right;
	}

	button.cancel-custom-size-popup {
	    color: #FFF;
	    background-color: light-grey;
	    float:left;
	}

	.see-measuring-guide {
	    text-align: center;
	    padding:20px;
	}
	
	.save-or-cancel-buttons	 {
	    padding: 20px;
	}


	#outer-size-info-popup-trigger, #inner-size-info-popup-trigger, #bottom-offset-info-popup-trigger, #v-groove-info-popup-trigger, #measuring-guide-info-popup-trigger, #print-and-frame-size-info-popup-trigger,  #only-frame-size-info-popup-trigger {	    
	    cursor: pointer;
	}

	.custom_size_blank_note {
	    text-align: center;
	    font-style: italic;
	    display: block;
	    margin-bottom: 20px;
	    font-size: 0.9em;
	}
	

	
	

	/* INFO POPUP WINDOWS */
	/* Info popup are on popup-level2 (same as inch and fraction popup) */
	.popup-level2.info-popup {
	    padding: 20px;
	    background-color: #FFF;
    /*	    border: 2px solid orange;  */
	    border: 2px solid black;
	    width: 450px;
	    height: 325px;

	    overflow-y:auto;	    
	}


	/* special cases (need a bit more vertical space) */
	#more-info-mat-color-popup {
	    width: 500px;
	    height: 40%;
	    overflow-y:auto;	    
	}

	#more-info-frame-popup {
	    height: 450px;
	}

	#option-outer-size-and-opening-info-popup {
	    height: 400px;
	    width:  450px;
	}	
	
	/* mobile phone adjustments */
	@media screen and (max-width: 670px) {      
	    .popup-level2.info-popup {
		height: 45%;
		width:  90%;
	    }

	    #more-info-mat-color-popup {
		height: 75%;		
		width:  90%;
	    }

	    #more-info-frame-popup {
		height: 55%;		
		width:  90%;
	    }

	    #option-outer-size-and-opening-info-popup {
		height: 60%;		
		width:  90%;
	    }
	}


	/* Artwork upload (and separate print_and_frame intro page) 
	   This COVERS the ugly system file selector with a label paired to it. 
       */
      #cover_photo_name_on_pc {
	  cursor: pointer;
	  /* Style as you please, it will become the visible UI component. */
	  border: none;
	  padding: 15px 32px;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  font-size: 16px;
	  font-weight: 700;
	  text-decoration: none;
	  background-color: #105ca3;
	  color: #FFF;	  
      }

      #cover_photo_name_on_pc2 {
	  /* font: bold 11px Arial; */

	  padding: 2px 6px 2px 6px;
	  border-top: 1px solid #CCCCCC;
	  border-right: 1px solid #333333;
	  border-bottom: 1px solid #333333;
	  border-left: 1px solid #CCCCCC;
      }
  

      #photo_name_on_pc {
	  opacity: 0;
	  position: absolute;
	  z-index: -1;
      }