@CHARSET "UTF-8";
BODY{
    background-color:#ffffff; 
}

/* CSS */
.button-21 {
  align-items: center;
  appearance: none;
  background-color: #3EB2FD;
  background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
  background-size: calc(100% + 20px) calc(100% + 20px);
  border-radius: 100px;
  border-width: 0;
  box-shadow: none;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-flex;
  font-family: CircularStd,sans-serif;
  font-size: 1rem;
  height: auto;
  justify-content: center;
  line-height: 1.5;
  padding: 6px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s,background-position .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  vertical-align: top;
  white-space: nowrap;
}

.button-21:active,
.button-21:focus {
  outline: none;
}

.button-21:hover {
  background-position: -20px -20px;
}

.button-21:focus:not(:active) {
  box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
}

a.link_plz:link    { color:#e53300; background-color:transparent; text-decoration:none; font-family:verdana; font-size:12px;}
a.link_plz:visited { color:#e53300; background-color:transparent; text-decoration:none; font-family:verdana; font-size:12px;}
a.link_plz:hover   { color:#ffffff; background-color:#e53300; text-decoration:none; font-family:verdana; font-size:12px;}
a.link_plz:active  { color:#e53300; background-color:transparent; text-decoration:none; font-family:verdana; font-size:12px;}

.shopping-cart-button {
  padding: 1rem;
  background-color: $primary-color;

  &:hover {
    background-color: darken($primary-color, 10%)
  }

  i {
    margin-right: 0.5rem;
  }
}

.shopping-cart-dropdown-pane {
  .dropdown-pane {
    padding: 0;
  }
}

.shopping-cart-item {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid $light-gray;
}

.shopping-cart-item-name, .shopping-cart-item-price {
  padding: 0 1rem;

  p {
    margin: 0;
    padding: 0;
  }
}

.shopping-cart-title {
  font-weight: bold;
}

.shopping-cart-checkout {
  padding: 0.5rem;
  margin-bottom: 0;
}

.food_image_2 {
   	-moz-border-radius-topleft:10px;
   	-moz-border-radius-topright:10px;
   	-moz-border-radius-bottomleft:10px;
   	-moz-border-radius-bottomright:10px;
   	-webkit-border-top-left-radius:10px;
   	-webkit-border-top-right-radius:10px;
   	-webkit-border-bottom-left-radius:10px;
   	-webkit-border-bottom-right-radius:10px;
   	border-radius-top-left:10px;
   	border-radius-top-right:10px;
   	
	width: 50%;
	border: 1px solid #8d0215;
}

.food_image_f1 {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#FFFFFF;
	text-decoration:none;
}
.food_image_f2 {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#FFFFFF;
	text-decoration:none;
}
.food_image_f3 {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#FFFFFF;
	text-decoration:none;
}
.food_image_f4 {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#FFFFFF;
	text-decoration:none;
}

.food_image_pos{
    position: relative;
    left: 140px;
    bottom: 5px;
}
.food_image_pos1{
    position: relative;
    left: 140px;
    bottom: 5px;
}

.food_image_2_p {
   	-moz-border-radius-topleft:10px;
   	-moz-border-radius-topright:10px;
   	-webkit-border-top-left-radius:10px;
   	-webkit-border-top-right-radius:10px;
   	border-radius-top-left:10px;
   	border-radius-top-right:10px;
   	
	width: 70px;
	border: 1px solid #8d0215;
}
.food_image_2_p1 {   	
	width: 70px;
	border: 1px solid #8d0215;
}
.food_image_2_name {
   	-moz-border-radius-topleft:10px;
   	-moz-border-radius-topright:10px;
   	-webkit-border-top-left-radius:10px;
   	-webkit-border-top-right-radius:10px;
   	border-radius-top-left:10px;
   	border-radius-top-right:10px;
   	
	width: 170px;
	border: 1px solid #8d0215;
}
.food_image_2_name1 {   	
	width: 170px;
	border: 1px solid #8d0215;
}

.login_impressum {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#000000;
	text-decoration:none;
}

.login_shop {
	font-family:Verdana;
	font-weight:normal;
	font-size:11px;
	color:#FFFFFF;
	text-decoration:none;
}

.shop_address {
	font-family:Verdana;
	font-weight:normal;
	font-size:11px;
	color:#000000;
	text-decoration:none;
}

.impressum_1 {
	font-family:Verdana; font-size:12px; font-weight:bold;
}

.impressum_2 {
	font-family:Verdana; font-size:12px;
}

.round_corner {
  		-moz-border-radius:10px;
  		-webkit-border-radius:10px;
  		-khtml-border-radius:10px;
  		border-radius:10px;
}

.top_round_corner {
   	-moz-border-radius-topleft:5px;
   	-moz-border-radius-topright:5px;
   	-moz-border-radius-bottomleft:0px;
   	-moz-border-radius-bottomright:0px;
   	-webkit-border-top-left-radius:10px;
   	-webkit-border-top-left-radius:10px;
   	border-radius-top-left:10px;
}

 .shadow2 {
   width: 230px;
   height: 230px;
   border-radius: 10px;
   padding : 10px;
   background-color: white;
   margin-top: 10px;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   text-align: center;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }
 


/* CSS */
.button-22 {
  align-items: center;
  appearance: button;
  background-color: #0276FF;
  border-radius: 8px;
  border-style: none;
  box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  font-family: "RM Neue",sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  padding: 10px 21px;
  text-align: center;
  text-transform: none;
  transition: color .13s ease-in-out,background .13s ease-in-out,opacity .13s ease-in-out,box-shadow .13s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-22:active {
  background-color: #006AE8;
}

.button-22:hover {
  background-color: #1C84FF;
}

  .shadow3 {
   width: 130px;
   height: 200px;
   border-radius: 10px;
   padding : 10px;
   background-color: white;
   margin-top: 10px;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 10px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   text-align: center;

 }

.round_top_corner {
   	-moz-top-radius:10px;
   	-webkit-top-radius:10px;
   	-khtml-top-radius:10px;
   	top-radius:10px;
}

.styled_select {
   width: 200px;
   height: 34px;
   overflow: hidden;
   background: url(http://".DOMAIN."/PizzaOnline/pics/main/plz_button_00.jpg) no-repeat right #ddd;
}
		
.plz_option {
   padding: 11px  33px;
   background-image: url(http://".DOMAIN."/PizzaOnline/pics/main/plz_button_00.jpg);
   background-position: left;
   background-repeat: no-repeat;
}

.main_login {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#000000;
}
	
.color_select_box {
	float: right;
	background: #000000;
	color: #ed1c24;
}

.color_select_box_style select {
   background: #000000;
   color: #ed1c24;
   width: 150px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #ed1c24;
   height: 34px;
}

.color_select_box_style_2 {
   position:absolute;
   right;
}

.login_logo { font-family:Verdana; font-size:21px; font-weight:bold; }
.login_link { font-family:Verdana; font-size:11px; color:blue;}
.login_name { font-family:Verdana; font-size:14px; }

.infoBox {
	color: #333;
	position: absolute;
	top: 10%;
	left: 25%;
	width: 650;
	height: 70%;
	padding: 1em;
	text-align: left;
	z-index:1001;
	border-radius: 10px;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
}

#infoBoxBg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	background-color:#000000;
	-moz-opacity: 0.5;
	opacity:.50;
	filter: alpha(opacity=50);
}

.font1 {
	color: blue;
	font-size:18px;
	font-family:Verdana;
	font-weight:bold;
}
.font2 {
	color: black;
	font-size:12px;
	font-family:Verdana;
	font-weight:normal;
}

.select1 {
	width: 78px;
	height: 21px;
	padding: 0 1px 0 1px;
	color: #000;
	font: 12px/21px arial,sans-serif;
	overflow: hidden;
}
.select2 {
	width: 130px;
	height: 21px;
	padding: 0 1px 0 1px;
	color: #000;
	font: 12px/21px arial,sans-serif;
	overflow: hidden;
}

.btn { 
	color:#050; 
	font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
	background-color:#fed; 
	border:1px solid; 
	border-color: #696 #363 #363 #696; 
}

.btn_order { 
	color:#050; 
	font: bold 94% 'trebuchet ms',helvetica,sans-serif; 
	background-color:#fed; 
	border:1px solid; 
	border-color: #696 #363 #363 #696; 
}

.login_0 {
	font-family:Verdana;
	font-weight:normal;
	font-size:11px;
	color:#000000;
}

.login_1 {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#B40404;
}

.login_2 {
	font-family:ariel;
	font-weight:normal;
	font-size:11px;
	color:#FE2E2E;
}

.user_textfield_red {
	border: #FE2E2E;
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	width: 160px;
	background-color:#fbc9c9;
}

.user_textfield_01_red {
	border: #FE2E2E;
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	width: 243px;
	background-color:#fbc9c9;
}

.user_textfield_02_red {
	border: #FE2E2E;
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	width: 76px;
	background-color:#fbc9c9;
}

.plz_dropdown{			
	border: 1px solid #FF8450;
	position:absolute;
}

.register_tf {
	border: #D8D8D8;
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	width: 165px;
	background-color:#FFFFFF;
}

.register_tf_red {
	border: #FE2E2E;
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	width: 165px;
	background-color:#FFFFFF;
}

.register_mistake {
	border: #FE2E2E;
	border-style: solid; 
	border-top-width: 2px; 
	border-right-width: 2px; 
	border-bottom-width: 2px; 
	border-left-width: 2px;
	background-color:#FFFFFF;
}

#rand10 {
	border-collapse: collapse;  			
	border: 1px solid #000000;
}
#rand11 {
	border-collapse: collapse;  			
	border: 1px solid #FF8450;
}

a.menu_10 { display:block; margin-bottom:1px; text-align:center; width: 120px; height: 14px;
       border-style:ridge; border-width:1px; padding:1px;
       font: bold 80% 'trebuchet ms',helvetica,sans-serif; text-decoration:none; }

a.menu_10:link    { color:#A4A4A4; background-color:transparent; }
a.menu_10:visited { color:#A4A4A4; background-color:transparent; }
a.menu_10:hover   { color:#A4A4A4; background-color:transparent; }
a.menu_10:active  { color:#A4A4A4; background-color:#a03; }

a.close_btn { display:block; margin-top:0px; text-align:center; width: 20px; height: 12px;
   border-style:ridge; border-width:1px; padding:0px;
   font: 70% helvetica,sans-serif; text-decoration:none; }
a.close_btn:link    { color:#00f; background-color:transparent; }
a.close_btn:visited { color:#00f; background-color:transparent; }
a.close_btn:hover   { color:#ff0; background-color:#00f; }
a.close_btn:active  { color:#ff0; background-color:#a03; }

a.close_btn1 { display:block; margin-top:0px; text-align:center; width: 120px; height: 20px;
   border-style:ridge; border-width:1px; padding:0px;
   font: 70% helvetica,sans-serif; text-decoration:none; }
a.close_btn1:link    { color:#00f; background-color:transparent;font-size:14px; text-decoration:bold;}
a.close_btn1:visited { color:#00f; background-color:transparent; font-size:14px; text-decoration:bold;}
a.close_btn1:hover   { color:#ff0; background-color:#00f;font-size:14px; text-decoration:bold;}
a.close_btn1:active  { color:#ff0; background-color:#a03;font-size:14px; text-decoration:bold;}

a.order_btn { display:block; margin-top:1px; text-align:center; width: 120px; height: 14px;
   border-style:ridge; border-width:1px; padding:1px;
   font: 90% helvetica,sans-serif; text-decoration:bold; }
a.order_btn:link    { color:#00f; background-color:transparent; }
a.order_btn:visited { color:#00f; background-color:transparent; }
a.order_btn:hover   { color:#ff0; background-color:#00f; }
a.order_btn:active  { color:#ff0; background-color:#a03; }

a.new_address { display:block; margin-top:0px; text-align:center; width: 150px; height: 14px;
   border-style:ridge; border-width:1px; padding:0px;
   font: 70% helvetica,sans-serif; text-decoration:none; }
a.new_address:link    { color:#00f; background-color:transparent; }
a.new_address:visited { color:#00f; background-color:transparent; }
a.new_address:hover   { color:#ff0; background-color:#00f; }
a.new_address:active  { color:#ff0; background-color:#a03; }

.bg {
	background-image: url(/PizzaOnline/pics/back_07.jpg);
	background-repeat:no-repeat;
	background-position: top left;
	width:738px; height:60px;
	border: 0;
}

.box-shadow {
	-moz-box-shadow: 5 5 5px #781700; /* Firefox */
    -webkit-box-shadow: 2px 2px 4px 1px #fff;
    box-shadow: 2px 2px 4px 1px #fff;
}

@import "compass/css3";

/*
I wanted to go with a mobile first approach, but it actually lead to more verbose CSS in this case, so I've gone web first. Can't always force things...

Side note: I know that this style of nesting in SASS doesn't result in the most performance efficient CSS code... but on the OCD/organizational side, I like it. So for CodePen purposes, CSS selector performance be damned.
*/

/* Global settings */
$color-border: #eee;
$color-label: #aaa;
$font-default: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-bold: 'HelveticaNeue-Medium', 'Helvetica Neue Medium';


/* Global "table" column settings */
.product-image { float: left; width: 20%; }
.product-details { float: left; width: 37%; }
.product-price { float: left; width: 12%; }
.product-quantity { float: left; width: 10%; }
.product-removal { float: left; width: 9%; }
.product-line-price { float: left; width: 12%; text-align: right; }


/* This is used as the traditional .clearfix class */
.group:before,
.group:after {
    content: '';
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1;
}


/* Apply clearfix in a few places */
.shopping-cart, .column-labels, .product, .totals-item {
  @extend .group;
}


/* Apply dollar signs */
.product .product-price:before, .product .product-line-price:before, .totals-value:before {
  content: '$';
}


/* Body/Header stuff */
body {
  padding: 0px 30px 30px 20px;
  font-family: $font-default;
  font-weight: 100;
}

h1 {
  font-weight: 100;
}

label {
  color: $color-label;
}

.shopping-cart {
  margin-top: -45px;
}


/* Column headers */
.column-labels {
  label {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid $color-border;
  }
  
  .product-image, .product-details, .product-removal {
    text-indent: -9999px;
  }
}


/* Product entries */
.product {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid $color-border;
  
  .product-image {
    text-align: center;
    img {
      width: 100px;
    }
  }
  
  .product-details {
    .product-title {
      margin-right: 20px;
      font-family: $font-bold;
    }
    .product-description {
      margin: 5px 20px 5px 0;
      line-height: 1.4em;
    }
  }
  
  .product-quantity {
    input {
      width: 40px;
      
    }
  }
  
  .remove-product {
    border: 0;
    padding: 4px 8px;
    background-color: #c66;
    color: #fff;
    font-family: $font-bold;
    font-size: 12px;
    border-radius: 3px;
  }
  
  .remove-product:hover {
    background-color: #a44;
  }
}


/* Totals section */
.totals {
  .totals-item {
    float: right;
    clear: both;
    width: 100%;
    margin-bottom: 10px;
    
    label {
      float: left;
      clear: both;
      width: 79%;
      text-align: right;
    }
    
    .totals-value {
      float: right;
      width: 21%;
      text-align: right;
    }
  }
  
  .totals-item-total {
    font-family: $font-bold;
  }
}

.checkout {
  float: right;
  border: 0;
  margin-top: 20px;
  padding: 6px 25px;
  background-color: #6b6;
  color: #fff;
  font-size: 25px;
  border-radius: 3px;
}

.checkout:hover {
  background-color: #494;
}

/* Make adjustments for tablet */
@media screen and (max-width: 650px) {
  
  .shopping-cart {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid $color-border;
  }
  
  .column-labels {
    display: none;
  }
  
  .product-image {
    float: right;
    width: auto;
    img {
      margin: 0 0 10px 10px;
    }
  }
  
  .product-details {
    float: none;
    margin-bottom: 10px;
    width: auto;
  }
  
  .product-price {
    clear: both;
    width: 70px;
  }
  
  .product-quantity {
    width: 100px;
    input {
      margin-left: 20px;
    }
  }
  
  .product-quantity:before {
    content: 'x';
  }
  
  .product-removal {
    width: auto;
  }
  
  .product-line-price {
    float: right;
    width: 70px;
  }
  
}
tr.border_bottom td {
  border-bottom: 1px solid rgb(192, 192, 192);
}


/* Make more adjustments for phone */
@media screen and (max-width: 350px) {
  
  .product-removal {
    float: right;
  }
  
  .product-line-price {
    float: right;
    clear: left;
    width: auto;
    margin-top: 10px;
  }
  
  .product .product-line-price:before {
    content: 'Item Total: $';
  }
  
  .totals {
    .totals-item {
      label {
        width: 60%;
      }
      
      .totals-value {
        width: 40%;
      }
    }
  }
}