body {

}

:root {
  color-scheme: only light;
}

.header {
    margin: 0 20px;
    font-family: Arial, Helvetica, sans-serif;
}

.headerButtons, .headerSearch, .headerSearchButton {
    display: inline-block;
}

.headerSearchButton {
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background-color: #ED3F1C;
    transform: translate(0px, -15px);
    cursor: pointer;
    border-radius: 5px;
}

.headerSearchButton img {
    width: 20px;
    transform: translate(15px, 15px);
}

.headerSearch {
    width: calc(80% - 400px);
    margin-left: 40px;
}

.headerSearchInput {
    width: 100%;
    min-height: 40px;
    padding: 5px 0px 5px 45px;
    font-size: 24px;
    background: #f1f1f1;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    background:  #f1f1f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 15px center;
}

.headerSetDescription {
    padding: 0 20px 10px 0;
    color: #5D5E64; 
    font-size: 24px;
    text-decoration: none;
}

.headerSetDescription:hover {
    color: #ED3F1C;
}

.headerDescriptionBorderBottom {
    position: absolute;
    width: calc(100% - 60px);
    height: 2px;
    margin-right: 20px;
    background: rgb(237,63,28);
    background: linear-gradient(90deg, rgba(237,63,28,1) 0%, rgba(237,128,8,1) 100%);
}

.headerShoppingCartIcon {
    position: fixed;
    top: 42px;
    right: 40px;
    font-size: 36px !important;
    color: #ED3F1C;
}

.headerShoppingCartIcon:hover {
    color:#736B1E;
}

.headerShoppingCartItemCount {
    position: fixed;
    top: 42px;
    right: 80px;
    font-size: 36px !important;
    color: #ED3F1C;
}

.pankasStoreTitle {
    margin-left: 10px;
    font-size: 48px;
}

.mainContent {
    flex: 5;
    margin: 0 250px;
}

.mainContentDetails {
    flex: 5;
    margin: 20px 250px;
}

.sideMenuButtons {
    padding: 10px;
}

.input {
    margin-top: 5px;
    padding: 5px;
    font-size: 14px;
    border: 1px solid #5D5E64;
    border-radius: 5px;
}

.input:focus, .headerSearchInput:focus {
    outline: none;
    border: 1px solid #736B1E;
  }

.buttonTextWrapHeader {
    display: flex;
}

.buttonTextWrapHeaderRight {
    float: right;
}

.buttonTextHeader {
    flex: 2;
    height: 80px;
    font-size: 32px;
    text-transform: uppercase;
    line-height: 60px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #5D5E64;
    margin-left: 20px;
    cursor: pointer;
}

.buyButton, .quantityButton, .iconButton {
    display: block;
    max-width: 80px;
    margin-top: 20px;
    padding: 10px;
    height: 80px;
    color:#ED3F1C;
    font-size: 14px;
    font-weight: 700;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #5D5E64;
    border-radius: 10px;
    box-shadow: 7px 7px 17px #f7f7f7, -7px -7px 17px #ffffff;
    cursor: pointer;
}

.buyButton:hover, .quantityButton:hover, .iconButton:hover {
    color:#736B1E;
    scale: 1.02;
}

.billingAddressButton {
    min-width: 262px;
    min-height: 330px;
    margin: 0 50px 20px 0;
    color:#ED3F1C;
    text-align: center;
    line-height: 50px;
    padding: 10px;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    cursor: pointer;
}

.shippingSubmitButton {
    display: block;
}

.hideBillingAddress {
    color:#ED3F1C;
    cursor: pointer;
}

.inputGroupLabel {
    margin: 20px 0;
}

.logo {
    max-width: 50px;
}

.iconButton {
    line-height: 20px;
}

.quantityButton {
    width: 50px;
    height: 50px;
    margin: 20px;
    font-size: 24px;
    line-height: 50px;
}

.quantityText {
    font-size: 24px;
    font-weight: 700;
}

.itemContainer {
    display: flex;
    flex-wrap: wrap;
}

.itemImageAndInfo { 
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 1 25%;
    min-width: 100px;
    max-width: 250px;
    margin: 25px;
    color: #5D5E64;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    border-radius: 25px;
}

.item:hover {
    color: #ED3F1C;
    scale: 1.02;
}

.itemImage {
    border-radius: 5px;
}

.itemImage img {
    width: 100%;
    border-radius: 5px;
}

.itemDescription {
    flex: 1;
    min-height: 100px;
    padding: 10px 20px 20px 20px;
}

.shoppingCartItem {
    display: flex;
}

.shoppingCartItemTitle {
    padding: 5px 0 0 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 24px;
    padding-left: 20px;
    max-width: 200px;
}

.itemDescriptionTitle {
    margin-bottom: 5px;
    padding-left: 5px;
    font-family: sans-serif;
	text-align: center;
    font-weight: 700;
    font-size: 24px;
}

.itemDescritionContent {
    padding-left: 5px;
	text-align: center;
}

.shoppingCartRemoveItem {
    margin-left: 10px;
    cursor: pointer;
}

.shoppingCartLoginText {
    color:#5D5E64;
    text-decoration: none;
}

.shoppingCartLoginText:hover {
    color:#736B1E;
}

.shoppingCartRemoveItem:hover {
    color: #BF1B1B;
}

.itemLike {
    margin: 40px;
    width: 20px;
    font-size: 24px;
    color: #736B1E;
    cursor: pointer;
}

.itemDetailsContainer, .setDetailsContainer, .shoppingCartItemsContainer {
    padding-bottom: 20px;
    color: #5D5E64;
}

.itemDetailsContainer, .shoppingCartItemsContainer {
    border-bottom: 1px solid #5D5E64;
}

.shoppingCartTotalText, .shoppingCartTotalSum, .shoppingCartTotalCurrency {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 700;
}

.shoppingCartTotalText {
    color:#ED3F1C;
}

.itemTitle, .itemSetsTitle {
    margin-bottom: 20px;
    color: #5D5E64;
    font-size: 24px;
    font-weight: 700;
    font-family: sans-serif;
}

.itemSetsTitle {
    margin: 10px 0;
}

.itemMainImage {
    max-width: 350px;
}

.itemDetailsSetItemImage, .shoppingCartImage {
    max-width: 200px;
}

.itemMainImage img, .itemDetailsSetItemImage img, .shoppingCartImage img {
    width: 100%;
    border-radius: 5px;
}

.itemDetailsSetItems {
    display: flex;
    gap: 20px;
    padding-right: 20px;
}

.itemDetailsSet {
    margin-bottom: 20px;
    font-size: 14px;
    color: #5D5E64;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

.itemDetailSetName {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 700;
}

.itemDetailSetStory {
    margin-bottom: 10px;
}

.itemInfo {
    margin-left: 40px;
    max-width: 400px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

.itemDetailsSecondaryImage {
    color: #5D5E64;
    cursor: pointer;
}

.itemDetailsSecondaryImages {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    border-top: 1px solid #ED8008;
}

.itemDetailsSecondaryImage img {
    min-width: 100px;
}

.itemDetailsSecondaryImageBullet, .itemDetailsSecondaryImageBulletSelected {
    text-align: center;
    font-size: 36px;
}

.itemDetailsSecondaryImageBulletSelected {
    color: #ED3F1C;
} 

.itemDetailsSecondaryImageBullet {
    color: #f1f1f1;
}

.itemDetailsPrice, .itemDetailsDimensions {
    margin: 10px;
}

.shoppingCartItemDetails {
    margin: 20px;
}

.shoppingCartDetails {
    min-width: 200px;
}

.itemDetailsShoppingCartModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow:  7px 7px 17px #f7f7f7, -7px -7px 17px #ffffff;
}

.itemDetailsModalText {
    margin: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.setDetailsItem {
    margin: 20px 20px 0 0;
    font-size: 18px;
    text-decoration: none;
}

.setInfo {
    margin-bottom: 20px;
    padding-bottom: 20px; 
    width: calc(100% - 20px);
    font-size: 18px;
}

.itemMainImageSelected {
    display: block;
}

.itemMainImageHidden {
    display: none;
}

.continueBrowsingLink {
    color:#ED3F1C;
    text-decoration: none;
}

.sideMenuButtons {
    position: fixed;
    margin: 20px;
    min-width: 200px;
    height: 500px;
}

.userProfileButton {
    float:right;
    margin-top: 10px;
    width: 50px;
    min-height: 50px;
    border-radius: 25px;
    cursor: pointer;
}

.userProfileMenu {
    position: absolute;
    display: none;
    top: 80px;
    right: 25px;
    width: 200px;
    z-index: 1;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow:  7px 7px 17px #f7f7f7, -7px -7px 17px #ffffff;
}

.userProfileMenuItem, .userProfileMenuItemTop, .userProfileMenuItemBottom {
    display: block;
    padding: 10px;
    color: #5D5E64;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    border-top: 2px solid #5D5E64;
    border-left: 2px solid #5D5E64;
    border-right: 2px solid #5D5E64;
}

.userProfileMenuItemTop {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.userProfileMenuItemBottom {
    border-bottom: 2px solid #5D5E64;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.userProfileMenuItem:hover {
    color: #ffffff;
    background-color: #736B1E;
}

.userProfileMenuItem a, .termsAndConditionsLink {
    color: #5D5E64;
    text-decoration: none;
}

.privacyPolicy, .termsOfService {
    width: 80%;
    margin: auto;
}

.login {
    width: 400px;
    margin: auto;
}

.menuButton {
    display: none;
    position: fixed;
    bottom: 25px;
    left: 25px;
}

.menuIcon {
    color: #ED3F1C;
    font-size: 24;
}

.mobileMenu {
    position: fixed;
    bottom: 50px;
    left: 20px;
    width: 100%;
}

.mobileMenuButtons {
    padding: 50px 0;
    background-color: rgba(255, 255, 255, 0.8);
}

.mobileMenuItem {
    display: block;
    margin: 10px 0;
    color: #ED3F1C;
    font-family: Helvetica;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
}



.footerItem, .footerItemBottom {
    display: block;
    color: #5D5E64;
    text-decoration: none;
    font-size: 14px;
}

.footerItem:hover {
    color:#736B1E;
}

@media only screen and (max-width: 1200px) {
    .item {
        margin: 50px 100px;
    }
}

@media only screen and (max-width: 800px) {
    .itemContainer {
        margin: 20px 5%;
    }
    .sideMenu {
        display: none;
    }
    .item {
        margin: 50px;
    }
    .mainContent {
        margin: 0;
    }
    .mainContentDetails {
        margin: 20px;
    }
    .headerShoppingCartIcon {
        right: 20px;
    }
    .headerShoppingCartItemCount {
        top: 10px;
        right: 25px;
    }
    .shoppingCartItem {
        margin: 20px;
        flex-direction: column;
    }
    .itemEditContainer {
        width: 284px;
        margin: 20px auto;
    }
    .shippingSubmitButton {
        width: 156px;
        margin: auto;
    }
    .paySubmitButton {
        margin: 30px;
    }
    .itemInfo {
        margin-left: 0;
    }
    .itemDetailsShoppingCartModal {
        max-width: 140px;
    }
    .menuButton {
        display: block;
    }
}