/*---------------------------------------------------------------------------------*/
/*  Layout
/*---------------------------------------------------------------------------------*/
.mka-to-header-wrap {
    height: 58px;
}
#mk-theme-options {
    direction: ltr;
}
.mka-to-wrap {
    background-color: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    margin-top: 20px;
    width: calc(100% - 20px);
}
.mka-to-header,
.mka-to-sidebar {
    background: #2e3840;
    color: #ffffff;
}
.mka-to-header {
    box-sizing: border-box;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 9px 11px 8px;
    /* White space issue on IE, Edge */
    border-bottom: #2e3840 1px solid;
}
.mka-to-header:after {
    clear: both;
}
.mka-to-body {
    position: relative;
}
.mka-to-sidebar {
    border-bottom-left-radius: 5px;
    position: absolute;
    height: 100%;
    width: 242px;
    min-width: 242px;
}
.mka-to-main {
    position: relative;
    margin-left: 242px;
    min-height: 788px;
    padding: 0;
    border-right: 1px solid #dadde0;
    border-bottom: 1px solid #dadde0;
    border-bottom-right-radius: 5px;
}

.mka-to-main.mk-overflow {
    overflow-x: scroll;
}

/*---------------------------------------------------------------------------------*/
/*  Header
/*---------------------------------------------------------------------------------*/
.mka-to-header--sticky {
    position: fixed;
    top: 30px;
    z-index: 9900;
    width: calc(100% - 200px);
}
/* If WP left menu is folded */
.folded .mka-to-header--sticky {
    width: calc(100% - 76px);
}
/* Modifies sticky header when WP left changes to responsive mode */
@media screen and (max-width: 960px) {
    .mka-to-header--sticky {
        width: calc(100% - 76px);
    }
}
/* Disables sticky header when WP left menu is hidden */
@media screen and (max-width: 782px) {
    .mka-to-header--sticky {
        position: static;
        width: 100%;
    }
}
.mka-to-header-logo {
    background: url(../images/mka-theme-options/header-logo.svg) no-repeat;
    float: left;
    margin: 12px 16px;
    height: 16px;
    width: 180px;
}
.mka-to-header-actions {
    float: right;
}
.mka-to-header-actions .mka-button.mka-to-header-search {
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 11px;
}
.mka-to-header-actions .mka-button {
    vertical-align: middle;
}

.mka-save-response {
    color: #38cb97;
    padding: 10px;
}

.mka-save-response.mka-has-error {
    color: #ec5353;
}

/*---------------------------------------------------------------------------------*/
/*  Sidebar Menu
/*---------------------------------------------------------------------------------*/
.mka-to-nav {
    margin: 0;
    padding: 20px 10px 138px;
}
.mka-to-nav a {
    box-shadow: none;
    text-decoration: none;
    transition: background-color 0.1s ease, color 0.1s ease;
}
.mka-to-nav-item,
.mka-to-nav-subitem {
    display: block;
    margin-bottom: 0;
    position: relative;
}
.mka-to-nav-item:not(.mka-to-nav-item--active):hover .mka-to-nav-subnav,
.mka-to-nav-item:not(.mka-to-nav-item--active):hover a {
    background: #43505a;
}
.mka-to-nav-subitem--active:before,
.mka-to-nav-item--active > a {
    background: #2eace7;
}
.mka-to-nav-item > a,
.mka-to-nav-subitem > a:hover,
.mka-to-nav-subitem--active > a {
    color: #ffffff;
}
.mka-to-nav-label {
    display: table-cell;
    line-height: 16px;
    padding-left: 11px;
}

/* Main Navigation */
.mka-to-nav-item {
    padding: 1px 0px;
}
.mka-to-nav-item > a {
    font-size: 15px;
    font-weight: 600;
    display: inline-block;
    padding: 7px 14px;
    border-radius: 16px;
}

/* Sub Navigation */
.mka-to-nav-subnav {
    display: none;
    margin-top: 0px;
    margin-bottom: 17px;
    padding-left: 42px;
}
.mka-to-nav-subitem > a {
    color: #b5c4d0;
    display: block;
    font-size: 14px;
    font-weight: 400;
    padding: 7px 0;
    line-height: 14px;
    -webkit-padding-before: 8px;
}
.mka-to-nav-subitem--active:before {
    border-radius: 3px;
    content: " ";
    display: inline-block;
    left: -16px;
    position: absolute;
    top: 12px;
    height: 6px;
    width: 6px;
}

/* Sub Navigation Not Active - Hover Nav */
.mka-to-nav-item:hover .mka-to-nav-subnav,
.mka-to-nav-item--active .mka-to-nav-subnav {
    display: block;
}
.mka-to-nav-item:not(.mka-to-nav-item--active):hover .mka-to-nav-sub {
    display: inline;
    position: relative;
}
.mka-to-nav-item:not(.mka-to-nav-item--active):hover .mka-to-nav-subnav {
    border-radius: 20px;
    margin-top: 0;
    padding: 14px 23px;
    position: absolute;
    top: -22px;
    left: 5px;
    width: 164px;
    z-index: 1;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1);
}
.mka-to-nav-item:not(.mka-to-nav-item--active):hover .mka-to-nav-subitem--active:before {
    content: none;
}

/*---------------------------------------------------------------------------------*/
/*  Sidebar Actions (Mostly for demo purposes)
/*---------------------------------------------------------------------------------*/
.mka-to-sidebar-actions {
    bottom: 10px;
    position: absolute;
    padding: 15px 24px;
    width: 194px;
}
.mka-to-sidebar-actions .mka-wrap {
    width: 100%;
}
.mka-to-sidebar-actions .mka-button {
    margin-top: 10px;
    width: 100%;
    padding: 12px 0 !important;
}
.mka-to-nav-item-icon-float {
    position: relative;
}

/*---------------------------------------------------------------------------------*/
/*  Icons General
/*---------------------------------------------------------------------------------*/
.mka-to-nav-item-icon {
    background-position: top center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
}
.mka-to-nav .mka-to-nav-item-icon {
    display: table-cell;
}
.mka-to-nav-item:hover .mka-to-nav-item-icon,
.mka-to-nav-item--active .mka-to-nav-item-icon {
    background-position: bottom center;
}
.mka-to-nav-item-icon-float > .mka-to-nav-item-icon {
    position: absolute;
    left: -24px;
}

/*---------------------------------------------------------------------------------*/
/*  Icons List (Mostly for demo purposes)
/*---------------------------------------------------------------------------------*/
.mka-to-nav-item-icon--advanced {
    background: url(../images/mka-theme-options/advanced.svg) no-repeat;
}
.mka-to-nav-item-icon--blog {
    background: url(../images/mka-theme-options/blog.svg) no-repeat;
}
.mka-to-nav-item-icon--content {
    background: url(../images/mka-theme-options/main-content.svg) no-repeat;
}
.mka-to-nav-item-icon--main_content {
    background: url(../images/mka-theme-options/main-content.svg) no-repeat;
}
.mka-to-nav-item-icon--element {
    background: url(../images/mka-theme-options/element.svg) no-repeat;
}
.mka-to-nav-item-icon--elements {
    background: url(../images/mka-theme-options/element.svg) no-repeat;
}
.mka-to-nav-item-icon--footer {
    background: url(../images/mka-theme-options/footer.svg) no-repeat;
}
.mka-to-nav-item-icon--general {
    background: url(../images/mka-theme-options/general.svg) no-repeat;
}
.mka-to-nav-item-icon--header {
    background: url(../images/mka-theme-options/header.svg) no-repeat;
}
.mka-to-nav-item-icon--history {
    background: url(../images/mka-theme-options/history.svg) no-repeat;
    background-size: 16px 14px; /* To fix cut off pixels in Edge */
    top: 3px;
}
.mka-to-nav-item-icon--portfolio {
    background: url(../images/mka-theme-options/portfolio.svg) no-repeat;
}
.mka-to-nav-item-icon--search {
    background: url(../images/mka-theme-options/search.svg) no-repeat;
}
.mka-to-nav-item-icon--shop {
    background: url(../images/mka-theme-options/shop.svg) no-repeat;
}
.mka-to-nav-item-icon--sidebar {
    background: url(../images/mka-theme-options/sidebar.svg) no-repeat;
}
.mka-to-nav-item-icon--title {
    background: url(../images/mka-theme-options/page-title.svg) no-repeat;
}
.mka-to-nav-item-icon--page_title {
    background: url(../images/mka-theme-options/page-title.svg) no-repeat;
}
.mka-to-nav-item-icon--toolbar {
    background: url(../images/mka-theme-options/toolbar.svg) no-repeat;
}
.mka-to-nav-item-icon--header_toolbar {
    background: url(../images/mka-theme-options/toolbar.svg) no-repeat;
}
.mka-to-search-icon {
    background: url(../images/mka-theme-options/search-global.svg) no-repeat top center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    height: 16px;
    width: 16px;
}


/*---------------------------------------------------------------------------------*
 * Page Title
 *---------------------------------------------------------------------------------*/

.mka-to-page-title {
    font-size: 24px;
    padding: 20px 25px;
    margin: 0 0 35px;
    background-color: #f5f5f5;
    font-weight: normal;
    border-bottom: 1px solid #dadde0;
    line-height: 1;
}


/*---------------------------------------------------------------------------------*
 * Seaction Heading
 *---------------------------------------------------------------------------------*/

.mka-to-section-heading {
    font-size: 22px;
    font-weight: 500;
    margin: -5px 0 30px;
}

/*---------------------------------------------------------------------------------*
 * Section & Grid
 *---------------------------------------------------------------------------------*/
.mka-to-input-lbl {
    display: block;
    font-weight: bold;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: 10px;
    padding-left: 5px;
}


/*---------------------------------------------------------------------------------*
 * Pane
 *---------------------------------------------------------------------------------*/

.mka-to-pane-box:first-of-type {
    display: block;
}
.mka-to-pane-box {
    display: none;
}


/*---------------------------------------------------------------------------------*
 * Section & Grid
 *---------------------------------------------------------------------------------*/

.mka-to-section {
    display: block;
    margin: 0;
    padding-right: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
    padding-bottom: 0;
    margin-bottom: 48px;
    border-bottom: 1px solid #dadde0;
}

.mka-to-section.disabled {
    opacity: 0.3;
    position: relative;
    -webkit-user-select: none;  /* Chrome 49+ */
    -moz-user-select: none;     /* Firefox 43+ */
    -ms-user-select: none;      /* No support yet */
    user-select: none;          /* Likely future */
}
.mka-to-section.disabled:before {
    content: " ";
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 15px;
    right: 15px;
    z-index: 99;
}

.mka-to-section:only-child, .mka-to-section:last-child {
    margin-bottom: 0;
    border-bottom: none;
}

.mka-to-section.mk-overflow {
    overflow-x: auto;
}

.mka-to-row {
    margin: 0 -10px 54px;
}

.mka-to-row:after {
    display: block;
    clear: both;
    content: "";
    height: 0;
    font-size: 0;
    width: 100%;
}

.mka-to-col-1-of-4 {
    display: block;
    width: 25%;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.mka-to-col-2-of-4 {
    display: block;
    width: 50%;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.mka-to-col-3-of-4 {
    display: block;
    width: 75%;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.mka-to-col-4-of-4 {
    display: block;
    width: 100%;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.mka-to-col-1-of-3 {
    display: block;
    width: 33.33333%;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.mka-to-col-2-of-3 {
    display: block;
    width: 66.66667%;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}

.mka-to-col-3-of-3 {
    display: block;
    width: 100%;
    float: left;
    padding-right: 10px;
    padding-left: 10px;
    box-sizing: border-box;
}