/* General */

body, input, select {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    font-size: 97.5%;
    line-height: 1.4;
    color: #222;
    margin: 0;
    padding: 0;
}


input, select {
    max-width: 100%;
}

.colourbg{
    	background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
	background-size: 400% 400%;
	-webkit-animation: Gradient 15s ease infinite;
	-moz-animation: Gradient 15s ease infinite;
	animation: Gradient 15s ease infinite;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}


img{
    max-width: 100%;
}

#logo, .logo{
    width: 300px;
    display: block;
    margin: 0.5em auto;
}


a {color: #0e6cb6; text-decoration: none;}

/* Button Styles */

/* Present on all admin buttons (or links that act like buttons) */
.admButton, .button {
    display: inline-block;
    color: white;
    padding: 10px;
    border: none;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border-radius: 3px;
    font-family: 'Montserrat', sans-serif;
}

.admButton:hover {
    background: rgb(28, 184, 65);
}

/* General admin buttons (i.e. nav to another page) */
.actionBtn, .button {
    background: #0e6cb6;
}

/* For admin buttons that submit or create */
.createBtn {
    background: rgb(28, 184, 65);
}

/* For admin buttons that delete */
.deleteBtn, .logOut {
    background: rgb(202, 60, 60);
}

/* Inline 'save' button if the content hasn't been changed */
.inlineUneditedBtn {
    background: #555;
}

/* Inline 'save' button if the content has been changed */
.inlineEditedBtn {
    background: rgb(28, 184, 65);
}

.disabledBtn {
    background: grey;
    cursor: default;
    pointer-events: none;
}

/* Layout Styles */

#page_content_tierOptions {
    width: 100%;
}

#page_content_btn_payment {
    padding: 5px;
}

#tier_selection_heading {
    font-weight: bold;
    margin: 15px 0 10px 0;
}


.productCategoryDropdown {
    color:white;
    margin-left: 15px;
}

.productCategoryDropdown select {
    padding: 5px;
}

.productCategoryNameSection {
    margin-left: 50px;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: small;
    background-color: #dde8e9;
}

#admSection {
    margin: 0px;
    padding: 0px;
}

#admSectionHeader {
    background-color: #555;
    padding: 1em;
    border: 2px solid black
       
}

#admSectionHeader i{display: inline-block; font-size: 1.5em; padding-right: 0.25em;}

#admSectionHeader h3{
  color: white;
       
}

#admSectionHeaderLeft {
    width: 40%;
    display: inline-block;
}

#admSectionHeaderRight {
    display: inline-block;
    text-align: right;
}

#admSectionContent {
}
#frmNewIngredient, #frmEditIngredient, #frmNewProductType{display: flex; width: 100%; justify-content: space-between; vertical-align: middle; align-items: center; padding: 1em 0;}
.admInputRow label{display: block; margin: 0.25em auto; text-align: center;}
.admInputRow {display: inline-block;}

#admSectionContentLeft {
    width: 10%;
    display: inline-block;
}

#admSectionContentLeft select {
    min-width: 150px;
}

#admSectionContentRight {
    width: 40%;
    display: inline-block;
}

/* Registration Page */

#registration_form {
    max-height:800px;
    overflow:auto;
}

.registration_form_row {

}

.registrationErrorMessage {
    border: 1px solid black;
    padding: 10px 20px;
    max-width: 86%;
    background-color: #e1e1e1;
    text-align:center;
}

/* Form Styles */
.admInputRow input, .admInputRow select, .admInputRow textarea {
    font-family: 'Montserrat', sans-serif;
    font-size: 97.5%;
    line-height: 1.4;
    color: #222;
    max-width: 100%;
    padding: 5px;
}

.admInputColumn {
    display: inline-block;
    margin: 20px;
}

.admInputColumn select {
    min-width: 150px;
}

.admSelectOption {

}

#txtShortDescription {
    resize: none;
    min-width: 320px;
    min-height: 120px;
}

#txtLongDescription {
    min-width: 320px;
    min-height: 120px;
}

h1, .h1 {
    display: block;
    border-bottom: 1px solid #949494;
    max-width: 60%;
    color: #54576D;
    padding: 0.5em;
    text-align: center;
    margin: 0 auto
}

#admCurrentUserCount {
    font-size: small;
}

.ad_section {
   
    text-align: center;
    margin: 1em auto;
    width: 300px;
}

.advertisement {
    /*width: 300px;*/
    /*height: 300px;*/ 
   /* display: inline-block;*/
}

.ad_rotator {
    
}

.manage_ads_row_image {
    max-width: 100px;
}

#imgPreselectedAdImage {
    max-width: 100px;
    padding: 5px;
}

/* Login Page */
/*#login{position: relative; height: 100vh; width: 100vw;}*/
#loginContainer, #registration_form, #forgot_password_form, #payment_form {
    margin: 0 auto;
    max-width: 400px;
    position: absolute; 
      top: 49.8%;
    left: 49.8%;
    background: #eee;
    padding: 2em;
      transform: translate3d(-50%, -50%, 0);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);/*correction for IE9*/
     box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.6);
     width: 80%;
}

.loginLogo, .register_logo, .fp_logo, .payment_logo {
    margin-top: 50px
}

#btnLoginSubmit {

}

.loginRow input, .registration_form_row input, .forgot_password_form_row input, .payment_form_row input {
    font-family: Montserrat, sans-serif;
    font-size: 97.5%;
    line-height: 1.4;
    color: #222;
    max-width: 90%;
    padding: 5px;
    margin: 5px;
    width: 300px;
    /*-webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;*/
    width: 100%;
}

.submitRow {
    text-align: center;
    margin-top: 1em;
}

.logoArea{
   
    text-align: center;
    padding:  1em 0;
    background: #eee;
  /*  box-shadow: 0px 5px 10px 2px rgba(0,0,0,0.2);*/
    margin-bottom: 2em;
    width: 100%;
}

.logoArea img{display: block; margin: 1em  auto;}

.row{width: 90%; max-width: 1400px; margin: 0 auto; }
ul.dashboardOptions { /*display: flex;*/ width: 100%;  /*justify-content: space-between;*/ margin: 2em auto;}
.dashboardOptions li{
        width: 20%; /*17%;*/
        display: inline-block;
        margin: 15px;
        list-style-type: none;
        text-align: center;
        background: #0e6cb6;
        padding: 1em ;
        border-radius: 4px;
}

    .dashboardOptions li a {
        color: white;
      
    }

    .dashboardOptions li i{
       display: block;
        margin: 0.5em auto;
        font-size: 3em;
    }

   .dashboardOptions li:hover {
        color: white;
        background: rgb(28, 184, 65);
        border-radius: 4px;
    }
   

#alertMsg {
    color: red;
    padding: 5px;
    margin: 10px;
}

#payment_form_loading_panel {
    text-align: center;
    display: none;
}

#payment_form_content {
    text-align:center;
}

.btnPayPalPay
{
    border:solid 1px #777;
}

/* Admin data tables */
table {
    /*width: 50%;*/
    width: 100%;
}


th {
    font-weight: bold;
    border-bottom: 1px black solid;
    padding: 15px
}

tr {

}

tr:nth-child(even) {
  background-color: #80a9af45;
}


#tblProductTypeList td {
    padding: 15px;
    text-align: center;
    width: 10%;
}

td {   
    padding: 15px;
    text-align: center;    
}


/* User Dashboard */

#centered_content_container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#user_dashboard_container {
     margin: 0 auto;
    width: 500px;
    max-width: 80%;
    position: absolute;
      top: 49.8%;
    left: 49.8%;
    background: #eee;
    padding: 2em;
    text-align: center;
      transform: translate3d(-50%, -50%, 0);
      -moz-transform: translateX(-50%) translateY(-50%);
      -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);/*correction for IE9*/
     box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.6);
}

#user_dashboard_container_logo {
    text-align: center;
}

#user_dashboard_container_logo img {
    max-width: 300px;
}

.user_dashboard_container_row {
    padding: 15px;
}

.user_dashboard_container_row h2 {
    margin: 0px;
}

.user_dashboard_container_row select {
    padding: 8px;
    width:360px;
}

#user_dashboard_pt_submit {

}

/* Formula Creation Screen */

#create_formula_page_container {
    margin: auto;
    width: 75%;
    max-width: 900px;
    position: relative;

}

#create_formula_screen {
}


#it_selection_section {

}

#it_selection_title {

}

#it_selection_content {

}

#it_selection_warnings_area {
    display: block;
    border: 1px red solid;
    border-radius: 4px;
    margin: 15px;
}

.ingredient_type_item, .ingredient_type_item_qs {
    display: block;
    border: 1px #d6d6d6 solid;
    margin: 15px;
}

.ingredient_type_item_head {
    display: block;
    position: relative;
    /*background: #0e6cb6;*/
    color: #235;
    padding: 10px;
    background: #ececec;
}

.ingredient_type_item_percentage {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}

.ingredient_type_item_percentage_text {
    font-weight: bold;
}

.ingredient_type_item_percentage_subtext {
    display: block;
    font-size: x-small;
}

.ingredient_type_item_title {
    display: inline-block;
    vertical-align: middle;
    width: 240px; /* TODO: Remove width from here and align the select box to the right */
    font-weight: bold;
    color: #4c5369;
}

.ingredient_type_item_select {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    right: 0.5em;
    top: 0.45em
}

.ingredient_type_min_max_ingredients {
    display: inline-block;
    font-size: x-small;
}

.ingredient_type_item_button {
    width: 100px;
}

.ingredient_type_item_body {
    display: block;
}

.ingredient_type_item_alerts {
    border-top: 1px #cecece solid;
    padding: 15px
}

.it_alert {
    font-size: small;
    color: #07a92d;
    display: block;
}

.invalid_total {
    color: orangered;
}

.no_results_text {
    text-align: center;
    margin-top: 45px;
}

.ingredient_required {
    display: inline-block;
    font-size: small;
    background: orangered;
    padding: 5px;
    border-radius: 4px;
    margin-left: 10px;
}

#pt_alerts {
    display: block;
    color: #07a92d;
    text-align: center;
    padding: 15px;
}

.disabled_input {
    background: #ebebe4;
    pointer-events: none;
    border: 1px #a8a8a8 solid;
    padding: 6px;
}

/* Ingredient Selection Screen */

.ingredient_selection_screen_item {
    margin: 15px;
    border: 1px solid #0e6cb6;
    border-radius: 4px;
}

.ingredient_selection_item_title {
    padding: 15px;
    background: #0e6cb6;
    color: white;
}

.ingredient_selection_item_title h2, h3 {
    margin: 0px;
    display: inline-block;
}

.ingredient_selection_item_content_left {
    display: inline-block;
    vertical-align: top;
    /*padding: 0 15px 0 15px;*/
    border-right: 1px solid #0e6cb6;
    padding: 15px;
    width: 225px;
}

.ingredient_selection_item_content_right {
    display: inline-block;
    padding: 15px;
}

.ingredient_selection_item_content_description {
    padding: 0 15px 0 15px;
}

.ingredient_selection_item_content_select {
    padding: 15px;
}

.ingredient_selection_item_rel_title {
    font-weight: bold;
}

.is_restricted, .unfulfilled_dependency {
    font-weight: bold;
    color: orangered;
}

/* Selected Ingredient Row */

.selected_ingredient_row {
    padding: 15px;
}

.selected_ingredient_row_percentage {
    display: inline-block;
    margin-right: 15px;
    text-align: center;
    vertical-align: middle;
}

.selected_ingredient_row_percentage input {
    max-width: 70px;
    padding: 5px;
    text-align: center;
}

.sel_ingredient_percentage_input_subtext {
    display: block;
    font-size: x-small;
    padding: 5px;
}

.selected_ingredient_row_name {
    display: inline-block;
}

.selected_ingredient_row_remove {
    display: inline-block;
    float: right;
}

/* Admin Method Section */

#new_method_rule_section {
    padding: 15px;
}

#method_text_entry {
    width: 100%;
    height: 200px;
    resize: none;
}

.method_rule_option {
    display: block;
}

#method_rule_details_area {
    text-align: center;
    padding: 15px;
}

.method_rule_details_row {
    margin: 15px;
}

.method_rule_details_column {
    display: inline-block;
    width: 49%;
}

#method_rule_details_area select {
    vertical-align: middle;
}

/* User Method Section */

.method_step {
    display: block;
    border: solid 1px black;
    border-radius: 4px;
    
    margin: 10px;
}

.method_step_header_text {
    display: inline-block;
    padding: 15px;
}

.method_step_rule_description {
    font-size: smaller;
    border-top: 1px black solid;
    padding: 15px;
    background: #eee;
}

.method_step_header_buttons {
    display: inline-block;
    float: right;
    padding: 5px;
}

.method_rule_description {
    display: inline-block;
}

.rule_description_section {
    display: inline-block;
    width: 49%;
    
}

.method_step_edit {
}

.method_step_left_column {
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
}

.method_step_right_column {
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
}

.method_step_edit {

}

.method_step_pos {
    display: inline-block;
}

.method_step_text {
    display: inline-block;
}



.method_step_dependency_list {

}

.method_step_restriction_list {

}

.method_step_dependency_item {
    background: #555555;
    display: inline-block;
    padding: 7px;
    border-radius: 4px;
    margin: 5px;
    color: white;
    font-size: smaller;
}

.method_step_restriction_item {
    background: #555555;
    display: inline-block;
    padding: 7px;
    border-radius: 4px;
    margin: 5px;
    color: white;
    font-size: smaller;
}

#method_section_content {
    padding: 15px;
    text-align: center;
}

#dep_rule_ingredients, #res_rule_ingredients {
    min-width: 49%;
}

.emphasize_dependency {
    font-weight: bold;
    color: green;
    text-decoration: underline;
}

.emphasize_restriction {
    font-weight: bold;
    color: red;
    text-decoration: underline;
}

#method_steps {
    margin-bottom: 50px;
}

.formula_method_step_item {
    padding: 5px;
}

.formula_method_step_item p {
    padding: 0px;
    margin: 0px;
}

/*.method_step_number {
    display: inline-block;
}*/

.method_step_text {
    padding: 5px;
}

#disclaimer_section {
    margin: 15px;
    font-size: 13px;
}

#disclaimer_text {
    width: 100%;
    height: 350px;
}

#print_section {
    width: 100%;
    text-align: center;
}


#user_ingredient_sel_info_section {
    position: fixed;
    bottom: 50%;
    left: 15px;
    border: 4px #0e6cb6 solid;
    margin: 5px;
    border-radius: 4px;
    text-align: center;
    background: white;
    padding: 5px;
    display: none;
}

#user_ingredient_sel_info_minmax {
    padding: 5px;
}

#user_ingredient_sel_info_back {

}

#pt_admin_buttons {
    text-align: center;
    margin: 15px;
}


/***************************
RESPONSIVE DESIGN
****************************/
@media handheld, only screen and (min-width: 1500px) {

    #create_formula_page_container #it_selection_section  .ad_section {
        position: absolute;
        right: -320px;
        width: 300px;
    }


    #create_formula_page_container #it_selection_section #method_section .ad_section {
        position: absolute;
        bottom: 0;
        right: -320px;
    }
   
}




@media handheld, only screen and (min-width: 980px) and (max-width:1600px) { /*********** Laptop ***********/


}

@media handheld, only screen and (max-width: 1024px) {
    .dashboardOptions li {
        width: 50%;
        margin: 0.5em auto;
    }

     .dashboardOptions li i{
       display: inline-block;
        margin: 0.5em ;
    }

    ul.dashboardOptions{
        display: block;
        padding-left: 0;
    }


} 
	

@media handheld,only screen and (max-width: 1149px) { /*********** Tablet - Landscape ***********/


}

@media handheld,only screen and (max-width:981px) and (min-width: 550px){ /*********** Tablet - Portrait ***********/
	
	
}

@media handheld,only screen and (max-width:980px) {


}

@media handheld,only screen and (max-width:768px) { /*********** Tablet - Portrait ***********/



	
}

@media handheld,only screen and (max-width: 767px) and (min-width: 340px) { /*********** Larger Mobile Devices Only ***********/

}



@media handheld,only screen and (max-width: 400px) { /*********** Smaller Mobile Devices Only ***********/
	
	

}


@media handheld,only screen and (max-width: 481px) { /*********** Mobile Devices ***********/

}


@media print {
    body, p, h1, h2, h3, h4, ul, li, #disclaimer_section {
        font-size: 10pt !important;
        font-family: 'Times New Roman', serif;
    }

    #method_steps {
        margin-bottom: 0;
    }

    #print_section{
        display: none;
    }

    #disclaimer_section {
        font-size: 8pt!important;
    }

}