/* fonts */
@font-face {
    font-family: 'dosismedium';
    src: url("");
    src: url("") format('embedded-opentype'), url("dosis-medium-webfont.woff2") format('woff2'), url("dosis-medium-webfont.woff") format('woff'), url("dosis-medium-webfont.ttf") format('truetype'), url("") format('svg');
    font-weight: normal;
    font-style: normal;
}

.Fs9 {
    font-size: 9px
}

.Fs10 {
    font-size: 10px
}

.Fs12 {
    font-size: 12px
}

.Fs14 {
    font-size: 14px
}

.Fs16 {
    font-size: 16px
}

.Fs18 {
    font-size: 18px
}

.Fs20 {
    font-size: 20px
}

.Fs24 {
    font-size: 24px
}

.Fs28 {
    font-size: 28px
}

.Fs30 {
    font-size: 30px
}

.Fs40 {
    font-size: 40px
}

.Fs50 {
    font-size: 50px
}

.Fs60 {
    font-size: 60px
}

.Fs100 {
    font-size: 100px
}

.FontBold {
    font-weight: bold
}

.FontLight {
    font-weight: lighter
}

.FontNormal {
    font-weight: normal
}

.FontItalic {
    font-style: italic
}

/* text colors */
.White {
    color: #ffffff !important;
}

.TransparentWhite {
    color: rgba(255, 255, 255, 0.7) !important;
}

.SoftGray {
    color: #F1F2F2 !important;
}

.Black {
    color: #2F2F2F !important;
}

.Blue {
    color: #3E98D3 !important;
}

.Red {
    color: #EF3F61 !important;
}

.Teal {
    color: #1D8591 !important;
}

.Green {
    color: #2BB673 !important;
}

.Cyan {
    color: #00ACC1 !important;
}

.Orange {
    color: #F15732 !important;
}

.Leaden {
    color: #567A84 !important;
}

.BoldLeaden {
    color: #3E5E66 !important;
}

.Purple {
    color: #555574 !important;
}

/* backgrounds */
.WhiteBack {
    background-color: #fff !important;
}

.SoftGrayBack {
    background-color: #EDF3F6 !important;
}

.GrayBack {
    background-color: #CCC !important;
}

.BlackBack {
    background-color: #000 !important;
}

.BlueBack {
    background-color: #3E98D3 !important;
}

.RedBack {
    background-color: #EF3F61 !important;
}

.TealBack {
    background-color: #1D8591 !important;
}

.GreenBack {
    background-color: #2BB673 !important;
}

.CyanBack {
    background-color: #00ACC1 !important;
}

.OrangeBack {
    background-color: #F15732 !important;
}

.LeadenBack {
    background-color: #567A84 !important;
}

.BoldLeadenBack {
    background-color: #3E5E66 !important;
}

.PurpleBack {
    background-color: #912C63 !important
}

.YellowBack {
    background-color: #F9F20D !important
}

/* margins */
.MarLeft5 {
    margin-left: 5px
}

.MarRight5 {
    margin-right: 5px
}

.MarRight10 {
    margin-right: 10px
}

.MarRight20 {
    margin-right: 20px
}

.MarRight30 {
    margin-right: 30px
}

.MarTop5 {
    margin-top: 5px
}

.MarTop10 {
    margin-top: 10px
}

.MarTop15 {
    margin-top: 15px
}

.MarTop20 {
    margin-top: 20px
}

.MarBot10 {
    margin-bottom: 10px
}

.MarBot20 {
    margin-bottom: 20px
}

.Padding5 {
    padding: 5px;
    box-sizing: border-box
}

.Padding10 {
    padding: 10px
}

/* spaces */
.EmptyBox5 {
    display: block;
    height: 5px;
    clear: both
}

.EmptyBox10 {
    display: block;
    height: 10px;
    clear: both
}

.EmptyBox15 {
    display: block;
    height: 15px;
    clear: both
}

.EmptyBox20 {
    display: block;
    height: 20px;
    clear: both
}

.EmptyBox30 {
    display: block;
    height: 30px;
    clear: both
}

/* borders */
.BordRad3 {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

.BordRad10 {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

/* sizes */
.Hei16px {
    height: 16px
}

.Hei100px {
    height: 100px
}

.Hei200px {
    height: 200px
}

.MinWid50 {
    min-width: 50%
}

.Wid5 {
    width: 5%
}

.Wid10 {
    width: 10%
}

.Wid20 {
    width: 20%
}

.Wid30 {
    width: 30%
}

.Wid40 {
    width: 40%
}

.Wid50 {
    width: 50%
}

.Wid60 {
    width: 60%
}

.Wid65 {
    width: 65%
}

.Wid70 {
    width: 70%
}

.Wid80 {
    width: 80%
}

.Wid90 {
    width: 90%
}

.Wid100 {
    width: 100%
}

.Wid36px {
    width: 36px
}

.WidAuto {
    width: auto
}

/* alignment */
.TexAlCenter {
    text-align: center
}

.TexAlLeft {
    text-align: left
}

.TexAlRight {
    text-align: right
}

.Fright {
    float: right
}

.Fleft {
    float: left
}

.DispInlBlock {
    display: inline-block
}

.DispBlock {
    display: block
}

.OvYScroll {
    overflow-y: scroll
}

.OvHidden {
    overflow: hidden
}

/* mirage customizations*/
body,
body .ui-widget,
body .ui-widget .ui-widget,
body .ui-chips .ui-chips-input-token input,
body .ui-paginator .ui-paginator-rpp-options,
body .ui-datatable .ui-reflow-dropdown {
    font-family: 'dosismedium', sans-serif
}

body .ui-panelgrid .ui-panelgrid-cell {
    padding: 5px 0
}

body .ui-button.ui-button-dark {
    background-color: #912C63;
    border-color: #912C63
}

body .ui-button.ui-button-dark.ui-state-hover {
    background-color: #4e1832;
    border-color: #4e1832
}

body .ui-button.ui-button-danger {
    background-color: #B51F3C;
    border-color: #B51F3C
}

body .ui-button.ui-button-warning {
    background-color: #F15732;
    border-color: #F15732
}

body .ui-button.ui-button-info {
    background-color: #0FADDB;
    border-color: #0FADDB
}

body .ui-button.ui-button-warning.ui-state-focus {
    box-shadow: 0 0 0 0.2rem rgba(241, 87, 50, 0.5)
}

.ui-datascroller-blank .ui-datascroller-content {
    background-color: transparent !important;
    border: none !important;
}

.ui-separator {
    box-shadow: none;
    background: #d8dee9;
    border: none;
    height: 2px;
    margin: 20px 0
}

.layout-main {
    padding-top: 50px
}

.layout-content {
    padding: 1em
}

.layout-topbar .layout-topbar-wrapper {
    height: 50px
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-right .profile-item > a .profile-image-wrapper img {
    width: 40px;
    height: 40px;
    border-radius: 50%
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > ul {
    top: 50px
}

.layout-config-option {
    overflow: hidden;
    text-align: center;
    display: inline-block;
    position: relative;
    border-radius: 4px;
    border: solid 1px #d8dee9;
    background-color: #f9fafb;
    transition: transform 0.15s
}

.layout-config-option i {
    line-height: inherit;
    font-size: 28px;
    color: #a3be8c;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -23px;
    margin-top: -40px;
    padding: 0.35em;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
    background-color: #ffffff;
    border-radius: 50%;
    width: 47px;
    height: 47px
}

.layout-config-option:hover {
    transform: scale(1.1)
}

.layout-config-option .layout-config-option-text {
    display: block;
    padding: 0.5em;
    text-align: center;
    color: #434c5e;
    font-weight: 500;
    text-transform: capitalize
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > ul > li.deals > ul > li > a,
.layout-topbar-actions > li > ul > li > a,
.profile-mobile-wrapper > li > ul > li > a {
    display: flex;
    width: 100%;
    align-items: center
}

.ui-fluid .ui-selectonemenu {
    min-width: auto !important;
    overflow: hidden
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > ul,
.layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > ul::before {
    right: 0;
    left: auto
}

body .ui-datatable .ui-datatable-data > tr td {
    padding: 0.5em
}

body .ui-fluid .ui-trigger-calendar .ui-datepicker-trigger.ui-button {
    height: 33px
}

body .ResaCalendar .ui-datepicker table td a.ui-state-active, body .ui-datepicker table td span.ui-state-active {
    color: inherit !important
}

body .ResaCalendar .ui-datepicker table td.ui-datepicker-today a {
    background: transparent !important
}

.layout-menu-dark .layout-sidebar,
.layout-menu-dark.layout-horizontal .layout-sidebar {
    background-color: #1d8591
}

.layout-menu-dark .layout-sidebar.red-sidebar,
.layout-menu-dark.layout-horizontal .layout-sidebar.red-sidebar {
    background-color: #991434
}

.layout-menu-dark .layout-sidebar.blue-sidebar,
.layout-menu-dark.layout-horizontal .layout-sidebar.blue-sidebar {
    background-color: #15468C
}

.layout-menu-dark .layout-sidebar .layout-menu > li.active-menuitem > a,
.layout-menu-dark.layout-horizontal .layout-sidebar .layout-menu > li.active-menuitem > a {
    background-color: #2e3440
}

.layout-menu-dark .layout-sidebar .layout-menu > li > ul li.active-menuitem > a .menuitem-text {
    color: #ffffff
}

.layout-wrapper.layout-horizontal .layout-sidebar {
    top: 50px
}

.layout-wrapper.layout-horizontal .layout-main {
    padding-top: 100px
}

.layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > a .menuitem-text {
    white-space: nowrap
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-left .layout-megamenu {
    top: 35px
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-left .layout-megamenu > li > ul > li > a h3 {
    font-weight: 500;
    margin: 0;
    font-size: inherit
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-left .layout-megamenu > li > ul > li > a span {
    color: #9199a9;
    font-size: 12px
}

.layout-topbar .layout-topbar-wrapper .layout-topbar-left .layout-megamenu > li > a i {
    display: inline-block;
    margin-right: 5px
}

@media (max-width: 991px) {
    .layout-wrapper .layout-topbar .layout-topbar-wrapper .layout-topbar-left {
        height: 50px
    }

    .layout-wrapper .layout-topbar .layout-topbar-wrapper .layout-topbar-left .layout-topbar-logo-wrapper .layout-topbar-logo img {
        width: 32px;
        height: 32px
    }

    .layout-wrapper .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li > ul,
    .layout-wrapper .layout-topbar .layout-topbar-wrapper .layout-topbar-right .layout-topbar-actions > li.search-item > .search-item-submenu {
        top: 125px
    }

    .layout-wrapper.layout-topbar-mobile-active .layout-sidebar {
        top: 200px
    }

    .layout-wrapper .layout-sidebar {
        top: 50px
    }

    .layout-wrapper.layout-horizontal .layout-main {
        padding-top: 50px
    }

    .login-body .login-content .login-panel {
        align-items: flex-start
    }
}

@media (min-width: 992px) and (max-width: 1600px) {
    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu {
        margin: 0 5px
    }

    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > a {
        margin: 6px 0
    }

    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > a .menuitem-text {
        margin-left: 6px;
        margin-right: 0
    }

    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > a i.layout-submenu-toggler {
        margin-left: 4px
    }

    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > ul {
        left: 0
    }
}

@media (min-width: 992px) and (max-width: 1300px) {
    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > a {
        padding: 8px
    }
}

@media (min-width: 1301px) and (max-width: 1600px) {
    .layout-wrapper.layout-horizontal .layout-sidebar .layout-menu-container .layout-menu > li > a {
        padding: 8px 12px
    }
}

.ui-calendar input {
    width: 100px
}

.login-body .login-content .login-panel .login-panel-content .logo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
}

.login-body .login-content .login-panel .login-panel-content .forms .ui-chkbox.ui-widget {
    margin-left: 0
}

.login-body.layout-light .login-content .login-panel .login-panel-content .forms .login-input-wrapper input {
    color: #000000
}

.login-body.layout-light {
    background-color: #24acba;
    color: #ffffff
}

.login-body.layout-light .login-content .login-panel {
    background-color: #1d8591
}

.login-body.layout-light .login-content .login-panel .login-panel-content .forms label,
.login-body.layout-light .login-content .login-panel .login-panel-content p,
.login-body.layout-light .login-content .login-panel .login-panel-content .buttons button.secondary-button.ui-state-hover,
.login-body.layout-light .login-content .login-panel .login-panel-content h1,
.login-body.layout-light .login-content .login-panel .login-panel-content .buttons button.secondary-button {
    color: #ffffff
}

.login-body.layout-light .login-content .login-panel .login-panel-content .buttons button {
    background-color: #343a40;
    border-color: #343a40
}

.login-body.layout-light .login-content .login-panel .login-panel-content .buttons button.ui-state-hover {
    background-color: #2F2F2F
}

table.ui-panelgrid {
    width: 100%
}

.p-grid {
    margin-bottom: -0.5em
}

/* other */
.logo-round {
    background: #ffffff;
    border-radius: 50%;
    padding: 3px
}

.layout-sidebar .sidebar-logo img.logo-reseller,
.layout-wrapper.layout-horizontal .layout-topbar .layout-topbar-logo-wrapper .layout-topbar-logo img {
    max-width: 170px;
    max-height: 45px;
    width: auto;
    height: auto
}

.bubble {
    position: absolute;
    top: 2px;
    left: 3px;
    padding: 1px 2px;
    color: #fff;
    border-radius: 50%;
    min-width: 16px;
    text-align: center
}

.wikiPanel {
    background: #912C63
}

.dashboard-v > div:not(:first-child) {
    border-left: 1px dotted #ccc
}

.dashboard-r .csic {
    margin: 0
}

.dashboard-r .ui-datatable table tfoot tr td,
.dashboard-r .ui-datatable table thead tr th {
    padding: 6px 0
}

.CalendarEditor .ui-inputfield.ui-state-disabled {
    border-color: #ccc;
    color: #666;
}

.PadZero .ui-dialog-content {
    padding: 0 !important;
}