/*M {*/
/*#f56d9d*/
/*#f56d9d*/
/*#68facb*/
/*#f5f0f4*/
/*#fcb4d4*/
/*#f8a0bf*/
/*#94a4a4*/
/*#F5C0C4*/
/*#A0E7E5*/
/*#B4F8C8*/
/*#FFAEBC*/
/*#FBE7C6*/
/*}*/

/* ----------------------------------- */
/* FONTS */
/* ----------------------------------- */


@font-face {
    font-family: Ray;
    font-weight: 400;
    src: url("../fonts/Ray/Ray-Bold[@mimvid].ttf");
}

/* ----------------------------------- */
/* ROOT SETTINGS */
/* ----------------------------------- */

html {
    block-size: border-box;
    direction: rtl;
}

body {
    font-family: Ray;
    font-weight: bold;
    text-align: right;
    background-color: #f5f5f5;
    color: #444;
}

/* ----------------------------------- */
/* HEADINGS */
/* ----------------------------------- */

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.35rem;
}

h4 {
    font-size: 1.1rem;
}

/* ------------------------- */
/* BTN COLORS */
/* ------------------------- */

/* red */

.btn-red {
    background-color: #e5331c;
    color: white;
    opacity: 0.85;
}

.btn-red:hover, .btn-red.active {
    opacity: 1;
    color: #e5331c;
    box-shadow: 0 0 5px #e5331c;
}

/* blue */

.btn-blue {
    background-color: #3498db;
    color: white;
    opacity: 0.85;
    box-shadow: 0 0 5px transparent;
}

.btn-blue:hover, .btn-blue.active {
    opacity: 1;
    color: #3498db;
    box-shadow: 0 0 5px #3498db;
}

/* aqua */

.btn-aqua {
    background-color: #54d0a6;
    border-color: #54d0a6;
    color: white;
}

.btn-aqua:hover, .btn-aqua:active {
    opacity: 1;
    color: #54d0a6;
    box-shadow: 0 0 5px #54d0a6;
}


.btn-outline-aqua {
    color: #00bcd4;
    font-weight: bolder;
    text-shadow: -1px 0 transparent, 0 1px transparent, 1px 0 transparent, 0 -1px transparent;
    transition: color .15s ease-in-out, text-shadow .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border: 4px solid #00bcd4;
    box-shadow: 0px 0px 5px #00bcd4;
}

.btn-outline-aqua:hover, .bg-outline-aqua:active {
    background-color: #00bcd4;
    border: 4px solid #00bcd4;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

/* green */

.btn-outline-green {
    color: #54d0a6;
    font-weight: bolder;
    text-shadow: -1px 0 transparent, 0 1px transparent, 1px 0 transparent, 0 -1px transparent;
    transition: color .15s ease-in-out, text-shadow .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    border: 4px solid #54d0a6;
    box-shadow: 0px 0px 5px #54d0a6;
}

.btn-outline-green:hover, .bg-outline-aqua:active {
    background-color: #54d0a6;
    border: 4px solid #66fecb;
    box-shadow: 0px 0px 5px #54d0a6;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}


/* ------------------------- */
/* ICON COLORS */
/* ------------------------- */

/* red */

.color-red {
    color: #e5331c;
    opacity: 0.85;
    transition: text-shadow 0.2s, opacity 0.2s;
}

.color-red:hover, .color-red.active {
    opacity: 1;
    /*text-shadow: 0 0 1px #e5331c;*/
}

/* green */

.color-green {
    color: #54d0a6;
    opacity: 0.85;
    transition: box-shadow 0.2s, opacity 0.2s;
}

.color-green:hover, .color-green.active {
    opacity: 1;
    box-shadow: 0 0 3px #54d0a6;
}

/* ------------------------- */
/* font-size */
/* ------------------------- */

.fz1-5rem {
    font-size: 1.5rem;
}

.fz1-25rem {
    font-size: 1.25rem;
}


a {
    text-decoration: none !important;
}

/*
a:hover, a:active, a:link, a:visited {
	color: #444;
}
*/

.row {
    --bs-gutter-x: 0;
}

.main-block {
    box-shadow: 0 0 5px 0 #c6c6c6;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    background-color: #ffffff;
}

.socialaccount_provider {
    font-size: 2rem;
}

.alert-on-top {
    position: fixed !important;
    width: 50vw !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.owl-item {
    margin-left: 0 !important;
}

.carousel-book {
    height: 12rem;
    text-align: center;
    border: 2px solid darkgray;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);;
    margin: 5px 10px;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
}

.carousel-book * {
    font-size: 0.9rem;
}

@media screen and (max-width: 768px) {
    #rightNavbar {
        width: 100% !important;
    }

    #accountsButton {
        width: 100% !important;
    }
}

@media screen and (max-width: 768px) {
    #searchForm {
        width: 100% !important;
    }
}

.preformatted{
    white-space: pre;
}