/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/titillium-web-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/titillium-web-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-family-sans-serif: 'Titillium Web';
    --font-family-monospace: 'Titillium Web';
    --font-family-base: 'Titillium Web';
    --text-color-dark: hsl(207, 61%, 29%);
    --color-primary: hsl(207, 61%, 29%);
    --link-color: hsl(207, 61%, 29%);
    --link-hover-color: hsl(191, 56%, 70%);
    --body-bg: 	hsl(0, 0%, 100%);
    --aside-bg: hsl(216, 20%, 95%);
}

/* Layout
   ========================================================================= */
body{
    color: var(--color-primary);
    overflow-x: hidden;
}

.content-header-title{
    align-self: center;
}

.content-header-title .title{
    font-weight: bold;
}
.main-header #header-logo a {
    display: none;
    color: var(--color-primary);
    background-image: url(../images/logo-kanban.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 250px;
    height: 54px;
}

.content-header{
    flex-wrap: wrap;
}

/* Main-sidebar
 =========================================================================*/
.main-header{
    display: none;
}
.wrapper{
    grid-template-columns: 190px auto;
}
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar{
    scrollbar-width: none;
}

#main-menu .menu li{
    padding: 10px 18px 10px 18px;
}
#main-menu .logo {
    display: flex;
    justify-content: center;
    padding: 40px 18px 40px 18px;
}

#main-menu .menu .menu-icon{
    color: var(--color-primary);
    filter: opacity(50%);
}

#main-menu .menu .menu-item.active:not(.expanded) .menu-icon, #main-menu .menu .menu-item.active:not(.expanded) a i{
    color: var(--link-hover-color);
    filter: opacity(100%);
}

#main-menu .menu li ul.submenu li{
    padding: 10px 0 10px 0;
}
#main-menu .menu li ul.submenu li a{
    padding-left: 10px;
}
.treeview .treeview-icon{
    top: 1px;
    left: 1px;
    position: relative;
}

.submenu li > a{
    display: flex;
}
#main-menu .menu .menu-item-contents{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#main-menu .menu .menu-item-contents .submenu-toggle-icon{
    align-self: flex-start;
}

/* buttons
 =========================================================================*/
.btn-primary:hover, .btn-primary:disabled{
    background-color: var(--link-hover-color);
    color: var(--color-primary);
    font-weight: bold;
}

/* Forms
 =========================================================================*/
.form-group label, .form-group label, .form-group legend.col-form-label{
    color: var(--color-primary);
    font-weight: bold;
    margin-bottom: 5px;
}

/* Tables
 ========================================================================= */
table.datagrid tr:nth-child(odd){
    background-color: var(--aside-bg);
}

table.datagrid thead tr:first-child{
    background-color: var(--body-bg) !important;
}

.datagrid thead a, .datagrid thead span{
    font-weight: bolder;
}

/* Null field */
.badge.badge-secondary{
    padding: 8px 10px;
}
/* active field */
.custom-switch .custom-control-input:disabled:checked~.custom-control-label:before{
    background-color: var(--color-primary) ;
}
/* disabled link arrows order */
.not-available{
    pointer-events: none;
    color: grey;
}

/* icon actions */
.datagrid td.actions {
    min-width: 185px;
}
.datagrid td.actions a{
    cursor: pointer;
}

/* Pagination */
.page-item.active .page-link{
    background: var(--color-primary);
}

.page-item.active .page-link:hover{
    background: var(--link-hover-color);
    color: var(--color-primary);
}

/* Hidden resizer table*/
#content-resizer-handler, #sidebar-resizer-handler {
    display: none;
}

/* Button filtros */
.datagrid-filters a{
    border: 1px solid var(--color-primary);
}
/* locale_menu */

#locale-menu {
    margin-right: 15px;
}

/* user_menu
 =========================================================================*/
.user-name {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
    text-transform: capitalize;
}

.user-menu-wrapper .popover-body {
    padding: 5px 0 10px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
}

.user-menu-wrapper .popover-content-section+.popover-content-section{
    border: none;
}

.user-menu-wrapper .user-menu a span{
    font-size: var(--font-size-lg);
}

.user-menu-wrapper .user-details{
    display: none;
}
.white-space-header{
    width: 25%;
}
.main-header .navbar {
    display: flex;
    padding: 0;
    width: 50%;
    height: auto;
    justify-content: center;
}
.content-top{
    display: flex;
    height: 110px;
    box-shadow: none;
}

.content-top .navbar-custom-menu{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 20%;
}

.navbar-custom-menu .user-character{
    width: 35px;
    height: 35px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: var(--link-hover-color);
}

.navbar-custom-menu .user-character .user-name{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
    font-weight: bolder;
}
.user-menu .user-action {
    padding: 6px 15px;
}
.user-menu hr {
    display: none;
}
.user-menu-wrapper .user-avatar{
    display: none;
}
.bs-popover-auto[x-placement^=bottom]>.arrow:before, .bs-popover-bottom>.arrow:before {
    top: 1px;
    border-width: 0 .5rem .5rem;
    border-bottom-color: var(--color-primary);
}

.bs-popover-auto[x-placement^=bottom]>.arrow:after, .bs-popover-bottom>.arrow:after {
    top: 3px;
    border-width: 0px 0.5rem .5rem;
    border-bottom-color: #fff;
}

.logo-desktop{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5%;
}
.logo-mobile{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/*Filters
 =========================================================================*/
#modal-filters .modal-header{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: var(--body-bg);
    padding: 15px 20px;
}
#modal-filters .modal-title{
    font-weight: bold;
}
#modal-filters .modal-header button:first-child{
    order:2
}
#modal-filters .modal-header button:last-child{
    margin: 0 5px 0 20px;
}

#modal-filters .modal-body .filter-field{
    border: none !important;
}
#modal-filters .modal-body form{
    padding: 20px 10px;
}

/* Breadcrumbs */
#breadcrumbs{
    min-height: 40px;
    width: 100%;
}
#breadcrumbs .breadcrumb{
    background: var(--white);
    font-size: 1rem;
    font-weight: 600;
    padding-left: 0px;
}
#breadcrumbs .breadcrumb-item.active{
    font-weight: 500;
}

/* Flash messages */
#flash-messages {
    position: fixed;
    z-index: 1050;
    width: 100vw;
    text-align: center;
}
/* Icon batch Actions */
.batch-actions{
    display: flex;
    justify-content: center;
    align-items: center;
}
.batch-actions a {
    padding-right: 10px;
}


/* Medias */
@media(max-width: 1024px) {
    .wrapper .main-header,
    .content .content-header,
    .content-body .datagrid-header-tools,
    .content-panel-footer.without-padding{
        width: 96vw;
    }
    .main-header .navbar {
        justify-content: flex-start;
    }
    .white-space-header{
        display: none;
    }
    .main-header #header-logo a {
        width: 150px;
        height: 32px;
    }
    .content-panel-body.without-padding{
        width: 96vw;
        overflow: scroll;
    }
}
@media(max-width: 991px) {
    .logo-desktop{
        display: none;
    }
}
@media(min-width: 992px) {
    .content-top .content-search .form-widget {
        display: flex;
        flex-wrap: nowrap;
    }
}
@media(max-width: 576px) {
    .wrapper .main-header,
    .content .content-header,
    .content-body .datagrid-header-tools,
    .content-panel-footer.without-padding {
        width: 90vw;
    }

    .main-header #header-logo a {
        width: 150px;
        height: 30px;
    }

    .content-panel-body.without-padding {
        width: 90vw;
        overflow: scroll;
    }

    .pagination .page-item .page-link span {
        display: none;
    }

    .content-header  div{
        flex-wrap: wrap;
    }

    .content-header .page-actions{
        padding: 10px 0 0;
        display: flex;
    }

    .content-header .page-actions .btn {
        margin-top: 10px;
    }
}
@media(max-width: 450px) {
    #header-logo{
        display: none;
    }
}

@media(min-width: 1024px) {
    .wrapper {
        grid-template-areas:
                "sidebar header"
                "sidebar content-wrapper";
        margin:0;
    }

    .main-header {
        padding: 40px 0 40px 0;
    }

    .sidebar {
        background-color: var(--aside-bg);
        height: 100vh;
        position: sticky;
        position: -webkit-sticky;
        padding: 0;
    }

    #main-menu .menu .menu-item{
        padding-left: 18px;
    }
    #main-menu .menu .menu-item.active{
        background-color: var(--body-bg);
    }

    .content-wrapper {
        min-height:90vh;
        width:80vw;
    }

    .content-panel-body {
        padding: 18px 25px 25px 5px;
    }

    .form-group label{
        flex: 10% 0 0;
    }

    .field-boolean .form-widget {
        /*margin-left: calc(10% + 5px);*/
    }

    /* page edit user*/
    .ea-new-User .form-group label,
    .ea-edit-User .form-group label{
        flex: 16% 0 0;
    }

    .ea-new-User .field-boolean .form-widget ,
    .ea-edit-User .field-boolean .form-widget {
        /*margin-left: calc(16% + 5px);*/
    }
}

@media (min-width: 1280px) {
    .form-group label, .form-group label, .form-group legend.col-form-label{
        flex: 7% 0 0;
    }

    .field-boolean .form-widget {
        /*margin-left: calc(7% + 5px);*/
    }

    /* page edit user*/
    .ea-new-User .form-group label,
    .ea-edit-User .form-group label{
        flex: 13% 0 0;
    }

    .ea-new-User .field-boolean .form-widget,
    .ea-edit-User .field-boolean .form-widget {
        /*margin-left: calc(13% + 5px);*/
    }
}

.content-wrapper {
    min-height: 90vh;
    overflow-y: auto;
}

.fs-20px {
    font-size: 20px;
}
.w-20px {
    width: 20px;
}
/* Footer */
.footer-background {
    color: var(--text-on-primary);
    background: var(--color-primary);
}
.footer-background a {
    color: var(--text-on-primary);
}

.close{
    float: right;
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    border: none;
    background: transparent;
    opacity: 0.5;
}