/*Header*/



/*#0c2461*/

@media (min-width: 1025px){
.m-header {
    height: 60px;
}

 .m-brand .m-brand__logo, .m-brand .m-brand__tools {
      height: 60px !important;
    }

    .m-header--fixed .m-body {
            padding-top: 60px !important;

    }

    .m-aside-left--fixed.m-header--fixed .m-aside-left, .m-aside-left--fixed.m-header--static .m-aside-left {
        top: 60px;
    }

}

.m-nav .m-nav__item > .m-nav__link {
    /*padding:0px 0px;*/
}

/*.m-page--fluid .m-header, .m-page--wide .m-header {
    background-color: #2646d5;
}*/


.m-aside-left.m-aside-left--skin-dark {

     background-color: #091c4b;
     border-top:1px solid #143893;
}

.m-brand.m-brand--skin-dark {
     background-color: #0c2461;
}


.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__heading, .m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link {



}




.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__heading .m-menu__link-icon,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon 
{
    color:#fff;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading 
.m-menu__link-icon, 
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > 
.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-icon {
    color:#fff;
}


.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link {
    padding:4px 30px;
}

.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__heading, .m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link {
    height:38px;
}


.m-aside-menu .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item > .m-menu__heading, .m-aside-menu .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item > .m-menu__link {
     height:38px;
}


.m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link .m-topbar__username {
    color:#676c7b;
    text-align:right
}


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover {
    background-color: #2646d5;
}


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.qactions:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active) {
     background-color: #2646d5;
}



/*@media (max-width: 1024px) {
    .m-header--fixed-mobile .m-topbar {
        top: -60px;
    }
}*/


/*@media (max-width: 1024px) {
    .m-topbar {
        background-color: #272782;
    }
}*/


/*
    Search Bar

*/


@media (max-width: 1024px) {

    .m-topbar--on .m-header-head {
        display: block !important;
        z-index: 3;
    }

    .m-topbar {
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        display: none !important;
        width: 100% !important;
        padding: 0 20px;
        height: 60px !important;
        position: relative;
        /*background-color: #272782;*/
        -webkit-box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.1);
    }



    /*wait until Searchbar*/
    /*.m-header--fixed-mobile .m-topbar {
        top: -60px!important;
    }*/

    .m-header--fixed-mobile.m-topbar--on .m-topbar {
        display: table !important;
    }

    .m-topbar .m-topbar__nav.m-nav {
        /*float: right;*/
        margin:0 0 0 0;
    }

        .m-topbar .m-topbar__nav.m-nav > .m-nav__item {
            padding: 0 4px;
        }

            .m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link .m-nav__link-badge {
                margin-left: -2px;
                top: 5px;
            }

    .m-topbar .m-topbar__nav-wrapper {
        width: 100%;
    }

    .m-header-search {
        height: 60px !important;
    }
}

@media (max-width: 768px) {
    .m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-dropdown {
        position: static;
    }

        .m-topbar .m-topbar__nav.m-nav > .m-nav__item.m-dropdown.m-topbar__user-profile .m-dropdown__content {
            max-height: 275px;
            overflow: auto;
        }


    .m-nav .m-nav__item > .m-nav__link .m-nav__link-text span{
        display:none;

    }



}

.m-header-search .m-header-search__form {
    display: inline-block;
    float: right;
}

    .m-header-search .m-header-search__form.m-loader:before {
        right: 15px;
    }

    .m-header-search .m-header-search__form.m-loader:before {
        border-top-color: #c7b2d3;
    }

.m-header-search .m-header-search__wrapper {
    display: table;
    table-layout: fixed;
    text-align: right;
    border-radius: 40px;
    background-color: rgba(0,0,0,0);
    border: 1px solid rgba(197,175,209,0.25);
}

.m-header-search .m-header-search__input-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.m-header-search .m-header-search__input {
    border: 0;
    background: none;
    outline: none !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    font-size: 1rem;
    padding: 0.75rem 1.5rem 0.75rem 0.75rem;
    display: block;
    color: #d1bfda;
}

    .m-header-search .m-header-search__input::-moz-placeholder {
        color: #c7b2d3;
        opacity: 1;
    }

    .m-header-search .m-header-search__input:-ms-input-placeholder {
        color: #c7b2d3;
    }

    .m-header-search .m-header-search__input::-webkit-input-placeholder {
        color: #c7b2d3;
    }

.m-header-search .m-header-search__icon-search, .m-header-search .m-header-search__icon-close, .m-header-search .m-header-search__icon-cancel {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    line-height: 0 !important;
    cursor: pointer;
}

.m-header-search .m-header-search__icon-search {
    width: 30px;
    padding: 0 0 0 1.25rem;
}

    .m-header-search .m-header-search__icon-search > i {
        font-size: 1.3rem;
        color: #c7b2d3;
    }

.m-header-search .m-header-search__icon-close {
    display: none;
    padding: 0 1.25rem 0 0;
}

.m-header-search .m-header-search__icon-cancel {
    visibility: hidden;
    width: 30px;
    padding: 0 1.25rem 0 0;
}

    .m-header-search .m-header-search__icon-cancel > i {
        font-size: 1.3rem;
        color: #c7b2d3;
    }

@media (min-width: 1025px) {
    .m-header-search {
        width: 675px;
    }

        .m-header-search .m-header-search__form {
            height: 3.2rem;
        }

        .m-header-search.m-header-search--expandable {
            width: 640px;
        }

            .m-header-search.m-header-search--expandable .m-header-search__input {
                -webkit-transition: width .4s ease-out;
                transition: width .4s ease-out;
                width: 100px;
            }

                .m-header-search.m-header-search--expandable .m-header-search__input:focus {
                    -webkit-transition: width .4s ease-out;
                    transition: width .4s ease-out;
                    width: 580px;
                }

    .m-header--fixed.m-header--minimize-on .m-header-search .m-header-search__form.m-loader:before {
        border-top-color: #c7b2d3;
    }

    .m-header--fixed.m-header--minimize-on .m-header-search .m-header-search__wrapper {
        border: 1px solid rgba(180,178,204,0.3);
    }

    .m-header--fixed.m-header--minimize-on .m-header-search .m-header-search__input {
        color: #b7b5ce;
    }

        .m-header--fixed.m-header--minimize-on .m-header-search .m-header-search__input::-moz-placeholder {
            color: #c3c1d6;
            opacity: 1;
        }

        .m-header--fixed.m-header--minimize-on .m-header-search .m-header-search__input:-ms-input-placeholder {
            color: #c3c1d6;
        }

        .m-header--fixed.m-header--minimize-on .m-header-search .m-header-search__input::-webkit-input-placeholder {
            color: #c3c1d6;
        }

    .m-header--fixed.m-header--minimize-on .m-header-search .m-header-search__icon-search > i {
        color: #c7b2d3;
    }
}

@media (max-width: 1024px) {
    .m-header-search {
        display: none !important;
    }

    .m-topbar--on .m-header-search {
        background-color: #fff;
        -webkit-box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 3px 12px 0px rgba(0,0,0,0.1);
        display: block !important;
    }

    .m-header-search .m-header-search__wrapper {
        background-color: transparent;
        border: 0;
        float: none;
        position: relative;
        z-index: 1;
        height: 60px;
    }

    .m-header-search .m-header-search__input {
        background-color: transparent;
        color: #333;
        padding: 7px 10px 7px 20px;
    }

        .m-header-search .m-header-search__input::-moz-placeholder {
            color: #666;
            opacity: 1;
        }

        .m-header-search .m-header-search__input:-ms-input-placeholder {
            color: #666;
        }

        .m-header-search .m-header-search__input::-webkit-input-placeholder {
            color: #666;
        }

    .m-header-search .m-header-search__form {
        float: none;
    }

        .m-header-search .m-header-search__form.m-loader:before {
            right: 10px;
        }

        .m-header-search .m-header-search__form.m-loader:before {
            border-top-color: #282a3c;
        }

    .m-header-search .m-header-search__input-wrapper {
        display: none;
    }

    .m-header-search .m-header-search__icon-search {
        width: 30px;
        padding: 0 0 0 20px;
        text-align: left;
    }

        .m-header-search .m-header-search__icon-search > i {
            font-size: 1.6rem;
            color: #bcc0cd;
        }

    .m-header-search .m-header-search__icon-close {
        display: none;
        width: 30px;
        padding: 0 35px 0 0;
    }

        .m-header-search .m-header-search__icon-close > i {
            font-size: 1.3rem;
            color: #bcc0cd;
        }

    .m-header-search .m-header-search__icon-cancel {
        display: none !important;
    }

    .m-header-search--mobile-expanded .m-header-search {
        width: 100%;
        position: static;
    }

        .m-header-search--mobile-expanded .m-header-search .m-header-search__wrapper {
            width: 100%;
        }

        .m-header-search--mobile-expanded .m-header-search .m-header-search__input-wrapper, .m-header-search--mobile-expanded .m-header-search .m-header-search__icon-search, .m-header-search--mobile-expanded .m-header-search .m-header-search__icon-close {
            display: table-cell;
        }

    .m-header-search--mobile-expanded .m-header-head {
        display: none !important;
    }
}




/*Custom*/

  .m-widget4.m-widget4--progress .m-widget4__progress .m-widget4__progress-wrapper .progress {
    display: flex;}

.form-control[readonly], .form-control {
  border-color: #d1d2d4;}


.select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single{border: 1px solid #d1d2d4;}



  
.m-login.m-login--1 .m-login__wrapper .m-login__form .m-form__group .form-control {
    padding:1.5rem 1rem 0.5rem;
    border: 1px solid #cbcbcb;
    /*border: 1px solid #d1d2d4;*/
    border-radius:4px 4px 4px 4px;
    font-size:1.25rem;
}


.m-login.m-login--1 .m-login__wrapper .m-login__form .m-form__group .form-control:focus {
     border: 1px solid #716aca;
}



   .form-group.form-md-floating-label {
            margin: 1rem 0 !important;
        }

            .form-group.form-md-floating-label label {
                color: #999;
                font-weight: normal;
                position: absolute;
                pointer-events: none;
                left: 0px;
                top: 0px;
                transition: 0.2s ease all;
                -moz-transition: 0.2s ease all;
                -webkit-transition: 0.2s ease all;
                padding: 1rem;
            }

            /* active state */
            .form-group.form-md-floating-label .form-control:focus ~ label
            ,.form-group.form-md-floating-label.focused label
            ,.form-group.form-md-floating-label .form-control:valid~label {
                padding-top: 0.25rem;
                /*transform: translate3d(0, -1rem, 0);*/
                color: #5264AE;
                font-size:80%;
                
            }



            /* BOTTOM BARS ================================= */
            .form-group.form-md-floating-label .bar {
                position: relative;
                display: block;
                width: 100%;
            }

                .form-group.form-md-floating-label .bar:before, .form-group.form-md-floating-label .bar:after {
                    content: '';
                    height: 2px;
                    width: 0;
                    bottom: 1px;
                    position: absolute;
                    background: #5264AE;
                    transition: 0.2s ease all;
                    -moz-transition: 0.2s ease all;
                    -webkit-transition: 0.2s ease all;
                }

                .form-group.form-md-floating-label .bar:before {
                    left: 50%;
                }

                .form-group.form-md-floating-label .bar:after {
                    right: 50%;
                }

            /*active state*/
            .form-group.form-md-floating-label .form-control:focus ~ .bar:before,
            .form-group.form-md-floating-label .form-control:focus ~ .bar:after {
                width: 50%;
            }


















@media (min-width: 1025px) {
    .m-login.m-login--1 .m-login__content {
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    }
}

/*.m-login.m-login--1 .m-login__content {
    margin-top: -15rem;
    padding: 5rem 5rem 5rem 5rem;
}*/

.input-group .input-group-append > .input-group-text > i, .input-group .input-group-prepend > .input-group-text > i {

        min-width: 18px;
}



.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {

    color:#fff;

}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-text {
      color:#fff;
}


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item > .m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-text {
    color:#c1c1c1;

}


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__heading .m-menu__link-text, .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-text {
        color:#fff;
}


.m-topbar .m-topbar__nav.m-nav > .m-nav__item > .m-nav__link .m-topbar__userpic img {
        max-width: 71px!important;
}


.m-form.m-form--group-seperator .m-form__group, .m-form.m-form--group-seperator-dashed .m-form__group {
    padding-top: 15px;
    padding-bottom: 15px;
}




.invstatus {
    letter-spacing:0.1rem;
    border-width:1px;
    padding:0.15rem;
    border-style:solid;
    font-size:80%;
}
.invstatus.invstatus-draft {
    border-color:#ebedf2;
    color:#ebedf2;
}

.invstatus.invstatus-due {
    border-color:rgb(244, 81, 108) !important;
    color:rgb(244, 81, 108) !important;
}

.invstatus.invstatus-seen {
    border-color:rgb(54, 163, 247);
    color:rgb(54, 163, 247);
}


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link .m-menu__link-text {
    color:#fff;
}

.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link.m-menu__link-add,.m-aside-menu .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item > .m-menu__link.m-menu__link-add {
    display:none;
    position:absolute;
    width:40px;
    top:0;
    right:15px;
    padding:5px;
    text-align:center;
    -webkit-transition:background-color .3s;
    -moz-transition:background-color .3s;
    -ms-transition:background-color .3s;
    -o-transition:background-color .3s;
    transition:background-color .3s;
   background-color:#1e2826;
}

/*.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover {
    background-color:#1e2826;
}*/

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link-add
{display:table;}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover  > .m-menu__link-add{
display:table;
}


.m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link-add
{display:table;background-color:#dde1e0;}


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover  > .m-menu__link.m-menu__link-add:hover,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link-add:hover {
 background-color:#34bfa3;
    }

    .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link-add:hover {
 background-color:#34bfa3;

    }


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link.m-menu__link-add .m-menu__ver-arrow,
.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover  > .m-menu__link.m-menu__link-add .m-menu__ver-arrow {
      color:#fff;text-align:center;
      font-size:1rem;
}
.m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link.m-menu__link-add .m-menu__ver-arrow {
      color:#000;text-align:center;
}

@media (max-width: 768px) {
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item > .m-menu__link-add,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item > .m-menu__link-add
{display:table;}
    .m-aside-menu.m-aside-menu--skin-light .m-menu__nav>.m-menu__item > .m-menu__link-add
{display:table;}


    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item > .m-menu__link.m-menu__link-add .m-menu__ver-arrow,
    .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item  > .m-menu__link.m-menu__link-add .m-menu__ver-arrow
     {
      color:#fff;text-align:center;
}
     .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item > .m-menu__link.m-menu__link-add .m-menu__ver-arrow {
      color:#fff;text-align:center;
}

}


.m-aside-menu .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item {
    position:relative;

}


.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover {
    background-color:#2646d5;
}

.m-aside-menu.m-aside-menu--skin-dark .m-menu__nav > .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover > .m-menu__link-add:hover {

}
/*
    TimeLine2

*/


.m-timeline-2:before {
    background-color:transparent;
    left: 6.89rem;
}
.m-timeline-2 .m-timeline-2__items .m-timeline-2__item .m-timeline-2__item-cricle {
    left:6.1rem;

}
.m-timeline-2 .m-timeline-2__items .m-timeline-2__item .m-timeline-2__item-text {
       padding-left:6.1rem;
}


.xclick{
    pointer-events: none;
}




/*
    Vertical Tabs

*/

.nav-tabs--vertical {
  border-bottom: none;
  border-right: 1px solid #ddd;
  display: flex;
  flex-flow: column nowrap;
}
.nav-tabs--left {
  margin-top:0;
  margin-bottom:0 !important;
  margin-right:15px;
  min-width:15rem;
}
.nav-tabs--left .nav-item + .nav-item {
  margin-top: .25rem;
  margin-left:0;
}
.nav-tabs--left .nav-link {
    background-color: #f7f7f7;
  transition: border-color .125s ease-in;
  white-space: nowrap;
  padding:1.125rem;
}
.nav-tabs--left .nav-link:hover {
  background-color: #f7f7f7;
  border-color: transparent;
  color:#000;
}
.nav-tabs--left .nav-link.active {
  border-bottom-color: #0275d8;
  border-top-color: #0275d8;
  border-right-color: #fff;
  border-bottom-left-radius: 0.25rem;
  border-top-right-radius: 0;
  margin-right: -1px;
  border-left-width:4px;
  border-left-color:#0275d8;
  color:#0275d8;
}
.nav-tabs--left .nav-link.active:hover {
  background-color: #fff;
  border-color: #0275d8 #fff #0275d8 #0275d8;
}



/*
    Screen Mockups

*/


.preview-wrapper {
    padding: 40px 0;
    perspective: 590px;
}

.preview-inner-wrapper {
    height: 648px;
    position: relative;
    /*
    -webkit-transform:  rotateY(11deg) scale(0.7);
    transform: rotateY(11deg) scale(0.7)
*/
    /*
    -webkit-transform:  rotateY(14deg) scale(0.7);
    transform: rotateY(-14deg) scale(0.7);
*/
}

.xl-wrapper {
    width: 703px;
    height: 576px;
    background: url(../images/mockup/xl-mockup.png);
    background-repeat: no-repeat;
    position: absolute;
   
    cursor: move;
}

.xl-inner {
    width: 600px;
    height: 343px;
    margin-left: 48px;
    margin-top: 36px;
    position: relative;
    overflow: hidden;
}
    

.lg-wrapper {
        width: 650px;
        height: 406px;
        background: url(../images/mockup/lg-mockup.png);
        background-repeat: no-repeat;
        position: absolute;
       
        cursor: move;
    }

.lg-inner {
    width: 495px;
    height: 311px;
    margin-left: 77px;
    margin-top: 39px;
    position: relative;
    overflow: hidden;
}

.md-wrapper {
    width: 250px;
    height: 314px;
    position: absolute;
   
    background-image: url(../images/mockup/md-mockup.png);
    background-repeat: no-repeat;
    background-position: bottom;
    cursor: move;
}

.md-inner {
    width: 190px;
    height: 250px;
    margin-left: 31px;
    margin-top: 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.sm-wrapper {
    width: 120px;
    height: 243px;
  
    position: absolute;
    background-image: url(../images/mockup/sm-mockup.png);
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 2;
    cursor: move;
}

.sm-inner {
    width: 97px;
    height: 174px;
    margin-left: 10px;
    margin-top: 34px;
    position: relative;
    z-index: 3;
    overflow: hidden;
}
#p_xl {
    width: 1519px;
    height: 862px;
    position: relative;
    left: 0px;
    top: 0px;
}

#p_xl {
    -ms-zoom: 0.7;
    -moz-transform: scale(0.4);
    -moz-transform-origin: 0px 0;
    -o-transform: scale(0.4);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.4);
    -webkit-transform-origin: 0 0;
}

#p_lg {
    width: 1257px;
    height: 776px;
    position: relative;
}

#p_lg {
    -ms-zoom: 0.7;
    -moz-transform: scale(0.4);
    -moz-transform-origin: 0px 0;
    -o-transform: scale(0.4);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.4);
    -webkit-transform-origin: 0 0;
}

#p_md {
    width: 967px;
    height: 1243px;
    position: relative;
    left: 0px;
    top: 0px;
}

#p_md {
    -ms-zoom: 0.7;
    -moz-transform: scale(0.2);
    -moz-transform-origin: 0px 0;
    -o-transform: scale(0.2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.2);
    -webkit-transform-origin: 0 0;
}

#p_sm {
    width: 510px;
    height: 1136px;
    position: relative;
    left: 0px;
    top: 0px;
}

#p_sm {
    -ms-zoom: 0.7;
    -moz-transform: scale(0.2);
    -moz-transform-origin: 0px 0;
    -o-transform: scale(0.2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.2);
    -webkit-transform-origin: 0 0;
}


/*
    Responsive Mockups
*/

@media screen and (min-width: 650px) {
  
  .preview-inner-wrapper {
    height: 520px;
}

.xl-wrapper {
    display:none;
}

.lg-wrapper {
      left: 0%;
    top: 10%;
    }

.md-wrapper {
     display:none;
}

.sm-wrapper {
     display:none;
}

}


@media screen and (min-width: 1024px) {
  
  .preview-inner-wrapper {
    height: 420px;
}

.xl-wrapper {
    display:none;
}


.lg-wrapper {
    display:block;
     left: 10%;
    top: 5%;
    }

.md-wrapper {
    display:none;
}

.sm-wrapper {
    display:block;
     left: 70%;
    top: 25%;
}

}


@media screen and (min-width: 1200px) {
     .preview-inner-wrapper {
    height: 520px;
}

.xl-wrapper {
    display:block;
     left: 190px;
}


.lg-wrapper {
    display:block;
    left: 673px;
        top: 230px;
    }

.md-wrapper {
    display:block;
     left: 60px;
    top: 285px;
}

.sm-wrapper {
    display:block;
     left: 220px;
    top: 370px;
}



}

/*
    Typography

*/


.m-form .m-form__section p,.m-portlet .m-portlet__body p {
    color:#212529;
}


a.pgselection {
    border-left:3px #0094ff solid;min-height:220px;
}

a.pgselection:hover,a.pgselection:active,a.pgselection:focus{
    text-decoration:none !important;
    box-shadow:rgba(0,0,0,0.05) 5px 5px;
}

/*
    Perfect Scroll Bar 
*/
.m-scrollable:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y, .m-scroller:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y {
    background: #666666;
}
.m-aside-left--fixed .m-aside-left.m-aside-left--skin-light .ps > .ps__rail-y > .ps__thumb-y {
    background: #666666;
}

/*
    Page Block
*/

/*body.on-pageblock {
     overflow:hidden !important
}*/

#BlockPage .BlockPage {
    z-index: 979797; border: none; 
    margin: 0px; padding: 0px; 
    width: 100%; height: 100%; 
    top: 0px; left: 0px; 
    background-color: rgb(0, 0, 0); opacity: 0.6; cursor: wait; position: fixed;
}
.BlockPageLoader
{
    z-index: 979798;
    position: fixed;
    padding: 0px;
    margin: 0px 0px 0px -80px;
    width: 160px;
    top: 50%;
    left: 50%;
    text-align: center;
    color: rgb(0, 0, 0);
    border: 0px;
    cursor: wait;
}



/*
    Tooltip Dark Skin Color
*/

.m-tooltip.m-tooltip--skin-dark .tooltip-inner {
    color:#cecece;
}

/*-
    CHIPS ? badges
    -*/


.chip{
    display: inline-flex;
    flex-direction: row;
    background-color: #e5e5e5;
    border: none;
    cursor: default;
    height: 36px;
    outline: none;
    padding: 0;
    font-size: 14px;
    color: #333333;
    /*font-family:"Open Sans", sans-serif;*/
    white-space: nowrap;
    align-items: center;
    border-radius: 16px;
    vertical-align: middle;
    text-decoration: none;
    justify-content: center;

    margin-left:0.25rem;
    margin-bottom:0.25rem;

}

.chip > a{
    display:inline-flex;
    text-decoration:none;
    color:#333;
}
    .chip > a:hover, .chip > a:active, .chip > a:focus {
        text-decoration:none;
          color:#2646d5;
    }

    .chip > a:hover .chip-head, .chip > a:active .chip-head, .chip > a:focus .chip-head {
          background-color:rgba(38, 70, 213, 0.26);
    }



    /*.chip > a:focus {
        outline:2px dashed #7084dc !important;
    }*/


.chip-head{
    display: flex;
    position: relative;
    overflow: hidden;
    background-color:#ccc;
    font-size: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    user-select: none;
    border-radius: 50%;
    justify-content: center;
    width: 36px;
    color: #fff;
    height: 36px;
    font-size: 20px;
    margin-right: -4px;
}
.chip-content{
    cursor: inherit;
    display: flex;
    align-items: center;
    user-select: none;
    white-space: nowrap;
    padding-left: 12px;
    padding-right: 12px;
    min-width:10rem;
}
.chip-svg{
        color: #999999;
    cursor: pointer;
    height: auto;
    margin: 4px 4px 0 -8px;
  fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 24px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    user-select: none;
    flex-shrink: 0;
}
.chip-svg:hover{
    color: #666666;
}


.chip-head i{
    display: none;
}

.chip.done {
     background-color: rgb(223, 228, 249);
}

.chip.done .chip-head{
    background-color:#34bfa3;
    border-color: #34bfa3;
}
    .chip.done i {
        display:block
    }

.chip.done .chip-content {
    color:#2646d5;
    min-width:2rem;
}
    .chip.done .chip-close {
        display:none;
    }

     .chip.done > a:hover .chip-head, .chip.done > a:active .chip-head, .chip.done > a:focus .chip-head {
         background-color:#34bfa3;
    border-color: #34bfa3;
    }



/*
<div class="chip">
  <div class="chip-head"></div>
  <div class="chip-content">Chip Content</div>
  <div class="chip-close">
    CLOSE ICON can be replaced with times
      <svg class="chip-svg" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path>
    </svg>
  </div>
</div>
    */


/*
    Huge Tabs

*/

.nav.nav-pills.nav--bigtabs, .nav.nav-tabs.nav--bigtabs{
    margin-bottom:0;
}

.nav-tabs.nav--bigtabs .nav-link{
color:#000000;
text-align:left;
text-transform:uppercase;
background-color:#e0e0e0;
margin-left:0 !important;
border:1px solid #d6d6d6;
border-radius:0px;
/*min-height:9.5rem;*/

}

.nav-tabs.nav--bigtabs .nav-link.active {
    background-color:#ffffff;
    -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    box-shadow:0 1px 15px 1px rgba(69,65,78,.08);
    border-bottom:1px solid #fff;

}


.nav--bigtabs .bigtabs-head {padding:.5rem .5rem .25rem;font-size:.85rem;}
.nav--bigtabs .bigtabs-body {padding:.5rem .5rem .25rem;}
.nav--bigtabs .bigtabs-footer {padding:.5rem;font-size:.85rem;}


@media (max-width: 768px) {
    
.nav--bigtabs .bigtabs-head {padding:.1rem .5rem .1rem;font-size:.65rem;}
.nav--bigtabs .bigtabs-body .h2{font-size:1.25rem;}
.nav--bigtabs .bigtabs-footer {display:none;}/*padding:.25rem .5rem;font-size:.85rem;*/


}




/*
<a class="nav-item nav-link active text-left" id="nav-bills-pay" data-toggle="tab" href="#" data-target="#nav-bills" role="tab" aria-controls="nav-bills" aria-selected="true">
        <div class="bigtabs-head">
            <span>Bills to pay </span> -- Text uppercase
        </div>
        <div class="bigtabs-body">
            <span class="h2"><small>USD</small> 1.5K</span>
        </div>
        <div class="bigtabs-footer">
           <span class="m-badge m-badge--danger m-badge--wide">Outstanding or any thing</span>
        </div>

    </a>*/



/*
    Alert Css

*/
@media (max-width:768px) {
    .alert.m-alert--icon .m-alert__icon {
        display:none;
    }
}




/**
   BTS Pagination 
    **/


.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
 
.pagination-ys table > tbody > tr > td {
    display: inline;
}
 
.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #dd4814;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}
 
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;    
    margin-left: -1px;
    z-index: 2;
    color: #aea79f;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}
 
.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}
 
.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}
 
.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus {
    color: #97310e;
    background-color: #eeeeee;
    border-color: #dddddd;
}






/**

    Mobile Grid view css


    **/

@media (max-width:767px) {
.tab-content.mob-grid, .tab-content.mob-grid .panel-body,
.tab-content.mob-grid .col-lg-12,
.tab-content.mob-grid .col-md-12,
.tab-content.mob-grid .col-sm-12{padding:0px;}



.table-span {font-size:12px;color:#1d1d1d;}
.table-span.mob-amount {color:#1d1d1d;font-weight:600}

    .table-span.mob-project-details { border-top:1px solid #eeeeee; padding:2px;}


        .table-span.mob-project-details .mob-project-details-row {margin-bottom:4px;}

.table-span.mob-project-details .mob-project-details-row:before,
.table-span.mob-project-details .mob-project-details-row:after {
    content: "";
    display: table;
} 
.table-span.mob-project-details .mob-project-details-row:after {
    clear: both;
}


        .table-span.mob-project-details .mob-project-details-row strong { float:left;}
        .table-span.mob-project-details .mob-project-details-row span { float:right;}

.table-span.mob-project small{color:#555555;}
.table-span.mob-project strong {font-size:14px;font-weight:800}


    #content.mob-has-grid.col-lg-12,#content.mob-has-grid.col-md-12,#content.mob-has-grid.col-sm-12,#content.mob-has-grid.col-xs-12 {
        padding-left:0px;padding-right:0px;
    }


}



/*
    NEw pagination

*/


.paginations {
  /*display: inline-block;*/
}

.paginations a,.paginations span {
  color: black;
  float: left;
  padding: 6px 12px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color .3s;
  margin: 0 1px;
}
.paginations span{
  background-color: #2646d5;
  color: white;
   border-radius: 5px;
}

.paginations a:hover:not(.active) {background-color: #ddd;}