
$bg-color: #ddd;
$font-family: 'Poppins', sans-serif;
$font-color: #333;
$tp-color: #fdf572;
$case-color: #00BFA5;
$activity-color: #42A5F5;
$outbound-color: #8c3c85;
$task-color: #FF9100;
$backendcatatan-color: #FFC04C;
$cawangan-color: #013761;

$admin-tp-color: #c4bc36;

$yellowA100: #fdf572;
$yellowA400: #FFEA00;
$blueA400: #2979FF;
$greenA400: #00E676;
$redA400: #FF1744;
$orangeA400: #FF9100;
$purpleA400: #651FFF;
$lightpurpleA400: #ad36a3;

$margin10: 10px;


@mixin linear-gradient($color1, $color2, $color3: null) {
    @if $color3 {
        background: -webkit-linear-gradient($color1, $color2, $color3);
        background: -o-linear-gradient($color1, $color2, $color3);
        background: -moz-linear-gradient($color1, $color2, $color3);
        background: linear-gradient($color1, $color2, $color3);
    }
    @else {
        background: -webkit-linear-gradient($color1, $color2);
        background: -o-linear-gradient($color1, $color2);
        background: -moz-linear-gradient($color1, $color2);
        background: linear-gradient($color1, $color2);
    }
}

@mixin autoHeight {
    height: auto;
}

@mixin fixed-elem {
    position: fixed;
}

html {
    @include autoHeight;
    background-color: $bg-color;
}

body {
    @include autoHeight;
    font-family: $font-family;
    font-size: 14px;
    font-weight: normal;
    padding: 0;
}

/*body.md-dialog-is-showing {
    overflow: hidden;
}

md-dialog {
    overflow-x: hidden;
}*/

.md-dialog-container {
    top: 0% !important;
    height: 100% !important;
}

a {
    //color: inherit;
    text-decoration: none;
}

.fixed-elem {
    @include fixed-elem;
}

.margin {
    margin: $margin10;
}

.no-padding {
    padding: 0px !important;
}

.no-margin {
    margin: 0px;
}
/*.row {
    margin-left:-10px;
    margin-right: -10px;
}*/
div[class^="col-"] {
    padding: 0 10px;
}

.padding-10 {
    padding-left: 10px;
    padding-right: 10px;
}

@mixin config-bs-grid($sizes...) {
    @each $size in $sizes {
        @for $i from 1 through 12 {
            .col-#{$size}-#{$i} {
                @extend .padding-10;
            }
        }
    }
}

@include config-bs-grid('xs','sm','md','lg');
/* Top Menu Start */
.part-header {
    height: 46px;

    .header-holder {
        @include linear-gradient(#fffff, #fefefe);
        border-top: #003f99 solid 3px;
        width: 100%;
        z-index: 2010;
    }

    .header-holder:before {
        border-radius: 1000px / 50px;
        bottom: 0;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        content: " ";
        left: 10px;
        position: absolute;
        right: 10px;
        top: 50%;
    }

    .header {
        @include linear-gradient(#fffff, #fefefe);
        margin: 0 auto;
        width: 100%;
        z-index: 1;
        height: 44px;
        position: relative;
        border-bottom: #dedede solid 1px;
    }
}

.header-holder-box {
    .logo {
        float: left;
        font-family: $font-family;
        font-size: 20px;
        line-height: 44px;
        padding: 0 10px;
        text-align: center;
        position: relative;
        z-index: 2;
        text-decoration: none;
        color: #555;
        font-weight: bold;

        > img {
            height: 40px;
            margin-top: -5px;
        }
    }
}

.navbar {
    margin-bottom: 0;
}

.navbar-static-top {
    border-bottom: none 0;
}

.pg-bg {
    @include fixed-elem;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    @include linear-gradient(#f0f0f0, #e1e1e1, #d8d8d8);
}

.left-nav {
    float: left;
    position: relative;
    z-index: 1;
    display: none;
}

.quick-link {
    height: 44px;
    color: #555;

    .ql-item {
        float: left;
        width: 46px;
        height: 44px;
        line-height: 44px;
        border-left: solid 1px #ddd;
        text-align: center;
        position: relative;
        transition: background-color .2s ease-in;
        color: inherit;

        .noti-count {
            background-color: #f00;
            float: right;
            font-size: 0.6em;
            margin-left: -5px;
            padding: 2px 3px;
            position: relative;
            top: -5px;
            z-index: 1;
        }

        &:hover {
            background-color: #003f99;
            color: #fff;
        }

        &:last-child {
            border-right: solid 1px #ddd;
        }

        .open-menu &.menu-link {
            border-left-color: #ddd !important;
            background-color: #003f99;
        }

        .noti-menu-open &.noti-link {
            border-left-color: #ddd !important;
            background-color: #003f99;
        }

        .noti-calendar-open &.calendar {
            border-left-color: #ddd !important;
            background-color: #003f99;
        }
    }

    .separator {
        display: inline-block;
        position: relative;
        margin: 0 10px;

        &:before {
            content: " ";
            float: left;
            height: 1.5em;
            border-left: #999 solid 1px;
            margin-top: -1.2em;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
}

.ql-item.noti-link .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    width: 369px;
    text-align: left;
    border-radius: 0 0 3px 3px;
    margin-top: -1px;
    color: #555;
}

/*.noti-link.noti-menu-open .dropdown-menu {
    display: block;
    padding: 0;
}*/
.noti-menu-open .noti-link .dropdown-menu {
    display: block;
    padding: 0;
}

.inb-call-open .dropdown-menu > li,
.noti-menu-open .dropdown-menu > li {
    font-size: 12px;
    padding: 5px 10px;
    line-height: 1.65em;
}


.inb-call-open .dropdown-menu > li + li,
.noti-menu-open .dropdown-menu > li + li {
    border-top: 1px solid #f4f4f4;
}

.noti-menu-open .dropdown-menu > li .menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.noti-link.inb-call-open .dropdown-menu {
    display: block;
    padding: 0;
}

.out-call-open .dropdown-menu > li,
.noti-menu-open .dropdown-menu > li {
    font-size: 12px;
    padding: 5px 10px;
    line-height: 1.65em;
}

.out-call-open .dropdown-menu > li + li,
.noti-menu-open .dropdown-menu > li + li {
    border-top: 1px solid #f4f4f4;
}

.noti-link.out-call-open .dropdown-menu {
    display: block;
    padding: 0;
}

.ql-item {
    .badge {
        position: absolute;
        border-radius: 100%;
        top: 31px;
        display: inline-block;
        padding: 3px;
        min-width: 6px;
        right: 18.5px;
    }

    .badge:before {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: inset 0 0 20px 5px rgba(255,120,120,0.4);
        box-shadow: inset 0 0 20px 5px rgba(255,120,120,0.4);
        animation: not-blink 2.1s cubic-bezier(0.165,0.84,0.44,1) infinite;
    }

    .badge:after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        -webkit-box-shadow: inset 0 0 20px 5px rgba(255,100,100,0.4);
        box-shadow: inset 0 0 20px 5px rgba(255,100,100,0.4);
        animation: not-blink 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite;
    }
}

.ql-item .badge.bg-c-green:before,
.ql-item .badge.bg-c-green:after {
    -webkit-box-shadow: inset 0 0 20px 5px rgba(46,216,183,0.4);
    box-shadow: inset 0 0 20px 5px rgba(46,216,183,0.4);
}

.bg-c-pink {
    background: linear-gradient(45deg,#f00,#F85B80);
}

@-moz-keyframes not-blink {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(4);
        transform: scale(4);
        opacity: 0;
    }
}

@-webkit-keyframes not-blink {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(4);
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes not-blink {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(4);
        transform: scale(4);
        opacity: 0;
    }
}

.inb-call {
    animation: glowing-bg-green 4000ms infinite;
}

.out-call {
    animation: glowing-bg-orange 4000ms infinite;
}

@keyframes glowing-bg-green {
    0% {
        background-color: #52f4d4;
        color: #555;
    }

    50% {
        background-color: #09c0a5;
        color: #fff;
    }

    100% {
        background-color: #52f4d4;
        color: #555;
    }
    /*0% { background-color:#FFEB3B;}
    50% { background-color:#e7c633;}
    100% { background-color:#FFEB3B;}*/
}

@keyframes glowing-bg-orange {
    0% {
        background-color: #fCBC57;
        color: #555;
    }

    50% {
        background-color: #f39c12;
        color: #fff;
    }

    100% {
        background-color: #fC9E0A;
        color: #555;
    }
    /*0% { background-color:#FFEB3B;}
    50% { background-color:#e7c633;}
    100% { background-color:#FFEB3B;}*/
}

.up-box {
    margin: 0;
    margin-left: 20px;
    color: #555;
    z-index: 2;
    position: relative;
}

.up-box span {
    font-size: 14px;
}

.up-box img {
    height: 44px;
}

.menu-link {
    text-decoration: none;

    .menu-default {
        margin-left: 0;
        transition: transform ease-in .1s, margin-left ease-in .1s;

        .open-menu & {
            margin-left: -15px;
            transform: rotate3d(0,1,0,90deg);
        }
    }
}

.calendar {
    text-decoration: none;

    .menu-default {
        margin-left: 0;
        transition: transform ease-in .1s, margin-left ease-in .1s;

        .noti-calendar-open & {
            margin-left: -15px;
            transform: rotate3d(0,1,0,90deg);
        }
    }
}

.noti-link {
    text-decoration: none;

    .menu-default {
        margin-left: 0;
        transition: transform ease-in .1s, margin-left ease-in .1s;

        .noti-menu-open & {
            margin-left: -15px;
            transform: rotate3d(0,1,0,90deg);
        }
    }
}

.menu-close {
    float: left;
    width: 46px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: inherit;

    .ion-close {
        display: inline-block;
        transform: rotate3d(1,0,0,90deg);
        transition: transform ease-in-out .2s, margin-right ease-in .1s;
        margin-right: -15px;
        color: #fff;

        .open-menu & {
            transform: rotate3d(0,0,0,90deg);
            margin-right: 0;
        }
    }
}

.shortname-menu-close {
    float: left;
    width: 46px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    top: 0;
    color: inherit;

    .ion-close {
        display: inline-block;
        transform: rotate3d(1,0,0,90deg);
        transition: transform ease-in-out .2s, margin-right ease-in .1s;
        margin-right: -15px;
        color: #fff;

        .shortname-menu-open & {
            transform: rotate3d(0,0,0,90deg);
            margin-right: 0;
        }
    }
}

.noti-menu-close {
    float: left;
    width: 46px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: inherit;

    .ion-close {
        display: inline-block;
        transform: rotate3d(1,0,0,90deg);
        transition: transform ease-in-out .2s, margin-right ease-in .1s;
        margin-right: -15px;
        color: #fff;

        .noti-menu-open & {
            transform: rotate3d(0,0,0,90deg);
            margin-right: 0;
        }
    }
}


.calender-menu-close {
    float: left;
    width: 46px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: inherit;

    .ion-close {
        display: inline-block;
        transform: rotate3d(1,0,0,90deg);
        transition: transform ease-in-out .2s, margin-right ease-in .1s;
        margin-right: -15px;
        color: #fff;

        .noti-calendar-open & {
            transform: rotate3d(0,0,0,90deg);
            margin-right: 0;
        }
    }
}

.header-holder-box .menu-container {
    /*background-color:#efefef;*/
    /*border-top:#efefef solid 1px;*/
    overflow: hidden;
    border-bottom: #ddd solid 1px;
    margin-top: -200%;
    /*background: -webkit-linear-gradient(#FFEB3B, #FFEB3B, #FDD835);
    background: -o-linear-gradient(#FFEB3B, #FFEB3B, #FDD835);
    background: -moz-linear-gradient(#FFEB3B, #FFEB3B, #FDD835);
    background: linear-gradient(#FFEB3B, #FFEB3B, #FDD835);*/
    /*background: -webkit-linear-gradient(#BFFAE2, #BFFAE2, #BFFAE2);
    background: -o-linear-gradient(#BFFAE2, #BFFAE2, #BFFAE2);
    background: -moz-linear-gradient(#BFFAE2, #BFFAE2, #BFFAE2);
    background: linear-gradient(#BFFAE2, #BFFAE2, #BFFAE2);*/
    background: -webkit-linear-gradient(rgb(154, 225, 249), rgb(154, 225, 249), rgb(70, 192, 249));
    background: -o-linear-gradient(rgb(154, 225, 249), rgb(154, 225, 249), rgb(70, 192, 249));
    background: -moz-linear-gradient(rgb(154, 225, 249), rgb(154, 225, 249), rgb(70, 192, 249));
    background: linear-gradient(rgb(154, 225, 249), rgb(154, 225, 249), rgb(70, 192, 249));
    background: linear-gradient(rgb(154, 225, 249), rgb(154, 225, 249), rgb(70, 192, 249));
}

.header-holder-box.open-menu .menu-container {
    margin-top: 0;
}

.menu-container .menu-box {
    margin: 0 auto;
    max-width: 1480px;
    width: 100%;
    color: black;
    display: flex;
    flex-wrap: wrap;
    /*align-items: stretch;
    align-content: stretch;*/
    column-count: 3;
    /*column-fill:balance;*/
    overflow-x: hidden;
}

.header-holder-box .menu-container .menu-box {
    transform: translateY(-325px);
    transition: margin 0.25s ease 0s;
}

.header-holder-box.open-menu .menu-container .menu-box {
    transform: translateY(0);
    transition: transform 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) 0s;
}

.menu-box .menu {
    float: left;
    width: 33.33%;
    padding: 15px;
    position: relative;
    /*display: table-cell;*/
    /*flex-grow: 1;
    height: 100%;
    min-height: 100%;
    align-self: stretch;*/
    /*-webkit-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;*/
    &:before {
        content: " ";
        display: table;
    }
}
/*.menu-box .menu + .menu:before {
        border-left: 1px solid #ddd;
        content: " ";
        height: 80%;
        margin-top: 10%;
        position: absolute;
        left: 0;
    }*/
.menu .menu-icon {
    text-align: center;
    font-size: 30px;
    padding: 10px 0;
}

.menu-icon span {
}

.menu a.menu-title {
    color: black;
    /*font-family: 'segoe ui semibold';*/
    font-size: 20px;
    text-decoration: none;
    text-align: center;
    display: block;
    padding-bottom: 10px;
    border-bottom: #888 dotted 1px;
}

.menu ul.sub-menu {
    list-style: none;
    padding: 15px 5px 5px 15px;
    font-size: 0.8em;
}

.menu ul.sub-menu > li:before {
    content: " ";
    width: 5px;
    height: 5px;
    background-color: #555;
    float: left;
    left: 0;
    margin-left: -12px;
    margin-top: 0.6em;
    position: relative;
}

.menu ul.sub-menu > li.not-authorized {
    color: #f88;
}

.menu ul.sub-menu > li.not-authorized:before {
    content: "\e090";
    position: relative;
    top: 3px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1em;
    background: none;
    width: 22px;
    height: 22px;
    margin: 0 5px;
}

.sub-menu li {
    /*font-size: 0.95em;*/
    font-weight: bold;
}

.sub-menu a {
    text-decoration: none;
    color: #2e2929;
}

.topMenuRow {
    /*background-color: white;*/
    height: 70px;
    padding-top: 10px;
    position: fixed;
    width: 100%;
    z-index: 2;
}

.user-profile {
    /*width: 100px;*/
}

.user-profile span {
    float: left;
    margin-top: 12px;
    /*margin-right:50px;*/
}

.user-profile .profileContainer {
    background-color: #003f99;
    color: #efefef;
    float: right;
    /*font-family: "Segoe UI Semibold";*/
    font-weight: bold;
    font-size: 2em;
    height: 44px;
    margin-left: 10px;
    display: block;
    text-align: center;
    width: 44px;

    .shortname-menu-open & {
        border-left-color: #ddd !important;
        background-color: #003f99;
    }
}

.user-profile .profileContainer a {
    color: inherit;
    text-decoration: none;
    transition: transform ease-in .1s, margin-left ease-in .1s;
    display: block;

    .shortname-menu-open & {
        margin-left: -15px;
        transform: rotate3d(0,1,0,90deg);
    }
}

.user-profile .user-container {
    position: fixed;
    right: 0;
    width: 0;
    text-align: left;
    margin-top: 4px;
    font-family: 'Segoe UI';
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) 0s;
}

.profileContainer.open-usr-vw {
    background-color: #eee;
}

.profileContainer.open-usr-vw .user-container {
    width: 374px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    transition: all 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) 0s;
}

.shortname-menu-open .user-profile .profileContainer {
    display: block;
    padding: 0;
    position: relative;
}

.user-container .btn-group {
    float: right;
    margin: 10px;
    position: relative;
    z-index: 1;
    transform: translateX(374px);
    transition: transform 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) 0s;
}

.open-usr-vw .user-container .btn-group {
    transform: translateX(0);
    transition: transform 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) 0s;
}

.user-container .btn.close-user-container {
    min-width: 20px;
    text-align: center;
    background-color: transparent;
    border: none 0;
}

.user-info-box {
    width: 374px;
    background-color: #fff;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #efefef;
    position: relative;
    opacity: 0.5;
    transition: opacity 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) 0s;
}

.open-usr-vw .user-info-box {
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.28, 0.11, 0.32, 1) 0s;
}

.user-info-box .title {
    padding: 15px 25px;
}

.user-info-box .title span {
    font-size: 25px;
    margin: 0;
}

.user-info-box .user-details {
    padding: 15px 25px 25px;
}

.user-info-box .user-details .initials {
    float: left;
    display: block;
    font-size: 2em;
    margin: 0 15px 0 0;
    background-color: #eee;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-align: center;
    line-height: 1.6em;
    /*font-family: 'Segoe UI Semibold';*/
}

.user-info-box .user-actions {
    border-top: 1px solid #ddd;
}

.user-info-box .user-actions .btn.btn-default {
    width: 100%;
    text-align: left;
    padding: 15px 35px;
    margin-bottom: 0;
    border-radius: 0;
    border: none 0;
    background-color: #fff;
}

.user-actions .btn.btn-default:hover,
.user-actions .btn.btn-default:focus,
.user-actions .btn.btn-default:active,
.user-actions .btn.btn-default.active {
    background-color: #e7e7e7;
}

.user-actions .btn.btn-default:active,
.user-actions .btn.btn-default.active {
    box-shadow: none;
}
/* Top Menu End */
/*Main Menu Start*/
.menuoption-desc {
    margin-top: 15px;
    font-size: 0.9em;
    display: inline-block;
    text-align: justify;
}

.menusuboption-hdr {
    font-weight: bold;
    text-decoration: underline;
    padding-top: 5px;
}
/*Main Menu End*/
.content {
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.tab-content {
    padding: 0 5px;

    .tab-pane {
        margin-top: 15px;
    }
}

.nav-pills {

    > li {
        &.active {
            > a {
                font-weight: 600;
            }
        }
    }

    &.taxpayer-tabs {
        border-bottom: 3px solid $tp-color !important;

        > li {
            &.active {
                > a {
                    background-color: $tp-color;
                    color: #444;
                }
            }
        }
    }

    &.case-tabs {
        border-bottom: 3px solid $case-color !important;

        > li {
            &.active {
                > a {
                    background-color: $case-color;
                }
            }
        }
    }

    &.activity-tabs {

        > li {
            &.active {
                > a {
                    background-color: $activity-color;
                }
            }
        }
    }

    &.outbound-tabs {
        border-bottom: 3px solid $outbound-color !important;

        > li {
            &.active {
                > a {
                    background-color: $outbound-color;
                }
            }
        }
    }
}

.nav-tabs {

    > li {
        > a {
            border-radius: 4px 4px 0 0;
            color: inherit;
        }
    }

    &.taxpayer-tabs {
        border-bottom: 3px solid $tp-color !important;

        > li {
            &.active {
                > a {
                    background-color: $tp-color;
                    color: #444;
                }
            }
        }
    }

    &.case-tabs {
        border-bottom: 3px solid $case-color !important;

        > li {
            &.active {
                > a {
                    background-color: $case-color;
                }
            }
        }
    }

    &.activity-tabs {
        border-bottom: 3px solid $activity-color !important;

        > li {
            &.active {
                > a {
                    background-color: $activity-color;
                }
            }
        }
    }

    &.outbound-tabs {
        border-bottom: 3px solid $outbound-color !important;

        > li {
            &.active {
                > a {
                    background-color: $outbound-color;
                }
            }
        }
    }
}
/*Tab Banner*/
.tab-banner {
    margin-top: 10px;
    margin-bottom: 10px;

    .nav {
        > li {
            > a {
                position: relative;
                display: block;
                padding: 15px 15px;
                min-width: 120px;
                text-align: center;
                font-size: 1.2em;
            }
        }
    }
}

.action-banner {
    border-bottom-color: rgb(221, 221, 221);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: rgb(255, 255, 255);
    margin: 0;

    & .btn {
        padding-left: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-right: 5px;
        margin-left: 0px;
    }

    &.fixed-elem {
        position: fixed;
        border-bottom: none 0;
        box-shadow: 0 3px 5px rgba(0,0,0,0.12);
        z-index: 1000;
        top: 161px;
        width: 100%;
        border-top: #fff solid 1px;

        & .btn {

            &.btn-app:hover {
                background: rgba(244, 244, 244, 0.38);
            }

            & .fa {
                color: #fff !important;
            }

            & .fas {
                color: #fff !important;
            }

            & > small {
                color: #fff;
            }
        }

        .activity-profile & {
            background-color: $activity-color;
            color: #fff !important;
        }

        .taxpayer-profile & {
            background-color: $tp-color;
            color: #fff !important;

            & .btn {

                & .fa {
                    color: #666 !important;
                }

                & > small {
                    color: #666 !important;
                }
            }
        }

        .case-profile & {
            background-color: $case-color;
            color: #fff !important;
        }

        .outbound-profile & {
            background-color: $outbound-color;
            color: #fff !important;
        }
    }
}
/*Profile Header*/
.bg {
    color: #fff !important;

    &-green {
        background-color: $case-color !important;
    }
}

.bg-backendcatatan {
    background-color: $backendcatatan-color !important;
    color: #fff !important;
}

.bg-green {
    background-color: $case-color !important;
    color: #fff !important;
}

.bg-red {
    background-color: $redA400 !important;
    color: #fff !important;
}

.bg-orange {
    background-color: $orangeA400 !important;
    color: #fff !important;
}

.bg-yellow {
    background-color: $yellowA400 !important;
    color: $font-color;
}

.bg-blue {
    background-color: $blueA400 !important;
    color: #fff !important;
}

.bg-purple {
    background-color: $purpleA400 !important;
    color: #fff !important;
}

.bg-light-purple {
    background-color: $lightpurpleA400 !important;
    color: #fff !important;
}

.bg-transparent {
    background-color: transparent;
    color: $font-color;
}

.bg-transparent-light {
    @extend .bg-transparent;
    font-weight: normal;
}

.bg-dark-blue {
    background-color: $cawangan-color;
    color: #fff !important;
}

.arrow {
    color: rgb(41, 121, 255);
    margin-top: 5px;
    /*text-shadow: rgb(255, 255, 255) 0px 0px;*/
}

.outboundArrow {
    color: $orangeA400;
}

.fa-check {
    color: #5cb85c;
}

.fa-close {
    color: #d9534f;
}

.profile-header {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    left: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: background-color .2s ease-in-out;
    border-top: #ddd solid 1px;
    border-bottom: #ddd solid 1px;
    background-color: #fff;

    a {
        color: #00F;
    }

    &.fixed-elem {
        position: fixed;
        border-bottom: none 0;
        box-shadow: 0 3px 5px rgba(0,0,0,0.12);
        z-index: 1000;

        .arrow {
            color: #fff !important;
        }

        .outboundArrow {
            color: #fff !important;
        }

        .tp-profile {
            box-shadow: none;
        }

        .taxpayer-profile & {
            background-color: $tp-color;
        }

        .case-profile & {
            background-color: $case-color;
            color: #fff;

            a, b {
                color: #fff;
            }

            .hdr-box {
                border-bottom-color: #fff;
            }
        }

        .activity-profile & {
            background-color: $activity-color;
            color: #fff;

            a, b {
                color: #fff;
            }

            .hdr-box {
                border-bottom-color: #fff;
            }
        }

        .notification-profile & {
            background-color: $activity-color;
            color: #fff;
        }

        .outbound-profile & {
            background-color: $outbound-color;
            color: #fff;

            a, b {
                color: #fff;
            }

            .hdr-box {
                border-bottom-color: #fff;
            }
        }
    }

    .header-col {
        align-self: stretch;

        .hdr-box {
            padding: 2px 5px;
            border-bottom: #888 solid 1px;
            font-size: 0.688em;
            text-transform: uppercase;

            .hdr-box-title {
                border-radius: 3px;
                padding: 0 3px;
                box-shadow: 0 0 1px #ddd;
            }
        }
    }
}

.header-title {
    padding: 8px 15px 0;
    width: 100%;
    font-size: 24px;
    font-weight: bold;
    /*.admin.taxpayer-profile & {
        background-color: $admin-tp-color;
    }*/
    .taxpayer-profile & {
        background-color: $tp-color;
    }

    .case-profile & {
        background-color: $case-color;
        color: #fff;
    }

    .activity-profile & {
        background-color: $activity-color;
        color: #fff;
    }

    .outbound-profile & {
        background-color: $outbound-color;
        color: #fff;
    }

    .task-profile & {
        background-color: $task-color;
        color: #fff;
    }

    &.fixed-elem {
        background-color: transparent;
        z-index: 1000;
        display: flex;
        /*.action-banner&{

        }*/
        > div {
            margin: 95px auto 0;
            padding: 5px 10px;
            border-radius: 5px;
            box-shadow: 0 2px 6px -1px rgba(0,0,0,0.2);
            font-size: 0.55em;
            transition: margin .35s ease-in .2s;

            .taxpayer-profile & {
                background-color: $tp-color;
            }

            .case-profile & {
                background-color: $case-color;
                color: #fff;
            }

            .activity-profile & {
                background-color: $activity-color;
                color: #fff;
            }

            .outbound-profile & {
                background-color: $outbound-color;
                color: #fff;
            }
        }
    }
}

.tp-profile {
    /*padding: 5px 50px 5px 40px;*/
    position: relative;
    /*background-color: #fff;*/
    min-width: 300px;
    /*box-shadow: 0 0 0px 1px #ccc;
    border-radius: 3px;*/
}

.prof-edit-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 50px;
    color: #f39c12;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.is-open .prof-edit-btn {
    opacity: 1;
}

.prof-ddm {
    position: absolute;
    transform: translateY(-10px);
    top: auto;
    left: 0;
    border: #c7c7c7 solid 1px;
    width: 100%;
    margin-top: 8px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0px 0px 5px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 50ms ease-out,transform 100ms ease-out;

    &:before {
        content: "";
        position: absolute;
        left: 17px;
        top: -8px;
        margin-left: -7px;
        border-left: transparent solid 7px;
        border-right: transparent solid 7px;
        border-bottom: #c7c7c7 solid 7px;
    }

    &:after {
        content: "";
        position: absolute;
        left: 17px;
        top: -7px;
        margin-left: -7px;
        border-left: transparent solid 7px;
        border-right: transparent solid 7px;
        border-bottom: #fff solid 7px;
    }
}

.prof-ddm-btn {
    transition: transform .2s linear;
}

.is-open {
    .prof-ddm {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        box-shadow: 3px 3px 5px rgba(0,0,0,.12);
    }

    .prof-ddm-btn {
        transform: rotate(-180deg);
    }

    .prof-type-lbl {
        display: none;
    }
}
/*
 * Component: Button
 * -----------------
 */
.btn {
    border-radius: 3px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid transparent;
    font-family: $font-family;
    /*min-width: 100px;*/
    &.uppercase {
        text-transform: uppercase;
    }

    &.btn-app {
        margin-bottom: 0;
        background-color: transparent;
    }

    &.btn-flat {
        border-radius: 0;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border-width: 1px;
    }

    &:active {
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }

    &:focus {
        outline: none;
    }

    &.btn-file {
        position: relative;
        overflow: hidden;

        > input[type='file'] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            opacity: 0;
            filter: alpha(opacity=0);
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }
    }
}

.textRed {
    color: #f88;
}

.textGroupOr {
    color: $blueA400;
}

.textGroupAnd {
    color: $orangeA400;
}

.textOrange {
    color: $orangeA400;
}


.btn-primary {
    background-color: #3c8dbc;
    border-color: #367fa9;
    color: #fff !important;

    &:hover,
    &:active,
    &.hover {
        background-color: #367fa9;
    }
}

.btn-success {
    background-color: #00a65a;
    border-color: #008d4c;
    color: #fff !important;

    &:hover,
    &:active,
    &.hover {
        background-color: #008d4c;
    }
}

.btn-info {
    background-color: #00c0ef;
    border-color: #00acd6;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:active,
.btn-info.hover {
    background-color: #00acd6;
}

.btn-danger {
    background-color: #dd4b39;
    border-color: #d73925;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.hover {
    background-color: #d73925;
    color: #fff !important;
}

.btn-default {
    background-color: transparent;
}

.btn-warning {
    background-color: #f39c12;
    border-color: #e08e0b;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:active,
.btn-warning.hover {
    background-color: #e08e0b;
}

.btn-outline {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
}

.btn-link {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn[class*='bg-']:hover {
    -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}

.btn-app {
    border-radius: 3px;
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    text-align: center;
    color: #666;
    border: 1px solid #ddd;
    background-color: #f4f4f4;
    font-size: 12px;
}

.btn-app > .fa,
.btn-app > .glyphicon,
.btn-app > .ion {
    font-size: 20px;
    display: block;
}

.btn-app:hover {
    background: #f4f4f4;
    color: #444;
    border-color: #aaa;
}

.btn-app:active,
.btn-app:focus {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-app > .badge {
    position: absolute;
    top: -3px;
    right: -10px;
    font-size: 10px;
    font-weight: 400;
}

.no-border {
    border: 0 !important;
}

.noSidePadding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 10px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.box.box-primary {
    border-top-color: #3c8dbc;
}

.box.box-info {
    border-top-color: #00c0ef;
}

.box.box-danger {
    border-top-color: #dd4b39;
}

.box.box-warning {
    border-top-color: #f39c12;
}

.box.box-success {
    border-top-color: #00a65a;
}

.box.box-default {
    border-top-color: #d2d6de;
}

.box.collapsed-box .box-body,
.box.collapsed-box .box-footer {
    display: none;
}

.box .nav-stacked > li {
    border-bottom: 1px solid #f4f4f4;
    margin: 0;
}

.box .nav-stacked > li:last-of-type {
    border-bottom: none;
}

.box.height-control .box-body {
    max-height: 300px;
    overflow: auto;
}

.box .border-right {
    border-right: 1px solid #f4f4f4;
}

.box .border-left {
    border-left: 1px solid #f4f4f4;
}

.box.box-solid {
    border-top: 0;
}

.box.box-solid > .box-header .btn.btn-default {
    background: transparent;
}

.box.box-solid > .box-header .btn:hover,
.box.box-solid > .box-header a:hover {
    background: rgba(0, 0, 0, 0.1);
}

.box.box-solid.box-default {
    border: 1px solid #d2d6de;
}

.box.box-solid.box-default > .box-header {
    color: #444444;
    background: #d2d6de;
    background-color: #d2d6de;
}

.box.box-solid.box-default > .box-header a,
.box.box-solid.box-default > .box-header .btn {
    color: #444444;
}

.box.box-solid.box-primary {
    border: 1px solid #3c8dbc;
}

.box.box-solid.box-primary > .box-header {
    color: #ffffff;
    background: #3c8dbc;
    background-color: #3c8dbc;
}

.box.box-solid.box-primary > .box-header a,
.box.box-solid.box-primary > .box-header .btn {
    color: #ffffff;
}

.box.box-solid.box-info {
    border: 1px solid #00c0ef;
}

.box.box-solid.box-info > .box-header {
    color: #ffffff;
    background: #00c0ef;
    background-color: #00c0ef;
}

.box.box-solid.box-info > .box-header a,
.box.box-solid.box-info > .box-header .btn {
    color: #ffffff;
}

.box.box-solid.box-danger {
    border: 1px solid #dd4b39;
}

.box.box-solid.box-danger > .box-header {
    color: #ffffff;
    background: #dd4b39;
    background-color: #dd4b39;
}

.box.box-solid.box-danger > .box-header a,
.box.box-solid.box-danger > .box-header .btn {
    color: #ffffff;
}

.box.box-solid.box-warning {
    border: 1px solid #f39c12;
}

.box.box-solid.box-warning > .box-header {
    color: #ffffff;
    background: #f39c12;
    background-color: #f39c12;
}

.box.box-solid.box-warning > .box-header a,
.box.box-solid.box-warning > .box-header .btn {
    color: #ffffff;
}

.box.box-solid.box-success {
    border: 1px solid #00a65a;
}

.box.box-solid.box-success > .box-header {
    color: #ffffff;
    background: #00a65a;
    background-color: #00a65a;
}

.box.box-solid.box-success > .box-header a,
.box.box-solid.box-success > .box-header .btn {
    color: #ffffff;
}

.box.box-solid > .box-header > .box-tools .btn {
    border: 0;
    box-shadow: none;
}

.box.box-solid[class*='bg'] > .box-header {
    color: #fff;
}

.box .box-group > .box {
    margin-bottom: 5px;
}

.box .knob-label {
    text-align: center;
    color: #333;
    font-weight: 100;
    font-size: 12px;
    margin-bottom: 0.3em;
}

.box > .overlay,
.overlay-wrapper > .overlay,
.box > .loading-img,
.overlay-wrapper > .loading-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box .overlay,
.overlay-wrapper .overlay {
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 3px;
}

.box .overlay > .fa,
.overlay-wrapper .overlay > .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    color: #000;
    font-size: 30px;
}

.box .overlay.dark,
.overlay-wrapper .overlay.dark {
    background: rgba(0, 0, 0, 0.5);
}

.box-header:before,
.box-body:before,
.box-footer:before,
.box-header:after,
.box-body:after,
.box-footer:after {
    content: " ";
    display: table;
}

.box-header:after,
.box-body:after,
.box-footer:after {
    clear: both;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

.box-header.with-border {
    border-bottom: 1px solid #f4f4f4;
}

.collapsed-box .box-header.with-border {
    border-bottom: none;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .box-title {
    display: inline-block;
    font-size: 18px;
    /*margin: 0;*/
    line-height: 1;
    margin-top: 0px;
    /*margin-left: 13px;*/
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion {
    margin-right: 5px;
}

.box-header > .box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

.box-header > .box-tools [data-toggle="tooltip"] {
    position: relative;
}

.box-header > .box-tools.pull-right .dropdown-menu {
    right: 0;
    left: auto;
}

.btn-box-tool {
    padding: 5px;
    font-size: 12px;
    background: transparent;
    color: #97a0b3;
}

.open .btn-box-tool,
.btn-box-tool:hover {
    color: #606c84;
}

.btn-box-tool.btn:active {
    box-shadow: none;
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.no-header .box-body {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.box-body > .table {
    margin-bottom: 0;
}

.box-body .fc {
    margin-top: 5px;
}

.box-body .full-width-chart {
    margin: -19px;
}

.box-body.no-padding .full-width-chart {
    margin: -9px;
}

.box-body .box-pane {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 3px;
}

.box-body .box-pane-right {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0;
}

.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #ffffff;
}

.chart-legend {
    margin: 10px 0;
}

@media (max-width: 991px) {
    .chart-legend > li {
        float: left;
        margin-right: 10px;
    }
}

.box-comments {
    background: #f7f7f7;
}

.box-comments .box-comment {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.box-comments .box-comment:before,
.box-comments .box-comment:after {
    content: " ";
    display: table;
}

.box-comments .box-comment:after {
    clear: both;
}

.box-comments .box-comment:last-of-type {
    border-bottom: 0;
}

.box-comments .box-comment:first-of-type {
    padding-top: 0;
}

.box-comments .box-comment img {
    float: left;
}

.box-comments .comment-text {
    margin-left: 40px;
    color: #555;
}

.box-comments .username {
    color: #444;
    display: block;
    font-weight: 600;
}

.box-comments .text-muted {
    font-weight: 400;
    font-size: 12px;
}

.timeline-header { // timeline - catatan
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 10px;
}

.padding-left-0 {
    padding-left: 0;
}
/* Dashboard */
.dash-title {
    background: #8cb7ff;
    color: #485db5;
    box-shadow: 0 1px 2.94px 0.06px rgba(4, 26, 55, 0.16);
    font-weight: bold;
    padding: 10px;
    font-size: 18px;
}

.card {
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    border: none;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: #fff;

    .card-block {
        padding: 25px;
    }
}

.bg-c-blue {
    background: linear-gradient(#2979FF,#0D47A1);
}

.bg-c-green {
    background: linear-gradient(#2ed8b6,#09c0a5);
}

.bg-c-yellow {
    background: linear-gradient(#FFB64D,#ff9b50);
}

.bg-c-red {
    background: linear-gradient(#FF80AB,#FF4081);
}

.dashboardContainer {
    /*max-height: 1600px;*/
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-fill: balance-all;
    -moz-column-fill: balance;
    column-fill: balance;
}

@media (max-width: 900px) {
    .dashboardContainer {
        max-height: none;
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}
/* Dashboard End */
.rotate45 {
    transform: rotate(45deg);
}


.alert-reminder {
    position: absolute;
    top: 2px;
    right: 2px;
    text-align: center;
    font-size: 12px;
    padding: 2px 3px;
    line-height: 1.2;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.alert-danger {
    color: #fff;
    background-color: #F53F2A;
    border-color: #F3230C;
}

.veri-header-wrapper {
    /*justify-content: space-between;*/
    position: relative;
    width: 100%;
    /*left: 0;*/
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    transition: background-color .3s ease-in-out;
    /*border-top: #ddd solid 1px;
    border-bottom: #ddd solid 1px;
    background-color: #fff;*/
    &.fixed-elem {
        position: fixed;
        bottom: 0;
        /*margin-left: 20px;*/
        /*border-bottom: none 0;*/
        /*box-shadow: 0 3px 5px rgba(0,0,0,0.12);*/
        z-index: 998;
    }
}
/* Side bar */

$sidebarWidth: 250px;

.control-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: $sidebarWidth;
    right: -$sidebarWidth;
    padding-top: 46px;
    z-index: 1011;
    -moz-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    -webkit-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;

    .sidebar-opened & {
        right: 0;
    }
}

.control-sidebar-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    width: $sidebarWidth;
    right: -$sidebarWidth;
    background-color: #222d32;
    z-index: 1010;
    -moz-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    -webkit-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;

    .sidebar-opened & {
        right: 0;
    }
}

.sidenav {
    /*height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #222d32;
    overflow-x: hidden;
    transition: 0.3s;
    padding-top: 50px;
    -ms-overflow-style: -ms-autohiding-scrollbar;*/ // For Edge
}
/*@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}*/
.control-sidebar-heading {
    font-weight: 400;
    font-size: 16px;
    padding: 10px 15px;
    /*margin-bottom: 10px;
    margin-left: 15px;*/
}

.control-sidebar-subheading {
    display: block;
    font-weight: 400;
    font-size: 0.85em;
    line-height: 1.1em;
}

.control-sidebar-menu {
    list-style: none;
    padding: 0;
    /*margin: 0 -15px;*/
    > li {
        > a {
            display: block;
            padding: 10px 15px;
            /*margin-left: 15px;*/
            &:before {
                content: " ";
                display: table;
            }

            &:after {
                content: " ";
                display: table;
                clear: both;
            }

            > .control-sidebar-subheading {
                margin-top: 0;
            }

            .control-sidebar-dark &:hover {
                background: #1e282c;
            }

            .control-sidebar-dark & .menu-info > p {
                color: #b8c7ce;
            }
        }
    }

    .menu-icon {
        float: left;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        text-align: center;
        line-height: 35px;
    }

    .menu-info {
        margin-left: 45px;
        margin-top: 3px;

        > .control-sidebar-subheading {
            margin: 0;
        }

        > p {
            margin: 0;
            font-size: 11px;
        }
    }

    .progress {
        margin: 0;
    }
}

.control-sidebar-dark {
    color: #b8c7ce;

    & + .control-sidebar-bg {
        background: #222d32;
    }

    .nav-tabs.control-sidebar-tabs {
        border-bottom: #1c2529;

        > li > a {
            background: #181f23;
            color: #b8c7ce;

            &:active {
                background: #1c2529;
            }

            &:hover {
                color: #fff;
            }

            &:hover, &:focus {
                background: #1c2529;
                border-left-color: #141a1d;
                border-bottom-color: #141a1d;
            }
        }
    }

    .control-sidebar-heading,
    .control-sidebar-subheading {
        color: #fff;
    }
}
/* Side bar END */
/*File upload progress bar*/
.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #ABBFD6;
    background: #ABBFD6;
    font-size: smaller;
    line-height: 1.2em;
}

.progress div {
    background: #00c0ef;
    width: 0;
}
/*File upload progress bar End*/
/*@mixin border-radius($radius: 4px) {
	-webkit-border-radius: $radius !important;
	-moz-border-radius: $radius !important;
	border-radius: $radius !important;
}*/
.form-control-border-radius {
    -webkit-border-radius: 4px !important;
    -moz-border-radius: 4px !important;
    border-radius: 4px !important;
}
/* Filters */
.transformFilter {
    transform: rotate(180deg);
    transition: transform .2s ease;
}

.toogleFilter {
    transition: transform .2s opacity 1s ease;
}

.filterFontSize {
    font-size: 20px;
    color: #3c8dbc;
}
/* UI Select */
.close .ui-select-match-close {
    padding-top: 3px;
}

.ui-select-multiple .ui-select-match-item {
    color: #333 !important;
    background-color: #f5f5f5;
    border-color: #ccc !important;
}

.ui-select-multiple .ui-select-match-item:hover {
    color: #333 !important;
    background-color: #c4c4c4;
    border-color: #9c9c9c !important;
}
/* Admin sidebar - Sidebar-menu */
.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.sidebar-menu > li > a {
    padding: 12px 5px 12px 15px;
    display: block;
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
    width: 20px;
}

.sidebar-menu > li .label,
.sidebar-menu > li .badge {
    margin-top: 3px;
    margin-right: 5px;
}

.sidebar-menu li.header {
    padding: 10px 25px 10px 15px;
    font-size: 12px;
}

.sidebar-menu li > a > .fa-angle-left {
    width: auto;
    height: auto;
    padding: 0;
    margin-right: 10px;
    margin-top: 3px;
}

.sidebar-menu li.active > a > .fa-angle-left {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.sidebar-menu li.active > .treeview-menu {
    display: block;
}

.sidebar-menu .treeview-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 5px;
}

.sidebar-menu .treeview-menu .treeview-menu {
    padding-left: 20px;
}

.sidebar-menu .treeview-menu > li {
    margin: 0;
}

.sidebar-menu .treeview-menu > li > a {
    padding: 5px 5px 5px 15px;
    display: block;
    font-size: 12px;
}

.sidebar-menu .treeview-menu > li > a > .fa,
.sidebar-menu .treeview-menu > li > a > .glyphicon,
.sidebar-menu .treeview-menu > li > a > .ion {
    width: 20px;
}

.sidebar-menu .treeview-menu > li > a > .fa-angle-left,
.sidebar-menu .treeview-menu > li > a > .fa-angle-down {
    width: auto;
}

.sidebar-menu, .main-sidebar .user-panel, .sidebar-menu > li.header {
    /*white-space: nowrap;*/ /* must wrap for long navigation*/
    overflow: hidden;
}
/* Admin sidebar - sidebar-menu END */
/* Admin Setting - Left Navi */
.sidebar-menu li > a {
    color: #909295;
    font-weight: 600;
}

.sidebar-menu li > a:hover {
    color: #6a6c6f;
}

.sidebar-menu > li.active {
    border-left: #1ABB9C solid 5px;
}

.sidebar-menu > li {
    position: relative;
    margin: 0;
    padding: 0;
}

.sidebar-menu li.active > a {
    color: #6a6c6f;
    font-weight: 700;
}

.sidebar-menu li.active > a > .pull-right-container > .fa.fa-angle-left {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #1ABB9C;
}

.sidebar-menu li > a > .pull-right-container > .fa.fa-angle-left {
    -webkit-transition: transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
}

.treeview-menu > li.active {
    border-left: #009688 solid 5px;
    margin-left: -10px;
}

.treeview-menu > li.active > a {
    padding-left: 20px;
}
/* Admin Setting - Left Navi END*/
.dash-box-title {
    color: #777;
    display: block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    text-transform: uppercase;
}
/* Alignment for datatable content */
.table > tbody > tr > td {
    word-wrap: break-word; //ie
    overflow-wrap: break-word;
    max-width: 200px;
}

.dttablestyle {
    padding: 15px 20px 15px 10px;
}
/*  Alignment for datatable content */
table.table thead .sorting, table.table thead .sorting_asc, table.table thead .sorting_desc {
    cursor: pointer;
}

table.table thead .sorting_asc:after {
    font-family: FontAwesome;
    content: "\f0d8";
    font-size: small;
    margin: 3px;
    vertical-align: top;
}

table.table thead .sorting_desc:after {
    font-family: FontAwesome;
    content: "\f0d7";
    font-size: small;
    margin: 3px;
    vertical-align: bottom;
}

table.table thead .sorting:after {
    font-family: FontAwesome;
    content: "\f0dc";
    font-size: small;
    margin: 3px;
    color: lightgrey;
}
/* Chosen-dropdown */
.chosen-container {
    font-size: 14px;
    background-color: white;
    width: 100% !important;

    .chosen-drop {
        z-index: 100;
        color: #555;
        border-color: #5897fb;
    }
}

.chosen-container-single {
    .chosen-single {
        box-shadow: none;
        color: #555;
        line-height: 34px;
        height: 34px;
        border-color: #ccc;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

        span {
            margin-right: 0;
            background-color: white;
            margin-left: -8px;
            padding-left: 11px;
        }

        div b {
            background: url(chosen-sprite.png) no-repeat 0 6px;
        }
    }

    .chosen-search {
        z-index: 1000;
    }
}

.chosen-container-single-nosearch .chosen-results {
    border-top: 1px solid #aaa;
    margin: 0 4px 4px 2px;
    padding-top: 4px;
}

.chosen-container .chosen-results li.highlighted {
    background-color: #42A5F5;
    background-image: none;
    color: #fff;
}

.chosen-container-active.chosen-with-drop .chosen-single {
    border-bottom: 0;

    div b {
        background-position: -18px 7px;
    }
}

.chosen-container-active {
    border: 1px solid #aaa;
    border-radius: 5px;
    border-color: #5897fb;
    box-shadow: 0 4px 5px rgba(0,0,0,.15);
}

.chosen-disabled {
    opacity: 1 !important;
    cursor: not-allowed;

    .chosen-single {
        cursor: not-allowed;

        span {
            background-color: #eee !important;
        }
    }

    .chosen-choices .search-choice .search-choice-close {
        cursor: not-allowed;
    }
}
/* Chosen-dropdown END */
.md-button.md-icon-button.inline-tooltip {
    margin: 0 0px;
    height: auto;
    line-height: normal;
    padding: 0;
    width: auto;
    min-height: unset;
    line-height: normal;
    vertical-align: unset;
    padding: 0;
}
/*Kategori Dokumen Dropdown*/
.drop-down-overflow > md-dialog {
    overflow-x: visible !important;
    overflow: visible !important;
}
/*Disable link*/
.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;

    > {
        a, i {
            color: currentColor;
            display: inline-block;
            /* For IE11/ MS Edge bug */
            pointer-events: none;
            text-decoration: none;
        }
    }
}
/*Disabled Link END*/
.attachmentItem {
    background-color: #f5f5f5;
    border-color: #ccc !important;
    padding: 2px;
    margin: 5px 5px 0 0;
}
/*CKEeditor plugins */
.cke_combo_text, .cke_combopanel {
    width: auto !important;
}
/*CKEeditor plugins END*/
/*wrap word for Sekatan Perjalanan and pemilikan syarikat*/
.skt-wordwrap {
    white-space: nowrap;
}
/*wrap word for Sekatan Perjalanan and pemilikan syarikat*/
/* Tooltip for Outbound Listing - REMS Batch tab - RETURN indicator */
.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1 !important;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 70px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -30px;
    opacity: 1;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}

.boxPaddingRight {
    padding-right: 12px;
}

.hierarchy-seksyen:before {
    content: "Seksyen";
}

@import 'crm';
@import '_datatable-custom.scss';


.paging_full_numbers {
    width: 600px !important;
}
/*.crosstable {
    overflow: hidden;

    & tr:hover {
        background-color: #ffa;
    }

    & td, th {
        position: relative;
    }

    & td:hover::before,
    th:hover::before {
        content: "";
        position: absolute;
        background-color: #ffa;
        left: 0;
        top: -5000px;
        height: 10000px;
        width: 100%;
        z-index: -1;
    }
}*/

/*.fixTopRow .fixed-elem {
    background-color: #FECC0A !important;
    z-index: 10;
    position: fixed;
    top: 0;
    width: 100%;
}*/
.subHeader {
    background-color: #00c0ef !important;
    color: rgba(255,255,255,0.8);
}

.crosstable {
    /*position: sticky;*/
    /*top: 0;
    z-index: 10;*/
    /*& thead .fixTopRow .fixed-elem {
        background-color: #FECC0A !important;
        z-index: 1001;
        position: fixed;
        //top: 0;
        width: 100%;
    }*/
    .fixed.freeze {
        z-index: 10;
        position: relative;
        background-color: white;
    }

    .fixed.freeze_vertical {
        z-index: 5;
        position: relative;
        background-color: white;
    }

    .fixed.freeze_horizontal {
        z-index: 1;
        position: relative;
        background-color: white;
    }

    .subHeader {
        background-color: #00c0ef !important;
        color: rgba(255,255,255,0.8);
    }

    & > tbody > tr > td {
        word-break: keep-all;
        white-space: nowrap;
        /*word-wrap: break-word; //ie
        overflow-wrap: break-word;
        max-width: 250px;*/
    }

     & > tbody > tr > td:first-child {
        width:  250px!important;
        /*white-space: normal !important;*/
        word-break: keep-all;
        white-space: nowrap;
        max-width:300px;
        /*word-wrap: break-word; //ie
        overflow-wrap: break-word;
        max-width: 250px;*/
    }

    & tbody {
        /*tr.subHeader {
            background-color: #00c0ef !important;
            color: rgba(255,255,255,0.8);
        }*/
        tr:not(.subHeader) {
            &:hover {
                background-color: #f39c12;
            }
        }
        /*td.fixedColumn {
            position: absolute;
            width: 5em;
        }*/
        td.fixedCol {
            position: absolute;
            width: 5em;
            left: 0;
            top: auto;
        }

        td {
            position: relative;
            /*&:hover {
                &:before {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: -9999px;
                    bottom: -9999px;
                    background-color: #ddd;
                    z-index: 10;
                }
            }*/
            /*&:hover {
                &:after {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: -9999px;
                    bottom: -9999px;
                    background-color: #f39c12;
                    z-index: -10;
                }
            }*/
        }
    }
}

.timeline-container {
    background-color: #eee;
    margin-bottom: 0px !important;
    max-height: 1000px;
    overflow-x: hidden;
    overflow-y: auto;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(116, 116, 116, 0.50);
    z-index: 1000;
}

.loading-spinner {
    position: fixed;
    top: 50%;
    left: calc(50% + 60px);
    margin-top: -100px;
    margin-left: -150px;
    /*background-color: #f1c40f;*/
    border-radius: 5px;
    text-align: center;
    z-index: 1001; /* 1px higher than the overlay layer */
}


@keyframes lds-gear {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes lds-gear {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.lds-gear > div {
    -webkit-transform-origin: 100px 100px;
    transform-origin: 100px 100px;
    -webkit-animation: lds-gear 4s infinite linear;
    animation: lds-gear 4s infinite linear;
    position: relative;
}

.lds-gear > div div {
    position: absolute;
    width: 26px;
    height: 192px;
    background: #b5ccf1;
    left: 100px;
    top: 100px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.lds-gear > div div:nth-child(1) {
    width: 152px;
    height: 152px;
    border-radius: 50%;
}

.lds-gear > div div:nth-child(3) {
    -webkit-transform: translate(-50%, -50%) rotate(30deg);
    transform: translate(-50%, -50%) rotate(30deg);
}

.lds-gear > div div:nth-child(4) {
    -webkit-transform: translate(-50%, -50%) rotate(60deg);
    transform: translate(-50%, -50%) rotate(60deg);
}

.lds-gear > div div:nth-child(5) {
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
}

.lds-gear > div div:nth-child(6) {
    -webkit-transform: translate(-50%, -50%) rotate(120deg);
    transform: translate(-50%, -50%) rotate(120deg);
}

.lds-gear > div div:nth-child(7) {
    -webkit-transform: translate(-50%, -50%) rotate(150deg);
    transform: translate(-50%, -50%) rotate(150deg);
}

.lds-gear > div div:nth-child(8) {
    width: 80px;
    height: 80px;
    background: rgba(198, 196, 196, 0.70);
    border-radius: 50%;
}

.lds-gear {
    width: 200px !important;
    height: 200px !important;
    -webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

// Datepicker
.removeDate {
    color: #d47777 !important;
    border-left-width: 0px !important;
    border-left-color: none !important;
}

.dateInput {
    border-right-width: 0px !important;
}

.right-addon {
    border-left-width: 0px !important;
    border-left-color: none !important;
}

.hackyhack {
    position: relative;
}

.hackyhack .dropdown-menu {
    left: auto !important;
    right: 0px;
}

.fc-today {
    background: #FCD7D0 !important;
}

@mixin invalid-form-control {
    border-color: #f88 !important;
    outline: 0 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(244, 188, 217, 0.6) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(211, 119, 162, 0.6) !important;
}

/*Show when form is submitted for input invalid*/
.is-submitted .ng-invalid {
    &, & ~ .chosen-container > .chosen-single {
        @include invalid-form-control;
    }
}

/*Show when custom input error e.g pattern*/
.ng-invalid-is-searched, .ng-invalid-pattern {
    @include invalid-form-control;
}

/*Profile resize*/
.tab-content .tab-pane {
    margin-top: 5px !important;
}

.content {
    padding-top: 0px !important;
}

.box-header {
    padding-bottom: 0px !important;
}

.form-horizontal .table > tbody > tr > td, .table > tbody > tr > th,
.table > tfoot > tr > td, .table > tfoot > tr > th
/*, 
    .table > thead > tr > td, .table > thead > tr > th*/ {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.form-horizontal .table > thead > tr > td, .table > thead > tr > th {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.table {
    margin-bottom: 0px !important;
}

.qrCode-generated {
    margin-bottom: 80px !important;
}

.table .form-group {
    margin-bottom: 0px !important;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

.dataTables_paginate {
    margin-top: 15px;
}

form .box-body {
    padding-top: 0px;
}

.input-group {
    margin-bottom: 0px !important;
}


.tab-banner .nav > li > a {
    padding: 12px 15px;
}

@media only screen and (min-width: 768px) {
    footer a.back-to-top {
        right: 40px;
    }
}

footer a.back-to-top {
    background-color: #000;
    width: 40px;
    height: 35px;
    position: fixed;
    bottom: 0px;
    right: 10px;
    display: block;
    line-height: 2;
    text-align: center;
    transition: 0.3s ease-in-out;
    z-index: 999;

    & .fa {
        color: #fff;
        font-size: 45px;
        position: relative;
        transition: 0.2s ease-in-out;
        bottom: 0;
    }

    &.show-ScrollTop {
        display: block !important;
        transition: 0.8s 10s ease-in-out;
    }

    &.hide-ScrollTop {
        display: none !important;
        transition: 0.8s 10s ease-in-out;
    }
}

.chartContainer {
    height: 500px;
    width: 100%;
}

#userrequestProfile
{
    background-color:antiquewhite;
}

.userprofilebox{
    position: relative;
    background: #ffffff;
    border-top: 3px solid rgba(57,73,171,1);
    margin-bottom: 10px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(57,73,171,1);
}
