/*--------------------------------------

FLATTY TOP BAR

---------------------------------------*/

.flatty-top-bar {

    display:flex;

    justify-content: flex-end;

    align-items: center;

    position:relative;

    box-sizing: border-box;

    padding:0 20px;

    top:0;

    left:0;

    right:30px;

    width:100%;

    height: 70px;

    font-size:120%;

    color:#fff;

    z-index: 9999;

}

.flatty-top-bar.tall-bar {

    height: 180px;

}

.flatty-top-bar.tall-bar::before {

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    content: '';

    background: linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(0, 0, 0, .5) 100%);

}

.ninja-forms-app .flatty-top-bar {

    z-index:0;

}

/*--------------------------------------

FLATTY LEFT WRAPPER

---------------------------------------*/

.flatty-top-bar-left-wrapper {

    display: flex;

    flex-direction: row;

    align-items: center;

    margin-right:auto;

}

/*--------------------------------------

FLATTY TOP BAR LOGO

---------------------------------------*/

.flatty-top-bar-logo {

    display:block;

    position:relative;

    max-height: 40px;

    z-index: 9;

}

.flatty-top-bar-logo img {

    height:40px;

}

/*--------------------------------------

FLATTY TOP BAR SITENAME

---------------------------------------*/

.flatty-site-name-topbar {

    display: flex;

    align-items: center;

    box-sizing: border-box;

    margin-left: 20px;

    margin-right: auto;

    font-size:100%;

}

/*--------------------------------------

FLATTY TOP BAR ITEMS

---------------------------------------*/

.flatty-top-bar .flatty-top-bar-wrapper {

    display: flex;

    align-items:center;

    flex-grow:0;

    justify-content: flex-end;

}

.flatty-top-bar-button,

.flatty-top-bar a {

    display:inline-block;

    position:relative;

    color:inherit;

    font-size: 90%;

    padding: 0 10px;

    cursor: pointer;

    -webkit-user-select:none;

    user-select:none;

    margin-right: 10px;

    transition:.3s;

}

.flatty-top-bar-button:hover {

    opacity:0.8;

}

.flatty-top-bar i {

    position:relative;

    top:-1px;

    font-weight: 300;

    padding-right:0.5rem;

}

.flatty-top-bar i:last-child {

    padding:0;

}

/*--------------------------------------

FLATTY TOP BAR SUPPORT BOX

---------------------------------------*/

.flatty-topbar-box {

    display: flex;

    position: relative;

    box-sizing: border-box;

    padding: 0 20px;

    align-items: center;

    flex-grow: 0;

    margin: 0 25px;

    border-right: solid 1px rgba(255, 255, 255, 0.3);

}

.flatty-topbar-box-name {

    display: block;

    font-size: 80%;

    font-weight: 600;

    margin-right: 20px;

}

.flatty-topbar-box-wrapper {

    display: flex;

    flex-direction: row;

}

a.flatty-topbar-box-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right:0;

    opacity:1;

    transition:.3s;

}

a.flatty-topbar-box-icon:active,

a.flatty-topbar-box-icon:hover {

    opacity: .7;

}

/*--------------------------------------

PROFILE

---------------------------------------*/

.flatty-top-bar-button.profile-pic {

    margin:0 10px 0 10px;

}

.flatty-top-bar-button.profile-name {

    padding:0 10px 0 0;

}

/*--------------------------------------

VARIABLES

---------------------------------------*/

.admin-color-light .flatty-top-bar {

    color:#fff;

    background-color: #04a4cc;

}

/*--------------------------------------

FLATTY TOP BAR SUPPORT BOX

---------------------------------------*/

.flatty-support-widget {

    display: flex;

    box-sizing: border-box;

    width:100%;

    position:relative;

    padding:0 20px;

    align-items: center;

    height: 60px;

    text-align: center;

    justify-content: space-between;

    background-color:#f5f5f5;

    color:#333;

    z-index: 99999999;

}

.flatty-support-widget.fixed {

    position: fixed;

    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);

}

.flatty-support-widget-fixed {

    display:block;

    position:relative;

    width:100%;

    height:60px;

}

.flatty-support-widget-name {

    display: block;

    padding:20px 0;

    font-size:120%;

    font-weight: 600;

}

.flatty-support-widget-wrapper {

    display: flex;

    flex-direction: row;

}

.flatty-support-widget-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    margin:0 10px;

}

.flatty-support-widget-icon i {

    margin-right:10px;

}

/*--------------------------------------

TABLET & MOBILE

---------------------------------------*/

@media only screen and (max-width: 1080px) {

    .flatty-top-bar a span,

    .flatty-top-bar-button span,

    .flatty-top-bar-button.profile-name {

        display: none;

    }

}