:root {
    --color-bg-gri: #f2f0f3;
    --color-mov1: #382862;
    --color-mov2: #7952b3;
    --color-mov3: #61428f;
    --color-mov4: #6f42c1;
    --color-mov5: #ac00e0;
    --color-ciel1: #54cec6ff;
    --color-bgciel: rgba(226, 252, 255, .9);
    --color-azur: #e2fcff;
    --color-hoverbg: rgba(0, 0, 0, 0.04);
}

body {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    /* font-family: "Verdana", sans-serif, "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    background-color: var(--color-azur);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    /* font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    margin-top: 0.5rem;
}

a {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
}

a,
a:hover {
    text-decoration: none !important;
}

.modal-body a.register {
    color: var(--color-mov2);
}

.modal-body a.login {
    color: var(--color-mov5);
}

.content {
    padding: 7rem 0;
}

h2 {
    font-size: 20px;
}

.bg-gri {
    background-color: var(--color-bg-gri);
}

.bg-turcoaz {
    background-color: var(--color-ciel1);
}

.fbfz_font {
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
}

.text-white {
    color: white;
}

.ms-options {
    padding: 20px;
    border: none;
}

.ms-options-wrap>button:focus,
.ms-options-wrap>button {
    border-radius: 4px;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
    border: none !important;
    height: 40px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 2;
}

.ms-options-wrap>button:focus:hover,
.ms-options-wrap>button:hover {
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.ms-options-wrap>button:focus:after,
.ms-options-wrap>button:after {
    right: 10px;
}

.ms-options-wrap>button:focus:active,
.ms-options-wrap>button:focus:focus,
.ms-options-wrap>button:active,
.ms-options-wrap>button:focus {
    outline: none;
}

.ms-options-wrap.ms-active>button:focus,
.ms-options-wrap.ms-active>button {
    -webkit-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.ms-options-wrap>.ms-options {
    /* z-index: 1; */
    margin-top: 12px;
    border: none !important;
    -webkit-box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.ms-options-wrap>.ms-options .ms-search input {
    border-bottom: 1px solid #efefef;
}

.ms-options-wrap>.ms-options .ms-selectall {
    color: #aaaaaa;
    text-transform: uppercase;
    font-size: 11px;
}

.ms-options-wrap>.ms-options .ms-selectall:hover {
    color: #000;
}

.ms-options-wrap>.ms-options>ul li.selected label {
    border-radius: 4px;
    background: #e1f2fb;
}

.ms-options-wrap>.ms-options>ul li label {
    border-radius: 4px;
    border: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.ms-options-wrap>.ms-options>ul li:hover label {
    border: none;
    background: #f7f7f7;
}

.form-group {
    margin-top: .1rem;
    margin-bottom: .1rem;
}

.titlu {
    text-align: center;
    /* color: white; */
    /* background-color: var(--color-ciel1); */
    /* padding-top: .1rem;
    padding-bottom: .1rem; */
}

.fbfz_row {
    width: 95%;
    max-width: 1260px;
    margin: auto;
    position: relative;
}

.titlu h1,
.titlu h2,
.titlu h3,
.titlu h4,
.titlu h5,
.titlu h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0;
    margin-bottom: 0;
    padding: 1rem;
}

.titlu h1,
.titlu h2 {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg, #6552a8 0%, #5f3adf 50%, #1b60db 100%);
    -webkit-text-fill-color: transparent;
}

.user-actions,
.user-menu {
    z-index: 9;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
    border-color: rgb(189, 0, 223);
}

#navbarSupportedContent ul li,
#navbarSupportedContent .btn {
    font-size: 24px;
    border: none;
    padding-left: 30px;
    padding-right: 30px;
}

#navbarSupportedContent {
    /* font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif; */
    /* font-family: Georgia, 'Times New Roman', Times, serif; */
}

.navbar-brand img {
    height: 100px!important;
}

.home-image {
    width: 100%;
    align-self: center;
    object-fit: cover;
}

.articol {
    padding: 1rem;
    font-size: 20px;
}


/* .bgimage {
    width: 100%;
    height: 1000px;
    background: url('https://x.fbfz.ro/img/volunteers-2048x994.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.bgimage h5 {
    color: white;
    text-shadow: 2px 2px #333;
} */

.containerp {
    position: relative;
    text-align: center;
    color: white;
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}

.top-left {
    position: absolute;
    text-align: center;
    line-height: 1.15;
    top: 35%;
    left: 3%;
    font-size: 3vw;
    color: #382862;
}

.top-right {
    position: absolute;
    text-align: center;
    line-height: 1.15;
    top: 35%;
    right: 3%;
    font-size: 3vw;
    color: #382862;
}

.bottom-right {
    position: absolute;
    bottom: 8px;
    right: 16px;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-center {
    position: absolute;
    top: 13%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 3vw;
    width: 70%;
}

.top-left div,
.top-right div {
    font-size: 2.5vw;
    line-height: 1;
}


/* svg */


/* svg {
            height: 50%;
        } */


/* This svg.path is displayed on hover*/

#svg_css_ex1:hover path {
    d: path("M20,80 L50,20 L80,80");
    stroke: blue;
}

.counted .tag {
    color: #6c757d;
    font-weight: 500;
    padding: .75rem 1.5rem;
}

.counted .tag:hover,
button.tag:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: #6c757d;
}


/* mesaj */

.mesaj {
    border: 1px;
    border-radius: 10px;
    border-style: solid;
    border-color: #aaaaaa;
    padding: 10px 20px;
    color: grey;
    max-width: 75%;
}

.sender .mesaj {
    background-color: white;
}

.receiver .mesaj {
    background-color: var(--color-hoverbg);
}

.organizator .mesaj {
    background-color: rgba(172, 255, 47, 0.1);
}

.update .msgcreated {
    font-size: x-small;
    text-align: end;
}

.mesaj .msgcreated,
#update_body>.msgcreated {
    font-size: x-small;
    float: right;
}

.mesaj .msgsender {
    font-size: 16px;
}

.thread {
    overflow-y: scroll;
    max-height: 400px;
    /* border: 1px; */
    border-radius: 10px;
    border-style: none;
    border-color: rgba(0, 0, 0, 0.04);
    background-color: rgba(0, 0, 0, 0.04);
}

#threadu {
    padding: .5rem 1rem;
}

.sendmessage {
    background-color: rgba(10, 0, 10, 0.1);
}


/* .sendmessage button {
    color: red;
    width: 400px;
} */

.msg-section {
    padding: 50px 0;
}

#section_updates {
    margin-bottom: 50px;
}

.update {
    border: 1px;
    border-radius: 10px;
    border-style: solid;
    border-color: #aaaaaa;
    padding: 10px 20px;
    color: grey;
    min-width: 95%;
    max-width: 95%;
    transition: background-color 3s ease-in;
    background-color: white;
    margin: auto;
}

.update.newUpdate,
#citesc.newUpdate {
    background-color: var(--color-bgciel);
    transition: background-color 3s ease-in;
}

.myUpdates>.update {
    margin: auto;
    margin-bottom: 5px;
}

.myUpdates:hover {
    background-color: var(--color-hoverbg);
}

#citesc {
    background-color: var(--color-mov1);
    transition: background-color 1s;
}

.myUpdates {
    cursor: pointer;
    padding-bottom: 5px;
}


/* .myUpdates .uText,
.myUpdates .msgcreated {
    display: inline-flex;
}

.myUpdates .msgcreated {
    display: inline-flex;
    float: right;
    position: absolute;
    bottom: 0;
} */


/* header din nav test */

.navbar .nav-item i {
    font-size: 18px;
}

.navbar .dropdown-item i {
    font-size: 16px;
    min-width: 22px;
}

.navbar .nav-item.open>a {
    background: none !important;
}

.navbar .dropdown-menu {
    border-radius: 1px;
    border-color: #e5e5e5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.navbar .dropdown-menu a {
    color: #777;
    padding: 8px 20px;
    line-height: normal;
}

.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:active {
    color: #333;
}

.navbar .dropdown-item .material-icons {
    font-size: 21px;
    line-height: 16px;
    vertical-align: middle;
    margin-top: -2px;
}

.navbar .badge {
    color: #fff;
    background: var(--color-mov5);
    font-size: 11px;
    border-radius: 20px;
    position: absolute;
    min-width: 10px;
    padding: 4px 6px 0;
    min-height: 18px;
    top: 5px;
}

.navbar a.notifications,
.navbar a.messages {
    position: relative;
    margin-right: 10px;
}

.navbar a.messages {
    margin-right: 20px;
}

.navbar a.notifications .badge {
    margin-left: -8px;
}

.navbar a.messages .badge {
    margin-left: -4px;
}

.navbar .active a,
.navbar .active a:hover,
.navbar .active a:focus {
    background: transparent !important;
}


/* my navbar */

.user-action .fa-user-o {
    color: var(--color-ciel1);
}

.user-action span {
    font-size: 18px;
}

.user-actions a:hover .fa {
    color: var(--color-mov2);
}


/* accordion */

.accordion .btn-link {
    color: black;
}

.accordion .btn-link:hover {
    color: var(--color-mov3);
    text-decoration: none;
}

.accordion .card-header {
    border-bottom: 0px none;
}