/* http://tobiasahlin.com/spinkit/ */
.spinner {
    width: 40px;
    height: 40px;
    position: relative;
    /*margin: 100px auto; */
}
.spinner-sm {
    width: 30px;
    height: 30px;
    position: absolute;
    left:20%;
    top:40%;
    /*margin: 100px auto; */
}
.double-bounce1, .double-bounce2 {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background-color: #1d68e2;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}
div[id^='renew-section'] .spinner-sm .double-bounce1, div[id^='renew-section'] .spinner-sm .double-bounce2 {
    background-color: #fff;
    top:70px;
}
.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 50% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}
.account-count {
    font-size:18px;
    font-weight:bold;
}
/*  Horizontal spinner bar */
.hor-spinner-bar-container {
    vertical-align: middle;
    height:20px;

}
.horizontal-spinner-bar {
    width: 80%;
    height: 20px;
    border: 1px solid #2980b9;
    border-radius: 3px;
    background-image:
    repeating-linear-gradient(
            -45deg,
            #2980b9,
            #2980b9 11px,
            #eee 10px,
            #eee 20px /* determines size */
    );
    background-size: 28px 28px;
    animation: bar-move .5s linear infinite;
    margin:auto;
    top:50%;
    position:relative;

}

@keyframes bar-move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}


/* End of horizon spinner bar

/* PopUp element */



/* The actual popup */
.popuptext {
    display:none !important;

    /*visibility: hidden;
    width: 160px;
    background-color: #fff;
    color: #000;
    text-align: center;
    border:#555 1px solid;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
*/}

/* Popup arrow */
/*.popuptext::after {
//     content: "";
//     position: absolute;
//     top: 100%;
//     left: 50%;
//     margin-left: -5px;
//     border-width: 5px;
//     border-style: solid;
//     border-color: #555 transparent transparent transparent;
/ }
*/
.popuptext#popup-renew-selected {
    position:relative;
    float:right;
    left:0px !important;
    margin-left: 0px !important;
    border:#fff 0px;
}
.popuptext#popup-renew-selected::after {
    content: none;
}



/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
/*
.popuptext button {
    padding:4px;
    border:#fff 1px dotted;
    cursor:pointer;
    color:#fff;
    margin:3px;
    background:#000099;
}
.popuptext button.yes {
    background:#ff0000;
}
*/

/*  */





/* Mail box table*/
table, caption, tbody, tfoot, thead, tr, th, td {
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
div#my-account-mail { width:70%; margin:20px auto; }
.mailinbox tbody tr td { background: #fafafa; }
.mailinbox tbody tr.unread td { background: #fff; font-weight: bold; }
.mailinbox tbody tr.selected td { background:#FFFFD2; }
.mailinbox thead th, .mailinbox tfoot th { border: 1px solid #ccc; border-right: 0; }
.mailinbox tfoot th { border-bottom: 1px solid #ccc !important; }
.mailinbox a.title { font-weight: normal; text-decoration:none; }
.mailinbox tbody tr.unread a.title { font-weight: bold; }
.mailinbox td.star, .mailinbox td.attachment { text-align: center; position:relative;}
.msgstar {
    /*display: inline-block; width: 16px; height: 16px; background: url(images/unstar.png) no-repeat 0 0; */
    display: inline-block; width: 16px; height: 16px;
    /*content: "\2605";*/
    cursor: pointer; opacity: 0.5;
    color:#000000;

}
.msgstar:hover{
    color:#ff0000;
}
.msgstar:hover:before{
    opacity: 1;
    content: "\2605";
    color:#ff0000;
    position:absolute;
    left:10px;
    cursor:pointer;
   }
.starred {
    /*background-image: url(images/star.png); opacity: 1; */
    content: "\2605";

}



.table-bordered caption + thead tr:first-child th:first-child, .table-bordered caption + tbody tr:first-child td:first-child, .table-bordered colgroup + thead tr:first-child th:first-child, .table-bordered colgroup + tbody tr:first-child td:first-child { border-top-left-radius: 0; }

.table-bordered caption + thead tr:first-child th:last-child, .table-bordered caption + tbody tr:first-child td:last-child, .table-bordered colgroup + thead tr:first-child th:last-child, .table-bordered colgroup + tbody tr:first-child td:last-child { border-top-right-radius: 0; }

.table-bordered thead:first-child tr:first-child th:first-child,
.table-bordered tbody:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:last-child,
.table-bordered tbody:first-child tr:first-child td:last-child,
.table-bordered thead:last-child tr:last-child th:first-child,
.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tfoot:last-child tr:last-child td:first-child { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }


.table { margin-bottom: 0; width:100%; font-size:14px }
.table th { background: #fcfcfc; }
.table tfoot th { border-bottom: 1px solid #ddd; }
.table th.aligncenter, .table td.aligncenter { text-align: center; }
.table tr { padding:5px; height:28px}
table td.center, table th.center { text-align: center; }

.clearall { clear: both; }

.mailinbox thead th, .mailinbox tfoot th {
    background: rgb(237,237,237);
    background: -moz-linear-gradient(top, rgba(237,237,237,1) 0%, rgba(222,222,222,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(237,237,237,1)), color-stop(100%,rgba(222,222,222,1)));
    background: -webkit-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    background: -o-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    background: -ms-linear-gradient(top, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    background: linear-gradient(to bottom, rgba(237,237,237,1) 0%,rgba(222,222,222,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
}

/*==================================================*/
/*  $Grouped                                        */
/*==================================================*/
.grouped {
    display:inline-block;
    list-style:none;
    padding:0;
    margin:0;
}
.grouped li {
    float:left;
    margin:0;
    padding:0;
}
.grouped .bttn {
    float:left;
    margin-left:-1px;
}
.grouped li:not(:first-child):not(:last-child) .bttn,
.grouped > .bttn:not(:first-child):not(:last-child) {
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -ms-border-radius:0;
    -o-border-radius:0;
    border-radius:0;
}
.grouped li:first-child .bttn,
.grouped > .bttn:first-child {
    margin-left:0;
    -webkit-border-top-right-radius:0;
    -webkit-border-bottom-right-radius:0;
    -moz-border-radius-topright:0;
    -moz-border-radius-bottomright:0;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.grouped li:last-child .bttn,
.grouped > .bttn:last-child {
    -webkit-border-top-left-radius:0;
    -webkit-border-bottom-left-radius:0;
    -moz-border-radius-topleft:0;
    -moz-border-radius-bottomleft:0;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.bttn {
    text-decoration:none;
    cursor:pointer;
    font-size:0.70em;
    padding:0 8px;
    font-weight:bold;
    height:30px;
    line-height:30px;
    display:inline-block;
    outline:0;
    color:#444;
    background-color:#f5f5f5;
    background-image:-webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image:-moz-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image:linear-gradient(top,#f5f5f5,#f1f1f1);
    border:1px solid #d9d9d9;
    border:1px solid rgba(0,0,0,0.1);
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
}
.bttn:hover {
    border:1px solid #c6c6c6;
    border:1px solid rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    position:relative;
    z-index:1;
}
.bttn:active {
    -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
    -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
}

#fee-payment-form-wrapper  {
    width:75%;
    text-align: center;
}
#fee-payment-form-wrapper .left, #fee-payment-form-wrapper .right, #fee-payment-form-wrapper #lump-sum {
    width:45%;
    margin:auto;
}

.bookshelf_wrapper {
    position: relative;
    top: 60%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.books_list {
    margin: 0 auto;
    width: 300px;
    padding: 0;
}

.book_item {
    position: absolute;
    top: -120px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    list-style: none;
    width: 40px;
    height: 120px;
    opacity: 0;
    background-color: #1e6cc7;
    border: 5px solid white;
    -webkit-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
    -webkit-animation: travel 2500ms linear infinite;
    animation: travel 2500ms linear infinite;
}
.book_item.first {
    top: -140px;
    height: 140px;
}
.book_item.first:before, .book_item.first:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: white;
}
.book_item.first:after {
    top: initial;
    bottom: 10px;
}
.book_item.second:before, .book_item.second:after, .book_item.fifth:before, .book_item.fifth:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    height: 17.5px;
    border-top: 5px solid white;
    border-bottom: 5px solid white;
}
.book_item.second:after, .book_item.fifth:after {
    top: initial;
    bottom: 10px;
}
.book_item.third:before, .book_item.third:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    position: absolute;
    top: 10px;
    left: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 5px solid white;
}
.book_item.third:after {
    top: initial;
    bottom: 10px;
}
.book_item.fourth {
    top: -130px;
    height: 130px;
}
.book_item.fourth:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    position: absolute;
    top: 46px;
    left: 0;
    width: 100%;
    height: 17.5px;
    border-top: 5px solid white;
    border-bottom: 5px solid white;
}
.book_item.fifth {
    top: -100px;
    height: 100px;
}
.book_item.sixth {
    top: -140px;
    height: 140px;
}
.book_item.sixth:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    position: absolute;
    bottom: 31px;
    left: 0px;
    width: 100%;
    height: 5px;
    background-color: white;
}
.book_item.sixth:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: '';
    position: absolute;
    bottom: 10px;
    left: 9px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 5px solid white;
}
.book_item:nth-child(2) {
    -webkit-animation-delay: 416.6666666667ms;
    animation-delay: 416.6666666667ms;
}
.book_item:nth-child(3) {
    -webkit-animation-delay: 833.3333333333ms;
    animation-delay: 833.3333333333ms;
}
.book_item:nth-child(4) {
    -webkit-animation-delay: 1250ms;
    animation-delay: 1250ms;
}
.book_item:nth-child(5) {
    -webkit-animation-delay: 1666.6666666667ms;
    animation-delay: 1666.6666666667ms;
}
.book_item:nth-child(6) {
    -webkit-animation-delay: 2083.3333333333ms;
    animation-delay: 2083.3333333333ms;
}

.shelf {
    width: 300px;
    height: 5px;
    margin: 0 auto;
    background-color: white;
    position: relative;
}
.shelf:before, .shelf:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1e6cc7;
    background-image: radial-gradient(rgba(255, 255, 255, 0.5) 30%, transparent 0);
    background-size: 10px 10px;
    background-position: 0 -2.5px;
    top: 200%;
    left: 5%;
    -webkit-animation: move 250ms linear infinite;
    animation: move 250ms linear infinite;
}
.shelf:after {
    top: 400%;
    left: 7.5%;
}

@-webkit-keyframes move {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 10px;
    }
}

@keyframes move {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: 10px;
    }
}
@-webkit-keyframes travel {
    0% {
        opacity: 0;
        -webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1);
        transform: translateX(300px) rotateZ(0deg) scaleY(1);
    }
    6.5% {
        -webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
        transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
    }
    8.8% {
        -webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
        transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(270px) rotateZ(0deg);
        transform: translateX(270px) rotateZ(0deg);
    }
    17.6% {
        -webkit-transform: translateX(247.2px) rotateZ(-30deg);
        transform: translateX(247.2px) rotateZ(-30deg);
    }
    45% {
        -webkit-transform: translateX(165px) rotateZ(-30deg);
        transform: translateX(165px) rotateZ(-30deg);
    }
    49.5% {
        -webkit-transform: translateX(151.5px) rotateZ(-45deg);
        transform: translateX(151.5px) rotateZ(-45deg);
    }
    61.5% {
        -webkit-transform: translateX(115.5px) rotateZ(-45deg);
        transform: translateX(115.5px) rotateZ(-45deg);
    }
    67% {
        -webkit-transform: translateX(99px) rotateZ(-60deg);
        transform: translateX(99px) rotateZ(-60deg);
    }
    76% {
        -webkit-transform: translateX(72px) rotateZ(-60deg);
        transform: translateX(72px) rotateZ(-60deg);
    }
    83.5% {
        opacity: 1;
        -webkit-transform: translateX(49.5px) rotateZ(-90deg);
        transform: translateX(49.5px) rotateZ(-90deg);
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(0px) rotateZ(-90deg);
        transform: translateX(0px) rotateZ(-90deg);
    }
}
@keyframes travel {
    0% {
        opacity: 0;
        -webkit-transform: translateX(300px) rotateZ(0deg) scaleY(1);
        transform: translateX(300px) rotateZ(0deg) scaleY(1);
    }
    6.5% {
        -webkit-transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
        transform: translateX(279.5px) rotateZ(0deg) scaleY(1.1);
    }
    8.8% {
        -webkit-transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
        transform: translateX(273.6px) rotateZ(0deg) scaleY(1);
    }
    10% {
        opacity: 1;
        -webkit-transform: translateX(270px) rotateZ(0deg);
        transform: translateX(270px) rotateZ(0deg);
    }
    17.6% {
        -webkit-transform: translateX(247.2px) rotateZ(-30deg);
        transform: translateX(247.2px) rotateZ(-30deg);
    }
    45% {
        -webkit-transform: translateX(165px) rotateZ(-30deg);
        transform: translateX(165px) rotateZ(-30deg);
    }
    49.5% {
        -webkit-transform: translateX(151.5px) rotateZ(-45deg);
        transform: translateX(151.5px) rotateZ(-45deg);
    }
    61.5% {
        -webkit-transform: translateX(115.5px) rotateZ(-45deg);
        transform: translateX(115.5px) rotateZ(-45deg);
    }
    67% {
        -webkit-transform: translateX(99px) rotateZ(-60deg);
        transform: translateX(99px) rotateZ(-60deg);
    }
    76% {
        -webkit-transform: translateX(72px) rotateZ(-60deg);
        transform: translateX(72px) rotateZ(-60deg);
    }
    83.5% {
        opacity: 1;
        -webkit-transform: translateX(49.5px) rotateZ(-90deg);
        transform: translateX(49.5px) rotateZ(-90deg);
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(0px) rotateZ(-90deg);
        transform: translateX(0px) rotateZ(-90deg);
    }
}