body {
    /*padding-top: 2em;*/
    padding-bottom: 20px;
    /*font-family: "myriad-pro",sans-serif;*/
    /*font-family: squarespace-ui-font;*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
    /*padding-left: 0 !important;*/
    padding-right: 8px;
    min-height: 62vh;
}

.DueDateCss {
    background-color: #DC143C;
    color: #ffffff;
}

.listDateCss {
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
}

.listBookCover {
    width: 7em;
}
    

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/

.inlineDisplay {
        display: inline-flex;
}


/*EMA Opac style*/

.SearchBar {
    background-color: #637A85;
    margin-right: 0px;
    margin-left: 0px;
}

.icon-bar {
    background-color: #ffffff;
}

.navbar-toggle {
    background-color: #000000;
}

.header-logo {
    float: left;
    margin-top: 12px;
}

    .header-logo img {
        max-height:91px;
    }

.opac-header {
    border-bottom: 1px solid #e4dbdb;
    background-color:#a22;
}


.FinPanel {
    background-color: #f3f3f3;
    border-radius: 4px
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #a22;
    color: #fff;
    transform: scale(1.4);
}


.panel-success > .panel-heading {
    color: #ffffff;
    background-color: #a22;
    border-color: #a22;
}

.panel-success {
    border-color: #ffffff;
}


.panel {
    -webkit-box-shadow: 0 1px 1px #ffffff;
}



.Reserved {
    font-size: 20px !important;
    color: green !important;
    background: transparent !important;
    border-color: transparent !important;
}


/*select2*/
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 18px !important;
    padding: 10px;
}

.select2-container .select2-selection--single {
    height: 47px !important;
    background-color: rgb(242,245,247) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 47px !important;
}

.select2-dropdown {
    background-color: rgb(242,245,247) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #a22 !important;
    color: white;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #a22 !important;
    color: white;
}

.select2-results__option {
    padding: 5px 16px !important;
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid black !important;
    border-radius: 0px !important;
}

.BookCover {
    width: 94px;
    height: 143px;
}



/*star*/
.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
}

ul.rating {
    display: inline-block;
}

.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;
}

.rating .filled {
    color: orangered;
}

.clear {
    margin-top: 20px;
}



.finHeader {
    background: linear-gradient(-30deg,#868e90,#8a9e9c);
    color: #ffffff;
    border-radius: 4px;
    padding: 0.2em 0;
    margin-bottom:1em;

}



/*Home Search Bar style*/

.HomeSearchForm {
    margin:10%;
}

form.homeSearchForm #advancedSearch {
    text-align: right;
}

#advancedSearch a {
    line-height:40px;
}



form.homeSearchForm .select2 {
    float: left;
    margin-right: 1em;
    font-size: 17px;
}

form.homeSearchForm input[type=text] {
    padding: 10px;
    font-size: 17px;
    border: 1px solid grey;
    float: left;
}

/* Style the submit button */
form.homeSearchForm button {
    float: left;
    /* padding: 10px; */
    color: #a22;
    font-size: 30px;
    border: 1px solid transparent;
    border-left: none;
    cursor: pointer;
    background-color: transparent;
}

/*form.example button:hover {
            background: #0b7dda;
        }*/

/* Clear floats */
form.homeSearchForm::after {
    content: "";
    clear: both;
    display: table;
}



.swal2-content {
    font-size: 2em !important;
}

.swal2-styled.swal2-confirm {

    background-color: #a22;

}

.advancedSeach-top {
    width:93.5%; text-align:right;
}

.btn-google-preview {
    border-radius: 4px;
    background-color: #FFF;
    color: #000;
    border-color: #a22;
}


    .btn-google-preview:hover {
        color: #fff;
        background-color: #a22;
        border-color: #c76f6f;
        transform: scale(1.1);
    }


.btn-google-info {
    border-radius: 4px;
    background-color: #FFF;
    color: #000;
    border-color: #a22;
}


    .btn-google-info:hover {
        color: #fff;
        background-color: #a22;
        border-color: #c76f6f;
        transform: scale(1.1);
    }





.btn-reserve {
    border-radius: 4px;
    background-color: #a22;
    color: #ffffff
}

    .btn-reserve:hover {
        color: #fff;
        background-color: #a22;
        border-color: #c76f6f;
        transform: scale(1.1);
    }



.panel-primary > .panel-heading {
    background-color: #000;
    border-color: grey;
    font-weight: bold;
}

.panel-primary {
    border-color: #000;
}



.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #00bcf1 !important;
    border-color: #00bcf1 !important;
    
}

.square {
    height: 1.5em;
    width: 1.5em;
    float: right;
    margin: 0.5em;
}

.dashboard-form-number {
   font-size:3em;
   color:#ffffff;
}

.dashboard-form-row {
    float: left;
    display: inline-flex;
    margin-left: 2em;
    word-break: break-all;
    margin-right: 2em;
    color:#ffffff;
}

.dashboard-form-icon {
    font-size: 88px;
    margin-top: 0.2em;
    color: #FFFFFF;
}

.dashboard-form:hover {
    box-shadow: 0 0 11px #1abbe8;
}

.db-blue {
    background: linear-gradient(-193deg,#1abbe8,#a22);
}


.sq-dark {
    background-color: #000000;
    border: 1px solid #ffffff;
}

.sq-yellow {
    background-color: #ffff00;
    border: 1px solid #ffffff;
}



.sq-blue {
    background-color: #00bcf1;
    border: 1px solid #ffffff;
}


.sq-smallFont {
    font-size: 12px;
    color: white;
    text-align: left;
    margin: 5px;
}

.sq-NormalFont {
    font-size: medium;
    color: white;
    text-align: left;
    margin: 4px;
}

.sq-BigFont {
    font-size: x-large;
    color: white;
    text-align: left;
}


.profile-img {
    text-align: center;
}

    .profile-img img {
        width: 100%;
        height: 100%;
    }

    .profile-img .file {
        position: relative;
        overflow: hidden;
        margin-top: -34%;
        width: 100%;
        border: none;
        border-radius: 0;
        font-size: 15px;
        background: #212529b8;
    }

        .profile-img .file input {
            position: absolute;
            opacity: 0;
            right: 0;
            top: 0;
        }








/*.myLoan {
    background-color: #e25a53 !important;
    color: #ffffff !important;
    border-color: #e25a53 !important;
}

.myLoan a {
   color: #ffffff;
   text-decoration: none;
}



.myResv {
    background-color: #fdb35d !important;
    color: #ffffff !important;
    border-color: #fdb35d !important;
}


    .myResv a {
        color: white;
        text-decoration: none;
    }


.myList {
    background-color: #e3a6ae !important;
    color: #000000 !important;
    border-color: #e3a6ae !important;
}

    .myList a {
        color: #000000;
        text-decoration: none;
    }

.myComments {
    background-color: #a4d9d6 !important;
    color: #000000 !important;
    border-color: #a4d9d6 !important;
}

    .myComments a {
        color: #000000;
        text-decoration: none;
    }*/
.panel-heading span {
    margin-top: -20px;
    font-size: 15px;
}

.panel-body {
    padding: 15px;
    min-height: 80px;
}


    @media (min-width: 768px) {
        .navbar-nav {
            width: 100%;
        }

        .navbar-header {
            float: right;
            width: 55%;
        }

        .navbar-nav > li > a {
            margin-top: 4.5em;
            /*margin-bottom: 15px;*/
            color: #fff;
            /*font-size: 18px;*/
            font-weight: 600;
            font-style: normal;
            font-size: 15px;
            letter-spacing: .15em;
            text-transform: uppercase;
        }

        .navbar-nav > li {
            /*width: 20%;*/
            text-align: right;
        }


        .loginForm {
            margin: 5% 21%;
        }


        /*Home Search Bar style*/

        form.homeSearchForm #advancedSearch {
            width: 93%;
        }


        form.homeSearchForm .select2 {
            width: 20% !important;
        }

        form.homeSearchForm input[type=text] {
            width: 71%;
        }

        /* Style the submit button */
        form.homeSearchForm button {
            width: 6%;
        }

        .dashboard-form {
            width: 17%;
            height: 17em;
            float: left;
            border-radius: 1em;
            margin: 1em;
        }

    }

    @media only screen and (max-width: 767px) {

        .dashboard-form {
            width: 40%;
            height: 19em;
            float: left;
            border-radius: 1em;
            margin: 1em;
        }

        /*Home Search Bar style*/

        form.homeSearchForm #advancedSearch {
            width: 100%;
        }

        form.homeSearchForm .select2 {
            width: 100% !important;
            margin-bottom: 2em;
        }

        form.homeSearchForm input[type=text] {
            width: 100%;
        }

        /* Style the submit button */
        form.homeSearchForm button {
            width: 100%;
            background-color: #a22;
            color: #ffffff;
            margin-top: 1em;
            border-radius: 4px;
        }

        .btn-add-selected-toList {
            margin-top:0.2em;
        }
    }




.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/gear-loading-icon.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}



/*registeration page*/
@media (max-width: 768px) {
    #social-sign-in .icon-5x {
        font-size: 7em;
    }
}

@media (max-width: 480px) {
    #social-sign-in .icon-5x {
        font-size: 4.5em;
    }
}

@media (min-width: 1199px) {
    #social-sign-in .icon-5x {
        font-size: 7em;
    }
}

.well h3 {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 20px;
}

#signupForm .input-group {
    margin-bottom: 20px;
}

/* get font-awesome to work with BS3 */
.input-group-addon .icon-2x {
    width: 28px;
    min-width: 28px;
    display: inline-block;
}

.inline-block > li {
    position: relative;
    display: inline-block;
    margin: 0 10px 10px 0;
}

/* Why doesn't OR work? Tested with Chrome 29, FF 24 or IE 11 */
@media (max-width: 480px), (min-width: 1199px) {
    #social-sign-in .icon-5x {
        font-size: 7em;
    }
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    text-decoration: none;
}

.checkbox-inline, .radio-inline {
    margin-right: 28px;
    font-size: 16px;
}



a {
    color: #a22;
}

input:focus {
    outline: none !important;
    border: 1px solid #a22;
    box-shadow: 0 0 3px #a22;
}

.btn-success {
    /*color: #fff;
    background-color: #a22;
    border-color: #c76f6f;*/
    color: #000;
    background-color: #fff;
    border-color: #a22;
}


    .btn-success:hover {
        color: #fff;
        background-color: #a22;
        border-color: #c76f6f;
        transform: scale(1.1);
    }


    .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus {
        background-color: #a22;
        border-color: #c76f6f;
        transform: scale(1);
    }


    .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
        color: #fff;
        background-color: #a22;
        border-color: #c76f6f;
    }

    .btn-success:focus, .btn-success.focus {
        color: #fff;
        background-color: #a22;
        border-color: #c76f6f;
    }
    .btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus {
        color: #fff;
        background-color: #a22;
        border-color: #c76f6f;
    }


.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #000 !important;
    border-color: #000 !important;
    COLOR: #fff;
}

.btn-fill {
    background-color: #a22;
    color: #fff;
}