/**
 * CSS Buttons Stylesheet
 *
 * Thanks to paulm for much of the content of the CSS buttons code
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet_css_buttons.css,v 1.2 2009-10-06 09:21:51 stefan Exp $
 */

/* css buttons */
.cssButton, .cssButton:focus {
color: white;
background-color: #084082;
border: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-align:center;
padding: 4px 12px;
white-space: nowrap;
text-decoration: none;
}

.cssButton:hover:enabled {
    background-color: #24518c;
}

.cssButton:active {
    background-color: #326fbf;
    box-shadow: none;
}

.cssButton:disabled {
    opacity: 0.7;
}

.flexCenter {
    align-self: center;
}

input.ng-invalid {
        border-color: #aa6666;
        color: #dd2222;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#createAccount {
    margin: auto;
    flex-direction: column;
    max-width: 500px;
    box-sizing: border-box;
}
#createAccountTab {
    display: flex;
    flex-direction: column;
    border: 1px solid #82a8d9;
    border-top: none;
    max-width: 500px;
    box-sizing: border-box;
    padding: 8px 4px 8px 8px;
}

.tabHeader {
    margin-top: 20px;
    display: flex;
}

.accountTab {
    color: #084082;
    background-color: #d0e0f0;
    font-size: 1.3em;
    border: 1px solid #82a8d9;
    border-right: none;
    padding: 8px;
    margin: 8px 0px 0px 0px;
    box-sizing: border-box;
    width: 10em;
    transition: background-color 0.3s ease;
}
.activeTab {
    background-color: white;
    border-bottom: none;
    margin-top: 7px;
    transition: background-color 0.3s ease;
}
.accountTab:hover {
    background-color: #d0e0f080;
}
.activeTab:hover {
    background-color: white;
}
.tabLine {
    border-bottom: 1px solid #82a8d9;
    border-left: 1px solid #82a8d9;
    margin-top: 8px;
    flex-grow: 1;
    max-width: 200px;
}
.tabInfo {
    color: #084082;
}
#tabSubmit {
    max-width: 150px;
    margin: 0px auto 0px auto;
}
#notFound.ng-hide {
    transition:all 0.4s ease 0s;
    max-height: 0;
    opacity: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}
#notFound {
    color: #aa4400;
    transition:all 0.4s ease 0s;
    max-height: 2em;
    opacity: 1;
    margin-top: 4px;
    margin-bottom: 4px;
}
#isCompany {
    transition:all 0.3s ease 0s;
    max-height: 50px;
    opacity: 1;
}
#isCompany.ng-hide {
    transition:all 0.2s linear 0s;
    max-height: 0px;
    opacity: 0;
}
#coAddress {
    transition: all 0.6s ease 0s;
    max-height: 3em;
    opacity: 1;
}
#coAddress.ng-hide {
    max-height: 0px;
    opacity: 0;
}
#coButton {
    box-sizing: border-box;
    transition: all 0.6s ease 0s;
    opacity: 1;
    width: 100px;
}
#coButton.ng-hide {
    box-sizing: border-box;
    opacity: 0;
    padding: 0px;
    margin: 0px;
    width: 0px;
}
.nogrow {
    flex-grow: 0 !important;
}
.inputHeader {
    margin: 12px 8px 0px 8px;
    color: #084082;
}
.inputField {
    display: flex;
    margin: 4px 8px 4px 8px;
}
.tabForm {
    margin: 0px 8px 4px 8px;
}
.inputField > .cssButton, .inputField > input {
    box-sizing: border-box;
    margin: 0px;
    margin-right: 4px;
    flex-grow: 1;
}

.length1x, .length2x, .length3x {
    box-sizing: border-box;
    width: 80px;
}
.length1x { flex-basis: 80px; }
.length2x { flex-basis: 160px; }
.length3x { flex-basis: 240px;  }
.length4x { flex-basis: 320px; }

.accountTab:focus { outline:0; }
input:focus { outline:0; }
a:focus { outline:0; }
.cssButton:focus { outline: 0; }

/* adding the styles below might be needed if the default button width is changed */
/* .button_continue_shopping, .button_shipping_estimator {width: 150px;} */
.button_search { width: 4.5em; }
.small_delete, .button_prev, .button_next, .button_back  {width: 7em;}
.button_sold_out_sm, .button_sold_out, .button_update_cart, .button_checkout, .button_login {width: 10em;}
.button_return_to_product_list, .button_add_selected {width: 22em;}
.button_in_cart{height: 30px; }
.button_submit {width: 18em;}
.button_update_cart {color: red;}
.button_update_cartHover {color: #003D00;}
/*.innerbox#headernavcenter .boxtext .button_search {display:inline;}*/

.numberCircle {
    display: inline-block;
    border-radius: 50%;

    width: 9px;
    height: 9px;
    padding: 4px;
    font: 9px Arial, sans-serif;

    color: white;
    background: #24518c80;
    text-align: center;
}
