/* настройки тела документа, "шапки" и "подвала" */

body {
    background-color: ivory;
    font-family: 'Roboto', serif;
}

footer, header {
    position: fixed;
    z-index: 100;
    width: 100%;
}

header{
    background-color: darkseagreen;
    color: whitesmoke;
    height: 130px;
    text-align: center;
    top: 0;
    position: fixed;
}

header div{
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    margin-top: 30px;
}

footer{
    background-color:darkgray;
    height: 50px;
    text-align: right;
    bottom: 0;
}

footer div {
    padding-top: 20px;
    padding-right: 5px;
    color: white;
}

/* Этот блок выровнен по центру страницы.Он используется для вывода форм входа,
 регистрации и информационных сообщений */

.centered-flex{
    height: 95vh;
    width: 100vw;
    display: flex;
    margin-top: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Оформление ячеек таблицы с полями формы входа*/

.form td {
    text-align: left;
    background-color: darkseagreen;
    color: ivory;
    padding: 10px;
}

/* Стили ниже задают стиль оформления для ячеек таблицы, в которых помещаются
заголовок формы, строка сообщения об ошибке и кнопка входа */

.form tr:first-child td, .form tr:last-child td
{
    text-align: center;
    background-color: transparent;
    color: darkseagreen;
}

.form tr:first-child td a {
    color: darkolivegreen;
}

/* Стандартный стиль сообщения об ошибке. Позже сгруппирую с другими типами сообщений*/

.error {
    color: indianred;
    text-align: center;
    margin-bottom: 10px;
}

.info {
    color: darkseagreen;
    text-align: center;
    margin-bottom: 10px;
}

.info-msg-centered {
    font-size: 20px;
}


/* Обертка для карточек книг на странице каталога */
.gallery-flex, .reserve-flex{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 60vw;
    margin: 140px auto;
}

.reserve-flex {
    justify-content: center;
}

/* Оформление карточки книги */

.gallery-card{
    display: flex;
    width: 200px;
    height: 300px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    margin-left: 5px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
    background-color: blanchedalmond;
    border-radius: 15px;
    position: relative;
    color: darkolivegreen;
}

.gallery-card img, .book-author, .book-title{
    text-align: center;
    box-sizing: border-box;
}

.gallery-card:nth-child(5n + 1){
    margin-left: 10px;
}

/*Внутренние элемента карточки: обложка, заголовок книги, автор книги*/
.gallery-card img{
    max-width: 150px;
    max-height: 180px;
}

.book-author{
    text-align: center;
    position: absolute;
    top: 10px;
}

.book-title {
    text-align: center;
    margin: 0 3px;
    position: absolute;
    bottom: 10px;
}


/*Стили страницы О книге*/

.about-flex{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 40vw;
    margin: 140px auto;
}

.book-author-about {
    color: darkcyan ;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.book-header{
    font-size: 1.5rem;
    color: #298829;
    font-style: italic;
    margin-bottom: 30px;
}


.book-cover{
    width: 50%;
    float: left;
    margin-top: 5px;
    margin-bottom: 10px;
    text-align: center;

}

.book-cover img{
    width: 200px;
   }

.book-summary {
    text-align: justify;
    line-height: 1.2em;
    margin-bottom: 20px;
}

.labels {
    /*margin-top: 20px;*/
    display: inline-block;
    text-align: right;
    padding-bottom: 5px;
    padding-right: 10px;
    line-height: 1.2rem;
}

.values {
    display: inline-block;
    text-align: left;
    padding-left: 10px;
    line-height: 1.2rem;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

/* Блок оформления иконок статусов книги. Отображаются поверх карточки книги в каталоге */

.reserved, .approval, .expire, .on-loan {
    position: absolute;
    background-color: ivory;
    border-radius: 50%;
    top: 5px;
    right: 5px;
}

.expire {
    top: 10px;
    left: 10px;
    padding: 5px;
    color: green;
    border-radius: 5px;
}

.approval, .on-loan {
    border-radius: 30%;
    padding: 5px;
}

/* Стиль кнопок и варианты расположения групп кнопок (по центру и справа внизу) */

.right-vertical-buttons-block {
    position: fixed;
    right: 10px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
}

.horizontal-buttons-block{
    display: flex;
    flex-direction: row;
}

.fixed-buttons-center{
    position: fixed;
    display: flex;
    bottom: 70px;
}

/* Стандартная кнопка формы*/

.simple-button {
    padding: 8px 16px;
    border-radius: 15px;
    background-color: darkseagreen;
    color: ivory;
    font-size: 14px;
    font-weight: bold;
    margin-right: 15px;
    margin-bottom: 5px;

}

.simple-button:hover, .header-btn:hover{
    opacity: 0.8;
    cursor: pointer;
}

/* Оформление страницы управления статусами книг */

.digest-table{
    margin-top: 50px;
    border-collapse: separate;
    border-spacing: 2px;
}

.digest-table th, .digest-table td{
    padding: 10px;
    text-align: center;
}

.digest-table th{
    background-color: darkseagreen;
    color: ivory;
}

/* Оформление формы поиска на странице каталога */

.search-flex{
    position: fixed;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    top: 90px;
    left: 15%;
    width: 70vw;
    justify-content: center;
    align-items: center;
    z-index: 101;
}

.search-flex input[type='text'], select {
    width: 250px;
    margin: auto 10px auto 0;
    background-color: white;
    border-radius: 10px;
    color: #4d602c;
}

.header-btn {
    background-color: #8fbc8f;
    font-size: 14px;
    margin: 0 5px;
    padding: 2px 10px;
    border-radius: 10px;
    color: white;
}

a {
    text-decoration: none;
    color: ivory;
}

label {
    display: block;
    text-align: left;
    margin-left: 5px;
    /*color: ivory;*/
}

/* Оформление блока меню в шапке страницы*/

.account {
    position: absolute;
    top: 0;
    margin-top: 9px;
    right: 25px;
}

.account img {
    width: 75px;
}
.account p {
    margin-top: 5px;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: normal;
    color: aliceblue;
}

.account input[type='submit']{
    margin-top: 0;
}

/* Панель вывода статистики  библиотеки */

.stats {
    position: fixed;
    left: 50px;
    top: 10px;
    color: ivory;
    z-index: 101;
    border: 1px solid ivory;
    padding: 10px 10px 0 10px;
    border-radius: 15px;
}

.status {
    color: indianred;
}

.invite {
    position: fixed;
    right: 50px;
    top: 200px;
    z-index: 101;
    border: 1px solid ivory;
    padding-left: 20px;
    padding-right: 30px;
}

.errorlist {
    color: indianred;
    margin-bottom: 10px;
    text-align: center;
}

fieldset {
    text-align: center;
    margin-bottom: 20px;
}

#id_book_status div {
    display: inline-block;
    margin-bottom: 10px;
}

#id_status{
    width: auto;
}

#id_create-book-title, #id_create-book-summary{
    width: 375px;
}

#id_pages{
    width: 50px;
}

#id_summary{
	width: 370px;
	height: 160px;
}