body {
    margin: 0;
    background-image: url('../../media/fancourt/bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Barlow-Regular', serif !important;
    min-width: 407px;
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'GildaDisplay-Regular', serif !important;
    color: rgb(34, 34, 34) !important;
}

p,
span,
input,
label {
    font-family: 'Barlow-Regular', serif !important;
}

@font-face {
    font-family: 'Barlow-Regular';
    src: url('../../fonts/Barlow-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GildaDisplay-Regular';
    src: url('../../fonts/GildaDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.primary-btn {
    width: 30%;
    background-color: rgb(46, 46, 46) !important;
    color: white !important;
    border-color: rgb(46, 46, 46) !important;
    border-radius: 0 !important;
    font-family: 'Barlow-Regular', serif !important;
    box-shadow: 4px 4px 6px #000000;
}

.primary-btn:hover {
    background-color: #222 !important;
    color: white !important;
    border-color: #222 !important;
}

.secondary-btn {
    background-color: rgb(255, 255, 255);
    color: #222;
    border: 1px solid #222;
    border-radius: 10px;
    box-shadow: 4px 4px 6px #000000;
}

.cancel-btn {
    width: 30%;
    background-color: rgb(255, 255, 255) !important;
    color: rgb(46, 46, 46) !important;
    border-color: rgb(46, 46, 46) !important;
    border-radius: 0 !important;
    font-family: 'Barlow-Regular', serif !important;
    box-shadow: 4px 4px 6px #000000;
}

.secondary-btn:disabled,
.delete-btn:disabled {
    background-color: #f7f7f7;
    color: lightgrey;
    border-color: darkgrey;
    box-shadow: none;
}

.secondary-btn:hover {
    background-color: #222;
    color: white;
    border-color: #222;
}

.cancel-btn:hover {
    background-color: lightgrey !important;
    border-color: lightgrey !important;
}

.delete-btn {
    background-color: rgb(255, 28, 28);
    color: white;
    border: 1px solid rgb(255, 28, 28);
    border-radius: 10px;
    box-shadow: 4px 4px 6px #000000;
}

.delete-btn:hover {
    background-color: white;
    color: rgb(255, 28, 28);
    border-color: rgb(255, 28, 28);
}

.btn-action {
    color: #222222;
    background-color: #ffec00;
    box-shadow: 4px 4px 6px #000000;
}

.btn-action:hover {
    background-color: #222222;
    color: #FFFFFF;
    border-color: #222222;
}

/* ---- region APPBAR COMPONENT ---- */
.menu-appbar {
    background-color: white !important;
}

.header-logo {
    width: 80px !important;
    margin: 8px;
}

@media (max-width: 400px) and (max-height: 796px) {
    .header-logo {
        width: auto !important;
        height: 60px !important;
        margin: unset !important;
    }
}

.header-pages-btn {
    color: rgb(34, 34, 34) !important;
    font-weight: bold;
    border: none;
    background-color: transparent;
    font-family: 'Barlow-Regular', serif !important;
    font-size: larger;
    /*text-transform: capitalize;*/
    /*box-shadow: none;*/
}

.header-pages-btn:hover {
    color: rgb(34, 34, 34) !important;
}

.header-profile-avatar {
    border: 1px solid darkgrey;
}

.header-profile-login-btn {
    color: rgb(34, 34, 34);
}

.header-profile-login-btn:hover {
    color: rgb(34, 34, 34);
}

.header-mb-menu-icon,
.header-mb-menu-ico-chev-left,
.header-login-icon,
.header-menu-contact-ico.tel:hover,
.header-menu-contact-ico.facebook:hover,
.header-menu-contact-ico.instagram:hover,
.header-menu-contact-ico.youtube:hover,
.header-menu-contact-ico.linkedin:hover {
    color: rgb(34, 34, 34);
}

.header-mb-menu-ico-chev-left {
    color: black;
}

.header-mb-menu-icon:hover,
.header-mb-menu-ico-chev-left:hover,
.header-login-icon:hover,
.header-tb-menu-icon.share:hover {
    color: rgb(34, 34, 34);
    transform: scale(1.2);
}

.header-tb-menu-icon.share,
.header-menu-contact-ico.tel,
.header-menu-contact-ico.facebook,
.header-menu-contact-ico.instagram,
.header-menu-contact-ico.youtube,
.header-menu-contact-ico.linkedin {
    color: rgb(34, 34, 34);
}

.header-tb-menu-icon.share:hover,
.header-menu-contact-ico.tel:hover,
.header-menu-contact-ico.facebook:hover,
.header-menu-contact-ico.instagram:hover,
.header-menu-contact-ico.youtube:hover,
.header-menu-contact-ico.linkedin:hover {
    color: rgb(34, 34, 34);
    transform: scale(1.2);
}

.drawer-contact-wrapper button .header-menu-contact-ico.tel,
.drawer-contact-wrapper button .header-menu-contact-ico.facebook,
.drawer-contact-wrapper button .header-menu-contact-ico.linkedin,
.drawer-contact-wrapper button .header-menu-contact-ico.instagram,
.drawer-contact-wrapper button .header-menu-contact-ico.youtube {
    color: black;
}

.drawer-contact-wrapper button .header-menu-contact-ico.tel:hover,
.drawer-contact-wrapper button .header-menu-contact-ico.facebook:hover,
.drawer-contact-wrapper button .header-menu-contact-ico.linkedin:hover,
.drawer-contact-wrapper button .header-menu-contact-ico.instagram:hover,
.drawer-contact-wrapper button .header-menu-contact-ico.youtube:hover {
    color: rgb(34, 34, 34);
    transform: scale(1.2);
}

.drawer-menu-list-item {
    transition: color 50ms, background 500ms;
}

.drawer-menu-list-item:hover {
    background-color: rgb(34, 34, 34);
}

.drawer-menu-list-item:hover svg,
.drawer-menu-list-item:hover p {
    color: white;
}

/* ---- region-end APPBAR COMPONENT ---- */


/* ---- region FOOTER COMPONENT ---- */
.footer {
    background: #FFFFFF00;
    border-color: black;
}
.footer:hover {
    background-color: rgba(0, 0, 0, 0.78);
}

.footer:hover span {
    color: white;
}

/* ---- region-end FOOTER COMPONENT ---- */



/* ---- region SIGN IN/UP COMPONENT ---- */

.signin-wrapper,
.signin-box-wrapper,
.signup-wrapper {
    background-color: #FFFFFF;
    box-shadow: 4px 4px 6px #000000;
}

.signin-logo,
.signup-logo {
    width: 100px;
    height: auto;
}

.signin-title,
.signup-title {
    font-weight: bold;
}

.signin-email-input,
.signin-password-input,
.signup-name-input,
.signup-lastname-input,
.signup-email-input,
.signup-password-input {
    /*background-color: #bdd73c;*/
}

/*.signin-form-link:hover,*/
/*.signup-form-link:hover {*/
/*    font-weight: bold;*/
/*}*/

.signin-box-wrapper {
    background: rgb(255, 255, 255);
}

/* ---- region-end SIGN IN/UP COMPONENT ---- */

/* ---- region ADD/EDIT FORM COMPONENT ---- */
.modal-wrapper {
    background: #d9d9d9;
}

.add-edit-input,
.drop-down-list-container {
    background-color: white;
}

.img-wrapper-main,
.img-wrapper-sub {
    background-color: #FFFFFF;
}

.remove-ico {
    background: rgba(255, 255, 255, 0.9);
    color: #b60000;
}

/* ---- region-end ADD/EDIT FORM COMPONENT ---- */

/* ---- region LOADING ANIMATION COMPONENT ---- */
.loading-anim-container {
    background: rgba(0, 0, 0, 0.78);
}

.loading-anim-image-text {
    color: #ffffff !important;
}

.loading-anim-image-icon {
    width: 250px;
    height: auto;
}

.lds-ellipsis div {
    background: #ffffff;
}

/* ---- region-end LOADING ANIMATION COMPONENT ---- */