@charset "utf-8";

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Fonts
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@font-face { font-family: 'FONT_Poppins_Regular'; src: url('../fonts/Poppins.eot'); src: url('../fonts/Poppins.eot') format('embedded-opentype'), url('../fonts/Poppins.woff2') format('woff2'), url('../fonts/Poppins.woff') format('woff'), url('../fonts/Poppins.ttf') format('truetype'), url('../fonts/Poppins.svg#Poppins') format('svg'); }
@font-face { font-family: 'FONT_Poppins_SemiBold'; src: url('../fonts/PoppinsSemiBold.eot'); src: url('../fonts/PoppinsSemiBold.eot') format('embedded-opentype'), url('../fonts/PoppinsSemiBold.woff2') format('woff2'), url('../fonts/PoppinsSemiBold.woff') format('woff'), url('../fonts/PoppinsSemiBold.ttf') format('truetype'), url('../fonts/PoppinsSemiBold.svg#PoppinsSemiBold') format('svg'); }
@font-face { font-family: 'FONT_Poppins_Light_Italic'; src: url('../fonts/PoppinsLightItalic.eot'); src: url('../fonts/PoppinsLightItalic.eot') format('embedded-opentype'), url('../fonts/PoppinsLightItalic.woff2') format('woff2'), url('../fonts/PoppinsLightItalic.woff') format('woff'), url('../fonts/PoppinsLightItalic.ttf') format('truetype'), url('../fonts/PoppinsLightItalic.svg#PoppinsLightItalic') format('svg'); }

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Infrastructure
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
html, body { margin: 0; height: 100%; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-color: #FFF; }
body { display: flex; flex-direction: column; }
main { flex: 1; overflow: auto; height: inherit; }
section { height: 100%; overflow: auto; }
section:last-child { border: none; }
footer { font-family: 'FONT_Poppins_Regular'; font-size: 9pt; color: #FFF; background-color: #0E5D40; text-align: center; padding-top: 5px; padding-bottom: 2px; }

a { color: #000; }
a, input { outline: 0px; }
input[type=checkbox] { vertical-align: middle; position: relative; }
input[type=radio] {	vertical-align: middle; position: relative; bottom: 2px; }
select { font-family: 'FONT_Poppins_Regular'; font-size: 10pt; font-weight: normal; color: #000; text-decoration: none; text-align: left; }

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Admin Module - Login
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Login_Form_Container { width: 400px; height: max-content; margin-left: auto; margin-right: auto; margin-top: 40px; border: solid 1px #0E5D40; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; box-shadow: 2px 2px 10px #000; }
.Login_Form_Header { font-family: 'FONT_Poppins_SemiBold'; font-size: 16pt; text-align: center; text-transform: uppercase; margin-bottom: 20px; padding-top: 8px; padding-bottom: 8px; color: #FFF; background-color: #0E5D40; }
.Login_Form { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.Login_Form_Field_Container { width: max-content; display: flex; flex-direction: row; justify-content: center; margin-bottom: 10px; }
.Login_Field_Header { font-family: 'FONT_Poppins_SemiBold'; font-size: 11pt; font-weight: normal; color: #000; text-align: right; margin-right: 10px; width: 150px; height: 22px; float: left; display: inline; }
.Login_Field { font-family: 'FONT_Poppins_Regular'; font-size: 11pt; font-weight: normal; color: #000; width: 150px; height: 18px; padding-top: 2px; text-align: left; float: left; display: inline; }
.Login_Form_Button_Container { width: max-content; margin-left: auto; margin-right: auto; margin-top: 10px; margin-bottom: 10px; }
#order_subtotal { text-align: right; padding-right: 40px; }

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Admin Module - Order History
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#admin_order_history_start_date,#admin_order_history_end_date { width: 120px; height: 22px; background-image: url(../images/admin_icon_sprite_saltdental.webp); background-position: -68px -43px; background-repeat: no-repeat; /* background-size: auto; */ text-indent: 17px; padding-left: 8px; cursor: pointer; border: 1px solid #093C61; }
#admin_date_range_table { position: absolute; top: 25%; left: 50%; margin-left: -200px; width: 400px; max-width: 400px; height: auto; overflow: hidden; max-height: 350px; z-index: 5000; border: 1px outset #FFF; box-shadow: 1px 1px 10px #0E5D40; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }
#admin_date_range_table_header { font-family: "FONT_Poppins_Regular"; font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; background-color: #0E5D40; font-weight: bold; }
#admin_date_range_form_container { display: flex; flex-direction: column; justify-content: center; padding-top: 8px; padding-bottom: 8px; width: 100%; height: max-content; overflow: hidden; }
.admin_date_range_form_row_container { width: 100%; height: max-content; margin-bottom: 20px; display: flex; flex-direction: row; justify-content: center; }
.admin_date_range_form_field_header, .admin_date_range_form_field { font-family: 'FONT_Poppins_Regular'; font-size: 11pt; font-weight: normal; color: #000; width: 150px; height: 18px; }
.admin_date_range_form_field_header { width: 80px; }
.admin_date_range_button_container { display: flex; flex-direction: row; justify-content: center; }
.admin_date_range_button { font-family: "FONT_Poppins_Regular"; font-size: 12pt; color: #FFF; width: auto; height: auto; overflow: hidden; background-color: #0E5D40; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; cursor: pointer; border: 1px outset #0E5D40; box-shadow: 1px 1px 3px #0E5D40; }
#admin_filter_legend_container { position: absolute; top: 4px; left: 50%; width: 400px; height: max-content; max-height: 180px; background-color: #0E5D40; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; box-shadow: 2px 2px 10px #000; overflow: hidden; }
.admin_filter_legend_filters_container { width: inherit; height: max-content; padding: 4px; background-color: #FFF; }
.admin_filter_legend_header { width: inherit; padding: 3px; font-family: "FONT_Poppins_SemiBold"; font-size: 13pt; color: #FFF; background-color: #0E5D40; text-align: center; }
.admin_filter_legend_filter { width: inherit; padding-top: 2px; padding-bottom: 2px; font-family: "FONT_Poppins_Regular"; font-size: 11pt; color: #0E5D40; background-color: #FFF; line-height: 1.0; text-align: center; text-transform: uppercase; }

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Masthead
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Masthead { width: 100%; height: 142px; } 			/* Cart icon inside the masthead is defined under ICONS section below */
#Masthead_Admin { width: 100%; height: 298px; margin-bottom: 20px; } 			/* Cart icon inside the masthead is defined under ICONS section below */
#Masthead_Content { width: 490px; height: 142px; background-image: url(../images/salt_dental_collective_floating_logo_masthead.webp); }
#Masthead_Admin_Content { width: 800px; height: 298px; margin-left: auto; margin-right: auto; background-image: url(../images/admin_logo.webp);}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Main Menu

	https://stackoverflow.com/questions/38780690/how-to-create-submenu-in-drop-down-html-css
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
nav { height: 35px; margin: 0 0; padding: 0 0; background: #0E5D40; border-bottom: solid 2px #000; }
#menu { background: #0E5D40; color: #FFF; width: max-content; height: 35px; margin: 0 0; padding: 0 0; margin-left: auto; margin-right: auto; }
#menu ul, #menu li { margin: 0 0; padding: 0 0; list-style: none; }
#menu ul { width: max-content; height: 35px;}
#menu li { float: left; display: inline; position: relative; font: bold 10pt 'FONT_Poppins_Regular'; text-shadow: 0 -1px 0 #000; border-right: 1px solid #111; border-left: 1px solid #111; text-transform: uppercase; }
#menu li:first-child { border-left: 2px solid #111; }
#menu li:last-child { border-right: 2px solid #111;  }
#menu a { display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #EEE; }
#menu li:hover > a, #menu li a:hover { background: #111; cursor: pointer; }
#menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer; }
#menu label { font: bold 30px 'FONT_Poppins_Regular'; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center; }
#menu label span { font-size: 12px; position: absolute; left: 35px; }
#menu ul.menus { white-space: nowrap; height: auto; width: 180px; background: #111; position: absolute; z-index: 99; display: none; border: 0; box-shadow: 2px 2px 10px #000; }
#menu ul.menus li { display: block; width: 99%; font: 12px 'FONT_Poppins_Regular'; text-transform: none; }
#menu li:hover ul.menus { display: block; }
#menu a.highlighted { background: #00F; }				/* This highlights a menu header for the page it represents */
#menu a.arrow { padding: 0 27px 0 14px; }
#menu a.arrow::after { content: ""; width: 0; height: 0; border-width: 6px 5px; border-style: solid; border-color: #EEE transparent transparent transparent; position: absolute; top: 15px; right: 9px; }
#menu ul.menus { width: 180px; max-height: 450px; overflow-y: auto; overflow-x: hidden; }
#menu ul.menus a:hover { background: #00F; color: #FFF; }
#menu ul.menus .submenu { display: none; position: absolute; left: 180px; background: #111; top: 0; }
#menu ul.menus .submenu li { background: #111; }
#menu ul.menus .has-submenu:hover .submenu { display: block; }
#menu ul.menus#menu_brands { width: 225px; }
#menu ul.menus#admin_menu_brands { width: 400px; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Page Header Beneath Main Menu
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Page_Header { width: 100%; height: 33px; font-family: 'FONT_Poppins_SemiBold'; font-size: 16pt; text-align: center; text-transform: uppercase; margin-bottom: 20px; padding-top: 8px; padding-bottom: 8px; color: #FFF; background-color: #0E5D40; border-bottom: solid 2px #000; }
#Page_Header a,#Page_Header a:active { color: #FFF; text-decoration: none; }
#Page_Header a,#Page_Header a:active { color: #FFF; }
#Page_Header a:hover { background: #111; padding-left: 8px; padding-right: 8px; padding-top: 12px; padding-bottom: 12px; margin-left: -8px; margin-right: -8px; }
.center { display: flex; flex-direction: row; justify-content: center; align-items: center; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Page Sub Header Beneath Page Header
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Page_Subheader { width: 100%; height: 28px; font-family: 'FONT_Poppins_SemiBold'; font-size: 14pt; text-align: center; text-transform: uppercase; margin-bottom: 10px; padding-top: 8px; padding-bottom: 8px; color: #FFF; background-color: #0E5D40; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Icon Box
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Icon_Container,#Icon_Container_Products { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 20px; margin-bottom: 20px; }
#Icon_Container { cursor: pointer; }
#Icon_Container_Products { margin-top: 5px; }
.Icon_Box_Container,.Icon_Box_Container_Brands,.Icon_Box_Container_Products { width: 240px; height: max-content; overflow: hidden; border: 1px outset #0E5D40; box-shadow: 1px 1px 10px #0E5D40; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }
.Icon_Box_Container_Brands { display: flex; flex-direction: column; align-items: center; min-height: 210px; }
.Icon_Name { width: 100%; text-align: center; height: 50px; min-height: 50px; line-height: 1.25; font-family: 'FONT_Poppins_SemiBold'; font-size: 12pt; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; color: #FFF; background-color: #0E5D40; }
.Icon_Image_Container,.Icon_Image_Container_Brands { width: inherit; height: max-content; min-height: 210px; display: flex; flex-direction: column; align-content: center; justify-content: center; cursor: pointer; } 
.Icon_Image_Container { width:  210px; max-width:  210px; height: 210px; max-height: 210px; margin-left: auto; margin-right: auto; }
.Icon_Logo { width: 210px; height: 210px; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto; }
.Icon_Image { width: 210px; height: 210px; margin-left: auto; margin-right: auto; }
.No_Icons_Available { font-family: 'FONT_Poppins_SemiBold'; font-size: 14pt; font-weight: normal; color: #000; height: 20px; padding-top: 10px; padding-bottom: 30px; text-transform: uppercase; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Product Details
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Product_Detail_Container { width: max-content; min-width: 650px; height: max-content; overflow: hidden; margin-left: auto; margin-right: auto; }
	#Product_Detail_Header { width: 100%; height: max-content; min-height: 26px; font-family: 'FONT_Poppins_SemiBold'; font-size: 12pt; text-align: center; padding-top: 6px; padding-bottom: 4px; margin-bottom: 20px; color: #FFF; background-color: #0E5D40; border-bottom: solid 2px #000; }
	#Product_Detail_Content_Container { width: max-content; height: max-content; overflow: hidden; margin-left: auto; margin-right: auto; padding-bottom: 20px; }
	#Product_Detail_Image_Container { width: max-content; height: inherit; margin-left: 20px; margin-right: 40px; float: left; display: inline; }
	#Product_Detail_Info_Container { width: 100%; min-height: 176px; height: max-content; overflow: hidden; padding-bottom: 10px; border-top: solid 1px #0E5D40;}
	.Product_Detail_Info_Row_Container { display: flex; flex-direction: row; align-items: center; justify-content: center; padding-top: 10px; }
		.Product_Detail_Info_Entire_Row_Container { display: flex; flex-direction: row; align-items: center; justify-content: center; }
		.Product_Detail_Info_Entire_Row_Header { font-family: 'FONT_Poppins_SemiBold'; font-size: 10pt; text-align: center; }
		.Product_Detail_Info_Entire_Row_Description { width: 100%; height: max-content; font-family: 'FONT_Poppins_Regular'; font-size: 10pt; text-align: center; }
		.Product_Detail_Info_Row_Header { font-family: 'FONT_Poppins_SemiBold'; font-size: 10pt; padding-right: 4px; }
		.Product_Detail_Info_Row_Description { font-family: 'FONT_Poppins_Regular'; font-size: 10pt; }
	.Image_Frame { border: 1px solid #000; margin-bottom: 5px; box-shadow: 2px 2px 15px #000; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Buttons
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.Button { width: max-content; height: max-content; font-family: 'FONT_Poppins_Regular'; font-size: 12pt; text-align: center; padding-left: 6px; padding-right: 6px; padding-top: 2px; padding-bottom: 2px; color: #FFF; background-color: #0E5D40; cursor: pointer; border-radius: 5px; border: solid 1px #000; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Icons
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.Icon_PDF,.Icon_Shopping_Cart,.Icon_Delete,.Icon_Edit,.Icon_User,.Icon_PDF_Shopping_Cart,.Icon_Ordered_PDF { background-image: url(../images/icon_sprite_saltdental.webp); background-repeat: repeat-none; cursor: pointer; }
.Icon_Delete { width: 15px; height: 15px; background-position: -73px -28px; }
.Icon_Edit { width: 15px; height: 14px; background-position: -73px -14px; }
.Icon_PDF,.Icon_PDF_Shopping_Cart,.Icon_Ordered_PDF { width: 23px; height: 30px; background-position: -50px 0px; }
.Icon_Search { width: 15px; height: 14px; background-position: -73px 0px; }
.Icon_Shopping_Cart { position: absolute; right: 55px; top: 90px; width: 50px; height: 43px; background-position: 0px 0px; }
.Icon_User { position: absolute; right: 10px; top: 98px; width: 35px; height: 35px; background-position: 0px -43px; } 				/* This is used to logout */

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Shopping Cart
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Shopping_Cart { border-top-width: 1px; border-top-style: solid; border-top-color: #000; }
.Shopping_Cart_Border { border: 1px solid #093C61; margin-bottom: 20px; }
.Shopping_Cart_Field_Text_Error { font-family: 'FONT_Poppins_Regular'; font-size: 12px; font-weight: normal; color: #000; background-color: #FCF; border: 1px solid #900; }
.Shopping_Cart_Field_Header { font-family: 'FONT_Poppins_Regular'; font-size: 12px; font-weight: bold; color: #000; text-decoration: none; } 
.Shopping_Cart_Field_Text { font-family: 'FONT_Poppins_Regular'; font-size: 12px; font-weight: normal; color: #000; background-color: #FFF; border: 1px solid #999; }
.Shopping_Cart_Field_Select,.Shopping_Cart_Field_Select_Error { font-family: "FONT_Poppins_Regular"; font-size: 12pt; font-weight: normal; color: #000; text-decoration: none; border: 1px solid #BBB; background-color: #FFF; height: 26px; }
.Shopping_Cart_Field_Select_Error { border: 1px solid #900; background-color: #FCF; }

.Shopping_Cart_Column_Header { font-family: 'FONT_Poppins_SemiBold'; font-size: 11pt; font-weight: normal; color: #FFF; text-align: center; letter-spacing: 1.5pt; height: 14px; padding-top: 6px; padding-left: 10px; padding-right: 10px; background-color: #0E5D40; text-transform: uppercase; }
.Shopping_Cart_Cell,.Shopping_Cart_Cell_Missing_Info,.Shopping_Cart_Actions_Cell { font-family: 'FONT_Poppins_Regular'; font-size: 10pt; font-weight: normal; color: #000; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #333; border-left-color: #333; height: 20px; padding-top: 4px; padding-bottom: 4px; padding-left: 4px; text-transform: uppercase; }
.Shopping_Cart_Cell_Missing_Info { background-color: #FCF; }
.Shopping_Cart_Actions_Cell { border-right-width: 1px; border-right-style: solid; border-right-color: #000; }
.Shopping_Cart_Actions_Container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px; }
.Shopping_Cart_Quantity { width: 40px; font-family: 'FONT_Poppins_SemiBold'; text-align: center; }
.Shopping_Cart_Quantity_Select { width: 90px; font-family: 'FONT_Poppins_SemiBold'; }
.Shopping_Cart_Cell_Total { font-family: 'FONT_Poppins_Regular'; font-size: 12px; font-weight: normal; color: #000; text-align: right; }
#Shopping_Cart tr:nth-child(even) { background-color: #FFF; }				/* Zebra off */
#Shopping_Cart tr:nth-child(odd) { background-color: #DBE7E3; }			/* Zebra on */
#Shopping_Cart tr:last-child { background-color: transparent; }			/* Totals and buttons */
.Shopping_Cart_Empty { font-family: 'FONT_Poppins_SemiBold'; font-size: 14pt; font-weight: normal; color: #000; height: 20px; padding-top: 10px; padding-bottom: 30px; text-transform: uppercase; }
.Required_Fields { font-family: 'FONT_Poppins_Regular'; font-size: 7pt; font-weight: normal; }
.Shopping_Cart_Checkout_Section_Header { width: 100%; height: max-content; min-height: 34px; max-height: 140px; font-family: 'FONT_Poppins_SemiBold'; font-size: 12pt; text-align: center; padding-top: 6px; padding-bottom: 4px; color: #FFF; background-color: #0E5D40; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Orders
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Orders_Menu_Container,#Order_Detail_Container { min-width: 700px; border-top-width: 1px; border-top-style: solid; border-top-color: #000; }
.Orders_Menu_Column_Header { font-family: 'FONT_Poppins_Regular'; font-size: 12px; font-weight: normal; color: #FFF; text-align: center; letter-spacing: 1.5pt; height: 14px; padding-top: 6px; padding-left: 10px; padding-right: 10px; background-image: linear-gradient(#000,#444); text-transform: uppercase; }
.Orders_Menu_Cell,.Orders_Menu_Cell_Right,.Orders_Menu_Cell_Center,.Orders_Menu_Cell_Border_Right { font-family: 'FONT_Poppins_Regular'; font-size: 10pt; font-weight: normal; color: #000; text-align: left; border-bottom-width: 1px; border-left-width: 1px; border-bottom-style: solid; border-left-style: solid; border-bottom-color: #333; border-left-color: #333; height: 20px; padding-top: 4px; padding-bottom: 4px; padding-left: 4px; text-transform: uppercase; }
.Orders_Menu_Cell_Right { text-align: right; }
.Orders_Menu_Cell_Border_Right { border-right-width: 1px; border-right-style: solid; border-right-color: #000; text-align: right; }
.Orders_Menu_Cell_Center { text-align: center; }
#Orders_Menu_Container tr:nth-child(even),#Order_Detail_Container tr:nth-child(even) { background-color: #FFF; }			/* Zebra off */
#Orders_Menu_Container tr:nth-child(odd),#Order_Detail_Container tr:nth-child(odd) { background-color: #CCF; }				/* Zebra on */
#Order_Detail_Container tr:last-child { background-color:  #FFF; }				/* Totals */
.order_review_grid { border: 1px solid #000; }
.Order_Review_Missing_Info { background-color: #FCF; }						/* See order_review.php */

#General_Information_Container,#Shipping_Information_Container { min-width: 800px; border-style: solid; border-width: 1px; border-color: #000; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; box-shadow: 2px 2px 10px #000; }

.Order_Complete_Container { font-family: 'FONT_Poppins_Regular'; font-size: 10pt; font-weight: normal; color: #000; width: 80%; text-align: left; padding: 8px; margin-bottom: 30px; margin-left: auto; margin-right: auto; border-style: solid; border-width: 1px; border-color: #000; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; box-shadow: 2px 2px 10px #000; }

.Error_Form_Field { background-color: #FCF; border: 1px solid #900; font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: normal; color: #000; }
.Error_Message { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: bold; color: #FFF; background-color: #900; text-align: center; }
.Error_Message_Large { font-family: 'FONT_Poppins_Regular'; font-size: 16px; font-weight: bold; color: #FFF; background-color: #900; text-align: center; text-transform: uppercase; }

.Form_Header { font-family: FONT_Poppins_SemiBold; font-size: 12pt; font-weight: normal; color: #000; }
.Form_Header_Bold { font-family: FONT_Poppins_SemiBold; font-size: 16pt; font-weight: bold; color: #000; }
.Form_Header_Invalid { font-family: FONT_Poppins_SemiBold; font-size: 12pt; font-weight: bold; color: #FFF; background-color: #900; }
.Form_Row_Field { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: normal; color: #000; background-color: #FFF; border: 1px solid #CCC; }
.Form_Field_Error { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: normal; color: #000; background-color: #FCF; border: 1px solid #900; }
.Form_Field_Header { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: bold; color: #000; text-decoration: none; } 
.Form_Field_Text { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: normal; color: #000; }
.Form_Select { font-family: "FONT_Poppins_Regular"; font-size: 12pt; font-weight: normal; color: #424E6B; text-decoration: none; border: 1px solid #BBB; background-color: #FFF; height: 20px; }
.Form_Select_Invalid { font-family: "FONT_Poppins_Regular"; font-size: 12pt; font-weight: normal; color: #424E6B; text-decoration: none; border: 1px solid #900; background-color: #FCC; height: 20px; }

.Instructions,.Notes { font-family: 'FONT_Poppins_Regular'; font-size: 10px; font-weight: normal; color: #000; font-style: italic; text-transform: capitalize; text-decoration: none; }

.Invalid_Data { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: bold; color: #FFF; background-color: #900; text-align: center; }

.Error_Message_Container { padding: 5px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #D31043; width: auto; height: auto; }

.Confirmation_Box { border: 1px solid #000; width: max-content; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px; margin-bottom: 10px; }
.Confirmation_Text,.Confirmation_Number,.Confirmation_Header { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: normal; color: #000; text-align: center; margin-bottom: 20px; }
.Confirmation_Number,.Confirmation_Header { font-size: 14pt; font-weight: bold; margin-top: 20px; }
.Decline_Text { font-family: FONT_Poppins_SemiBold; color: #F00; font-size: 14pt; text-align: center; margin-bottom: 20px; }

.Order_Review_Container { width: max-content; height: max-content; overflow: hidden; margin-left: auto; margin-right: auto; display: flex; flex-direction: row; background-color: yellow; }
.Order_Review_Box { border: 1px solid #000; width: max-content; height: auto; margin-left: 10px; margin-right: 10px; padding-left: 10px; padding-right: 10px; margin-bottom: 10px; flex: 1; }
.Order_Review_Text,.Order_Review_Header { font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: normal; color: #000; text-align: center; margin-bottom: 20px; }
.Order_Review_Header { font-size: 14pt; font-weight: bold; margin-top: 20px; }

#Page_Not_Found_Container { width: max-content; height: max-content; overflow: hidden; margin-top: 50px; margin-left: auto; margin-right: auto; }
#Page_Not_Found { width: 528px; height: 310px; margin-left: auto; margin-right: auto; margin-top: 50px; background-image: url(../images/page_not_found.png); background-repeat: repeat-none; }
.Page_Not_Found_Instructions { font-family: 'FONT_Poppins_iBold'; font-size: 18pt; font-weight: normal; color: #000; width: 80%; text-align: center; padding: 8px; margin-top: 30px; margin-bottom: 20px; margin-left: auto; margin-right: auto; }

#image_preview_window { position: fixed; top: 50px; width: 800px; height: max-content; max-height: 750px; left: 50%; margin-left: -400px; border: 2px solid #000; z-index: 30000; background-color: #FFF; padding: 20px; overflow: auto; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Footer
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#Copyright { font-family: 'FONT_Poppins_Regular'; font-size: 8px; font-weight: bold; color: #999; text-decoration: none; text-align: center; width: 772px; height: 50px; float: left; }
.Copyright_Link { font-family: 'FONT_Poppins_Regular'; font-size: 8px; font-weight: bold; color: #999; text-align: center; text-decoration: underline; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Large Image View
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* .Larger_Image_Container { position: relative; left: 50%; float: left; height: max-content; } */ 
.Larger_Image_Container { display: flex; flex-direction: column; justify-content: center; align-content: center; width: max-content; margin-left: auto; margin-right: auto; }
.Larger_Image_Frame { /* position: relative; left: -50%; float: left; */ overflow: hidden; border: 1px solid #000; height: auto; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; behavior:url("border-radius.htc"); box-shadow: 2px 2px 15px #000; margin-top: 20px; margin-bottom: 20px; } /* overflow: hidden; forces the border-radius to clip the inner div Large_image */
.Larger_Image_Frame img { margin-left: auto; margin-right: auto; margin-bottom: -4px; } 	/* This fixed the gap on the bottom inside the image frame. */
.Large_Image { -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; -khtml-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; } /* radius: 8px 8px 0 0; helps with the corner clipping for this div */

.Return_to_Product_Page_Container { width: 100%; display: flex; flex-direction: row; justify-content: center; margin-bottom: 10px; }
.Proof_Accuracy_Message { font-family: 'FONT_Poppins_Regular'; font-size: 10px; font-style: italic; font-weight: normal; color: #900; text-decoration: none; text-align: center; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Tables
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.Grid,.Grid_Detail { width: max-content; height: max-content; max-height: 600px; margin-left: auto; margin-right: auto; border-width: 1px; border-style: solid; border-color: #0E5D40; border-spacing: 0px; margin-bottom: 20px; overflow: auto; display: block; margin: 0 auto; }
.Grid_Header { position: sticky; top: 0; vertical-align: bottom; font-family: 'FONT_Poppins_Regular'; font-size: 11pt; font-weight: bold; color: #FFF; background-color: #0E5D40;  text-align: center; cursor: pointer; }
.Grid_Header th { padding-left:10px; padding-right:10px; height: 20px; padding-top: 2px; }
.Grid tr:nth-child(2n+3),.Grid_Detail tr:nth-child(2n+3) { background-color: #C2D6CF; }
.Grid_Detail tr:last-child { background-color: #FFF; }
.Grid tr:nth-child(n+2):hover { background-color: #00F; color: #FFF; cursor: pointer; }
.Grid td,.Grid_Detail td { font-family: 'FONT_Poppins_Regular'; font-size: 10pt; font-weight: normal; border-width: 1px; border-style: solid; border-color: #0E5D40; height: 20px; padding-top: 6px; padding-bottom: 3px; padding-left: 4px; padding-right: 4px; }
.Grid_Cell_Right_Justify { text-align: right; }
.Grid_Cell_Center_Justify { text-align: center; }

/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	Messaging and Controls
------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#modal_shade { position: fixed; left: 0px; top: 0px; width:100%; height:100%; text-align:center; z-index: 4990; background-color: #000; opacity: .75; }
#sdc_alert_container, .sdc_alert_container, #sdc_please_wait_container, #sdc_error_container, #sdc_confirm_container { position: absolute; top: 25%; left: 50%; margin-left: -200px; width: 400px; max-width: 400px; height: auto; overflow: hidden; max-height: 350px; z-index: 5000; border: 1px outset #FFF; box-shadow: 1px 1px 10px #0E5D40; background-color: #FFF; -moz-border-radius: 8px; -webkit-border-radius: 8px; -khtml-border-radius: 8px; border-radius: 8px; }

/* Alert */
.sdc_alert_header,.sdc_error_header { font-family: "FONT_Poppins_Regular"; font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; background-color: #0E5D40; font-weight: bold; }
.sdc_alert_message { font-family: "FONT_Poppins_Regular"; font-size: 14pt; text-align: center; overflow-wrap: break-word; color: #0E5D40; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; }
.sdc_alert_button_container { display: flex; flex-direction: row; justify-content: center; }
.sdc_alert_actions,.sdc_alert_actions_date_range { font-family: "FONT_Poppins_Regular"; font-size: 12pt; color: #FFF; width: auto; height: auto; overflow: hidden; background-color: #0E5D40; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; float: left; display: inline; cursor: pointer; border: 1px outset #0E5D40; box-shadow: 1px 1px 3px #0E5D40; }

/* Error */
#sdc_error_container { color: #900; }
.sdc_error_header { font-family: "FONT_Poppins_Regular"; font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; background-color: #900; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; font-weight: bold; }
.sdc_error_message { font-family: "FONT_Poppins_Regular"; font-size: 14pt; text-align: center; overflow-wrap: break-word; color: #900; padding-top: 8px; padding-bottom: 8px; width: inherit; height: auto; overflow: hidden; }
.sdc_error_button_container { display: flex; flex-direction: row; justify-content: center; }
.sdc_error_actions { font-family: "FONT_Poppins_Regular"; font-size: 12pt; color: #FFF; width: auto; height: auto; overflow: hidden; background-color: #900; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; float: left; display: inline; cursor: pointer; border: 1px outset #0E5D40; box-shadow: 1px 1px 3px #0E5D40; }

/* Confirm */
.sdc_confirm_header { font-family: "FONT_Poppins_Regular"; font-size: 16pt; text-align: center; text-transform: uppercase; color: #FFF; padding: 8px; width: inherit; height: auto; overflow: hidden; background-color: #0E5D40; font-weight: bold; }
.sdc_confirm_question { font-family: "FONT_Poppins_Regular"; font-size: 14pt; text-align: center; color: #0E5D40; padding: 8px; width: inherit; height: auto; overflow: hidden; background-color: #FFF; }
.sdc_confirm_button_container { width: inherit; height: auto; overflow: hidden; text-align: center; padding: 8px; background-color: #FFF; }
.sdc_confirm_actions { font-family: "FONT_Poppins_Regular"; font-size: 12pt; color: #FFF; width: auto; height: auto; overflow: hidden; background-color: #0E5D40; padding-top: 2px; padding-left: 10px; padding-right: 10px; border-radius: 5px; margin-left: 5px; margin-right: 5px; margin-bottom: 20px; float: left; display: inline; cursor: pointer; border: 1px outset #0E5D40; box-shadow: 1px 1px 3px #0E5D40; }
#sdc_confirm_actions_container { width: max-content; height: 25px; margin-left: auto; margin-right: auto; margin-bottom: 5px; }

/* Please Wait */
#sdc_please_wait_container { display: none; } 
.spinner { position: relative; left: 50%; margin-left: -14px; height: 28px; width: 28px; animation: rotate 0.8s infinite linear; border: 8px solid #000; border-right-color: transparent; border-radius: 50%; }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.Numeric_3_Digit, .Alpha_Numeric_3_Digit, .Phone_AC, .Phone_EX { width: 26px; }
.Numeric_4_Digit, .Alpha_Numeric_4_Digit, .Phone_NM, .Quantity_Width,.Quantity_Width_Disabled { width: 32px; }
.Numeric_5_Digit, .Alpha_Numeric_5_Digit { width: 40px; }
.Numeric_6_Digit, .Alpha_Numeric_6_Digit { width: 48px; }
.Numeric_7_Digit, .Alpha_Numeric_7_Digit { width: 53px; }
.Numeric_10_Digit, .Alpha_Numeric_10_Digit { width: 100px; }
.Alpha_Numeric_250px { width: 250px; }
.Checkout_Comments_Field { width: 540px; height: 80px; font-family: 'FONT_Poppins_Regular'; font-size: 12pt; font-weight: normal; color: #000; background-color: #FFF; border: 1px solid #CCC; border: 1px solid #000; }
.Phone_AC, .Phone_EX { margin-right: 6px; }
.Quantity_Width { border: 1px solid #000; padding-left: 2px; padding-right: 2px; }
.Quantity_Width_Disabled { color: #999; background-color: #CCC; -moz-user-select: none; -ms-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border: 1px solid #888; padding-left: 2px; padding-right: 2px; }

.screenshot{ cursor: pointer; }

/* Pdf Preview - see saltdental.js proof_pdf_in_window for usage */
/* The preview windows have a style for each product type and dimension. This allows for a nice preview window that fits the product. */
iframe { padding-bottom: 20px; }

/* Displaying PDFs - Size will be added by jQuery based on the settings in the wysiwyg_main table */
#custom_generic_preview_window { position: absolute; top: 10px; background-color: #FFF; border: thin solid #000; visibility: visible; z-index: 6000; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; box-shadow: 2px 2px 15px #000; }
#Admin_PDF_Preview { display: flex; flex-direction: row; justify-content: center; }
iframe, object { -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }
#close_preview_window { text-align: center; margin-top: 4px; margin-bottom: 4px; }