/* GENERAL RELATED */ :root {
    --clrGray: #AEB6BC;
    --clrLiteGray: #FAFAFA;
    --clrBlue: #173470;
    --clrLiteBlue: #1E4390;
    --clrOrange: #E5852E;
    --clrLiteOrange: #F79227;
    --clrRed: #DE152D;
    --clrLineGray: #D9D9D9;
    --clrGreen: #0A665E;
    --clrNewOrange: #F8922E;
}

@font-face {
    font-family: 'fontRegular';
    src: url("font/OpenSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: 'fontBold';
    src: url("font/OpenSans-Bold.ttf") format("truetype");
}

@font-face {
    font-family: 'fontSemiBold';
    src: url("font/OpenSans-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: 'fontLostCastedral';
    src: url("font/LostCastedral-MV8DP.otf") format("truetype");
}

html, body {
    color: var(--clrBlue);
    font-family: fontRegular;
    background-color: var(--clrLiteGray);
}

.btn:hover {
    color: lightgray;
}

a:hover {
    color: lightgray;
    text-decoration: none;
}

/* 22-0328 ATR: NEW UPDATES ********************************************/
.lblRegularLC {
    font: 18px fontLostCastedral;   
}

.bgNewOrange {
    background-color: var(--clrNewOrange); 
}

.clrNewOrange {
    color: var(--clrNewOrange);
}
/***********************************************************************/


/* STYLING RELATED */
.lblRegular {
	font: 14px fontRegular;
}

.lblBold {
	font: 14px fontBold;
}

.lblRegularLrg {
	font: 28px fontRegular;
}

.lblBoldLrg {
	font: 28px fontBold;
}

.brdRed {
    border: solid 1px red;
}

.brdGreen {
    border: solid 1px green;
}

.brdBlue {
    border: solid 1px var(--clrBlue);
}

.brdWhite {
    border: solid 1px white;
}

.brdLine {
    border: solid 1px var(--clrLineGray);
}

.brdNone {
    border: none;
}

.brdOrange2px {
    border: solid 2px var(--clrLiteOrange);
}

.brdLiteGray2px {
    border: solid 2px var(--clrLineGray);
}

.brdGray {
    border: solid 1px var(--clrGray);
}

.bgOrangeWhite {
	color: white;
    background-color: var(--clrLiteOrange);
}

.bgBlue {
    background-color: var(--clrBlue);
}

.bgLiteBlue {
    background-color: var(--clrLiteBlue);
}

.bgWhite {
    background-color: #fff;
}

.bgGray {
    background-color: #D5D5D5;
}

.bgLiteGray {
    background-color: var(--clrLiteGray);
}

.bgOrange { 
    background-color: var(--clrLiteOrange);
}

.clrRed {
    color: var(--clrRed);
}

.clrBlue {
    color: var(--clrBlue);
}

.clrWhite {
    color: #ffffff;
}

.clrOrange {
    color: var(--clrOrange);
}

.clrGreen {
    color: var(--clrGreen);
}

.clrBlueBold {
    color: var(--clrBlue);
    font-weight: bold;
}

.clrGray {
    color: gray;
}

.clrLiteGray {
    color: var(--clrLineGray);
}

.bold {
    font-weight: bold;
}

.txtAlignLt {
    text-align: left;
}

/* HOME RELATED */
.block:before {
	display: inline-block;
	height: 100%; 
	vertical-align: middle;
}
 
.centered {
	vertical-align:middle;
}

.child {
	position: relative;
}
	
.category_link {
    font-size:13px;
	margin: 0 1px;
	padding: 0 5px;
	color: var(--clrBlue);
}

.logo {
    width: 100px;
    margin-left: 30px;
}

.dropdown-item {
    color: var(--clrBlue);
    font-weight: bold;
}

.subitem {
    font-weight: normal;
    margin-left: 20px;
}

.divMenu {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.divRight {
    display: inline-flex;
    float: right;
    justify-content: flex-end;
    align-items: center;
	position: absolute; 
	right: 0; 
	top: 50%; 
	transform: translatey(-50%);
    z-index: 10;
}

.clsNavBar {
    position: relative;
    top: 25px;
    left: -50px;
    z-index: 2
}

.logo {
    width: 120px;
    float: left;
}

.spnBag {
    height: auto;
    font-size: 12px;
    font-weight: bold;
}

.btnLogin {
    width: 200px;
    background-color: var(--clrLiteOrange);
    color: white;
    float: right;
}


#divMobileMenu {
	display:none;
	right: 30px;
	top: 30px;
	background-color: white;
	width: 100%;
	position: absolute;
	border-radius: 5px;
	border: solid 1px #ececec;
	padding: 5px;
}

#divMobileMenu > a, #divMobileMenu > span {
	display:block;
	color: var(--clrBlue);
	margin:5px;
}		

#divDesktopMenu {
	display: none;
	right: 30px;
	top: 35px;
	background-color: white;
	width: 100%;
	position: absolute;
	border-radius: 5px;
	border: solid 1px #ececec;
	padding: 5px;
}

#divDesktopMenu > a, #divDesktopMenu > span {
	display:block;
	color: var(--clrBlue);
	margin:5px;
}			

.navbar {
    padding: 0px;
}

.divTop {
    margin-top: 80px;
}

.imgCategory {
    width: 150px;
}

.card {
    text-align: center;
    margin: 10px;
}

.card-img-top {
    align-self: center;
    width: 60%;
}

.hrBar {
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--clrBlue);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
}

.clsLogoBlue {
    margin: 3em;
}

.clsFooterMain {
    display: inline-block;
    color: white;
    margin: 1em;
    vertical-align: top;
}

.clsDesign {
    margin-left: auto;
    float: right;
}

.divCart {
    display: inline-flex;
}

#divImage {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

#divImage img {
    position: absolute;
    width: 100%;
    top: -150px;
    left: 0px;
}

.clsNumInput {
    width: 130px;
    border: solid 1px var(--clrBlue);
    border-radius: 5px;
}

.clsGrdTotal {
    display: inline-block;
    color: var(--clrGreen);
    font-weight: bold;
    font-size: 22px;
    width: 150px;
    text-align: right;
}

.divCartCount {
    display: inline-block;
    position: relative;
    top: 15px;
    left: -100px;
    vertical-align: top;
    height: 15px;
    width: 15px;
    color: white;
    background-color: red;
    font-size: 10px;
    border-radius: 50%;
    text-align: center;
}

#divImageCart {
    width: 100px;
    height: 70px;
    overflow: hidden;
    position: relative;
    margin-right: 5px;
}

#divImageCart img {
    position: absolute;
    width: 100%;
    top: -55px;
    left: 0px;
}

.lblOrder {
    display: inline-block;
    width: 120px;
    font-weight: bold;
}

.divDivider {
    width: 1px;
    height: 40px;
    border: solid 1px var(--clrLineGray);
}

.clsStageDiv {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.clsStageImg {
    /*border-radius:0%; */
    padding: 0px;
    margin-right: 30px;
    width: 40px;
    height: 40px;
    border: solid 1px blue;
}

.clsStageText {
    display: inline-flex;
    align-items: center;
    margin-left: 30px;
    font-weight: bold;
}

.clsStageSpan {
    display: block;
    vertical-align: middle;
}

.clsStageLine {
    width: 1px;
    height: 40px;
}

.input-number {
    border: transparent;
    text-align: center
}

/* CAPTCHA RELATED */
.spnError {
	color:#FF0000;
  font-size: 0.95em;
}

.inpCaptcha {
    width: 200px;
    border-radius: 5px;
    border: #CCC 1px solid;
    padding: 10px;
    margin-top: 5px;
}

.captcha-input {
	background: #fff url(plugin/php-captcha/captchaImageSource.php) repeat-y left center;
	padding-left: 85px;
}

.form-group.required .control-label:after {
	content:"*";
	color:red;
}

#remove:hover {
	color: var(--clrBlue);
}

@media (max-width: 768px) {
    .clsDesign {
        display: none;
    }

    .clsLogoBlue {
        margin: 0;
    }

    .divCart {
        display: block;
    }
}

/* MEDIA SCREEN FOR IPHONE 6,7,8 PLUS */
@media screen and (max-width: 736px) {

    /* HOME RELATED */
    .divMenu {
        width: 140px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .clsNavBar {
        position: fixed;
        top: 50px;
        left: 0px;
        z-index: 2
    }

    .logo {
        width: 100%;
        margin: 0;
    }

    .btnLogin {
        width: 90px;
    }
	
	
	.divCartCount {
		top: 15px;
		left: -18px;
	}
}