/* 
   Confirm_Order_Both.less

   CSS Support for The Headers and Footers

    Created on : Apr 13, 2017
    Author     : Daniel Lindsey
*/
/* Define Standard Colors, etc. */
/*
    Styles for Charter Funerals Online Memorial Day Flowers Sale
    
    Written by Daniel Lindsey, 4/2017
    
    For: Charter Funerals
    
    These definitions are used for both Mobile and Desktop Versions
*/
/* Define Standard Colors, etc. */
/* Define Standard Font Vars, etc. */
/* Define some standard spacing */
/*
    
    STANDARD SETUP THAT WORKS FOR BOTH
    
*/
html {
  margin: 0;
  padding: 0;
}
body {
  display: block;
  width: 100%;
  min-height: 200px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
  color: black;
  background-color: #699eff;
  /* Standard Font & Size */
  font-size: 16px;
  font-family: 'Arial', 'Verdana', 'Sans';
}
a {
  text-decoration: none;
}
#Both_DisplayTopic_Left h1,
#Both_DisplayTopic_Left h2,
#Both_DisplayTopic_Left h3,
#Both_DisplayTopic_Left h4,
#Both_DisplayTopic_Left h5,
#Both_DisplayTopic_Left h6 {
  font-family: 'Arial', 'Verdana', 'Sans';
}
h1 {
  font-size: 1.2rem;
  font-weight: bold;
}
h2 {
  font-size: 1rem;
  font-weight: bold;
}
h3 {
  font-size: .8rem;
  font-weight: bold;
}
h4 {
  font-size: .6rem;
  font-weight: bold;
}
@media screen and (min-width: 640px) {
  h1 {
    font-size: .6rem;
    font-weight: bold;
  }
  h2 {
    font-size: .5rem;
    font-weight: bold;
  }
  h3 {
    font-size: .4rem;
    font-weight: bold;
  }
  h4 {
    font-size: .3rem;
    font-weight: bold;
  }
}
.hidden {
  display: none !important;
}
.centered {
  text-align: center;
}
.bold {
  font-weight: bold;
}
.times {
  font-family: 'Times New Roman', 'Georgia', 'Times', 'Serif';
}
.italic {
  font-style: italic;
}
.red {
  color: red;
}
#Form_Error_Message {
  display: none;
}
#Form_Error_Message.Show {
  display: block;
  width: 100%;
  margin-bottom: .5rem;
  color: red;
  font-size: 1rem;
  font-weight: bold;
  font-style: normal;
}
.Item_Error_Message {
  display: none;
}
.Item_Error_Message.Show {
  display: block;
  width: 100%;
  color: red;
  font-size: 1rem;
  font-weight: bold;
  font-style: normal;
}
#Placement_Note_Error_Message {
  display: none;
}
#Placement_Note_Error_Message.Show {
  display: block;
  width: 100%;
  color: red;
  font-size: .75rem;
  font-weight: bold;
  font-style: normal;
}
#Contact_Info_Error_Message {
  display: none;
}
#Contact_Info_Error_Message.Show {
  display: block;
  width: 100%;
  color: red;
  font-size: 1rem;
  font-weight: bold;
  font-style: normal;
}
#Select_Body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Arial', 'Verdana', 'Sans';
  text-align: center;
}
#Directions_Container {
  display: block;
  width: 95%;
  margin: .75rem auto;
  background-color: #dbf9db;
  border: .1rem solid black;
  border-radius: .2rem;
}
#Directions_Title {
  display: inline-block;
  width: 100%;
  margin: .2rem auto .2rem;
  color: black;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}
#Directions_List {
  display: block;
  width: 90%;
  margin: .5rem auto 0;
  font-size: .7rem;
  font-weight: bold;
  text-align: left;
}
.Directions_ListItem {
  margin-bottom: .2rem;
}
.Directions_Note {
  display: block;
  width: 90%;
  box-sizing: border-box;
  color: #942020;
  font-size: .3rem;
  font-style: italic;
  font-weight: bold;
}
.Directions_Text {
  display: block;
  width: 90%;
  margin: 0 auto .5rem;
  font-size: .3rem;
  font-weight: bold;
  text-align: center;
}
#Order_Summary_Container {
  width: 70%;
  margin: 0 auto .5rem;
  padding: .3rem .5rem;
  background: white;
  font-size: .7rem;
  border: .1rem solid black;
}
.Order_Summary_Item {
  width: 100%;
  margin: 0 auto;
}
.Order_Summary_Line {
  display: block;
  width: 100%;
  height: .06rem;
  background-color: black;
}
.Order_Summary_Label {
  display: block;
  width: 45%;
  float: left;
  text-align: right;
  box-sizing: border-box;
}
.Order_Summary_Amount {
  display: block;
  width: 30%;
  margin-left: 2%;
  float: left;
  text-align: right;
  box-sizing: border-box;
}
#Form_Container {
  display: block;
  width: 100%;
  margin: 1rem auto;
}
/*//--------------------------------------------------------------------------------------
//
// Items: Flower Products ...
//
//--------------------------------------------------------------------------------------

#Items_Container
{
   width: 96%;
   margin: 0 auto;
   overflow: hidden;
}

.Item_Container
{
   width: 100%;
   float: left;
   margin: 0 2.5%;
}

#Bouquet.Flower_Image
{
   display: block;
   margin: -8rem auto 0 auto;
   width: 60%;
}

#Vase.Flower_Image
{
   display: block;
   margin: .5rem auto 0 auto;
   width: 60%;
   //height: 3rem;
}

#Wreath.Flower_Image
{
   display: block;
   margin: .5rem auto 0 auto;
   width: 60%;
   //height: 3rem;
}

#Easel.Flower_Image
{
   display: block;
   margin: 0rem auto 0 auto;
   width: 60%;
   //height: 3rem;
}

.Item_Description
{
   display: inline-block;
   width: 100%;
   height: .5rem;
   font-size: 1rem;
   font-weight: bold;
   text-align: center;

}

.Item_Price
{
   display: inline-block;
   width: 100%;
   font-size: 1rem;
   font-weight: bold;
   text-align: center;
}

.Item_Quantity
{
   display: inline-block;
   width: 100%;
   margin: 0 auto;

   font-size: .75rem;
   font-weight: bold;
   text-align: center;
}

.Item_Container input
{
    display: inline;
    width: 2rem;

}*/
#SendOrder_Button {
  display: block;
  margin: 1rem auto;
  padding: .4rem;
  color: white;
  background-color: green;
  font-size: 1.5rem;
  font-weight: bold;
  border: 2px solid black;
  border-radius: 8px;
}
#SendOrder_Button:hover {
  background-color: #30df32;
  cursor: pointer;
}
#SendOrder_Button.disabled {
  background-color: #ddd;
  cursor: pointer;
}
@media screen and (min-width: 640px) {
  #Form_Container {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  #Directions_Container {
    display: block;
    width: 85%;
    margin: .75rem auto;
    background-color: #dbf9db;
    border: .1rem solid black;
    border-radius: .2rem;
  }
  #Directions_Title {
    display: inline-block;
    width: 100%;
    margin: .2rem auto .2rem;
    color: black;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
  }
  #Directions_List {
    display: block;
    width: 12.5rem;
    margin: 0 auto;
    font-size: .47rem;
    font-weight: bold;
    text-align: left;
  }
  .Directions_ListItem {
    margin-bottom: .2rem;
  }
  .Directions_Note {
    display: block;
    color: #942020;
    font-size: .3rem;
    font-style: italic;
    font-weight: bold;
  }
  .Directions_Text {
    display: block;
    width: 90%;
    margin: 0 auto .5rem;
    font-size: .3rem;
    font-weight: bold;
    text-align: center;
  }
  .Instruction_Container {
    width: 100%;
    margin-top: .75rem;
    margin-bottom: .3rem;
    text-align: left;
    box-sizing: border-box;
    padding: .1rem .5rem;
  }
  .Instruction_Number {
    color: #e6aa44;
    font-size: 1rem;
  }
  .Instruction_Title {
    color: #e6aa44;
    font-size: 1rem;
  }
  .Instruction_Rule {
    width: 100%;
    height: 0.1rem;
    background-color: blue;
  }
  .Instruction_Text {
    font-family: 'Arial', 'Verdana', 'Sans';
    font-size: .5rem;
    font-style: italic;
    font-weight: bold;
  }
  #Items_Container {
    display: block;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .Item_Container {
    display: block;
    width: 20%;
    float: left;
    margin: 0 2.5%;
  }
  .Flower_Image {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 80%;
  }
  #Bouquet.Flower_Image {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 80%;
  }
  #Vase.Flower_Image {
    display: block;
    margin: .89rem auto 0 auto;
    width: 80%;
    height: 80%;
  }
  #Wreath.Flower_Image {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 80%;
  }
  #Easel.Flower_Image {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: 80%;
  }
  .Item_Description {
    display: inline-block;
    width: 100%;
    height: 1rem;
    margin: .2rem 0;
    font-size: .5rem;
    font-weight: bold;
    text-align: center;
  }
  .Item_Price {
    display: inline-block;
    width: 100%;
    font-size: .5rem;
    font-weight: bold;
    text-align: center;
  }
  .Item_Quantity {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    font-size: .375rem;
    font-weight: bold;
    text-align: center;
  }
  .Item_Container input {
    display: inline;
    width: .8rem;
  }
  .Placement_Instructions {
    display: block;
    width: 75%;
    margin: 0 auto .3rem auto;
    text-align: left;
  }
  .Placement_Instruction {
    color: red;
    font-size: .5rem;
  }
  #Placement_Note_Input {
    display: block;
    width: 80%;
    height: 5rem;
    margin: 0 auto 0 auto;
    padding: .05rem;
    font-size: .48rem;
    box-sizing: border-box;
    border: .2rem solid #333;
    border-radius: .3rem;
  }
  #Contact_Info_Container {
    display: block;
    width: 72%;
    overflow: hidden;
    margin: .64rem auto .64rem auto;
    padding-top: .25rem;
    padding-bottom: .25rem;
    background-color: #ddd;
    border: .2rem solid black;
    border-radius: .3rem;
  }
  #Contact_Info_Title {
    display: inline-block;
    width: 100%;
    margin-bottom: .25rem;
    padding: 0;
    font-size: .95rem;
    font-weight: bold;
    text-align: center;
  }
  .Contact_Info_Label {
    display: block;
    width: 23%;
    float: left;
    font-size: 0.5rem;
    font-weight: bold;
    text-align: right;
  }
  .Contact_Info_Input {
    display: block;
    float: left;
    margin-left: .2rem;
    box-sizing: border-box;
    font-size: 0.5rem;
    text-align: left;
  }
  .Contact_Info_Input.Error {
    border: .05rem solid red;
  }
  #Contact_Info_Name_Input {
    display: inline-block;
    font-size: 0.5rem;
    text-align: left;
  }
  #Contact_Info_Email_Input {
    display: inline-block;
    font-size: 0.5rem;
    text-align: left;
  }
  #Contact_Info_Phone_Input {
    display: inline-block;
    font-size: 0.5rem;
    text-align: left;
  }
  #Contact_Info_Address_Title {
    display: inline-block;
    width: 100%;
    padding: .25rem 0 .25rem 0;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
  }
  .Contact_Info_Container input {
    display: inline-block;
    font-size: 0.5rem;
    text-align: left;
  }
  #Contact_Info_Name_Input {
    display: inline-block;
    font-size: 0.5rem;
    text-align: left;
  }
  #Contact_Info_Email_Input {
    display: inline-block;
    font-size: 0.5rem;
    text-align: left;
  }
  #Contact_Info_Phone_Input {
    display: inline-block;
    font-size: 0.5rem;
    text-align: left;
  }
  #Contact_Info_Address_Title {
    display: inline-block;
    width: 100%;
    padding: .32rem 0 .25rem .25rem;
    font-size: 0.5rem;
    font-weight: bold;
    text-align: left;
  }
  #SendOrder_Button {
    display: block;
    margin: 1rem auto 0 auto;
    padding: .3rem .5rem;
    color: white;
    background-color: green;
    font-size: .6rem;
    font-weight: bold;
    border: .1rem solid black;
    border-radius: 0.5rem;
  }
  #SendOrder_Button:hover {
    background-color: #30df32;
    cursor: pointer;
  }
}