/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

/* Creative eWorld CSS Version 2.5 (Updated on 3 March 18)*/
@font-face {
    font-family: 'cew-iconset-v2';
    src: url('/lib/fonts/cew-iconset-v2.eot?47946472');
    src: url('/lib/fonts/cew-iconset-v2.eot?47946472#iefix') format('embedded-opentype'), url('/lib/fonts/cew-iconset-v2.woff?47946472') format('woff'), url('/lib/fonts/cew-iconset-v2.ttf?47946472') format('truetype'), url('/lib/fonts/cew-iconset-v2.svg?47946472#cew-iconset-v2') format('svg');
    font-weight: normal;
    font-style: normal;
}

.font-icon {
    font-family: "cew-iconset-v2";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input[type="checkbox"][disabled]:checked {
    filter: invert() brightness(180%);

}


input[type="radio"].readonly {
  pointer-events: none;
}

/*General*/
html {
    position: relative;
    /*    min-height: 100%;*/
}

body {

    font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
    color: black;
    font-size: 0.8rem;

}

body.modal-open {
    /* prevent body scrolling when modal open*/
    height: 100vh;
    overflow-y: hidden;
}


.footer {
    /* position: absolute;*/
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    /* Set the fixed height of the footer here */
    height: 50px;
    line-height: 50px; /* Vertically center the text there */
    border: none;
}

hr {
    height: 1px;
}

a{
    color:darkblue;
}

.inputBGColurYellow {
    background-color: #fffed8;
}

.AlertLabel {
    padding: 2px;
    background-color: #a83305 !important;
    color: white !important;
    font-weight: normal !important;
    font-size: 12px !important;
}

.vl {
    border-left: 3px solid green;
    height: 60px;
}

.link-icon li:before {
    content: "\e822";
    font-family: 'cew-iconset-v2';
    display: inline-block;
    font-size: 1.3em;
    color: grey;
    margin-left: -25px;
    padding-right: 5px;
}

.dropdown-menu {
    background-color: #dff1f3 !important;
}

.no-border {
    border: 0 !important;
    box-shadow: none; 
}

.vertical-center {
    min-height: 100%; /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */

    display: flex;
    align-items: center;
}

.resourceLink  {
    color: grey !important;
    font-size: 1.3em;
}

.resourceLink.pageTitle {
   font-size: 31px !important;
   color:#c26b05 !important;
}

.resourceCateTitle {
    color: #f45f06;
    font-size: 2em;
    font-family: 'Montserrat';
    font-weight: bold;
    line-height: 1.38em;
    margin-bottom: 0.3em;
}

.popover {
   background-color:floralwhite;
   border-color: darkslategray;
}

.popover.right .arrow:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    height: 14.14px;
    width: 14.14px;
    bottom: -8px;
    left: 4px;
    background: transparent;
    transform: rotate(45deg);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.dropdown-item:hover, .dropdown-item:focus {
    color: black;
    text-decoration: none;
    background-color: #ADCAD6;
}

.dyn-height-350 {
    width: 100%;
    max-height: 350px;
    overflow-y: auto;
}

.dyn-height-300 {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
}

/******overrider button color***/

.btn-danger {
    background-color: maroon;
    border-color: transparent;
    color: white;
}

.btn-success {
    border-color: transparent;
    background-color: darkgreen;
}

.btn-secondary {
    background-color: forestgreen;
    border-color: transparent;
}

    .btn-secondary:hover {
        background-color: darkslategrey;
        border-color: transparent;
    }

.btn-warning {
    background-color: darkgoldenrod;
    border-color: transparent;
}

.btn-transparent {
    background-color: transparent;
    border: none;
}

.headerRow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    /* flex-wrap: wrap; */
    /* remove the left right margin*/
    margin-right: 0;
    margin-left: 0;
}

.pageTitle {
    font-weight: bold;
    font-size: 20px;
    color: #c26b05;
}

.subTitle {
    font-weight: bold;
    font-size: 16px;
    color: #c26b05;
    border-bottom: 1px solid gray;
    width :100%;
    margin-top: 15px;
}

.cursorPointer {
    cursor: pointer;
}

.min-site-width {
    min-width: 1240px;
}

.noWrapDivRow {
    flex-flow: nowrap;
}

.logoUploadPlaceHolder {
    
    max-width: 200px;
    max-height: 200px;

}

span.text-danger.field-validation-error {
    word-wrap: break-word;
    font-size:small;
}

.card-header{
    padding: 0px;
}


.no-after:after {
    content: none !important;
}

.no-before:before {
    content: none !important;
}


.dsp-action-menu-backgroun-gray {
    background-color: lightgray;
    color: black !important;
    font-weight: 600;
}

.dsp-action-menu-background {
    background-color: #454748;
    /*color: white !important;*/
}

    .dsp-action-menu-background .dropdown-item {
        /*color: white !important;*/
    }

        .dsp-action-menu-background .dropdown-item.dropdown-item-alert {
            color: red !important;
            font-weight: 600
        }


.dsp-service-task-item {
    background-color: #dff2e2 !important;
}

    .dsp-service-task-item.active {
        background-color: #0c5a7c !important;
        color: white !important
    }
/**************************Collapse Menu***************************/

.collapseNavi-group {
    margin: 10px 0 10px 0;
    border: 1px solid #888;
    border-radius: 4px;
}

.collapseNavi-heading{

    background-color: black;
    padding: 5px 5px 5px 10px;
    color: white;
    font-weight: bold;

}

.collapseNavi-subTitle {
    background-color: gray;
    padding: 5px 5px 5px 10px;
    color: white;
    font-weight: bold;
}

.collapseNavi-heading button {
    border: none;
    background-color: transparent;
    color: white;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    height: 100%;
    padding: 0.2rem;
}

.collapseNavi-title:active {
    color: white;
}

.collapseNavi-collapse button {
    border: none;
    background-color: transparent;
    font-weight: bold;
    width: 100%;
    height: 100%;
    padding: 0.75rem 1.25rem;
}

.collapseNavi-collapse .list-group-item a {
    display: inline-block;
    background-color: transparent;
    font-weight: bold;
    padding: 0.75rem;
    color: black;
    width:100%;
    text-decoration: none;
    text-align: center;
}
    .collapseNavi-collapse button:focus {
        outline: none;
    }

    .collapseNavi-collapse button:active {
        outline: none;
    }

.collapseNavi-collapse .list-group-item {
    padding:0;
}

.collapseNavi-collapse .list-group-item:hover {
    cursor: pointer;
    background-color: lightgray;
}

/**************************Mega Menu***************************/
/* Navbar container */
.navbar {
    overflow: hidden;
    padding: 0 1rem;
    font-size: .9rem;
    background-color: #3c5996;
    font-weight: bold;
    width: 100%;
    justify-content: flex-start;
    position: unset;
    height: 45px;
}

/* Links inside the navbar */
.navbar a {
    float: left;
    color: white;
    text-align: center;
    padding: 12px 11px;
    text-decoration: none;
}

    .activeNaviItem {
        background-color: #F18F01;
    }

.verticalAlignedSubNavi {
    display: flex;
    align-items: center;
}

    .verticalAlignedSubNavi li {

        margin-right: 15px;
        margin-bottom: 15px;
    }

/* The dropdown container */
.navbar .dropdown {
    float: left;
    overflow: hidden;
    position: unset;
    z-index: 1001;
}

    /* Dropdown button */
    .dropdown .dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 12px 16px;
        background-color: inherit;
        font: inherit; /* Important for vertical align on mobile phones */
        margin: 0; /* Important for vertical align on mobile phones */
    }

    /* Add a red background color to navbar links on hover */
    .navbar a:hover, .dropdown:hover .dropbtn {
        background-color: #7892c2;
    }

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    /*background-color: #e2e4f5;*/
    background-color: #c5d8fc;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
    z-index: 1;
    padding: 20px;
}

/* Dropdown content (hidden by default), single column layout */
.dropdown-contentSingleCol {
    display: none;
    position: absolute;
    /*background-color: #e2e4f5;*/
    background-color: #c5d8fc;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.7);
    z-index: 1;
    white-space: nowrap;
    width: min-content;

}

/* Mega Menu header, if needed */
.dropdown-content .header {
    background: #ADCAD6;
    padding: 16px;
    color: white;
}

/* Show the dropdown menu on hover */
/*.dropdown:hover .dropdown-content {
    display: block;
}*/

.dropdownShowContent {
    display: block;
}

.dropdownhideContent {
    display: none;
}

.columnSingle {
    float: left;
    width: 100%;
    color: black;
    min-width: 200px;
    /*background-color: #e2e4f5;*/
}
/* Style links inside the columns */
    .columnSingle a {
        float: none;
        color: black;
        padding: 10px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    /* Add a background color on hover */
        .columnSingle a:hover {
            background-color: #ddd;
            
        }

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
    /*background-color: #e2e4f5;*/
    height: 350px;
}

    /* Style links inside the columns */
    .column a {
        float: none;
        color: black;
        padding: 14px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    /* Add a background color on hover */
    .column a:hover {
        background-color: #ddd;
    }

    .column h4 {
        font-size:16px;
        color:maroon;
        font-weight:bold;
    }

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
} 



/**************************End Mega Menu*****************************/

/**************************Grdi Style Table*****************************/

.TableGridStyle {
    padding: 5px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    width: 100%;
}

    .TableGridStyle thead td {
        padding: 8px;
        vertical-align: middle;
        text-align: center;
        background-color: #506ea5;
        color: white;
    }

.TableGridStyle td {
    padding: 5px;
    vertical-align: middle;
}

.TableGridStyle .table-borderless td {
    border: none !important;
}

.table .table-borderless {
    border: none !important;
}

.table .table-borderless td {
    border:unset;
    border: none !important;
}

.table-borderless {
    border: none !important;
}

.table-borderless td {
        border: unset;
        border: none !important;
    }

.table-outline{
    outline-color: darkslategrey;
    outline-style:solid;
    outline-width: 1px;
    border-radius: 2px;
    
}

.table-outline td {
    padding: 5px !important;
}

/**************************End Grdi Style Table*****************************/
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.max-width-section {
    max-width: 750px;
}

.fixed-width-form {
    width: 1245px !important;
}

.jumbotron.fixed-width-form {
    width: 1280px !important;
}

.max-width-form {
    max-width: 1245px;
}

.table .table {
     background-color: transparent; 
}

.tableWhiteBG {
    background-color: white;
}


.datepicker {
 /*   min-width: 90px;*/
}
/*remove number spin */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/*User in transaction billing label*/
.panel{
    background-color:lightgrey;
    border-radius: 4px;
    min-height:80px;
    padding:5px;
    border: 1px solid #bbb;
}

.btn-link{
    color:darkblue;
}

.btn-disabled{
    color: gray;
}

.fakeInputBox {
    padding: 0.3rem;
    display: block;
    height: 100%;
    min-height: 20px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background-color: white;
}

.fakeInputBoxNoBorder {
/*use to hide the box above when in view mode*/
    border: none !important;
    background-color:transparent !important;
}

.ddlDivBackgroud {
    background-color: #8fe1fb;
    width: 100%;
    border-radius: 3px;
    padding: 5px;
}

.progress {
    height: 5px;
}

.progress .progress-bar {
    height: 5px;
    background-color: dodgerblue;
}


.jumbotron {
    padding: 0.9rem;
    background-color: #fbfbfb;
    border: 1px solid #6f6f6f;
    border-radius: 3px;
}

.noteHeader {
    color: white;
}

.form-group {
    margin-bottom: 0.4rem !important;
}

.col-form-label {

    padding-bottom: 0;
    margin-bottom: 0;

}

label {
    margin-bottom: 0;
}

.card-greybg {
    background: #efefef;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 0px solid #000000;
}

.table th, .table td {
    padding: 0.2rem;
/*    vertical-align: top;*/
    border-top: 0px;
}

.tablePadded th, .tablePadded td {
    
    padding: 0.40rem;

}

@media (max-width: 1024px) {
    .card-deck {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

.badge-custom {
    border-radius: 3px;
    padding: 1rem;
    margin-top: 1rem;
    color: black;
    background-color: #dddff7;
}

.fixedTopBar {
    /*border-radius: 5px;*/
    position: sticky;
    top: 0px;
   /* padding: 0 5px 0 5px;*/
    background-color: #fff;
    z-index: 1000;
    left: 0;
    border-bottom: 5px solid #3c5996;
    /*margin: 0px -0.65rem;*/
    width: 100%;
}

.fixedTopBar h4, .h4 {
    font-size: 18px;
    font-weight: bold;
    color: #b71540;
}


.dummyScrollWrapper {
    overflow-x: scroll;
    margin-right: 17px;
    margin-left: 2px;
    position: sticky;
/*    top: 60px;*/
    z-index: 1000;
    height:19px;
}

.dummyScrollWrapper > div {
    height:20px;
}

.trans-status-fixed-top {
    position: sticky;
    top: 150px;
}

.trans-status-jumbotron {
    padding: 1.5rem;
    background-color: #ddeeff;
    border-radius: 8px;
}


.grid-header-title td {
    color: white;
    font-weight: bold;
    text-align: center;
}

.grid-header-title td label {
    color: white;
    font-weight: bold;
    text-align: center;
}

/* Accordion styles
-------------------------------------------------- */

.accordion {
    background-color: #0099CC;
    border-radius: 5px;
}

.accordion .card {
    background-color: transparent;
    border: none;
}

.accordion button.btn.btn-link {
    color: white;
}

.accordion .collapse {
    background-color: #e2e4f5;
}

.accordion .k-i-arrow-60-down {
    font-size: 2rem;
    color: red;
}

.accordion .k-grid .k-i-arrow-60-down {
    font-size: 1.1rem;
    color: unset;
}

/* Sticky DSP indicator styles---*/

/*  sticky for DSP detail page taking into consideration for dsp steps navibar hight*/
@media only screen and (min-height: 640px) {
    .stickeyDSPElement {
        position: sticky;
        top: 100px;
        z-index: 500;
    }
}

/* Sticky doc indicator styles
-------------------------------------------------- */

/* no sticky for doc indicator if brower hight is too small*/
.fixTransDocIndicator {
    color: black;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #dfe7f7;
}

/*  sticky for doc indicator if brower hight meet miniumn hight*/
@media only screen and (min-height: 640px) {
    .fixTransDocIndicator {
        position: sticky;
        top: 150px;
        z-index: 500;
    }
}

/* top extended if the navi bar expened due to smaller screen size*/
@media only screen and (max-width: 1024px) {
    .fixTransDocIndicator {
        position: sticky;
        top: 190px;
        z-index: 500;
    }
}

    .fixTransDocIndicator .form-row > div {
        text-align: center;
        color:black;
    }

    .fixTransDocIndicator .form-row > div > span {
        font-size: 2rem;
    }

    .fixTransDocIndicator .form-row > div > div > span {
        font-size: 1.5rem;
        height: 80px;
    }

        .fixTransDocIndicator .form-row > div > a {
            color: black;
        }

.transDocIndicator .form-row > div {
    text-align: center;
    font-size: .7rem;
}

    .transDocIndicator .form-row > div > span {
        font-size: 2rem;
    }

.bottom-toolbar {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 10px;
    z-index: 1000;
    height: 55px;
    /*background-color: #082769;*/
    background-color: #18161f;
    margin-right: 0px; /*off set form-row margin-right: -5;*/
    text-align: right !important;
    margin-bottom: 0px !important;
    border-top: 1px solid #060098;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    /*font-size: 14px;*/
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* End Sticky footer styles
-------------------------------------------------- */


.blink_text {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* Header
-------------------------------------------------- */
@media (max-width: 575.98px) {
    .header_top_nav {
        color: #ffffff;
        margin-top: 13px;
    }
}

.header_nav a.nav-link {
    /*font-size: 0.75rem;
    line-height: 0.8rem;*/
    color: #ffffff;
    font-weight: bold !important;
}

.dvUserNameDisplay {
    font-family: "Montserrat",-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color: black;
    font-size: 1rem;
    font-weight: bolder;
}

@media (max-width: 575.98px) {
    .dvUserNameDisplay {
        color: #ffffff;
    }
}

.dvUserNameDisplay .k-icon.k-i-user {
    height: 1.2em;
}


.k-state-hover .ddlDivBackgroud {
    background-color: #888;
}

.loginbutton .k-icon {
    font-size: 0.75rem;
}

a.dropdown-item {
    color: #3d3d3d;
}

.logo {
    font-size: 1.25rem;
    line-height: inherit;
    display: inline-block;
    margin: 10px 0;
    width: 150px;
}

.fixBarLogo {
    margin: 10px -20px;
}

.logo img {
    width: 100%;
}

a.loginbutton, a.myaccount, .logoutbutton, .logoutbutton:hover {
    /*font-size: 0.75rem;*/
    color: #3d3d3d;
}



.logoutbutton {
    font-size: 0.75rem;
    padding: 0;
}

@media (max-width: 575.98px) {
    .logoutbutton, .logoutbutton:hover {
        color: #ffffff;
    }
}

.custom-toggler {
    border: 1px solid #ffffff;
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1.0)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.navbar-toggler-icon {
    width: 1em;
    height: 1em;
}

@media (max-width: 991.98px) {
    .dropdown-menu {
        background-color:lightgray;
        border-color: rgba(255,255,255,.15);
    }

    a.dropdown-item {
        color: #ffffff;
    }
}

.dropdown-menu-min-width{
    min-width: 320px;
}

.groupddl {
    width: 20%;
}

@media (max-width: 575.98px) {
    .groupddl {
        width: auto;
    }
}

.titlearea {
    border-bottom: 5px solid #3c5996;
}

.border-primary {
    border-color: #6a89cc !important;
}

.box {
    padding-top: 8%;
    width: 100%;
    margin: auto;
    max-width: 450px;
}


.btn {
    /*font-family: Helvetica, Arial, "Liberation Sans", sans-serif;
    color: #222;*/
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /*letter-spacing: 1px;*/
}

btn, .btn:hover {
    color:darkolivegreen;
}

.btn-primary {
    background-color: #009688;
    border-color: #009688;
}



/*Control*/
.form-control {
    font-size: 0.80rem;
    /*line-height: 1;*/
    /*height: calc(1.8rem + 2px);*/
    height: 1.75rem;
    min-width: 42px; /* depends how much minimum width you require */
    padding: 0rem 0.3rem 0rem 0.3rem;
    border-radius:0.2rem;
    border: 1px solid #8b8b8b;
    color:black;
    display:inherit;
}

    .form-control:disabled, .form-control[readonly]:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: #8b8b8b;
    }

/*.form-check {
    margin-bottom: 1rem;
}

.form-check-input {
    margin-top: 0;
}*/

tfoot {
    background-color: #dddddd;
}

textarea.form-control {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/****CheckBox*****/
.funkyradio div {
    clear: both;
    overflow: hidden;
    display: inline-block;
    width: 200px;
}

.funkyradio label {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #8b8b8b;
    font-weight: normal;
}

.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
    display: none;
}

    .funkyradio input[type="radio"]:empty ~ label,
    .funkyradio input[type="checkbox"]:empty ~ label {
        position: relative;
        line-height: 2em;
        /*text-indent: 3.25em;*/
        margin-top: 0.5rem;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        padding-left: 3.25em;
        margin-bottom: 0;
        background-color: #efefef;
    }

        .funkyradio input[type="radio"]:empty ~ label:before,
        .funkyradio input[type="checkbox"]:empty ~ label:before {
            position: absolute;
            display: block;
            top: 0;
            bottom: 0;
            left: 0;
            content: '';
            width: 2.5em;
            /*background: #D1D3D4;*/
            background: #D1D3D4;
            border-radius: 3px 0 0 3px;
        }

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
    color: #888;
}

    .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
    .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
        content: '\2714';
        text-indent: .9em;
        color: #C2C2C2;
    }

/*.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
    color: #777;
}*/

    .funkyradio input[type="radio"]:checked ~ label:before,
    .funkyradio input[type="checkbox"]:checked ~ label:before {
        content: '\2714';
        text-indent: .9em;
        color: #333;
        background-color: #ccc;
    }

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
    color: #333;
    background-color: #ccc;
}

.table-border-1 td, .table-border-1 th {
    border: 1px solid #808080;
}

.table-border-1 .k-grid-header {
    border: 1px solid #808080;
}

.table-border-black td {
    border: 1px solid #000000;
}

.table-md th,
.table-md td {
    padding: 0.5rem;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #808080 !important;
}

.removetdborder td {
    border: 0;
}

/*Back to Top*/
#backtotopbutton {
    display: inline-block;
    background-color: #4e4e4e;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

    #backtotopbutton::after {
        content: "\f077";
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        font-size: 2em;
        line-height: 50px;
        color: #fff;
    }

    #backtotopbutton:hover {
        cursor: pointer;
        background-color: #333;
    }

    #backtotopbutton:active {
        background-color: #555;
    }

    #backtotopbutton.show {
        opacity: 1;
        visibility: visible;
    }

/*Modal*/

.modal-fullscreen .modal-dialog {
    position: fixed;
    padding: 0;
    max-width: 90%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.modal-fullscreen .modal-content {
    width: 100%;
    height: 100%;
}

.modal-w95 {
    max-width: 95% !important;
}

.modal-w90 {
    max-width: 90% !important;
}

.modal-w80 {
    max-width: 80% !important;
}

.modal-w85 {
    max-width: 85% !important;
}

.modal-w70 {
    max-width: 70% !important;
}

.modal-w30 {
    max-width: 30% !important;

}
.modal-w40 {
    max-width: 40% !important;
}

.modal-w50 {
    max-width: 50% !important;
}

.modal-screenHight {
    min-height: calc(100vh - 220px);
    overflow-y: auto;
}

/*Extra Font Style*/
.font-Montserrat {
    font-family: 'Montserrat';
}


.font1 {
    font-size: 0.85rem;
    margin-bottom: .75rem;
    display: block;
}

.normalfontsize {
    font-size: 0.75rem;
}

.big {
    font-size: 0.9rem;
}

.big2, label.big2 {
    font-size: 1rem;
}

.big3 {
    font-size: 1.5rem;
}



/*Width*/
.w-5 {
    width: 5%;
}

.w-10 {
    width: 10%;
}

.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-90 {
    width: 90%;
}

.w-fix-input {
    width: 120px;
}



/***File Upload Area****/
.dropzone {
    border: #d2d2d2 4px dashed !important;
}

    .dropzone .dz-message {
        text-align: center;
        margin: 2em 0;
        text-transform: uppercase;
        font-weight: bold;
    }


#dvFileContainer {
    list-style-type: none;
    padding-left: 0;
}

    #dvFileContainer li {
        padding: 5px 10px;
        margin-bottom: 10px;
        border: 1px solid #96ac4d;
        border-left: 3px solid #96ac4d;
    }


/** CONTACT TAB **/
#box {
    width: 380px;
    right: -380px;
    top: 20%; /* change this value to place the menu higher or lower */
    position: fixed;
    z-index: 100;
    background: rgba(255,255,255,0.95);
    border: 1px solid #d0d0d0;
    line-height: 19px;
    padding: 20px;
    color: #303030;
    /*resize:both;
    overflow:auto;*/
}

    #box textarea {
        border-color: #e8e8e8;
    }

#tab {
    float: left;
    list-style: outside none none;
    position: absolute;
    z-index: 80;
    right: 100%;
    top: 38px;
    background-color: #ED4C67;
    padding: 10px;
    color: #ffffff;
}

    #tab li span {
        display: block;
        padding: 0;
        position: relative;
    }

    #tab li {
        cursor: pointer;
    }

.showTab, .hideTab {
    /* we specify the transition length for hiding and showing */
    transition: right .4s ease-in, box-shadow .4s ease-in;
    -webkit-transition: right .4s ease-in, box-shadow .4s ease-in;
}

.hideTab {
    margin-right: 0px;
}

.hide ul li:hover {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    /*-ms-transition: all 1s ease-in-out;*/
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#box.showTab {
    right: 0;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
}



/** TOGGLE TAB **/
@media (max-width: 450px) {
    #box {
        width: 80vw;
        right: -80vw;
    }
}


label {
    color: black;
}

/*Note*/
.dvnotepad { 
    /**!!! Do not change this class name, use for on boday click to close the note pad side panel also*/
    padding: 5px;
    border: 1px solid #dddddd;
    /*margin-bottom: 5px;*/
    position: relative;
}

.postedby, .postedby .k-icon {
    font-size: 0.6rem;
    color: #989898;
}

.note_content {
    line-height: 1rem;
    font-size : 0.8rem;
    color: #686868;
}

.note_editarea {
    padding: 10px 0;
}

.note_editarea {
    padding: 20px 0;
}

    .note_editarea .edit-buttons {
        float: right;
    }

.edit-buttons a {
    margin-right: 10px;
}


/*BG Color & font color & Border Color*/
h5 {
    color: #b71540;
    /*font-weight: 700;*/
}

h6 {
    font-weight: bold;
    /*padding-top: 20px;*/
    color: #c26b05;
}

.card h6 {
    color: #c26b05;
}

.innerH6 {
    color: white !important;
    background-color: #1a6bb0;
    width: 100%;
    border-radius: 3px;
    padding: 7px;
    padding-left: 10px;
    font-size: medium;
}

.h6Title {
    color: white !important;
    /*background-color: #5775b8;*/
    /*background-color: #19387d;*/
    background-color: #7390d1;
    width: 100%;
    border-radius: 3px;
    padding: 10px;
    padding-left: 10px;
}

    .h6Title label {
        color: white !important;
        font-weight: bold;
        font-size: 1rem;
    }

.lightBGTitlt {
    background-color: #eee;
    border-radius: 3px;
    padding: 5px;
    font-weight:bold;
}

.bgred, a.bgred:hover, .k-button.bgred {
    background-color: #ED4C67;
    color: #fff;
}

    a.bgred:hover, .k-button.bgred:hover {
        background-color: rgba(237, 76, 103,0.8);
    }

.bgblue, a.bgblue {
    background-color: #ADCAD6;
}


    a.bgblue:hover, .k-button.bgblue:hover {
        background-color: rgba(173, 202, 214, 0.8)
    }


.bgblue2 {
    background-color: #dff1fd;
}

.bgblack {
    background-color: #000000;
}

.bggrey {
    background-color: #888;
}

.bgwhite {
    background-color: white;
}

.bgdarkblue {
    background-color: #3c5996;
}

.bglightblue {
    background-color: #82d4f5;
}
.bglightgrey {
    background-color: #eff0fb;
}

.bggreen, a.bggreen {
    background-color: #56cc9d;
}

    a.bggreen:hover, .k-button.bggreen:hover {
        background-color: rgba(86, 204, 157,0.8);
    }

.bgnasupurple, a.bgnasupurple {
    background-color: #5f27cd;
}

    a.bgnasupurple:hover, .k-button.bgnasupurple:hover {
        background-color: rgba(95, 39, 205, 0.8)
    }


.bgprunusppink, a.bgprunusppink {
    background-color: #e84393;
}

    a.bgprunusppink:hover, .k-button.bgprunusppink:hover {
        background-color: rgba(232, 67, 147,0.8)
    }

    .bgtransparent{
        background-color:transparent;
    }
.black {
    color: #000000 !important;
}

.red, a.red {
    color: #ED4C67;
}

.green {
    color: #1bc25c;
}

.maroon {
    color: maroon !important;
}

.darkolivegreen {
    color: darkolivegreen;
}

.hoverblue:hover {
    color: white;
    background-color: darkblue;
}

.lightblue, a.lightblue {
    color: #41BBD9;
}

.indexLink, a.indexLink:hover {
    color: black;
}

.indexLink, a.indexLink {
    color: #1d3da7;
}


.white, a.white {
    color: #ffffff;
}

.borderred, a.borderred {
    border: 1px solid #ED4C67;
    padding: .25rem .5rem;
    border-radius: .3rem;
}

.bordergrey, a.bordergrey {
    border: 1px solid #888;
    padding: .25rem .5rem;
    border-radius: .3rem;
}

.borderlightgrey {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.borderwithboxshadow {
    -webkit-box-shadow: 0px 0px 10px 5px rgba(210,210,210,0.75);
    -moz-box-shadow: 0px 0px 10px 5px rgba(210,210,210,0.75);
    box-shadow: 0px 0px 10px 5px rgba(210,210,210,0.75);
}

.borderradius1 {
    border-radius: 0.6rem;
}
/*Calendar Icon*/
time {
    font-size: 1em;
    display: inline-block;
    position: relative;
    width: 7em;
    height: 7em;
    background-color: #fff;
    border-radius: 0.6em;
    box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
    overflow: hidden;
}

    time > * {
        display: block;
        width: 100%;
        font-size: 0.7em;
        font-weight: bold;
        font-style: normal;
        text-align: center;
    }

    time strong {
        position: absolute;
        top: 0;
        padding: 0.4em 0;
        color: #fff;
        background-color: #F18F01;
        border-bottom: 1px dashed #f37302;
        box-shadow: 0 2px 0 #F18F01;
        min-height: 37px;
        display: flex;
        align-items: center;
    }

    time > strong > span {
        display: block;
        width: 100%;
    }

    time em {
        position: absolute;
        bottom: 0.3em;
        color: #F18F01;
    }

    time > span {
        font-size: 2.5em;
        letter-spacing: -0.05em;
        padding-top: 1em;
        color: #222;
    }

    time span label {
        font-size: 0.5em;
        letter-spacing: -0.05em;
        padding-top: 1.8em;
        text-transform: uppercase;
        font-weight: bolder;
    }

/*Tel + Dialing Code*/
.tel {
    padding-left: 80px
}

.telcode {
    position: absolute;
    width: 70px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

/*Name Card*/
.font-Open-Sans {
    font-family: 'Open Sans', sans-serif;
}

.namecard {
    /* Styling */
    width: 100%;
    /*height: 400px;*/
    background: rgb(20,20,20);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.7rem;
}

    .namecard .back {
        background: #bdc3c7; /*#15CCC0;*/
        padding: 30px;
    }

    .namecard h6.name {
        color: #3B3B3B;
        margin-bottom: 0;
    }

    .namecard .info {
        color: #3b3b3b;
    }

    .namecard .property {
        color: #fff;
    }

.circlename {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fcb212;
    display: inline-block;
    margin-right: 10px;
}

    .circlename .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
    }

        .circlename .content:before {
            content: '';
            vertical-align: middle;
            display: inline-block;
            width: 0;
            height: 100%;
        }

        .circlename .content span {
            vertical-align: middle;
            display: inline-block;
            color: #ffffff;
        }

/*Status*/
.status {
    /*height: 5rem;
    width: 5rem;*/
    height: 3.2rem;
    width: 3.2rem;
    margin-left: 3px;
    text-align: center;
    color: #ffffff;
    position: relative;
    border-radius: 4px;
}

.statusbutton {
    color: white;
    width: 100%;
    height: 100%;
    background: transparent;
    border: transparent;
    cursor: pointer;
}

.status div {
    font-size: 0.85rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 5px;
}

.status span {
    font-size: 0.65rem;
    font-weight: bold;
    bottom: 3px;
    position: absolute;
    left: 0;
    right: 0;
    line-height: 0.65rem;
}

/*Job Detail Satus / use also for transaction status*/
.jobstatus {
    display: inline-block;
    padding: 6px;
    color: #fff;
    font-weight: bolder;
    border-radius: 5px;
    text-align: center;
    font-size: 1rem;
    box-sizing: border-box;
}

    .jobstatus.small {
        font-size: 0.7rem;
        padding: 5px;
    }

    .jobstatus.open {

        background-color: #e56532;
    }

    .jobstatus.jobclose {

        background-color: #56cc9d;
    }

    .jobstatus.jobonhold {
        background-color: #f7cd40;
    }

    .jobstatus.grey {
        background-color: #888;
    }

    .jobstatus.draft {
        background-color: #aaa;
    }

    .jobstatus.cancel {
        background-color: #e55039;
    }

    .jobstatus.aborted {
        background-color: #393A3C;
    }

    .jobstatus.pending {
        background-color: #5f27cd;
    }

    .jobstatus.jobrejected {
        background-color: #e56532;
    }

    .jobstatus.approved {
        background-color: #1bc25c;
    }

    .jobstatus.jobduplicate {
        background-color: #d45959;
    }

    .jobstatus.jobterminated {
        background-color: #d1b82c;
    }

    .jobstatus.jobactive {
        background-color: #1c8c12;
    }

    .jobstatus.maroon {
        background-color: maroon;
        color:white !important;
    }
    .jobstatus.noBilling {
        background-color: #247945;
        color: white !important;
    }
    .jobstatus.jobInvoiced {
        background-color: #1bc25c;
    }
    .jobstatus.jobPendingPayment {
        background-color: #ff7851;
    }
    

/**Snacker Bar*/
#snackbar {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: lightgreen;
    color: darkslateblue;
    text-align: center;
    padding: 17px;
    position: fixed;
    z-index: 1000;
    left: 30%;
    top: 5px;
    font-size: 12px;
    border-radius: 10px;
}

    #snackbar.show {
        visibility: visible;
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

/*Overwrite bootstrap*/

.stronglabel label, label.stronglabel {
    color: black;
    font-weight:600;
    font-size: 0.75rem;
/*    font-weight: bold;*/
}


.bg-light {
    background-color: #efefef !important;
}

.bg-darkGrey {
    background-color: #c0c5cf !important;
}

/*Multi Tab*/
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
    border-bottom: none;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    border-color: #718093 #718093 #fff;
}

    .nav-tabs .nav-link.active:hover, .nav-tabs .nav-item.show .nav-link:hover {
        border-bottom: 1px solid #ffffff;
    }

.tab-content {
    padding: 10px;
    /*border-left: 1px solid #718093;
    border-right: 1px solid #718093;
    border-bottom: 1px solid #718093;*/
}

.nav-tabs {
    border-bottom: 1px solid #718093;
}



.col-template-val {
    margin: 0 0 1em .5em;
}



/*Overwrite bootbox*/
.bootbox-body {
    font-family: "Open Sans", sans-serif;
    font-size: 0.935rem;
    font-weight: 300;
    line-height: 1.9;
    z-index:1200;
}

.activeSideItem .nav-link {
    color: #097b00;
    font-size: larger;
    font-weight: bold;
}


/*Address search Style*/

.spacing-top-less {
    /*if changing this value need to check all form using address search in Transaction, DS and Admin module */
    margin-top:32px;
}

.location-search input[type='text'] {
    width: calc(100% - 50px);
}

.location-search::before {
    display: inline-block;
    content: '';
    height: 18px;
    width: 18px;
    background-size: 18px 18px;
    background-repeat: no-repeat;
    margin: 0 10px 0 15px;
}

.address-search-result {
    position: absolute;
    z-index: 999999;
    /*overflow: scroll;*/
}

.address-search-result-div {
    font-size: 12px;
    background-color: #325157;
    font-weight: bold;
    border-color: #e4e4e4;
    border-style: solid;
    border-width: 1px;
    outline: none;
    padding: 7px 10px 7px 10px;
    color: white;
}

    .address-search-result-div:hover {
        background-color: maroon;
        color: #ffffff;
        cursor: pointer;
    }




/*Loading*/
.spanner,
.dspSpanner {
    position: absolute;
    display: block;
    text-align: center;
    height: 300px;
    color: #FFF;
    z-index: 1000;
    visibility: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    visibility: hidden;
}

.spanner-container,
.dspSpanner-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    /*z-index: 999999;*/
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.loader {
    color: #67d2e8;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

    .loader:before,
    .loader:after {
        content: '';
        position: absolute;
        top: 0;
    }

    .loader:before {
        left: -3.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .loader:after {
        left: 3.5em;
    }

@-webkit-keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

.show {
    visibility: visible;
}

.spannerBlue .loader {
    color: #a29bfe;
}

.spanner, .dspSpanner, .overlay {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}



.spanner, .dspSpanner , .overlay, .spanner-container, .dspSpanner-container {
    opacity: 1;
    z-index: 9999;
    visibility: visible;
}



/*Nav Pill - Use in Transaction*/

.navbar .navbar-nav.header_nav > .active > a,
.navbar .navbar-nav.header_nav > .active > a:focus,
.navbar .navbar-nav.header_nav > .active > a:hover {
    font-weight: bold;
    font-size: unset;
    color: black;
    background: #e6f6ff;
}

/* active navi pills item*/
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: white;
    color: #ff5a2b;
}

    .nav-pills .nav-link.active > a:focus,
    .nav-pills .nav-link.active > a:hover,
    .nav-pills .show > .nav-link {
        color: #000;
        text-decoration: none;
    }

/*vertical navi bar*/

.flex-column > .nav-link.active {
    background-color: #4877f1;
    color: white;
}

/*Nav Tab - Use in Job*/
.jobnav {
    border-bottom: none;
}

    .jobnav .nav-link {
        background: #525252;
        color: #ffffff;
    }

        .jobnav .nav-link.active, .nav-tabs .show > .nav-link {
            background-color: #adcad6;
            color: white;
        }

        .jobnav .nav-link.active, .jobnav .nav-item.show .nav-link {
            border-color: #adcad6 #adcad6 #adcad6;
        }

        .jobnav .nav-link:hover, .jobnav .nav-link:focus {
            border-bottom: none;
            background: rgba(82,82,82,0.8);
            border: 1px solid #525252;
        }

        .jobnav .nav-link.active:hover, .jobnav .nav-item.show .nav-link:hover, .jobnav .nav-link.active:focus {
            background-color: #adcad6;
            border: 1px solid #adcad6;
        }

        .jobnav .nav-link.disabled {
            opacity: 0.5;
            background: #525252;
            color: #ffffff;
        }

        .jobnav .nav-tabs {
            border-bottom: 1px hidden;
        }

    .jobnav .nav-item {
        margin-bottom: 0;
    }

    .jobnav .nav-tabs .nav-item {
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        border-top: 1px solid #eee;
        border-top-left-radius: 0.4rem;
        border-top-right-radius: 0.4rem;
        border-bottom: 0px;
    }

.navstyle2 {
    overflow: hidden;
    padding: 10px;
}
    .navstyle2.nav-pills .nav-link {
        color: #333;
        border-radius: 0;
        padding: 0.4rem 1rem;
        text-transform:capitalize;
    }

    .navstyle2.nav-pills .nav-link.active, .navstyle2.nav-pills .show > .nav-link {
        background: #3c5996;
        color: #fff;
    }

    .navstyle2 .nav-link.disabled {
        color: #888;
    }

    .navstyle2 li.active a {
        font-weight: bold;
    }

    .completedTabLink {
        background-color: #6c5ce7;
        color: white;
    }

.disabledTabLink {
    pointer-events: none;
    cursor: default;
    background-color: transparent;
    color: #888;
}


/*!
 * Start Bootstrap - Simple Sidebar HTML Template (https://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
/* Toggle Styles */
/* This sidebar modified by seegatesite.com */

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper.toggled {
        padding-left: 250px;
    }

#sidebar-wrapper {
    z-index: 1000;
    /*position: fixed;*/
    position: absolute;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #6a89cc;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    /*padding-top: 20px;*/
    left: 0;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
    left: auto;
}

.fixed-brand {
    width: auto;
}
/* Sidebar Styles */
@media(min-width:768px) {
    #menu-toggle {
        display: none;
    }
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 2px;
}

    .sidebar-nav li {
        text-indent: 15px;
        line-height: 40px;
    }

        .sidebar-nav li.active a {
            background: rgba(255, 255, 255, 0.2);
            border-left: red 2px solid;
        }

        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #FAFAFA;
        }

            .sidebar-nav li a:hover {
                text-decoration: none;
                color: #fff;
                background: rgba(255, 255, 255, 0.2);
                border-left: red 2px solid;
            }

            .sidebar-nav li a:active,
            .sidebar-nav li a:focus {
                text-decoration: none;
            }

    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
        color: #ffffff;
        background: none;
        font-weight: bold;
    }

.no-margin {
    margin: 0;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    .fixed-brand {
        width: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled-2 #sidebar-wrapper {
        width: 150px;
    }

        #wrapper.toggled-2 #sidebar-wrapper:hover {
            width: 250px;
        }

    #page-content-wrapper {
        /*padding: 20px;*/
        position: relative;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
        padding-left: 250px;
    }

    #wrapper.toggled-2 #page-content-wrapper {
        position: relative;
        margin-right: 0;
        margin-left: -200px;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
}

.material-icons {
    background-color: pink;
    display: inline-block;
    padding: 10px;
    border-radius: 50%;
    color: #ffffff;
}

/* Icon Rotate */
.icon-rotate {
    /*background-color: #111;*/
    -webkit-transition: -webkit-transform .8s ease-in-out;
    /*-ms-transition: -ms-transform .8s ease-in-out;*/
    transition: transform .8s ease-in-out;
}

    .icon-rotate:hover {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }


.forprinting{
    display:none;
}
@media print {
    .no-print, .no-print * {
        display: none !important;
    }

    .pagebreak {
        page-break-after: always;
    }

    .forprinting {
        display: block;
    }
}


/**Orange Progress Line**/
.progressbar {
    margin: 0;
    padding: 0;
    counter-reset: step;
    display: table;
    table-layout: fixed;
    width: 100%;
    font-family: 'Montserrat';
}

    .progressbar li {
        list-style-type: none;
        display: table-cell;
        line-height: 1.3em;
        font-size: 0.8rem;
        position: relative;
        text-align: center;
        color: #808080;
        margin-bottom: 0;
    }

        .progressbar li a {
            text-align: center;
            color: #ff5a2b;
        }

    .progressbar > li.complete ~ li .iconset {
        background-color: #ededed;
        border: 2px solid #ededed;
    }

    .progressbar > li.complete ~ li a {
        color: #808080;
    }

    .progressbar > li.complete ~ li:after {
        background-color: #ededed;
    }

    .progressbar > li.incomplete ~ li .iconset {
        background-color: #ededed;
        border: 2px solid #ededed;
    }

    .progressbar > li.incomplete ~ li a {
        color: #808080;
        pointer-events: none;
        cursor: not-allowed;
    }

    .progressbar > li.incomplete ~ li:after {
        background-color: #ededed;
    }

    .progressbar li .iconset {
        background-color: #ff5a2b;
        border-radius: 50%;
        border: 2px solid #ff5a2b;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: 10px;
        text-align: center;
        transition: all 500ms ease-out;
        z-index: 2;
        width: 36px;
        height: 36px;
        line-height: 32px;
    }

        .progressbar li .iconset.icon-user-o {
            font-size: 20px;
            padding: 0;
        }

    .progressbar li a.active .iconset,
    .progressbar li.active a .iconset,
    .progressbar li.proceed a .iconset {
        border-color: #ff5a2b;
        background: #ffffff;
        color: #ff5a2b;
    }

    .progressbar li a.allowAccess .iconset,
    .progressbar li.allowAccess a .iconset,
    .progressbar li.proceed a .iconset {
        pointer-events: auto;
        cursor: pointer;
    }

    .progressbar li:first-child:after {
        content: none;
    }

    .progressbar li:after {
        /*width: 120%;*/
        width: 100%;
        height: 2px;
        content: '';
        position: absolute;
        background-color: #ff5a2b;
        top: 25px;
        left: -50%;
        z-index: 1;
    }

    .progressbar .nav-link.active,
    .progressbar .show > .nav-link {
        background-color: white;
        color: #ff5a2b;
    }


.iframe-container {
    height: 100%;
    /*overflow: hidden;
    padding-top: 56.25%;
    position: relative;*/
}

#divFrame {
    height: 100%;
}

.iframe-container iframe {
    height: 100%;
    /*border: 0;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;*/
}

.blockcontent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.spinner-border{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    z-index:1;
}

/* Table auto page break */

table {
    page-break-inside: auto
}

tr {
    page-break-inside: avoid;
    page-break-after: auto
}

.nobreakSection {
    page-break-inside: avoid;
}

/* loading dots */
.loading {
    color: maroon;
    font-weight:bold;
    font-size: 1.5rem;
    padding: 15px;
}

.loading:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
    0%, 20% {
        color: rgba(0,0,0,0);
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }

    40% {
        text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0);
    }

    60% {
        text-shadow: .25em 0 0 , .5em 0 0 rgba(0,0,0,0);
    }

    80%, 100% {
        text-shadow: .25em 0 0 , .5em 0 0 ;
    }
}


/**************** Admin side navi ***********************/

.admin-side-navi-container {
    padding: 0;
    flex-wrap: nowrap !important;
}

.admin-side-navi-bar {
    background-color: #eee;
    padding: 0px;
    border-right: 1px solid #ddd;
   /* height: 100vh;*/
   min-width: 275px;
}

.sys-admin-side-navi-bar {
    background-color: #eee;
    padding: 0px;
    border-right: 1px solid #ddd;
}


.admin-side-navi-main {
    background-color: white;
    padding: 20px;

}

.admin-side-navi-header {
    background-color: #1F3157;
    padding: 0.5rem;
    color:white;
}

    .admin-side-navi-header label {
        color: white;
        font-weight: bold;
        font-size: 16px;
        text-align: left;
        width: 100%;
    }

.admin-side-navi-content .list-item  {
    padding: 0.75rem;
    background-color: #FFFFFF;
    color: black;
    font-weight: bold;
    border-bottom: 1px solid #DDDDDD;
}

    .admin-side-navi-content .list-item a {
        display: inline-block;
        width: 100%;
        text-decoration: none;
        color: #454545;
    }

.admin-side-navi-content .list-item-group {
    padding: 0.75rem;
    background-color: #b2ddef;
    color: black;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}
.admin-side-navi-content .list-item-group a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: #263238;
}

.admin-side-navi-content .list-item:hover {
    cursor: pointer;
    background-color: #DFDFDF;
    color:darkblue;
}

.admin-side-navi-content .list-item.active {
    background-color: #DADADA;
}

    .admin-side-navi-content .list-item.active a {
        color: maroon;
    }

        .admin-side-navi-content .list-item.active:after {
            content: "\25C0";
            position: absolute;
            right: 0px;
            color:white;
        }


.bg-darkergray {
    background-color: #f5f5f5;
}
/*.addRecordButton {
    -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
    -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
    box-shadow: inset 0px 1px 0px 0px #9fb4f2;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
    background: -moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
    background: -webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
    background: -o-linear-gradient(top, #7892c2 5%, #476e9e 100%);*/
/*background: -ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);*/
/*background: linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
    background-color: #7892c2;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #4e6096;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 18px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #283966;
}

    .addRecordButton:hover {
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
        background: -moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
        background: -webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
        background: -o-linear-gradient(top, #476e9e 5%, #7892c2 100%);*/
/*background: -ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);*/
/*background: linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);
        background-color: #476e9e;
    }

    .addRecordButton:active {
        position: relative;
        top: 1px;
    }*/