button.banner_menu_dn #option_left {
    background:var(--buttonmenudown);
    border-radius: 18px;
    height: 28px;
    line-height: 28px;
    border: solid 2px var(--buttonmenudownborder);
}
button.banner_menu_dn #option_middle {
    background:none;
    color: var(--buttonmenudownfont);
}
button.banner_menu_dn #option_right {
    background:none;
}
button.banner_menu_up:hover #option_left {
    background:var(--buttonmenuhover);
    border-radius: 18px;
    height: 28px;
    line-height: 28px;
    border: solid 2px var(--buttonmenuhoverborder);
}
button.banner_menu_up:hover #option_middle {
    background:none;
    color: var(--buttonmenuhoverfont);
}
button.banner_menu_up:hover #option_right {
    background:none;
}
button.banner_menu_up #option_left {
    background:var(--buttonmenuup);
    border-radius: 18px;
    height: 28px;
    line-height: 28px;
    border: solid 2px var(--buttonmenuupborder);
}
button.banner_menu_up #option_middle {
    background:none;
    color: var(--buttonmenuupfont);
}
button.banner_menu_up #option_right {
    background:none;
}
button.banner_menu_up #logout {
    position: relative;
    background:var(--buttonmenuup);
    color: var(--buttonmenuupfont);
    border-radius: 18px;
    height: 28px;
    line-height: 28px;
    border: solid 2px var(--buttonmenuupborder);
}

button.banner_menu_up #logout:before, button.banner_menu_up #logout:after {
    position: absolute;
    left: 50%;
    content: ' ';
    height: 85%;
    width: 3px;
    background-color: var(--buttonmenuupfont);
}

button.banner_menu_up #logout:before {
    transform: rotate(45deg);
}

button.banner_menu_up #logout:after {
    transform: rotate(-45deg);
}

button.banner_menu_up:hover #logout {
    background:var(--buttonmenuhover);
    color: var(--buttonmenuhoverfont);
    border-radius: 18px;
    height: 28px;
    line-height: 28px;
    border: solid 2px var(--buttonmenuhoverborder);
}

button.banner_menu_up #logout:hover:before, button.banner_menu_up #logout:hover:after {
    background-color: var(--buttonmenuhoverfont);
}

div #banner_tool_container{
    border: none;
}

#banner_menu_container div.generic_options_button button.generic_options_button {
    color: transparent;
    background: var(--buttonup) url(../../../images/core/switch.png) no-repeat center center;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin-top: 2px;
    border-radius: 18px;
    border: solid 2px var(--buttonupborder);
    box-sizing: content-box;
}

#banner_menu_container div.generic_options_button button.generic_options_button:hover {
    background: var(--buttondown) url(../../../images/core/switch.png) no-repeat center center;
    border: solid 2px var(--buttondownborder);
}

.application button.event_class_SharedPetCremationEvent::before{
    
}

a:link.banner_menu_call_us {
    position: relative;
    color: var(--buttonmenuupfont);
    height: 28px;
    line-height: 28px;
    display: block;
    margin-top: 4px;
    padding-left: 32px;
}

@-moz-document url-prefix() {
    a:link.banner_menu_call_us {
        margin-top: 5px;
    }
}

a:hover.banner_menu_call_us {
    color: var(--buttonmenuhoverfont);
    text-decoration:none;
}

.banner_menu_call_us::before {
    content: '';
    background-color: var(--icondark);
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    mask: url(../../../images/core/telephone.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/core/telephone.png) no-repeat 0 0/100% 100%;
}

a:hover.banner_menu_call_us::before{
    background-color: var(--buttonmenuhoverfont);
}

input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.number-input {
  display: inline-flex;
}

.number-input,
.number-input * {
  box-sizing: border-box;
}

.number-input button {
  outline:none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid var(--iconup);
  border-radius: 0.75em;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  cursor: pointer;
  margin: 0.1em 0 0 0;
  position: relative;
}

.number-input button:hover {
  border-color: var(--icondown);
}

.number-input button::after {
  display: inline-block;
  position: absolute;
  content: '-';
  top: -2px;
  font-size: 1.25em;
  left: -1px;
  width: 1.2em;
  height: 1.2em;
  text-align: center;
  color: var(--iconup);
}
.number-input button.plus::after {
  content: '+';
  top: -1px;
}

.number-input button:hover::after {
  color: var(--icondown);
}

.number-input input[type=number] {
  font-family: sans-serif;
  max-width: 3em;
  min-width: 3em;
  padding: 0;
  border: none;
  font-size: 1em;
  height: 1.5em;
  text-align: center;
}

.application button.back-link {
    position: absolute;
    top: 2em;
    left: 1em;
    background-color: transparent;
    border-radius: 50%;
    border: 6px solid var(--bannerfontcolor);
    width: 48px;
    height: 48px;
    box-sizing: content-box;
    z-index: 1;
}

.application button.back-link:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    background-color: var(--bannerfontcolor);
    mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGcgaWQ9InN2Z18xMCI+CiAgIDxsaW5lIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSIjMDAwMDAwIiBpZD0ic3ZnXzEiIHkyPSIxMy4wNjI1IiB4Mj0iMi42ODc1MiIgeTE9IjEzLjA2MjUiIHgxPSIxOS42ODc1MSIgZmlsbD0ibm9uZSIvPgogICA8bGluZSB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4LjMxMjUyIDE3LjkzNzUpIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgaWQ9InN2Z18yIiB5Mj0iMTcuOTM3NSIgeDI9IjIuMjk5OTUiIHkxPSIxNy45Mzc1IiB4MT0iMTQuMzI1MDciIGZpbGw9Im5vbmUiLz4KICAgPGxpbmUgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDguMzEyNTEgOC4zMTI1KSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjQiIGlkPSJzdmdfNCIgeTI9IjguMzEyNSIgeDI9IjIuMjk5OTUiIHkxPSI4LjMxMjUiIHgxPSIxNC4zMjUwNyIgZmlsbD0ibm9uZSIvPgogICA8ZWxsaXBzZSBzdHJva2U9IiMwMDAwMDAiIHJ5PSIzIiByeD0iMyIgaWQ9InN2Z181IiBjeT0iMTMuMTI1IiBjeD0iNS41NjI1IiBmaWxsPSIjMDAwMDAwIi8+CiAgIDxlbGxpcHNlIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwMDAwIiByeT0iMiIgcng9IjIiIGlkPSJzdmdfNyIgY3k9IjQuMzEyNSIgY3g9IjEyLjMxMjUiIGZpbGw9IiMwMDAwMDAiLz4KICAgPGVsbGlwc2Ugc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAwMDAiIHJ5PSIyIiByeD0iMiIgaWQ9InN2Z184IiBjeT0iMjIuMTI1IiBjeD0iMTIuNSIgZmlsbD0iIzAwMDAwMCIvPgogICA8ZWxsaXBzZSBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMDAwMCIgcnk9IjIiIHJ4PSIyIiBpZD0ic3ZnXzkiIGN5PSIxMy4wNjI1IiBjeD0iMTkuOTM3NSIgZmlsbD0iIzAwMDAwMCIvPgogIDwvZz4KIDwvZz4KCjwvc3ZnPg==) no-repeat 0 0/100% 100%;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPGcgaWQ9InN2Z18xMCI+CiAgIDxsaW5lIHN0cm9rZS13aWR0aD0iNCIgc3Ryb2tlPSIjMDAwMDAwIiBpZD0ic3ZnXzEiIHkyPSIxMy4wNjI1IiB4Mj0iMi42ODc1MiIgeTE9IjEzLjA2MjUiIHgxPSIxOS42ODc1MSIgZmlsbD0ibm9uZSIvPgogICA8bGluZSB0cmFuc2Zvcm09InJvdGF0ZSg0NSA4LjMxMjUyIDE3LjkzNzUpIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iNCIgaWQ9InN2Z18yIiB5Mj0iMTcuOTM3NSIgeDI9IjIuMjk5OTUiIHkxPSIxNy45Mzc1IiB4MT0iMTQuMzI1MDciIGZpbGw9Im5vbmUiLz4KICAgPGxpbmUgdHJhbnNmb3JtPSJyb3RhdGUoMTM1IDguMzEyNTEgOC4zMTI1KSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjQiIGlkPSJzdmdfNCIgeTI9IjguMzEyNSIgeDI9IjIuMjk5OTUiIHkxPSI4LjMxMjUiIHgxPSIxNC4zMjUwNyIgZmlsbD0ibm9uZSIvPgogICA8ZWxsaXBzZSBzdHJva2U9IiMwMDAwMDAiIHJ5PSIzIiByeD0iMyIgaWQ9InN2Z181IiBjeT0iMTMuMTI1IiBjeD0iNS41NjI1IiBmaWxsPSIjMDAwMDAwIi8+CiAgIDxlbGxpcHNlIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwMDAwIiByeT0iMiIgcng9IjIiIGlkPSJzdmdfNyIgY3k9IjQuMzEyNSIgY3g9IjEyLjMxMjUiIGZpbGw9IiMwMDAwMDAiLz4KICAgPGVsbGlwc2Ugc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAwMDAiIHJ5PSIyIiByeD0iMiIgaWQ9InN2Z184IiBjeT0iMjIuMTI1IiBjeD0iMTIuNSIgZmlsbD0iIzAwMDAwMCIvPgogICA8ZWxsaXBzZSBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMDAwMCIgcnk9IjIiIHJ4PSIyIiBpZD0ic3ZnXzkiIGN5PSIxMy4wNjI1IiBjeD0iMTkuOTM3NSIgZmlsbD0iIzAwMDAwMCIvPgogIDwvZz4KIDwvZz4KCjwvc3ZnPg==) no-repeat 0 0/100% 100% ;
    width: 48px;
    height: 48px;
}

.application button.back-link:hover {
    border: 6px solid var(--bannerbuttondown);
}

.application button.back-link:hover:before {
    background-color: var(--bannerbuttondown);
}

.application button.large_icon, .application button.letterbox_icon {
    background-color: var(--panel);
    border: solid 6px var(--iconup);
    width: 200px;    
    position: relative;
    box-sizing: border-box;
    border-radius: 8px;
    margin-right: 2em;
    margin-bottom: 2em;
    height: auto;
    padding-bottom: 0px;
}

.application button.large_icon {min-height: calc(150px + 1.6em); }
.application button.letterbox_icon {min-height: calc(75px + 1.6em);}

.application button.large_icon::before, .application button.letterbox_icon::before {
    content: '';
    background-color: var(--icondark);
    width: 200px;
    position: absolute;
    top:-6px;
    left:-6px;
    border-radius: 8px 8px 0px 0px;
}

.application button.large_icon::before{height: 150px;}
.application button.letterbox_icon::before {height: 75px;}

.application button.large_icon::after, .application button.letterbox_icon::after {
    content: '';
    background-color: var(--iconlight);
    width: 200px;
    position: absolute;
    top:-6px;
    left:-6px;
    border-radius: 8px 8px 0px 0px;
}

.application button.large_icon::after {height: 150px;} 
.application button.letterbox_icon::after {height: 75px;}

.application button.large_icon span, .application button.letterbox_icon span {  
    width: 100%;
    background: var(--iconup);
    color: var(--iconupfont);
    padding-top: 2px;
    display: block;
    clear: both;
    float: left;
}

.application button.large_icon span {margin-top: 144px;}

.application button.letterbox_icon span {margin-top: 69px;}

.application button.large_icon:hover, .application button.letterbox_icon:hover,
.application button.large_icon.selected, .application button.letterbox_icon.selected{
    border: solid 6px var(--icondown);
}

.application button.large_icon:hover span, .application button.letterbox_icon:hover span,
.application button.large_icon.selected span, .application button.letterbox_icon.selected span{
    background: var(--icondown);
    color: var(--icondownfont);
}

.application .small_static_icon::before, .application .medium_static_icon::before, .application .w64_static_icon::before {
    content: '';
    background-color: var(--icondark);
    width: 3em;
    height: 2em;
    position: absolute;
    top: 0;
    left: 0;
}

.application .small_static_icon::after, .application .medium_static_icon::after, .application .w64_static_icon::after {
    content: '';
    background-color: var(--iconlight);
    width: 3em;
    height: 2em;
    position: absolute;
    top: 0;
    left: 0;
}

.application .medium_static_icon::before, .application .medium_static_icon::after {
    width: 6em;
    height: 4em;
}

.application .w64_static_icon::before, .application .w64_static_icon::after {
    width: 64px;
    height: 48px;
}

.amend-icon{
  width: 13px;
  height: 13px;
  border: solid 2px var(--iconup);
  position: relative;
  top: 3px;
}
.amend-icon .pencil-mask{
  width: 8px ;
  height: 15px ;
  transform: rotate(45deg);
  background: var(--panel);
  position: relative;
  left: 6px;
  top: -3px;
}
.amend-icon .pencil {
  position: relative;
  left:1px;
  width: 6px ;
  height: 14px ;
  background: var(--iconup);
  position: relative ;
  
}
.amend-icon .pencil::before {
  content: "" ;
  position: absolute ;
  width: 6px ;
  height: 4px ;
  background: inherit ;
  top: -5px ;
  left: 0;
}
.amend-icon .pencil::after {
  content: "" ;
  position: absolute ;
  width: 4px ;
  height: 4px ;
  background: inherit ;
  left: 1px ;
  bottom: -2px ;
  transform: rotate(45deg);
}

.application button.event_class_SharedPetCremationEvent::before{
    mask: url(../../../images/lifeevents/public/cat_dog.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/cat_dog.png) no-repeat 0 0/100% 100%;
}

.application button.event_class_SharedPetCremationEvent::after{
    display:none;
}

.application button.event_class_IndividualPetCremationEvent::before, .application button.event_class_PetBurialEvent::before,
    .application .animal_icon_dog::before {
    mask: url(../../../images/lifeevents/public/dog.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/dog.png) no-repeat 0 0/100% 100%;
}

.application button.event_class_IndividualPetCremationEvent::after, .application button.event_class_PetBurialEvent::after,
    .application .animal_icon_dog:after{
    display:none;
}

.application button.event_class_CremationEvent::before {
    mask: url(../../../images/lifeevents/public/cremation_dark.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/cremation_dark.png) no-repeat 0 0/100% 100%;
}

.application button.event_class_CremationEvent::after{
    mask: url(../../../images/lifeevents/public/cremation_light.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/cremation_light.png) no-repeat 0 0/100% 100%;
}

.application button.event_class_BurialEvent::before {
    mask: url(../../../images/lifeevents/public/burial_dark.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/burial_dark.png) no-repeat 0 0/100% 100%;
}

.application button.event_class_BurialEvent::after{
    mask: url(../../../images/lifeevents/public/burial_light.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/burial_light.png) no-repeat 0 0/100% 100%;
}

.application button.event_class_MemorialServiceEvent::before {
    mask: url(../../../images/lifeevents/public/chapel_dark.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/chapel_dark.png) no-repeat 0 0/100% 100%;
}

.application button.event_class_MemorialServiceEvent::after{
    mask: url(../../../images/lifeevents/public/chapel_light.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/chapel_light.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_cat::before {
    mask: url(../../../images/lifeevents/public/cat.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/cat.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_cat::after {
    display:none;
}

.application .animal_icon_rabbit::before {
    mask: url(../../../images/lifeevents/public/rabbit.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/rabbit.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_rabbit::after {
    display:none;
}

.application .animal_icon_rodent::before {
    mask: url(../../../images/lifeevents/public/rodent.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/rodent.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_rodent::after {
    display:none;
}


.application .animal_icon_bird::before {
    mask: url(../../../images/lifeevents/public/bird.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/bird.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_bird::after {
    display:none;
}

.application .animal_icon_reptile::before {
    mask: url(../../../images/lifeevents/public/reptile.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/reptile.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_reptile::after {
    display:none;
}

.application .animal_icon_equine::before {
    mask: url(../../../images/lifeevents/public/equine.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/equine.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_equine::after {
    display:none;
}

.application .animal_icon_null::before {
    mask: url(../../../images/lifeevents/public/other.png) no-repeat 0 0/100% 100%;
    -webkit-mask: url(../../../images/lifeevents/public/other.png) no-repeat 0 0/100% 100%;
}

.application .animal_icon_null::after {
    display:none;
}


