@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');

:root {
  --main-color: #669bb9;
  --main-color-h1: #669bb9;   
  --main-color-h2: #669bb9;   
  --main-color-h3: #669bb9;   
  --main-color-h4: #669bb9;   
  --main-color-btn-default: #669bb9;   
  --main-color-btn-action: #669bb9; 
  --text-color: #6a6a6a;
  --font-family: 'Open Sans', sans-serif;
  --color-background:#ffffff;   
  --color-background-footer:#ffffff;     
}

body {
	font-family: var(--font-family);
	color: var(--text-color);
	font-size: 16px;
	line-height:1.5;
	font-weight: 400;
	background-color: #ffffff;
	margin:0; 
	height:100%;
	-webkit-font-smoothing: auto;
}


.site-color {color:var(--main-color) !important}

/*=========== Typography ===============*/
h1, h2, h3, h4, h5, h6, p, btn, .h1, .h2, .h3, .h4, .h5, .h6, .p, .btn {font-family: 'Open Sans', sans-serif;}
h1, .h1 {font-size: 36px; font-weight: 600; color:var(--main-color-h1); margin-bottom:20px}
h2, .h2 {font-size: 28px; font-weight: 600;  color:var(--main-color-h2)}
h3, .h3 {font-size: 24px; font-weight: 500;  color:var(--main-color-h3); margin-bottom: 16px}
h4, .h4 {font-size: 20px; font-weight: 400;  font-style: italic; color:var(--main-color-h4)}
h5, .h5 {font-size: 18px; font-weight: 500;  color:#FFFFFF; text-align: center;}
h6, .h6 {font-size: 24px; font-weight: 600;  color:#FFFFFF; text-align: center;}
p, .p, li, div, normal {font-weight: 500; color:#666666; line-height:1.5;}
a, a:visited  {color:#02609d; text-decoration:none;}




/*=========== End Typography ===============*/

/*=========== Buttons ===============*/
.btn {border-radius:0}
.btn-site-default, a.btn-site-default {background-color: var(--main-color-btn-default); border-color: var(--main-color-btn-default); color: #FFFFFF; }
.btn-site-default:hover, .btn-site-default:active, .btn-site-default:focus {background-color: var(--main-color-btn-default) !important; border-color: var(--main-color-btn-default) !important; color: #FFFFFF;}
.btn-site-action {background-color: var(--main-color-btn-action); border-color: var(--main-color-btn-action); color:#ffffff; }
.btn-site-action:hover, .btn-site-action:active, .btn-site-action:focus {background-color: var(--main-color-btn-action) !important; border-color: var(--main-color-btn-action) !important; color:#ffffff;}
.btn-site-save {background-color: var(--main-color-btn-action); border-color: var(--main-color-btn-action); color:#ffffff; }
.btn-site-save:hover, .btn-site-save:active, .btn-site-save:focus {background-color: var(--main-color-btn-action) !important; border-color: var(--main-color-btn-action) !important; color:#ffffff;}
.btn-site-delete {background-color: #f0353d; border-color: #f0353d; color:#ffffff;}
.btn-site-delete:hover, .btn-site-delete:active, .btn-site-delete:focus {background-color: #ec000a !important; border-color: #ec000a !important; color:#ffffff;}
.btn-site-cancel {background-color: #9baaab; border-color: #9baaab; color:#ffffff;}
.btn-site-cancel:hover, .btn-site-cancel:active, .btn-site-cancel:focus {background-color: #687f82 !important; border-color: #687f82 !important; color:#ffffff;}
.btn-site-edit {background-color: #2660f2; border-color: #2660f2; color:#ffffff;}
.btn-site-edit:hover, .btn-site-edit:active, .btn-site-edit:focus {background-color: #0a9af2 !important; border-color: #0a9af2 !important; color:#ffffff;}
.btn-site-view {background-color: #fd6a33; border-color: #fd6a33; color:#ffffff;}
.btn-site-view:hover, .btn-site-view:active, .btn-site-view:focus {background-color: #f95213 !important; border-color: #f95213 !important; color:#ffffff;}

i.btn-view {color:#365dcd;}
i.btn-delete {color:#F44336;}

.btn-fa {cursor:pointer}

/*=========== End Buttons ===============*/


/*=========== Header ===============*/

#header {
	box-shadow: 0 1px 1px 0 #cccccc;
	transition: all 0.4s ease 0s;
}

.sticky-header {
	background:#df0d6b;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.2);	
}

.logo img {max-height:50px}
#toplogo {display:none}
#toplogo {float:left} 
#headerlogo {float:left;} 
#headerlogo img {transition: all 0.4s ease 0s;}



/*=========== End Header ===============*/

/*=========== Navigation Code ===============*/

.navbar a.link-login {color: #333; text-align: right;}
.link-login:hover, .link-login:active, .link-login:focus {color: #f49f9e; float: middle;}
.nav-link {display: block; color: var(--main-color) !important; font-size: 16px; text-transform: uppercase;}
.topnav-link {display: inline;}

.navbar a {color:#000000}
.navbar li.active a {color:#000000}



#top-bar .navbar {
		float:right;
		z-index:999
}
#header .navbar-nav {
	margin-left:auto!important;

}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

.sticky-header .navbar a {color:#ffffff}
.sticky-header .navbar li.active a {color:#ffeb3b}
.sticky-header #headerlogo img {margin-top:10px; height:40px}


/*=========== End Navigation Code ===============*/

.tabbed-card {
  border-radius: 0 0 .25rem .25rem;
  border-top: 0;
}

/*=========== Footer ===============*/

.FooterSection1 {
	background-color: #ffffff;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
	background-position: bottom;
}

@media (min-width: 1200px) {
	.FooterSection1 {

	}
}

@media (min-width: 768px) {
	.FooterSection1 {

	}
}


.FooterSection1 p, .FooterSection1 h1 {color:#ffffff;}

.copyright-links, .copyright-links a {color: #000000}

/*=========== End Footer ===============*/

/*=========== Cards ===============*/
.card-header {
    background: #ffffff;
}
.card-title {
    font-size: 22px;
    color: var(--main-color);
}

.card-header-site {
	background: var(--main-color);
}

.card-header-site .h2 {color:#ffffff}



/*=========== End Cards ===============*/

.catalogue {margin: 0; padding: 0;}
.catalogue li {list-style: none; padding: 0;}
.catalogue-card {display: block; float: left; margin: 5px 15px 20px; height: 180px; width:225px; position: relative}
.catalogue-card .product-name {text-align: center; color: #2953b3; font-size: 14px;  white-space: normal; position: absolute; bottom: 0px; width: 100%; font-weight:bold;}
.catalogue-card .product-currency {position: absolute; font-size: 10px; right: 5px; background-color: #2953b3; padding: 3px 5px; color: #ffffff;font-weight: bold;}
.catalogue-card .product-type {position: absolute; font-size: 10px; left: 5px; background-color: #cd196b; padding: 3px 5px; color: #ffffff;font-weight: bold;}
.product-image-card {position: relative; border-radius: 0px; overflow: hidden;}
.product-image-card img {max-width:100%; max-height:100%; border-radius: 0px; margin:-2px;}

.shadowbox {box-shadow: -2px 2px 6px 0 rgba(0,0,0,0.4); transition:0.2s}
.shadowbox:hover {
    margin-top: -.25rem;
    margin-bottom: .25rem;
	box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.3);	
}

.view-product {cursor: pointer}
.quantity-input {
    padding: 4px 10px;
    text-align: center;
    margin: auto;
    width: 80px;
}
.form-control.is-invalid, .was-validated .form-control:invalid {background-image: none; padding-right:0px}
.form-control.is-valid, .was-validated .form-control:valid {background-image: none; padding-right:0px}