:root{
    --black:#000000;
    --white:#ffffff;
    --orange:#f95401;
    --blue:#094b89;
    --green:#14a44d;
    --gray:#666666;
    --light-gray:#eeeeee;
    --light-gray-second:#e8e8e8;
    --yellow: #FFDE00;
}

.selected {
    /*  Add a cool color overlay to show the element is currently selected  */
    background-color: var(--blue);
    border-radius: 5px;
    padding: 5px 3px 0 5px !important;
    vertical-align: center;
    color: var(--white);
}
.card{
    border-radius: 10px;
}

.card button{
    border-radius: 0px;
    width: 100%;
}
.card button:hover{
    background-color:var(--blue);
}

.card-body{
    padding: 20px;
    padding-bottom: 0px;
    border-radius: 10px;
}
.card-title{
    font-weight: bold;
    color:var(--black);
}
.card-subtitle{
    color: var(--gray);
    font-weight: normal;
}

.card-text{
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--black);
}

/*  */
.top-hero-section{
    background-color: var(--blue) !important;
    background-image: url(/images/tyresize-nobg.png);
    background-repeat: no-repeat;
    /*background-size: 35rem;*/
    background-position:center bottom;
}

.top-hero-section-li-si{
    background-color: var(--blue) !important;
    background-image: url(/images/lisi-nobg.png);
    background-repeat: no-repeat;
    /*background-size: 35rem;*/
    background-position:center bottom;
}

/* inner-page-hero-section */
.inner-page-hero-section{
    background-color: var(--blue) !important;
}
.inner-page-hero-section h6{
    font-weight: normal;
    font-size: 0.8rem;
}

/* login css */
.needs-validation{
    border: 1px solid var(--light-gray);
    padding: 20px;
    padding-top: 0px;
    border-radius: 12px;
    margin-top:0.5rem;
}

.needs-validation a{
    text-decoration: underline;
}

.needs-validation a:hover{
    color: var(--orange);
}

.bg-blue {
    background-color: var(--blue);
}

.form-label{
    color: var(--gray);
}

.input-group-text{
    border: 1px solid var(--light-gray);
    color: var(--black);
    border-radius: 0px;
}

.form-select{
    border: 1px solid var(--light-gray);
    border-radius: 0px;
}

.form-control{
    border: 1px solid var(--light-gray);
    border-radius: 0px;
}

/*  */
.btn-primary{
    border-radius: 0px;
    box-shadow: none;
    background-color: var(--orange);
}
.btn-primary:hover{
    background-color: var(--blue);
    box-shadow: none;
}

.btn-light{
    border-radius: 0px;
    border: 0px solid transparent !important;
    box-shadow: none;
    background-color: var(--blue);
    color: var(--white) !important;
}
.btn-light:hover{
    background-color: var(--white);
    color: var(--black) !important;
}

.btn-warning{
    border-radius: 0px;
    border: 0px solid transparent !important;
    box-shadow: none;
    background-color: var(--blue);
    color: var(--white) !important;
}
.btn-warning:hover{
    background-color: var(--black);
    color: var(--white) !important;
}

/*  */
.logo a img{
    height: 60px;
}
.menu a{
    border-radius: 50px !important;
    padding:7px 15px 7px 10px !important;
    border: 1px solid var(--white) !important;
    font-size: 0.9rem !important;
}
.menu a:hover{
    background-color:var(--orange);
    color: var(--white);
    border: 1px solid var(--orange);
}

.cart-items-count:hover{
    color: var(--white);
}

.language-section:hover{
    color: var(--white)!important;
}

/*.input-group .btn{*/
/*    padding: 11px 15px !important;*/
/*    background-color: var(--orange);*/
/*    box-shadow:none;*/
/*}*/

/*.input-group .btn:hover{*/
/*    background-color: var(--blue);*/
/*    box-shadow:none;*/
/*}*/

/* figcaption */
figure{
    gap: 0.8rem;
}
figure span{
    text-align: center;
    border: 5px solid var(--light-gray);
    box-shadow: 5px 5px 10px var(--light-gray-second) inset;
}
figure .floating{
    width: 2rem;
    height: 2rem;
    color: var(--blue) !important;
}
figcaption .title{
    color: var(--black);
    font-weight: bold;
}
figcaption p{
    color: var(--gray);
    font-size: 0.9rem;
}

/* footer */
footer{
    border-top: 1px solid var(--white);
    background-color: var(--blue) !important;
    color: var(--white);
}
footer .col-12{
    margin-bottom: 0px !important;
}
footer a{
    color: var(--black);
}
footer a:hover{
    color: var(--orange);
}
footer h6{
    font-weight: normal !important;
}

.error-border{
    border: 1px solid red !important;
}

.error-border:focus{
    border: 1px solid red !important;
    outline: none !important;
}

.error-message{
    color: red;
}

.season-box{
    width: 85px;
    height: 60px;
    border-radius: 5px;
    margin: auto;
    padding-bottom: 40px;
}

.season-box-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 auto 10px;
}
.brand-box-wrapper{
    display: flex;
    flex-direction: column;
}

.season-box-active{
    border: 2px solid var(--blue);
}


.season-box-inactive{
    border: 1px solid white;
}

.search-input{
    border-radius: 5px!important;
    margin-bottom: 30px;
}

.btn{
    border-radius: 5px!important;
    box-shadow: none;
}

::placeholder {
    color: #E8ECFF !important;
    opacity: 1;
}

.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
    color: white!important;
}

/*// Billing List Color codes*/
tr.dueDate {
    background-color: rgb(255, 220, 220) !important;
}

tr.dueDate:hover {
    background: rgb(255, 153, 153) !important;
    border: 2px solid blue;
    color: #fff;
    font-weight: 500;
}

tr.greenColor {
    background-color: rgb(221, 255, 220) !important;
}

tr.c:hover {
    background: rgb(153, 255, 162) !important;
    border: 2px solid blue;
    color: rgb(34, 34, 34);
    font-weight: 500;
}

tr.greyColor {
    background-color: rgb(238, 238, 238) !important;
}

tr.greyColor:hover {
    background: rgb(204, 204, 204) !important;
    border: 2px solid blue;
    color: rgb(34, 34, 34);
    font-weight: 500;
}

tr.yellowColor {
    background-color: rgb(250, 255, 220) !important;
}

tr.yellowColor:hover {
    background: rgb(255, 240, 153) !important;
    border: 2px solid blue;
    color: rgb(39, 38, 38);
    font-weight: 500;
}

tr.redColor {
    background-color: rgb(255, 221, 220) !important;
}

tr.redColor:hover {
    background: rgb(255, 153, 153) !important;
    border: 2px solid blue;
    color: rgb(39, 38, 38);
    font-weight: 500;
}

/*// Billing List Color codes ends here*/

.item-td{
    /* Centralize its content vertically */
    /*margin-top: 45px !important;*/
}

.center-content {
    text-align: center;
    vertical-align: middle;
}


.stripe-secure-payment{
    background-image: url(/images/stripe_secure_logo.png);
    background-repeat: no-repeat;
    /*background-size: 35rem;*/
    background-position:center;
    background-size: contain;
    height: 200px;
}