* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}


[class*="col-"] {
    float: left;
    padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}


.leftpane >.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.leftpane>.menu li {
    padding: 5px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.leftpane> .menu li:hover {
    background-color: #0099cc;
}

.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 1.3vw;
    padding: 15px;
    width: 100%;
    bottom: 0;
    margin-top: auto;
}
    .footer a {
        color: white;
        text-decoration: none;
        transition: color 0.3s ease;
    }
        .footer a:hover {
            color: #ffd700; /*galben-auriu la hover */
            text-decoration: none; 
        }


.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    /*min-height: 100%;*/
    font-family: "Lucida Sans", sans-serif;
    font-size: 16px;
    /* font-size: 1.3vw;*/
    box-sizing: border-box;
    height: 100vh !important;
}


body {
    /*margin: 0 30px;*/
    /*min-height: 100vh;*/
    height: 100%;
    margin: 0;
    font-family: Arial
}

.wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.curved {
    background: #416f8b;
    text-align: center;
    color: #fff;
}

    .curved p {
        font-size: 1rem;
        font-family: 'Segoe UI',Tahoma,Verdana, Geneva, Tahoma, sans-serif;
    }


.content {
    display: flex;
    flex: 1;
    align-items: start;
    height: 100%;
    width: 100%;
}
    /* Create two unequal columns that sits next to each other */
    /* Sidebar/left column */
    .content > .leftpane {
        flex: 1 1 20%;
        flex-direction: column;
        background-color: #4d83a4;
        padding: 20px;
        overflow-y: scroll;
        height: 100%;
        align-items:center;
    }

    /* Main column */
    .content > .mainpane {
        display: flex;
        flex-direction: column;
        flex: 1 1 80%;
        box-sizing: border-box;
        font-size: 1.2vw;
        background-color: white;
        padding: 10px;
        overflow-y: scroll;
        height: 100%;
        justify-content: flex-start;
       
    }

    .content .mainpane .login {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
        /*Css pentru DocumentView*/
        .sidenav {
            width: 300px;
            position: fixed;
            z-index: 1;
            left: 0px;
            background: #eee;
            overflow-x: hidden;
            padding: 8px 0;
        }

    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 15px;
        color: #2196F3;
        display: block;
    }

        .sidenav a:hover {
            color: #064579;
        }

.main {
    margin-left: 140px; /* Same width as the sidebar + left position in px */
    font-size: 15px; /* Increased text to enable scrolling */
    padding: 0px 10px;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 20px;
        }
}

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

/*Customitze font */
h5 {
    font-size: 1.2vw !important; 
}

.myTitlePage {
    font-size: 1.5vw;
    font-weight: bold;
    color: blue;
}

.my-RedTextColor {
    color: red;
}

.my-BlueTextColor {
    color: blue;
}

.my-DarkBlueTextColor {
    color: darkblue;
}

.my-strong {
    font-weight: bold;
}

.my-weightText {
    font-size: 1.2vw;
}

.my-button-font {
    font-size: 1.2vw;
}

.verset-panel {
    color: white;
    background-color: #4d83a4;
    border: thin solid #33b5e5;
    border-radius: 25px;
    font-weight: bold;
    align-self: center;
    overflow: auto;
}
/*Google fonts*/
.satisfy-regular {
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-style: normal;
}
.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}
.courgette-regular {
    font-family: "Courgette", cursive;
    font-weight: 400;
    font-style: normal;
}
.dm-serif text-regular {
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: normal;
}

.dm-serif text-regular-italic {
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: italic;
}
/*Google fonts*/

/*******************************/

/*Customitze imput check box*/

input[type=checkbox] {
    transform: scale(1.5);
}

.mycheckbox label {
    margin-right: 25px;
}

/******************************/

/*Show more show less in Anunturi ShowWordContent*/
a.morelink {
    text-decoration: none;
    outline: none;
}

.morecontent span {
    display: none;
}
/* Inserting this collapsed row between two flex items will make 
 * the flex item that comes after it break to a new row */
.break {
    flex-basis: 100%;
    height: 0;
}
/*Afisare text  in razor page*/
.display-text-flex-container {
    margin-top: 5%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center; /* Distribute items evenly along the main axis */
}

.display-flex-box-big {
    display: flex;
    align-items: center;
    width: 85%;
    line-height: 1.6;
    height: auto;
    background-color: #f0f0f0;
    border: 1px solid #c2c2c2;
    margin-top: 10px;
    border-radius: 6px 6px 6px 6px;
    box-sizing: border-box;
    color: #00004d;
    padding: 10px;
}

    .display-flex-box-big pre {
        white-space: pre-wrap; /* permite ruperea rândului */
        word-break: break-word;
        overflow-x: auto; /* permite scroll doar dacă e absolut necesar */
    }

.display-text-flex-container .top {
    text-shadow: #fff 0 1px 0;
    font-weight: bold;
    text-align: center;
    font-size: 1.5vw;
    margin: 0 0 10px 0;
    padding: 10px;
    background-color: #d9d9d9;
    border-radius: 6px 6px 6px 6px;
}
/*************Display Biblia**************************/
.biblia-flex-container {
    margin-top: 2%;
    padding-left: 2%;
    display: flex;
    width: 100%;
    height: 40vw;
    flex-direction: column;
    align-items: center; /* Distribute items evenly along the main axis */
}

/************************************************/
.anunturi-flex-container {
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Distribute items evenly along the main axis */
}

.home-anunturi-flex-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Distribute items evenly along the main axis */
}

    .anunturi-flex-container .top {
        text-shadow: #fff 0 1px 0;
        font-weight: bold;
        text-align: center;
        font-size: 1.2vw;
        margin: 0 0 10px 0;
        padding: 10px;
        background-color: #d9d9d9;
        border-radius: 6px 6px 6px 6px;
    }


.anunturi-flex-box, .anunturi-flex-box-big {
    display: block;
    width: 100%;
    max-width: 85%;
    line-height: 1.6;
    height: auto;
    background-color: #f0f0f0;
    border: 1px solid #c2c2c2;
    margin-top: 10px;
    border-radius: 6px;
    box-sizing: border-box;
    color: #00004d;
    padding: 5px;
    overflow-x: auto;
    word-wrap: break-word!important;
    word-break: break-word!important;
}
#word-container {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 1rem;
    line-height: 1.6;
}

    /* Forțăm stilurile pentru toate elementele generate de docx-preview */
    #word-container * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

div.anunturi-flex-box a img {
    float: left;
    margin: 5px;
    width: 20%;
    height: auto;
    border: 3px solid transparent; /* Initial border (transparent) */
    transition: border-color 0.3s ease; /* Add a smooth transition effect */
}
div.anunturi-flex-box a {
    margin-right: 15px;
}
div.anunturi-flex-box p {
    text-align: justify; /* Text justificat pentru un aspect uniform */
    margin-top: 0;
    text-indent: 20px; /* Adaugă indentarea primului rând al fiecărui paragraf */
}

    /*div.anunturi-flex-box p:last-child {
        clear: left;*/ /* Asigură că ultimele rânduri încep sub imagine */
    /*}*/

.anunturi-flex-box:hover img {
    border-color: #0074D9; /* Change the border color on hover */
}
    .anunturi-flex-box-big img {
        float: left;
        margin: 5px;
        width: 50%;
    }

.anunturi-flex-box div {
    text-align: justify;
}

/**************************************/
        /*Show more show less pentru un singur articol*/
        #cont-text {
    max-height: 110px; /* Set an initial height for the teaser */
    overflow: hidden;
    transition: max-height 0.5s;
}

    #cont-text.open {
        max-height: 1000px;
        /* Set transitions */
        transition: max-height 0.5s;
    }

#show-more {
    width: 20%;
    /*background: #1594e5;*/
    color: #262626;
    font-family: sans-serif;
    font-size: 0.8rem;
    font-style: italic;
    display: block;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: 5px;
    margin-left: 80%;
    margin-top: 15px;
}
/*******************************************************/

/*Customitze layout with boxes and text*/

.flex-container-full {
    margin-top: 5%;
    display: flex;
    justify-content: center; /* Distribute items evenly along the main axis */
}

.flex-box-full {
    width: 80%;
    height: auto;
    background-color: #f0f0f0;
    border: 1px solid #c2c2c2;
    margin-bottom: 10px;
    border-radius: 6px 6px 6px 6px;
    box-sizing: border-box;
    color: #00004d;
}

    .flex-box-full .indent, .flex-box-full span {
        padding-left: 30px;
        padding-right: 20px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .flex-box-full .top {
        text-shadow: #fff 0 1px 0;
        font-weight: bold;
        text-align: center;
        font-size: 1.1vw;
        margin: 0 0 10px 0;
        background-color: #d9d9d9;
    }

.flex-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next row */
    justify-content: space-between; /* Distribute items evenly along the main axis */
}

.flex-box-item {
    width: calc(33.33% - 10px); /* Each item takes up one-third of the available space */
    height: auto;
    background-color: #f0f0f0;
    border: 1px solid #c2c2c2;
    margin-bottom: 10px;
    border-radius: 6px 6px 6px 6px;
    box-sizing: border-box; /* Include padding and border in the width calculation */
}

     .flex-box-item .top {
        text-shadow: #fff 0 1px 0;
        font-weight: bold;
        text-align: center;
        font-size: 1.1vw;
        margin: 0 0 10px 0;
        background-color: #d9d9d9;
    }



    .flex-box-item .continut {
        display: flex;
        flex-direction: column;
        text-align: left;
        font-size: 1vw;
        margin: 0 0 10px 0;
        padding-left: 5px;
    }

        .flex-box-item .continut li {
            list-style-type: none;
            font-size: 1.2vw;
        }
/*****************************************************************/

/*Marimea si culoarea funtului din h5 pentru date preluate din model*/
h5.bg-info.text-white span b {
    color: darkblue;
    font-size: 1.2vw;
}


/*Ajustez marimea fontului de pe btn-secondary si btn-primary*/
.btn-secondary.custom-font-size, .btn-primary.custom-font-size {
    font-size: 1vw;
}
/*Ascund elementul Home din meniul afisat in NavNarMenu pe destkop*/
#menu ul.main-menu.clearfix li#home:nth-child(2) {
    display: none;
}