body {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: #c7c6c0;
}

table {
    font-family: "arial";
    font-size: 11px;
    color: #4C4C4C;
    line-height: 10px;
}

a:link, a:visited {
    text-decoration: underline;
    color: #072A5E;
}

a:hover {
    color: #895B13;
    text-decoration: underline;
}

a.blue14:link, a.blue14:visited {
    text-decoration: none;
    font-size: 14px;
    color: #072a5e;
}

a.blue14:hover {
    font-size: 14px;
    color: #072a5e;
    text-decoration: underline;
}

a.gray:link, a.gray:visited {
    text-decoration: none;
    color: #4C4C4C;
}

a.gray:hover {
    color: #895B13;
    text-decoration: underline;
}

a.white:link, a.white:visited {
    text-decoration: none;
    color: #ffffff;
}

a.white:hover {
    color: #ffffff;
    text-decoration: underline;
}

.font_brown {
    color: #6c5617;
}

.font_16brownn {
    font-size: 16px;
    color: #6c5617;
}

.font_14blue {
    font-size: 14px;
    color: #072a5e;
}

.font_14black {
    font-size: 14px;
    color: #000000;
}

.font_blue {
    color: #072a5e;
}

.font_red {
    color: #cb100f;
    font-size: 10px;
}

.font_11red {
    color: #cb100f;
    font-size: 11px;
}

.font_10gray {
    color: #515151;
    font-size: 10px;
}

input, select {
    font-family: arial;
    font-size: 11px;
    color: #575654;
    border: 1px solid #cccccc;
    background-color: #d9d8d2;
    font-weight: bold;
    height: 14px;
}

textarea {
    font-family: arial;
    font-size: 11px;
    color: #575654;
    border: 1px solid #cccccc;
    background-color: #d9d8d2;
    font-weight: bold;
}

.btn {
    font-family: Arial;
    font-size: 11px;
    color: #000000;
    background-image: url(images/bg_btn.gif);
    height: 20px;
    border: 1px solid #626262;
    font-weight: bold;
}

.btn2 {
    font-family: Arial;
    font-size: 11px;
    color: #000000;
    background-image: url(images/bg_btn2.gif);
    height: 32px;
    border: 1px solid #626262;
    font-weight: bold;
    background-repeat: repeat-x;
    background-position: center center;
    background-color: #eceae9;
    text-transform: uppercase;
}

.tb1 {
    border-top-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-left-style: solid;
    border-top-color: #cccbc9;
    border-left-color: #cccbc9;
}

.tb2 {
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-right-color: #cccbc9;
    border-bottom-color: #cccbc9;
}

.tb3 {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #cccbc9;
}

.btn_link {
    width: 168px;
    font-family: Arial;
    font-size: 11px;
    color: #000000;
    padding: 10px;
    background-image: url(images/bg_btn2.gif);
    height: 32px;
    border: 1px solid #626262;
    font-weight: bold;
    background-repeat: repeat-x;
    background-position: center center;
    background-color: #eceae9;
    text-transform: uppercase;
    text-decoration: none !important;
}

.book-type-container {
    float: left;
    list-style: none;
    margin-left: 20%;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.book-type-container li
{
    /*float: left;
    list-style: none;
    border: 1px solid #e77600;
    height: 50px;
    width: 100px;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
    background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
    background-image: none;
    height: auto;
    border-radius: 4px;
    cursor: pointer;*/
    float: left;
    list-style: none;
    border: 1px solid #e77600;
    height: 50px;
    width: 100px;
    background-color: #fef8f2;
    background-image: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
    background: linear-gradient(to bottom,#f7f8fa,#e7e9ec);
        border-color: #adb1b8 #a2a6ac #8d9096;
}

.book-type-container li.active {
    float: left;
    list-style: none;
    border: 1px solid #e77600;
    height: 50px;
    width: 100px;
    background-color: #fef8f2;
    background-image: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
    
}

    .book-type-container li:nth-child(2) {
        margin-left: 15px;
    }

.b-type {
    float: left;
    color: #111;
    font-weight: 700;
    line-height: 19px;
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

.b-cost {
    /*float: left;*/
    color: #B12704 !important;
    font-size: 12px !important;
    line-height: 19px !important;
    display: block;
    width: 100%;
    text-align: center;
}
.book-description {
    float: left;
    display: inline;
    width: 71.5%;
    line-height: 20px;
    padding: 0 14px;
    text-indent: 5px;
    text-align: justify;
}

.book-cotaniner img {
    width: 245px;
    height: 317px;
    /*margin: 20px;*/
    /*box-shadow: 3px 6px 29px -1px;*/
    float: left;
}

.book {
    float: left;
    width: 100%;
    margin: 0px 0;
    border: 1px solid #c2c2c2;
    padding: 5px 0;
    border-left: none;
    border-right: 0;
}
.book:hover{
    background: white;
}

    .book select {
        padding: 10px 15px;
        height: auto !important;
        margin-left: 10px;
    }

    .book button {
        background: url(gap-books/cart-icon.png) no-repeat right #ffa901;
        padding: 13px;
        border: none;
        font-size: 9px;
        width: 90px;
        text-align: left;
        background-position-x: 65px;
        border-radius: 2px;
    }
     .orange-btn {
        background: right #ffa901;
        padding: 13px;
        border: none;
        font-size: 9px;
        width: 90px;
        text-align: left;
        background-position-x: 65px;
        border-radius: 2px;
        font-weight: bold;
        color: white;
        text-align: center;
    }


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

.remove {
    background-color: #c00000 !important;
}
.view-cart select
{
    padding: 0px !important;
    height: 28px;
}
.view-cart {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 34.5%;
    /*background: url(images/logo.png) no-repeat center top #fff;*/
    background: center top #fff;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

    .view-cart table {
        /* bottom: 0; */
        width: 100%;
        /* position: absolute; */
        margin-top: 24px;
        /* border: 1px solid; */
        padding: 18px 16px;
    }
.error {
    color: red;
}
.cart-container {
    width: 96%;
    /*margin: 120px auto;*/
}

.cart-items {
    border-bottom: 1px solid #ccc;
}

.cart-item {
    overflow: auto;
    border: 1px solid #ccc;
    border-bottom: none;
    padding: 5px 0;
    border-left: none;
    border-right: none;
}

    .cart-item div {
        text-align: left;
        padding-top: 25px;
        font-weight: bold;
    }

.book-name {
    float: left;
    width: 48%;
}

.book-image {
    float: left;
    padding-top: 2px !important;
    text-align: center !important;
    width: 15%;
}

.book-type {
    float: left;
    width: 15%;
}

.book-cost {
    float: left;
    width: 10%;
    text-align: right !important;
}

.book-action {
    float: left;
    width: 10%;
    text-align: center !important;
    padding-top: 12px !important;
}

.book-image img {
    width: 50px !important;
}

.check-out {
    width: 300px;
    margin: 10px auto !important;
    display: block;
}
.remove-cart img {
   border: none;
    width: 15px;
    background: none;
    margin-top: 8px;
}
.remove-cart {
    /*background-color: #ec2121f0 !important;
    border: none;
    padding: 10px 15px;*/
    background: none;
        border: none;
}
.book-type-icon {
    opacity: 0.1;
}
.buy-now {
    background-color: #4CAF50;
    border: none;
    padding: 10px 15px;
    border-radius: 2px;
    height: 36px;
    color: white;
    margin: 5px;
}
.button-holder {
    /*margin-top: 16px;
    float: right;
    margin-right: 35px;*/
    display: block;
        text-align: center;
}
* {
    box-sizing: border-box;
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    margin: 0 -16px;
}

.col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
}

.col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
}

.col-75 {
    -ms-flex: 75%; /* IE10 */
    flex: 75%;
}

.col-25,
.col-50,
.col-75 {
    padding: 0 16px;
}

.payment-container {
    /*margin-top: 95px;*/
}

    .payment-container input[type=text], .payment-container select {
        background: none;
    }

.container {
    /*background-color: #f2f2f2;*/
    padding: 5px 20px 15px 20px;
    /*border: 1px solid lightgrey;
  border-radius: 3px;*/
}

.view-cart input[type=text], .view-cart select {
    width: 100%;
    margin-bottom: 20px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

label {
    margin-bottom: 10px;
    display: block;
}


.icon-container {
    margin-bottom: 20px;
    padding: 7px 0;
    font-size: 24px;
}

.checkout-btn {
    background-color: #4CAF50;
    color: white;
    padding: 12px;
    margin: 10px 0;
    border: none;
    width: 100%;
    border-radius: 3px;
    cursor: pointer;
    font-size: 17px;
    height: 45px;
}

    .checkout-btn:hover {
        background-color: #45a049;
    }

a {
    color: #2196F3;
}

hr {
    border: 1px solid lightgrey;
}

span.price {
    float: right;
    color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
    .row {
        flex-direction: column-reverse;
    }

    .col-25 {
        margin-bottom: 20px;
    }
}

.cart-container {
    display: none;
}


/**
 * Extracted from: SweetAlert
 * Modified by: Istiak Tridip
 */
.success-checkmark {
    width: 80px;
    height: 115px;
    margin: 0 auto;
}

    .success-checkmark .check-icon {
        width: 80px;
        height: 80px;
        position: relative;
        border-radius: 50%;
        box-sizing: content-box;
        border: 4px solid #4CAF50;
    }

        .success-checkmark .check-icon::before {
            top: 3px;
            left: -2px;
            width: 30px;
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px;
        }

        .success-checkmark .check-icon::after {
            top: 0;
            left: 30px;
            width: 60px;
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in;
        }

        .success-checkmark .check-icon::before, .success-checkmark .check-icon::after {
            content: '';
            height: 100px;
            position: absolute;
            background: #FFFFFF;
            transform: rotate(-45deg);
        }

        .success-checkmark .check-icon .icon-line {
            height: 5px;
            background-color: #4CAF50;
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10;
        }

            .success-checkmark .check-icon .icon-line.line-tip {
                top: 46px;
                left: 14px;
                width: 25px;
                transform: rotate(45deg);
                animation: icon-line-tip 0.75s;
            }

            .success-checkmark .check-icon .icon-line.line-long {
                top: 38px;
                right: 8px;
                width: 47px;
                transform: rotate(-45deg);
                animation: icon-line-long 0.75s;
            }

        .success-checkmark .check-icon .icon-circle {
            top: -4px;
            left: -4px;
            z-index: 10;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box;
            border: 4px solid rgba(76, 175, 80, 0.5);
        }

        .success-checkmark .check-icon .icon-fix {
            top: 8px;
            width: 5px;
            left: 26px;
            z-index: 1;
            height: 85px;
            position: absolute;
            transform: rotate(-45deg);
            background-color: #FFFFFF;
        }

@keyframes rotate-circle {
    0% {
        transform: rotate(-45deg);
    }

    5% {
        transform: rotate(-45deg);
    }

    12% {
        transform: rotate(-405deg);
    }

    100% {
        transform: rotate(-405deg);
    }
}

@keyframes icon-line-tip {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

.alert-container {
    /*margin-top: 120px;*/
    background: white;
    padding: 52px 0;
    border: 1px solid #a5d7a7;
     width: 99%;
    margin: 0px auto;
}

.pay-instruction {
    text-align: center;
}

.view-cart, .cart-container, .payment-container, .alert-container {
    display: none;
}

.download-button {
    background: #ffa901 !important;
    border: none;
    padding: 10px 15px;
    float: left;
    text-decoration: none !important;
}

.viewcart-close-button {
    background: #eeece6 !important;
    border: none;
    padding: 10px 15px;
    margin-top: 20px;
}
.error-item {
    display: block;
}
.error-pay {
    border: 1px solid #ff000047;
    padding: 10px;
    color: red;
    display: none;
    line-height: 18px;
}
/*.billing-address label,.billing-address input{
    width: 49%;
    float: left;
    margin:0 1%;
}*/


@-webkit-keyframes pulsate {
  0% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(0.75);
  }
}
@-moz-keyframes pulsate {
  0% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(0.75);
  }
}
@-o-keyframes pulsate {
  0% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(0.75);
  }
}
@keyframes pulsate {
  0% {
    transform: scale(0.75);
  }
  50% {
    transform: scale(1.75);
  }
  100% {
    transform: scale(0.75);
  }
}
@-webkit-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.payment-loader-container {
  margin: 25vh auto 0;
      height: 100%;
      display: none;
}
.payment-loader-container .payment-loader {
  width: 125px;
  height: 125px;
  margin: 0 auto;
}
.payment-loader-container .payment-loader .payment-circle {
  text-align: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #4caf50;
}
.payment-loader-container .payment-loader .payment-circle .payment-inner-circle {
  position: relative;
  left: -12.5%;
  top: 35%;
  width: 125%;
  height: 25%;
  background-color: white;
  -webkit-animation: rotate 2s infinite linear;
  animation: rotate 2s infinite linear;
}
.payment-loader-container .payment-loader .payment-circle h1 {
  position: relative;
  color: darkgray;
  top: 8%;
  font-family: "Raleway";
  -webkit-animation: pulsate 1.25s infinite ease;
  animation: pulsate 1.25s infinite ease;
}