/* CSS FOR HTML */

body {
    margin: 0px;
}

#DOM {
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

#LeftBox {
    color: #535353;
    width: 56.8%;
    height: 100vh;
    padding: 5%;
    padding-top: 3%;
    padding-right: 3.3%;
}

#RightBox {
    background-color: #fafafa;
    color: #535353;
    box-shadow: 1px 0 0 #e1e1e1 inset;
    width: 43.2%;
    height: 100vh;
    padding: 5%;
    padding-left: 3%;
    padding-top: 3%;
    position: relative;
    float: right;
}

#Information {
    float: right;
    width: 65%;
}

.Products {
    width: 60%;
}

#Logo {
    margin-bottom: 8px;
    font-size: 28px;
    color: #333333;
}

.Fields {
    color: #a26b25;
    font-size: 12px;
}

.Fields2 {
    margin-top: 20px;
    display: none;
}

.Fields3 {
    margin-top: 0px;
    display: none;
}

.Fields4 {
    color:  #535353;
    font-size: 13px;
    margin-top: 0px;
    text-align: justify;
}

.Fields5 {
    color: #a26b25;
    font-size: 14px;
}

#Fields6 {
    font-size: 14px;
    margin: 20px 0px 0px 0px;
    padding: 10px 0;
    border-top: 1px solid #e1e1e1;
}

#TopInformation {
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    margin: 30px 0;
    padding: 15px;
    font-size: 15px;
    color: #a26b25;
}

#Section {
    padding-top: 30px;
    border-top: 1px solid #e1e1e1;
    font-size: 15;
}

.Input1 {
    background-color: white;
    color: #535353;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    width: 46%;
    height: 35px;
    margin-bottom: 10px;
    padding-left: 2.6%;
}

#BorderInput1 {
    margin-right: 2.3%;
}

.Input2 {
    background-color: white;
    color: #535353;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    width: 96.3%;
    height: 35px;
    margin-bottom: 10px;
    padding-left: 2.6%;
}

select {
    background-color: white;
    color: #535353;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    width: 99.5%;
    height: 38px;
    margin-bottom: 10px;
    padding-left: 15px;
}

.Input3 {
    background-color: white;
    color: #535353;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    width: 27.8%;
    height: 35px;
    margin-bottom: 10px;
    padding-left: 2.6%;
}

.BorderInput2 {
    margin-right: 2.3%;
}

#Newsletter {
    margin-left: -5px;
    font-size: 12px;
}

#MarginBottom {
    margin-bottom: 10px;
    margin-top: -8px;
}

.AddRemove {
    margin-bottom: 10px;
    font-size: 14px;
    border: none;
    background-color: white;
    cursor: pointer;
    text-align: right;
    font-weight: 500;
    color: #a26b25;
    text-decoration: underline;
}

.Button {
    display: inline-block;
    cursor: pointer;
    background-color: #000000;
    background-clip: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px transparent solid;
    border-radius: 5px;
    color: white;
    font-weight: 500;
    width: 150px;
    padding: 1.4em 0;
    text-align: center;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}

.Justify {
    text-align: right;
}

input:focus {
    outline: none;
    border-color: #a26b25;
    box-shadow: 0 0 0 1px #a26b25;
}

select:focus {
    outline: none;
    border-color: #a26b25;
    box-shadow: 0 0 0 1px #a26b25; 
}

#ShippingPolicy {
    margin: 0px 0px 10px 0px;
    padding: 10px 0;
    border-top: 1px solid #e1e1e1;
    bottom: 2px;
}

#HiddenText {
    display: none;
}

/* PRODUCTS ADDED TO THE CART */

.ProductImage {
    height: 64.39px;
    width: 64.39px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
}

.ProductList {
    list-style: none;
}

.ProductTitle {
    font-weight: 500;
    color: #323232;
    padding-left: 15px;
    width: 200px;
}

#ProductSpace {
    margin: 0px;
    padding: 0px;
}

.TableStyle {
    width: 100%;
    font-size: 14px;
}

.ImageStyle {
    width: 75px;
    height: 72.38px;
}

.PriceStyle {
    font-size: 14px;
    font-weight: 500;
    color: #323232;
}

.RemoveRight {
    background-color: #fafafa;
    text-align: left;
}

.InputRequired {
    border-color: #9B360D;
    box-shadow: 0 0 0 1px #9B360D;
}

.redText {
    color: #9B360D;
}

#ProductSpace2 {
    display: none;
}

/* Responsive */

@media(max-width: 1605px) {
    .Input3 {
        width: 27.5%;
    }
    select {
        width: 100%;
    }
}

@media (max-width: 1426px) {
    #LeftBox {
        width: 43%;
    }
    #Information {
        float: right;
        width: 80%;
    } 
}

@media (max-width: 1320px){
    .Input1 {
        width: 45.7%;
    }
}

@media (max-width: 1260px) {
    #Products {
        width: 70%;
    }
}

@media (max-width: 1217px) {
    .Input3 {
        width: 27%;
    }
    #TopInformation {
        font-size: 13px;
    }
    .Products {
        width: 80%;
    }
}

 @media (max-width: 1180px){
    .Input1 {
        width: 45.3%;
    }
}

@media (max-width: 1086px){
    .Input3 {
        width: 27%;
    }
}


@media (max-width: 1000px) {
    #DOM {
        display: inline;
        text-align: center;
    }

    .MoveSource {
        text-align: justify;
    }

    #Logo {
        text-align: justify;
    }

    #MarginBottom {
        text-align: justify;
    }

    .Fields {
        text-align: justify;
    }

    #LeftBox {
        width: 60%;
        margin: 0 auto;
    }

    #Information {
        width: 95%;
    }

    .ProductTitle {
        width: 300px;
    }

    .Products {
        margin-top: 10px;
        width: 100%;
        border-top: 1px solid #e1e1e1;
        border-bottom: 1px solid #e1e1e1;
        font-size: 13px;
    }

    #RightBox {
        display: none;
    }

    #ProductSpace2 {
        display: block;
    }

    .Input1 {
        width: 98%;
        padding-left: 10px;
    }

    .Input2 {
        width: 98%;
        padding-left: 10px;
    }

    .Input3 {
        width: 98%;
        padding-left: 10px;
    }

    select {
        width: 100%;
    }

    ul {
        padding: 0;
    }

    .PriceStyle {
        text-align: justify;
    }

    .RemoveRight {
    background-color: white;
    }
}

@media (max-width: 520px){
    #LeftBox {
        width: 80%;
        margin: 0 auto;
    }
}

@media (max-width: 395px){
    .PriceStyle {
        font-size: 12px;
    }

    .ProductTitle {
        font-size: 12px;
    }
}

/* Animations */

#Loading {
    display: none;
}

.Loader {
    animation: sentMessage 1.5s linear;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    pointer-events: none;
  }
  
  @keyframes sentMessage {
    0% { color: black; }
    100% { color: white; }
}

.MessageLoad {
    animation: MessageLoader 1.5s linear;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
  }
  
  @keyframes MessageLoader {
    0% { color: white; }
    100% { color: #9B360D; }
}