.progressbar-wrapper {
    background: #fff;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
}


.progressbar li {
    list-style-type: none;
    width: 33%;
    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

    .progressbar li:before {
        width: 60px;
        height: 60px;
        content: "";
        line-height: 60px;
        border: 2px solid #7d7d7d;
        display: block;
        text-align: center;
        margin: 0 auto 3px auto;
        border-radius: 50%;
        position: relative;
        z-index: 2;
        background-color: #fff;
        font-size: 16px;
    }

    .progressbar li:after {
        width: 100%;
        height: 2px;
        content: '';
        position: absolute;
        background-color: #7d7d7d;
        top: 30px;
        left: -50%;
        z-index: 0;
    }

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

    .progressbar li.active {
        color: green;
        font-weight: bold;
    }

        .progressbar li.active:before {
            border-color: #55b776;
            background: #2CA01C !important;
            color: white !important;
        }

        .progressbar li.active + li:after {
            background-color: #2CA01C;
        }

        .progressbar li.active:before {
            background: #55b776 url(../Content/user.svg) no-repeat center center;
            background-size: 60%;
        }

    .progressbar li::before {
        background: #fff url(../Content/user.svg) no-repeat center center;
        background-size: 60%;
    }

.progressbar {
    counter-reset: step;
}

    .progressbar li:before {
        content: counter(step);
        counter-increment: step;
    }

.footer-import-invoice {
    background: #3E3F3E 0% 0% no-repeat padding-box;
    border: 1px solid #D9DEDB;
}

.btn-outline-secondary {
    color: black;
}

    .btn-outline-secondary:hover {
        color: black;
        background: white;
    }

.success-result {
    color: #2CA01C;
}

.error-result {
    color: deeppink;
}

    .success-result i, .error-result i {
        font-size: 22px;
    }

.your-field {
    min-width: 100%;
    background-color: white;
    border-color: #D9DEDB;
    min-height: 35px;
    font-size: 14px;
}

    .your-field + button {
        background-color: white;
        border-color: #D9DEDB;
        min-height: 35px;
        font-size: 14px;
    }

        .your-field:hover, .your-field + button:hover {
            border-color: #D9DEDB;
        }

.table-bordered {
    border: none;
}

#searchInvoice {
    background: #fff center right 12px no-repeat padding-box url(/Images/ic_search_48px.svg);
}



#dateTimePopUp {
    width: 100%;
    height: 100% !important;
    top: 0;
    display: none;
}

/*Start Drag&Drop file*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
}

.drop {
    height: 220px;
    border: 3px dashed #DADFE3;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    background: white;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    margin-top: 0px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .drop .browse {
        width: 180px;
        margin: auto;
        color: white;
        padding: 8px 16px;
        border-radius: 4px;
        background: #2CA01C;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
        position: absolute;
        left: 0;
        right: 0;
    }

    .drop .cont {
        width: 100%;
        height: 170px;
        color: #8E99A5;
        -webkit-transition: all 0.5s ease-out;
        -moz-transition: all 0.5s ease-out;
        transition: all 0.5s ease-out;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

        .drop .cont img {
            /*font-size: 40px;
            color: #787e85;*/
            position: relative;
        }

        .drop .cont .tit {
            font-size: 25px;
            /*text-transform: uppercase;*/
            font-weight: 600;
        }

        .drop .cont .desc {
            color: #787e85;
            font-size: 18px;
        }

        .drop .cont .browse {
            width: 180px;
            margin: auto;
            color: white;
            padding: 8px 16px;
            border-radius: 4px;
            background: #2CA01C;
        }


    .drop input {
        height: 100%;
        width: 100%;
        cursor: pointer;
        background: red;
        opacity: 0;
        margin: auto;
        max-height: 200px
    }

    .drop img {
        margin-bottom: 10px;
    }

    .drop .cont img {
        height: 60px;
    }

.item_panel {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    color: rgb(30, 30, 30);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(217, 217, 217);
    border-image: initial;
    background: rgb(255, 255, 255);
    padding: 20px 20px 20px 0;
    min-height: 113px;
    cursor: pointer;
}

    .item_panel:hover {
        border-color: #2CA01C;
        text-decoration: none;
        color: rgb(30, 30, 30);
    }

    .item_panel div:first-child div {
        width: 100px;
    }

    .item_panel .flex-grow-1 strong {
        font-size: 16px;
    }

    .item_panel .flex-grow-1 span {
        color: #737373;
    }

    .item_panel img {
        width: 50px;
    }

.item_file {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #DADFE3;
}

    .item_file .icon_file {
        width: 50px;
        position: relative;
    }

        .item_file .icon_file img {
            width: 43px;
        }

    .item_file .info_file p {
        color: #3E3F3E;
        margin-bottom: 0;
        font-weight: bold;
        font-size: 16px;
    }

    .item_file .info_file span {
        color: #676867;
        font-size: 14px;
    }

    .item_file .action_file span {
        color: #3E3F3E;
        width: 35px;
        height: 35px;
        position: relative;
        /*        z-index: 1;*/
        border-radius: 50%;
        -webkit-transition: -webkit-transform .3s ease-in-out,all .3s ease-in-out;
        -moz-transition: -moz-transform .3s ease-in-out,all .3s ease-in-out;
        -o-transition: -o-transform .3s ease-in-out,all .3s ease-in-out;
        transition: transform .3s ease-in-out,all .3s ease-in-out;
    }

        .item_file .action_file span:before {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .item_file .action_file span:hover {
            background-color: #eaeaec;
        }

    .item_file .action_file .dropdown {
        height: 35px;
    }

.progressBar {
    height: 65px;
    color: #676867;
}

progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Get rid of default border in Firefox. */
    border: none;
    width: 100%;
    height: 20px;
    -webkit-transition: all 0.3s ease-out; /* Chrome 1-25, Safari 3.2+ */
    -moz-transition: all 0.3s ease-out; /* Firefox 4-15 */
    -o-transition: all 0.3s ease-out; /* Opera 10.50–12.00 */
    transition: all 0.3s ease-out;
    opacity: 0;
}

    progress[value]::-webkit-progress-bar {
        background-color: #D8F8D3;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    }

    progress[value]::-webkit-progress-value {
        background-color: #2CA01C;
        border-radius: 2px;
        background-size: 35px 20px, 100% 100%, 100% 100%;
    }

.step_sender .icon_file {
    width: 48px;
    position: relative;
}

    .step_sender .icon_file:after {
        content: '';
        width: 1px;
        height: 100%;
        background: #D9DEDB;
        display: block;
        position: absolute;
        left: 50%;
    }

    .step_sender .icon_file img {
        width: 24px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

.step_sender .info_file p {
    color: #3E3F3E;
    margin-bottom: 0;
    font-weight: bold;
    font-size: 16px;
}

.step_sender .info_file .form-row {
    padding: 12px 24px;
    background: #fff;
    border-left: 2px solid #2CA01C;
    margin-right: 0;
    margin-left: 0;
}

.step_sender .icon_file > div {
    border: 1px solid #D9DEDB;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    position: relative;
}

.step_sender .info_file .form-row:hover .icon_delete {
    display: inline;
}

.step_sender .info_file .form-row .icon_delete {
    display: none;
}

.step_sender:last-child .icon_file:after {
    display: none;
}

#list {
    width: 100%;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
}

.dashed_upload {
    height: 200px;
}
/*End Drag&Drop file*/


.bg-c-green {
    background: #2CA01C;
}

.bg-c-blue {
    background: #3797D3;
}

.bg-c-success {
    background: #24BAB5;
}

.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: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    height: 64px;
}

    .card .card-block {
        height: 23px;
        padding: 25px;
        color: #fff;
    }

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.itemfield_icon {
    width: 32px;
    height: 32px;
    background: #E8F8E2 0% 0% no-repeat padding-box;
    border-radius: 2px;
}

html {
    scroll-behavior: smooth;
}

.page_anchor {
    display: block;
}

.field-required {
    outline: red dotted 4px;
}

.signature_drag {
    width: 98px;
    height: 58px;
    padding-top: 5px;
    background: #E8F8E2 0% 0% no-repeat padding-box;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0px;
    color: #3E3F3E;
    border: 2px solid #2CA01C;
    position: relative;
    z-index: 1;
    cursor: move;
    opacity: 0.8;
}

    .signature_drag > div {
        border: 1px solid red;
        border-radius: 50%;
        width: 25px;
        height: 25px;
        color: red;
        position: absolute;
        top: -12px;
        right: -12px;
        background: #fff;
        opacity: 0.5;
        cursor: pointer;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-transition: -webkit-transform .2s ease-in-out,all .2s ease-in-out;
        -moz-transition: -moz-transform .2s ease-in-out,all .2s ease-in-out;
        -o-transition: -o-transform .2s ease-in-out,all .2s ease-in-out;
        transition: transform .2s ease-in-out,all .2s ease-in-out;
        display: none;
    }

        .signature_drag > div:hover {
            opacity: 1;
        }

        .signature_drag > div > i {
            font-size: 20px;
        }

#documentLayout .signature_drag:hover > div {
    display: flex;
}

#documentLayout {
    position: relative;
}




.custom {
    height: calc(100vh);
}

    .custom #test {
        box-shadow: 0 0 10px gray;
    }

    .custom .btnOTP {
        color: #fff;
        font-size: 17px;
        font-weight: 500;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .custom .btnOTP:disabled {
            background: #808080 !important;
        }


.viewer_style.viewer_page_style {
    position: initial !important;
    width: 100% !important;
    height: auto !important;
}
    .viewer_style.viewer_page_style.upper-canvas {
        display: none !important;
    }

.canvas-container{
    width:100% !important;
    height:auto !important;
}

@media only screen and (min-width: 768px) and (max-width:1024px) {
    #leftviewer, #rightviewer {
        display: none !important;
    }

    #TheFirstTime button {
        display: block !important;
    }

    #documentviewer {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0;
        top: 100px;
        overflow-y: hidden;
    }
}

@media only screen and (max-width: 767px) {
    #documentviewer {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0;
        top: 120px;
        overflow-x: hidden;
        overflow-y: hidden;
    }
}

/*! jQuery UI - v1.12.1 - 2017-08-20
* http://jqueryui.com
* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
	pointer-events: none;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("../Content/images/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("../Content/images/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("../Content/images/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("../Content/images/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("../Content/images/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("../Content/images/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("../Content/images/ui-icons_777777_256x240.png");
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .3;
	filter: Alpha(Opacity=30); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}

/*! jQuery Timepicker Addon - v1.6.3 - 2016-04-20
* http://trentrichardson.com/examples/timepicker
* Copyright (c) 2016 Trent Richardson; Licensed MIT */

.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px
}

.ui-timepicker-div dl {
    text-align: left
}

    .ui-timepicker-div dl dt {
        float: left;
        clear: left;
        padding: 0 0 0 5px
    }

    .ui-timepicker-div dl dd {
        margin: 0 10px 10px 40%
    }

.ui-timepicker-div td {
    font-size: 90%
}

.ui-tpicker-grid-label {
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0
}

.ui-timepicker-div .ui_tpicker_unit_hide {
    display: none
}

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
    background: 0 0;
    color: inherit;
    border: 0;
    outline: 0;
    border-bottom: solid 1px #555;
    width: 95%
}

    .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
        border-bottom-color: #aaa
    }

.ui-timepicker-rtl {
    direction: rtl
}

    .ui-timepicker-rtl dl {
        text-align: right;
        padding: 0 5px 0 0
    }

        .ui-timepicker-rtl dl dt {
            float: right;
            clear: right
        }

        .ui-timepicker-rtl dl dd {
            margin: 0 40% 10px 10px
        }

.ui-timepicker-div.ui-timepicker-oneLine {
    padding-right: 2px
}

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, .ui-timepicker-div.ui-timepicker-oneLine dt {
        display: none
    }

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
        display: block;
        padding-top: 2px
    }

    .ui-timepicker-div.ui-timepicker-oneLine dl {
        text-align: right
    }

        .ui-timepicker-div.ui-timepicker-oneLine dl dd, .ui-timepicker-div.ui-timepicker-oneLine dl dd > div {
            display: inline-block;
            margin: 0
        }

            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
                content: ':';
                display: inline-block
            }

            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
                content: '.';
                display: inline-block
            }

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide, .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
        display: none
    }

/*
Không cần load font này vì trong thẻ meta đã load font Roboto rồi    
@font-face {
    font-family: Material-Design-Iconic-Font;
    src: url(/fonts/Material-Design-Iconic-Font.woff2?v=2.2.0) format('woff2'), url(/fonts/Material-Design-Iconic-Font.woff?v=2.2.0) format('woff'), url(/fonts/Material-Design-Iconic-Font.ttf?v=2.2.0) format('truetype')
}*/

body {
    font-family: Roboto, 'Material-Design-Iconic-Font';
    font-size: 14px;
    background: #F2F2F3 !important;
    width: 100%;
    height: 100%;
}

img {
    max-width: 100%;
    max-height: 100%;
}

*:focus {
    outline: 0;
}

.content-upload-img {
    position: relative;
    border: 1px dashed #ccc;
    height: calc(100% - 50px);
    width: 100%;
}

.img-sign {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

textarea:focus, input:focus, select:focus, button:focus {
    outline: 0;
    box-shadow: none !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

button.disabled, button:disabled {
    cursor: no-drop;
}

a.link-cursor-pointer {
    color: #3e3f3e;
}

hr.stronger {
    border-top: 2px solid rgba(0,0,0,.1) !important;
}

.fa {
    font-size: 16px;
}

#mainLoadingSVG {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    z-index: 10004;
    background: #fff;
    padding: 3px;
    border-radius: 50%;
    display: none;
}

#left-mainnavi {
    position: fixed;
    z-index: 3;
    width: 230px;
    background-color: #F2F2F3;
    background-image: url('/Images/left-sidebar-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    padding-top: .5rem !important;
}

#right-maincontent {
    /*position: fixed;*/
    right: 0;
    z-index: 1;
    width: calc(100%);
    -webkit-transition: -webkit-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, width 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
}

#documentViewer {
    max-width: 1080px;
    min-height: 100%;
    margin: 15px auto 0px auto;
    padding: 1rem;
}

#btnSignHere {
    top: 780px;
    left: 1270px;
    position: fixed;
}

.top-left-navi {
    display: block;
    height: 3.5rem;
    text-align: center;
    border-bottom: 1px solid #D9DEDB;
}

#top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #2ca01c;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
}
/* Change Autocomplete styles in Chrome*/
input.navi-search:-webkit-autofill,
input.navi-search:-webkit-autofill:hover,
input.navi-search:-webkit-autofill:focus,
input.navi-search:-internal-autofill-selected {
    -webkit-text-fill-color: black;
    /*-webkit-box-shadow: 0 0 0px 1000px #000 inset;*/
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important;
}

.fc-icons {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 20px;
    cursor: pointer;
    color: #676867;
}

    .fc-icons:hover .fa {
        color: #2CA01C;
    }

#number-of-notify {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background: #2CA01C 0% 0% no-repeat padding-box;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0;
    color: #FFFFFF;
}

#signatureControl .modal-dialog {
    height: 600px;
    max-width: 768px;
}

#signatureControl .modal-signature .modal-content {
    height: 100%;
}

#signatureControl .signature-pad {
    position: relative;
    width: 100%;
}

#signatureControl .content-upload-img {
    position: relative;
    border: 1px dashed #ccc;
    height: 300px;
    width: 100%;
}

#signatureControl .signature {
    margin: 0 auto;
    cursor: pointer;
    width: 100%;
    height: 300px;
    background: #F1F3F4;
}

    #signatureControl .signature canvas {
        border: 1px dashed #ccc;
        margin: 0 auto;
        cursor: pointer;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

.content-dropdown {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(2,0,2,0.3);
}

.flyout-view {
    position: absolute;
    width: auto;
    height: auto;
    font-size: 14px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);*/
    border-radius: 8px;
    z-index: 6;
}

    .flyout-view.flyout-open {
        display: inline-block;
    }

    .flyout-view.flyout-right .arrow {
        position: absolute;
        top: -15px;
        left: 15px;
    }

    .flyout-view.flyout-left .arrow {
        position: absolute;
        top: -15px;
        right: 15px;
    }

    .flyout-view a {
        line-height: 30px;
        color: #3E3F3E;
    }

        .flyout-view a span {
            color: #2CA01C;
            margin-right: 10px;
        }

#flyout-account .arrow {
    right: 32px !important;
}

#fc-add {
    transition: all 0.5s;
    transition-timing: ease-in-out;
}

    #fc-add.flyout-open {
        transform: rotate(135deg);
    }

#fc-notify .fa {
    font-size: 24px;
}

#fc-help .fa {
    font-size: 28px;
}

#fc-account {
    width: 57px;
    cursor: pointer;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #3E3F3E;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 17px solid #F6F6F6;
}

.arrow-top {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #FFF
}

#avata-favicon {
    border-radius: 50%;
    width: 38px;
    height: 38px;
}

#flyout-add-new {
    width: 230px;
}

.flyout-view .header {
    letter-spacing: 0;
    color: #fff;
    padding: 7px 20px;
    background: #2CA01C;
    cursor: default !important;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 18px;
}

.flyout-overview {
    position: absolute;
    background: rgba(0,0,0,1);
    opacity: 0;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

    .flyout-overview.flyout-open {
        opacity: 0.3;
        z-index: 5;
    }

.bg-hover:hover {
    background: #E3FBE1 0% 0% no-repeat padding-box;
}

.notify-item {
    width: 300px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    border-radius: 8px;
    margin: 5px 0px;
    -webkit-transition: -webkit-transform .3s ease-in-out,all .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out,all .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out,all .3s ease-in-out;
    transition: transform .3s ease-in-out,all .3s ease-in-out;
}

    .notify-item a {
        display: block;
        text-decoration: none;
        line-height: 20px;
    }

        .notify-item a:hover .notify-link {
            text-decoration: underline;
        }

    .notify-item .notify-link {
        display: block;
    }

.modal-full {
    max-width: 100% !important;
    max-height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
}

    .modal-full .modal-content {
        max-width: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
    }

table td, table th {
    font-size: 14px;
}

.modal-report .modal-footer {
    background: #3E3F3E 0% 0% no-repeat padding-box;
    color: #fff;
    font-size: 14px;
    padding: 0.5rem 1rem;
}

    .modal-report .modal-footer a.link-cursor-pointer {
        display: inline-block;
        padding: 0 20px;
        color: #fff;
    }

.modal-report .modal-content {
    background: #ccc;
}

    .modal-report .modal-content .close {
        right: 30px;
        position: absolute;
        z-index: 5;
        width: 24px;
        height: 24px;
    }

    .modal-report .modal-content .modal-body {
        padding-top: 1.5rem;
    }

        .modal-report .modal-content .modal-body > div {
            max-width: 1200px;
            min-height: 100%;
            margin: 0 auto;
            background: #fff;
            padding: 1rem;
        }

        .modal-report .modal-content .modal-body .modal-title {
            width: 100%;
            text-align: center;
            line-height: 24px;
        }

        .modal-report .modal-content .modal-body .modal-title-receipt {
            width: 100%;
            text-align: center;
            line-height: 30px;
        }


.table-vertical-center td, .table-vertical-center th {
    vertical-align: middle;
}

.w-250 {
    width: 250px;
}

.table-invoice-itemlist thead td, .table-invoice-itemlist thead th {
    background: #E8F8E2;
}

.table-invoice-itemlist tbody input, .table-invoice-itemlist tbody select {
    border-radius: 0;
    border: 0;
}

.table-invoice-itemlist tbody tr:hover td {
    background-color: #F2F2F2;
}

    .table-invoice-itemlist tbody tr:hover td suggestproduct div td {
        background-color: #fff;
    }

.taxcode-symbol {
    padding: 3px 7px;
    border: 1px solid #ccc;
    font-weight: bold;
}

.taxcode-space {
    padding: 3px 7px;
}

.taxcode-account .taxcode-symbol:nth-child(n+1) {
    margin-left: -1px;
}
/*Check box*/
.label-cbx {
    user-select: none;
    cursor: pointer;
    margin-bottom: 0;
}

    .label-cbx input:checked + .checkbox {
        border-color: #2CA01C;
    }

        .label-cbx input:checked + .checkbox svg path {
            fill: #2CA01C;
        }

        .label-cbx input:checked + .checkbox svg polyline {
            stroke-dashoffset: 0;
        }

    .label-cbx:hover .checkbox svg path {
        stroke-dashoffset: 0;
    }

    .label-cbx .checkbox {
        position: relative;
        top: 3px;
        float: left;
        width: 20px;
        height: 20px;
        border: 2px solid #C8CCD4;
        border-radius: 3px;
    }

        .label-cbx .checkbox svg {
            position: absolute;
            top: -2px;
            left: -2px;
        }

            .label-cbx .checkbox svg path {
                fill: none;
                stroke: #2CA01C;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 71px;
                stroke-dashoffset: 71px;
                /*transition: all 0.6s ease;*/
            }

            .label-cbx .checkbox svg polyline {
                fill: none;
                stroke: #FFF;
                stroke-width: 2;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-dasharray: 18px;
                stroke-dashoffset: 18px;
                transition: all 0.3s ease;
            }

    .label-cbx > .cbx-text {
        vertical-align: middle;
        font-size: 13px;
        display: table-cell;
    }

.invisible {
    position: absolute;
    z-index: -1;
    width: 0;
    height: 0;
    opacity: 0;
}

/*end checkbox*/

.invoice-product .del-icon {
    font-size: 24px;
    color: #B3B3B3;
}

.invoice-product tfoot p {
    margin-bottom: 0.5rem;
}

/*Custom select*/
.cb-select-time {
    width: 240px;
    outline: 0;
}

    .cb-select-time:focus, .cb-select-time:focus {
        outline: 0;
        box-shadow: none !important;
    }

.dropdown-menu {
    font-size: 14px;
}

    .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
        background-color: #E8F8E2;
        background-image: none;
        color: #212529 !important;
    }

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-item.active, .dropdown-item:active {
        background-color: #E8F8E2;
        background-image: none;
        color: #212529 !important;
    }

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    color: #2CA01C;
}

.bootstrap-select > .dropdown-toggle {
    border-color: #D9DEDB;
}

/*End Custom select*/

/*Custom select*/
#menu-company span.bs-ok-default.check-mark {
    position: absolute;
    display: inline-block;
    right: 8px;
    top: 12px;
    color: #2CA01C;
    content: '';
    display: block;
    width: 0.5em;
    height: 1em;
    border-style: solid;
    border-width: 0 0.26em 0.26em 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

a.dropdown-item.waves-effect.waves-light.waves-round.selected {
    background-color: #E8F8E2;
    background-image: none;
    color: #212529 !important;
}

    a.dropdown-item.waves-effect.waves-light.waves-round.selected:after {
        display: inline-block;
        right: -15px;
        top: 0;
        color: #2CA01C;
        content: '';
        width: 0.5em;
        height: 1em;
        border-style: solid;
        border-width: 0 0.26em 0.26em 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        position: relative;
    }

.show-comtax-code {
    font-weight: bold;
    cursor: pointer;
    padding-right: 3px;
}

.custom-action {
    /*width: 6%;*/
    float: right;
    margin-top: 0 !important;
}
/*End Custom select*/
.dashboard-review-box {
    border-radius: 6px;
    text-align: center;
    z-index: 0;
}

    .dashboard-review-box .title-review-box {
        position: relative;
        z-index: 4;
        height: 47px;
        font-size: 18px;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .dashboard-review-box .content-review-box {
        height: 73px;
        color: #fff;
        font-size: 32px;
        position: relative;
        z-index: 5;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

        .dashboard-review-box .content-review-box small {
            font-size: 16px;
            margin-top: 10px;
            margin-left: 10px;
        }

    .dashboard-review-box:nth-child(1) .content-review-box {
        background: #2CA01C;
    }

    .dashboard-review-box:nth-child(2) .content-review-box {
        background: #3797D3;
    }

    .dashboard-review-box:nth-child(3) .content-review-box {
        background: #24BAB5;
    }

.dashboard-chart > div {
    border-radius: 6px;
    background: #fff;
    margin-bottom: 10px;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.3);
}

.dashboard-chart:nth-child(1) .title-chart span {
    color: #3797D3;
}

.dashboard-chart:nth-child(2) .title-chart span {
    color: #01BCD4;
}

.dashboard-chart .title-chart {
    color: #333333;
    font-size: 24px;
    padding: 10px 20px;
    font-weight: bold;
}

    .dashboard-chart .title-chart span {
        margin-right: 15px;
    }

td.title-group-form span {
    display: block;
    height: 32px;
    margin-top: 20px;
    text-align: center;
    line-height: 35px;
    background: #D9DEDB 0% 0% no-repeat padding-box;
    border-radius: 4px;
}

.drop-file-box {
    display: block;
    border: 1px dashed #D9DEDB;
    padding: 20px 0;
    width: 100%;
    cursor: pointer;
    text-align: center;
    color: #676867;
}

    .drop-file-box span {
        display: block;
        font-size: 10px;
    }

        .drop-file-box span.fa {
            font-size: 16px;
            color: #676867;
        }

.button-circle-hover {
    display: flex;
    width: 35px;
    height: 35px;
    cursor: pointer;
    border-radius: 50%;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
}

    .button-circle-hover:hover {
        background-color: #EAEAEC;
    }

    .button-circle-hover .fa {
        color: #767676;
    }

.cls-image-product {
    width: 64px;
}

    .cls-image-product > label {
        display: block;
        width: 64px;
        height: 64px;
        background: #F6F6F6 center no-repeat padding-box;
        border: 1px dashed #D9DEDB;
        cursor: pointer;
    }

    .cls-image-product .button-circle-hover {
        margin: 0 10px;
    }

.dashboard-review-box.extend-invoice-list:nth-child(1) .content-review-box {
    background: #DB8715;
}

.dashboard-review-box.extend-invoice-list:nth-child(2) .content-review-box {
    background: #2CA01C;
}

.dashboard-review-box.extend-invoice-list:nth-child(3) .content-review-box {
    background: #24BAB5;
}

.has-tag {
    display: inline-block;
    background: #E8F8E2 0% 0% no-repeat padding-box;
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: 0;
    color: #3797D3;
    padding: 3px 5px;
    margin-left: 3px;
    cursor: pointer;
}

    .has-tag:hover {
        background-color: #D9DEDB;
    }

.btn-filter .dropdown-menu {
    width: 500px;
    font-size: 14px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.3);
    border: 1px solid #D8DCE6;
    border-radius: 4px;
}

    .btn-filter .dropdown-menu p {
        font-weight: bold;
    }

.btn-light {
    border-color: #E9E9E9;
}

.dropdown-menu.dropdown-menu-sm {
    font-size: 14px;
}

.table-head-green thead th {
    background-color: #E8F8E2;
}

.btn-light.btn-link {
    border: 0;
    background-color: transparent !important;
    border-top-left-radius: .2rem !important;
    border-bottom-left-radius: .2rem !important;
}

    .btn-light.btn-link:hover {
        background-color: #E2E6EA !important;
    }

.frm_custom_view_column .label-cbx {
    display: block;
    height: 22px;
    margin-bottom: 10px;
}

.frm_custom_view_column p {
    font-weight: bold;
}

.frm_custom_view_column .cbx-text {
    padding-top: 4px;
    padding-left: 10px;
}

.report_col_show_more {
    display: none;
}

    .report_col_show_more.open {
        height: 143px;
        -webkit-transition: -webkit-transform 0.3s ease-in-out, all 0.3s ease;
        -moz-transition: -moz-transform 0.3s ease-in-out, all 0.3s ease;
        -o-transition: -o-transform 0.3s ease-in-out, all 0.3s ease;
        transition: transform 0.3s ease-in-out, all 0.3s ease;
    }

.display-none {
    display: none;
}

/* Tuyen CSS */
/* start manage product and service*/
.btn-manage-product {
    position: relative;
    text-align: center;
    font: Medium 14px/16px Ubuntu;
    letter-spacing: 0;
    color: #3E3F3E;
    background: #D9DEDB 0% 0% no-repeat padding-box;
    border-radius: 4px !important;
    opacity: 1;
}

#productandservice {
    width: 240px;
    height: 32px;
    font-size: 12px;
    padding: 7px 0px 9px 12px;
    background: #fff center right 12px no-repeat padding-box url(/Images/ic_search_48px.svg);
    border: 1px solid #d9dedb;
    border-radius: 4px;
}

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

.dropdown-menu-service {
    width: 192px !important;
}

.dropdown-menu-settings {
    width: 190px !important;
}

.dropdown-menu-sm {
    width: 147px !important;
}

.pagination-area button {
    border: none;
    background-color: transparent;
}
/* end manage product and service*/
/* start customer detail*/
.customer-detail .active {
    border-bottom: 3px solid green;
    border-radius: 0px;
}

.customer-detail .btn-switch {
    padding: 5px 15px;
    color: black;
    text-transform: uppercase;
    font-weight: 600;
}

    .customer-detail .btn-switch:hover {
        text-decoration: none;
        color: black;
    }
/* end customer detail*/
/* start account settings*/
.account-setting-area .active {
    border-bottom: 2px solid #2CA01C;
    border-radius: 0px;
    color: #2CA01C !important;
}

.account-setting-area .btn-switch {
    width: 200px;
    padding: 18px;
    font-size: 24px;
    font-weight: 600;
    color: #676867;
}

    .account-setting-area .btn-switch:hover {
        text-decoration: none;
    }

.account-setting-content .btn-default {
    background-color: #dddddd;
}

.change-enterprise-logo span {
    border: 1px dashed grey;
    width: 100px;
    height: 100px;
    padding: 10px 0px 0px 3px;
}
/* end accoutn settings*/
/* start setting*/
.li-setting {
    display: none;
    position: absolute;
    width: 220px;
    height: auto;
    top: -200px !important;
    right: -219px;
    -webkit-transition: all 10.5s ease;
    -o-transition: all 10.5s ease;
    transition: all 10.5s ease;
}

    .li-setting .arrow.arrow-left {
        top: 193px !important;
        border-top: 17px solid transparent;
        border-bottom: 17px solid transparent;
        border-right: 17px solid #fff;
    }

/* end setting*/
/* start annoucemnent area setting*/
.announcementa-area .table-mail th {
    padding: 10px 20px 10px 20px;
}

.announcementa-area .table-mail td {
    padding: 10px 20px 0px 20px;
}

.announcementa-area .dropdown-menu {
    width: 220px !important;
}

.announcementa-area .treeview-menu ul li {
    list-style: none;
    position: relative;
    width: 100%;
    height: 30px;
    font-size: 14px;
    cursor: pointer;
    padding: 10px 10px 30px 20px;
}

    .announcementa-area .treeview-menu ul li:hover {
        background: #d0f7cc 0% 0% no-repeat padding-box;
    }

    .announcementa-area .treeview-menu ul li a {
        color: black;
        text-decoration: none;
    }
/* end annoucemnent area*/

/**/
.modal-user-information .change-enterprise-logo span {
    width: 30%;
}

.modal-user-information .modal-footer {
    background: #3e3f3e 0% 0% no-repeat padding-box;
}

.modal-user-information .modal-user-content {
    width: 37%;
}

.attachement-file-area .change-enterprise-logo span {
    width: 100%;
}

/* tool*/
.tool-setting-area .active {
    border-bottom: 2px solid #2CA01C;
    border-radius: 0px;
    color: #2CA01C !important;
}

.tool-setting-area .btn-switch {
    width: 200px;
    padding: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #676867;
}

    .tool-setting-area .btn-switch:hover {
        text-decoration: none;
        color: #2CA01C;
    }

.tool-setting-area .dashboard-review-box .title-review-box {
    position: relative;
    z-index: 4;
    height: 300px;
    font-size: 18px;
    background-color: #fff;
    padding: 80px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 4px 0 rgba(0,0,0,.3);
    border-radius: 6px;
}

.tool-setting-area .custom-control {
    transform: scale(1.5);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #2ca01c;
}


    .custom-control-input:checked ~ .custom-control-label::before:focus, .custom-control-input:checked ~ .custom-control-label::before:active {
        outline: none;
    }

/* end tool area*/

.progressbar-wrapper, .import-customer .progressbar-wrapper {
    background: #fff;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
}

.progressbar li, .import-customer .progressbar li {
    list-style-type: none;
    width: 33%;
    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

    .import-product .progressbar li:before, .import-customer .progressbar li:before {
        width: 60px;
        height: 60px;
        content: "";
        line-height: 60px;
        border: 2px solid #7d7d7d;
        display: block;
        text-align: center;
        margin: 0 auto 3px auto;
        border-radius: 50%;
        position: relative;
        z-index: 2;
        background-color: #fff;
        font-size: 16px;
    }

    .import-product .progressbar li:after, .import-customer .progressbar li:after {
        width: 100%;
        height: 2px;
        content: '';
        position: absolute;
        background-color: #7d7d7d;
        top: 30px;
        left: -50%;
        z-index: 0;
    }

    .import-product .progressbar li:first-child:after, .import-customer .progressbar li:first-child:after {
        content: none;
    }

    .import-product .progressbar li.active, .import-customer .progressbar li.active {
        color: green;
        font-weight: bold;
    }

        .import-product .progressbar li.active:before, .import-customer .progressbar li.active:before {
            border-color: #55b776;
            background: #2CA01C !important;
            color: white !important;
        }

        .import-product .progressbar li.active + li:after, .import-customer .progressbar li.active + li:after {
            background-color: #2CA01C;
        }

        .import-product .progressbar li.active:before, .import-customer .progressbar li.active:before {
            background: #55b776 url(../Content/Customs/user.svg) no-repeat center center;
            background-size: 60%;
        }

    .import-product .progressbar li::before, .import-customer .progressbar li::before {
        background: #fff url(../Content/Customs/user.svg) no-repeat center center;
        background-size: 60%;
    }

.import-product .progressbar, .import-customer .progressbar {
    counter-reset: step;
}

    .import-product .progressbar li:before, .import-customer .progressbar li:before {
        content: counter(step);
        counter-increment: step;
    }

.import-product .footer-import-product, .import-customer .footer-import-product {
    background: #3E3F3E 0% 0% no-repeat padding-box;
    border: 1px solid #D9DEDB;
}

.import-product .btn-outline-secondary, .import-customer .btn-outline-secondary {
    color: black;
}

    .import-product .btn-outline-secondary:hover, .import-customer .btn-outline-secondary:hover {
        color: black;
        background: white;
    }

.import-product .your-field, .import-customer .your-field {
    min-width: 100%;
    background-color: white;
    border-color: #D9DEDB;
    min-height: 35px;
    font-size: 14px;
}

    .import-product .your-field + button, .import-customer .your-field + button {
        background-color: white;
        border-color: #D9DEDB;
        min-height: 35px;
        font-size: 14px;
    }

    .import-product .your-field:hover, .your-field + button:hover, .import-customer .your-field:hover, .your-field + button:hover {
        border-color: #D9DEDB;
    }

.import-product .table-bordered, .import-customer .table-bordered {
    border: none;
}

.import-product .inputSearch, .import-customer .inputSearch {
    background: #fff center right 12px no-repeat padding-box url(/Images/ic_search_48px.svg);
}

/**/
.modal-report .btn-print-invoice {
    border: none;
    background: transparent;
    color: white;
    padding: 0px 10px 0px 10px;
}
/**/
.modal-preview-invoice .header-center {
    font-size: 20px;
}

.modal-preview-invoice .modal-content {
    background-color: lightgray;
}

.modal-preview-invoice .modal-body {
    overflow-y: hidden;
}

.modal-preview-invoice .btn-filter {
    transform: scale(0.79);
    transform-origin: top center;
    background-color: lightgray;
}

.modal-preview-invoice .invoice-template {
    width: 793.7007874px;
    height: 1122.519685px;
    margin: auto;
    border: 1px solid;
    padding: 10px;
    background-color: white;
}

.modal-preview-invoice .close {
    transform: scale(2.5);
}

.modal-preview-invoice .invoice-footer {
    position: fixed;
    bottom: 10px;
    position: absolute;
    padding: 0px 100px 0px 100px;
    font-size: 12px;
}

.editor_invoice {
    border: 0;
    border-bottom: 1px solid #DEE2E6;
    border-radius: 0;
    padding-left: 0;
}

.editor_invoice_dashed {
    border: 0;
    border-bottom: 1px dashed #DEE2E6;
    border-radius: 0;
}

#input_taxcode {
    font-size: 20px;
    height: 30px;
    letter-spacing: 5px;
}

.form-control[disabled="disabled"] {
    background: #fff;
}

    .form-control[disabled="disabled"]:hover {
        cursor: no-drop;
    }

/*alert dialog*/
#modalContainer {
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 10000;
}

#alertBox {
    position: relative;
    width: 400px;
    min-height: 100px;
    margin-top: 50px;
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.85);
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.85);
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.85);
}

#modalContainer > #alertBox {
    position: fixed;
}

#alertBox h1 {
    margin: 0;
    font: 16px verdana,arial;
    background-color: #2CA01C;
    color: #FFF;
    text-shadow: none;
    padding: 10px 5px;
}

#alertBox p {
    font: 16px verdana,arial;
    min-height: 50px;
    padding: 5px;
    padding-top: 15px;
}

#alertBox #closeBtnAlert {
    margin: 0 auto;
    display: block;
    width: 80px;
    margin-bottom: 15px;
}

.btnGroup {
    text-align: center;
    padding: 20px;
}

#cancelBtnAlert {
    margin-right: 15px;
}

/*end alert custom*/

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    background: #28a745;
    border: 1px solid #28a745;
}

.svgloading {
    height: 38px;
}

/* jquery ui modal custom */
.ui-dialog-title {
    font-size: 20px;
}
/*.ui-widget.ui-widget-content {
    top: 100px !important;
}*/
/* end jquery ui modal custom*/
/**/
.pageEdittemplate {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#templateViewInvoice {
    background-color: #C5C5C5;
    height: 100%;
    padding: 20px 0;
    overflow-y: scroll;
    scrollbar-color: #B4B4B4 #E9E9E9;
    scrollbar-width: thin;
}

#viewPreviewTemplate {
    width: 680px;
    height: 1000px;
    margin: auto;
    background-color: #fff;
    box-shadow: 3px 6px 12px 6px #a9a0a0;
}

#rightPanelFunction {
    position: relative;
    width: 400px;
    height: 100%;
    border-left: 1px solid #C5C5C5;
}

#panel1 {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 0;
    bottom: 50px;
    overflow-x: auto;
}

    #panel1 > div {
        margin-right: 10px;
    }

/*css custom scrollbar*/
.onscrollbar::-webkit-scrollbar-track {
    background-color: #DEE2E6;
}

.onscrollbar::-webkit-scrollbar {
    width: 8px;
    background-color: #DEE2E6;
}

.onscrollbar::-webkit-scrollbar-thumb {
    background-color: #B4B4B4;
}

    .onscrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #2CA01C;
    }
/* end css custom scrollbar*/

.selected_color_view {
    width: 62px;
    height: 62px;
    margin: auto 24px 6px 0;
    border-radius: 50%;
    background-color: #676867;
    cursor: pointer;
}

.symbol_color {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin: 0 8px 0 0;
    cursor: pointer;
}

#iframe_templateViewInvoice {
    width: 985px;
    height: 1450px;
    border: none;
    background-color: #fff;
    overflow: hidden;
    -ms-transform: scale(0.69);
    -moz-transform: scale(0.69);
    -o-transform: scale(0.69);
    -webkit-transform: scale(0.69);
    transform: scale(0.69);
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.headerEditorTemplete {
    padding-bottom: 5px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn-more {
    border: 1px solid transparent;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: block;
    text-align: center;
    line-height: 39px;
    position: relative;
    transition: color 50ms ease;
    margin-left: 10px;
    background: #fff;
}

    .btn-more:active {
        background: #d9f0ff;
    }

    .btn-more:hover {
        background: #d9f0ff;
    }

.headerEditorTemplete button {
    margin-right: 20px;
}

.arow-down-header {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    transition: all .4s ease;
    width: 9px;
}

    .arow-down-header .icon-collapsed {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        transform: rotate(-180deg);
        transition: all .4s ease;
        width: 15px;
    }

.nav-item.dropdown.custom-hover:hover {
    background-color: #d9f0ff;
    border-radius: 6px;
    color: #009AFF !important;
}

.novaon-legend {
    padding-left: 16px;
    color: #2069af;
}

.item_bg_invoice {
    width: 23%;
    float: left;
    min-height: 113px;
    background: #fff;
    cursor: pointer;
    margin: 3px;
    border: 1px solid #F2F2F3;
    margin-top: 10px;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, all 0.2s ease-in-out;
    -moz-transition: -moz-transform 0.2s ease-in-out, all 0.2s ease-in-out;
    -o-transition: -o-transform 0.2s ease-in-out, all 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out, all 0.2s ease-in-out;
}

    .item_bg_invoice:hover {
        border: 1px solid #2CA01C;
    }

#rightPanelFunction .title_grey_templateeditor {
    margin-top: 20px;
    font-weight: bold;
    background: #EBEBED;
    padding: 5px;
}

.list_bginvoice_temp {
    position: absolute;
    top: 350px;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow-y: scroll;
}

.list_sampleinvoice_temp {
    position: absolute;
    top: 136px;
    bottom: 10px;
    left: 15px;
    right: 0;
    text-align: center;
    overflow-y: scroll;
}

.table_invoice_list_manage th, .table_invoice_list_manage td {
    font-size: 12px;
}

.list_sampleinvoice_temp img {
    border: 2px solid #fff;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
}

.list_sampleinvoice_temp > div {
    position: relative;
    margin-top: 10px;
    width: 365px;
    cursor: pointer;
}

.list_sampleinvoice_temp button {
    position: absolute;
    z-index: 5;
    display: none;
    height: 38px;
    width: 70px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.5);
    -webkit-transition: -webkit-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
}

.list_sampleinvoice_temp > div:hover button {
    display: block;
}

.list_sampleinvoice_temp > div:hover img {
    opacity: 0.5;
    border: 2px solid #2CA01C;
}

.circle_dropdown_toggle {
    border-top-left-radius: .2rem !important;
    border-bottom-left-radius: .2rem !important;
    background-color: #dadada !important;
    border: none !important;
}

.ui-tooltip {
    background: #676867;
    color: #fff;
}

.table_overflow_absolute {
    overflow: auto;
    position: absolute;
    left: 20px;
    right: 20px;
}

    .table_overflow_absolute table {
        margin: 0px;
    }

    .table_overflow_absolute thead th {
        position: sticky;
        top: 0px;
        z-index: 9999;
        border-top: none;
    }

.modal-form {
    z-index: 99999;
}

.paging-absolute {
    bottom: 0px;
    right: 0;
    left: 20px;
    display: flex;
    align-items: center;
    z-index: 9999;
    position: absolute;
    background: #F2F2F3;
}

    .paging-absolute table {
        margin: 0px;
    }

.table-mail th {
    /*padding: 10px 20px 10px 20px;*/
}

.table-mail td {
    /*padding: 10px 20px 0px 20px;*/
}

.email-history-area .paging-fixed {
    bottom: 0;
    right: 0;
    left: 20px;
    display: flex;
    align-items: center;
    z-index: 9999;
    position: fixed;
    background: #F2F2F3;
}

.content_invoice {
    overflow: auto;
    position: absolute;
    left: 20px;
    right: 0;
    bottom: 50px;
    top: 20px;
    overflow-y: scroll;
}

.invoice-all {
    width: 100%;
    /*margin: 0px;*/
}

.data td {
    text-align: center;
    padding: 100px 0px;
}

.paging {
    bottom: -20px;
    height: 50px;
    right: 40px;
    left: 0px;
    display: flex;
    align-items: center;
    z-index: 9999;
    position: sticky;
    background: #dee2e6;
}

    .paging table {
        margin: 0px;
        height: 100%;
    }

#toast {
    position: absolute;
    top: 0px;
    min-width: 300px;
    right: 0px;
    z-index: 9999;
}

#action_history {
    border: none;
    margin: 0px;
    padding: 0px;
}

.datepicker_icon {
    background-image: url('/Images/calendar-512.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    padding-left: 30px;
}

.invoice_datepicker_icon {
    background-image: url('/Images/calendar-512.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    padding-left: 20px;
}

/*
    truongnv custom css
*/
.drop-file-box-sendmail {
    cursor: pointer;
}

.oc-widget {
    right: -19px !important;
    bottom: -12px !important;
}

.btn-start-chat .icon {
    width: 20px !important;
    height: 20px !important;
    bottom: 10px !important;
    right: 10px !important;
}

.btn-start-chat {
    bottom: 20px !important;
    right: 20px !important;
    width: 40px !important;
    height: 40px !important;
}

.mt-2.ml-4.pagination-area {
    padding-right: 70px;
}

.mt-2.mr-4.pagination-area {
    padding-right: 50px;
}

.mt-2.mr-2.pagination-area {
    padding-right: 30px;
}

.modal-footer.footer-import-product {
    padding-right: 70px;
}

.modal-footer.d-flex.justify-content-between {
    padding-right: 70px;
}

.has-tag-attment-file {
    display: inline-block;
    background: #E8F8E2 0% 0% no-repeat padding-box;
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: 0;
    color: #3797D3;
    padding: 3px 5px;
    margin-left: 3px;
    cursor: pointer;
    margin-bottom: 2px;
}

    .has-tag-attment-file:hover {
        background-color: #D9DEDB;
    }

.ddl-novaon-invoice {
    padding: 2px 5px 2px 4px;
    color: #333 !important;
    -webkit-appearance: none;
    background-image: url('/Images/arrow.png') !important;
    background-position: 88px !important;
    background-repeat: no-repeat !important;
    text-indent: 0.01px;
    background-position: 100% !important;
    -webkit-padding-end: 30px !important;
    opacity: 1;
    padding-inline-end: 20px;
    -moz-appearance: none;
    border-bottom: 1px solid #DEE2E6;
    border-radius: .2rem;
    appearance: none;
    background-size: contain !important;
    height: 26px;
    top: -2px;
    left: -3px;
}

.ddl-novaon {
    padding: 2px 5px 2px 4px;
    color: #333 !important;
    -webkit-appearance: none;
    background-image: url('/Images/dropdown-list.png');
    background-position: 88px;
    background-repeat: no-repeat;
    text-indent: 0.01px;
    background-position: 100%;
    -webkit-padding-end: 30px !important;
    opacity: 1;
    padding-inline-end: 20px;
    -moz-appearance: none;
    border: #DEE2E6 solid 1px;
    border-radius: .2rem;
    appearance: none;
    background-size: contain;
    height: 26px;
    top: -2px;
    left: -3px;
}

.ddl-novaon-header {
    padding: 2px 5px 2px 4px;
    color: #333 !important;
    -webkit-appearance: none;
    background-position: 88px;
    background-repeat: no-repeat;
    text-indent: 1.01px;
    background-position: 100%;
    -webkit-padding-end: 30px !important;
    opacity: 1;
    padding-inline-end: 20px;
    -moz-appearance: none;
    border: none;
    border-radius: .2rem;
    appearance: none;
    background-size: contain;
    height: 50px;
    top: -2px;
    left: -3px;
    width: 10%;
    color: #616161 !important;
    font-size: 20px;
}

@media (min-width: 576px) {
/*    .d-none {
        display: none !important;
    }
*/}

@media (max-width: 1367px) {

    /*.pt-5 {
        padding-top: 1rem !important;
    }*/

    .pt-4 {
        padding-top: 0.5rem !important;
    }

    .dashboard-chart .title-chart {
        font-size: 20px;
    }

    .dashboard-review-box .content-review-box {
        height: 53px;
        font-size: 25px;
    }

    .dashboard-review-box .title-review-box {
        height: 37px;
    }

    .dashboard-review-box .content-review-box small {
        font-size: 14px;
        margin-top: 5px;
    }

    h2 {
        font-size: 1.5rem;
    }

    .table_overflow_absolute {
        /*top: 117px;*/
    }
}


@media only screen and (min-width : 1824px) {
    .modal-report .modal-content .close {
        right: 20px;
        width: 54px;
        height: 54px;
        padding: 10px;
        font-size: 34px;
    }
}

/* iPhone 6 Plus portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 2) {

    #signatureControl .modal-dialog {
        width: 100%;
        height: 100%;
        max-width: 100%;
        margin: 0;
    }

    #signatureControl .signature, #signatureControl .content-upload-img {
        height: 240px;
    }
}


#leftviewer {
    background: #F6F6F6 0% 0% no-repeat padding-box;
    border: 1px solid #D9DEDB;
}


    #leftviewer > div {
        width: 250px;
        max-height: 100%;
        overflow-y: auto;
    }

        #leftviewer > div:hover {
            overflow-y: auto;
        }


    #leftviewer .item_obj {
        cursor: move;
    }

        #leftviewer .item_obj .item_label {
            font-size: 18px;
            letter-spacing: 0px;
            color: #3E3F3E;
            padding-left: 16px;
        }

    #leftviewer .spliter {
        border-top: 1px solid #D9DEDB;
        height: 1px;
    }

@media (min-width: 1024px) {
    #documentviewer {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 0;
        top: 60px;
        overflow-y: hidden;
    }
}

.page_view {
    max-width: 800px;
    position: relative;
    background: #fff;
    margin: 0 auto 50px auto;
    -webkit-box-shadow: 3px 3px 8px rgba(0,0,0,.1);
    box-shadow: 3px 3px 8px rgba(0,0,0,.1);
}

.last_page_view {
    margin: 0 auto 0px auto;
}

#centerviewer {
    padding: 0 5px 0 20px;
    margin-right: 20px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

#rightviewer {
    background: #F6F6F6 0% 0% no-repeat padding-box;
    border: 1px solid #D9DEDB;
}

    #rightviewer > div {
        width: 250px;
        max-height: 100%;
        overflow-y: auto;
        height: calc(100vh - 190px);
    }

    #rightviewer .item_file {
        background-color: transparent;
        border: none;
        border-bottom: 1px dashed #D9DEDB;
        cursor: pointer;
        line-height: 1.5em;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        text-overflow: ellipsis;
    }

        #rightviewer .item_file:hover {
            background-color: #fff;
        }

        #rightviewer .item_file .info_file p {
            font-size: 12px;
            line-height: 14px;
        }

        #rightviewer .item_file .info_file span {
            font-size: 12px;
        }

        #rightviewer .item_file .icon_file, #rightviewer .item_file .icon_file > div {
            width: 35px;
        }

            #rightviewer .item_file .icon_file > div > img {
                width: 30px;
            }

        #rightviewer .item_file .action_file {
            width: 35px;
        }

    #rightviewer .thumbview {
        text-align: center;
        position: relative;
        max-width: 80%;
        margin: auto;
    }

        #rightviewer .thumbview img {
            background: #fff;
            box-shadow: 3px 3px 8px rgba(0,0,0,.1);
            margin: 6px 0;
            cursor: pointer;
        }

        #rightviewer .thumbview span {
            position: absolute;
            left: 50%;
            bottom: 5px;
            padding: 0 5px;
            transform: translate(-50%, -50%);
            background: #E8F8E2;
            box-shadow: 3px 3px 8px rgba(0,0,0,.1);
            border: 1px solid #D9DEDB;
        }

    #rightviewer h5 {
        text-align: center;
        padding: 10px 0 10px 0;
        border-bottom: 1px solid #D9DEDB;
    }

/*
.sender-area .right-logo {
    margin-top: -100px;
}*/

.sender-area {
    background-color: white;
}

.sender-info {
    padding-top: 0.5em;
}

    .sender-info h4 {
        font-weight: bold;
    }

.signature-button {
    width: 98px;
    height: 58px;
    /*min-width: calc(100% - 88%);
        min-height: calc(98% - 95.5%);*/
    background: #e8f8e2 0% 0% no-repeat padding-box;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0;
    color: #3e3f3e;
    /*        border: 1px dashed #2ca01c;*/
    position: absolute;
    cursor: move;
    opacity: .9;
}

    .signature-button img {
        /*            min-height: 70%;
                max-height: 70%;
    */
        cursor: pointer !important;
        overflow: auto;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
    }

    .signature-button p {
        font-size: 1vw;
    }

.signature-tooltip {
    position: absolute;
    background-color: yellow;
    display: block;
}

.documentViewer-over-lay {
    position: fixed;
    /*background: rgba(0,0,0,1);*/
    background: #000000 0% 0% no-repeat padding-box;
    opacity: 0.05;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    min-height: calc(100vh - 10px);
}

/* .documentViewer-over-lay::after {
       
    }*/

.control-content {
    -webkit-box-shadow: 3px 3px 8px rgba(0,0,0,.1);
    box-shadow: 3px 3px 8px rgba(0,0,0,.1);
    background: white;
    padding: 0.5em;
    margin-bottom: 1em;
    display: none !important;
}

/*.goto-sign {*/
/*  width: 80px !important;
    height: 80px;*/
/*text-align: center;
    position: fixed;
    top: calc(50% - 40px);
    animation-name: goto-sign-effect;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    font-size: 30px;
    color: #2ca01c;
    font-family: fantasy;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: white;
}

@keyframes goto-sign-effect {
    0% {
        text-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
    }

    25% {
        text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(0, 0, 0, 0.5);
    }

    75% {
        text-shadow: 0 -3em 3em rgba(0,0,0,0.1), 0.3em 0.3em 3em rgba(0,0,0,0.3);
    }
}*/
@media (max-width: 768px) {
    #btn-success-bottom {
        /*margin-top: 20px !important;
        margin-bottom: 40px !important;*/
        margin:0 !important;
    }
    .m-mt-20 {
        margin-top:20px;
    }
}

@media (max-width: 475px) {
    .control-content {
        display: flex !important;
    }
    /*
    #documentviewer {
        left: 0;
        right: 0;
    }*/

    #rightviewer > div {
        width: auto;
    }

    #centerviewer {
        padding: 0 !important;
        margin: 0 !important;
        height: calc(100vh - 140px);
    }

    #rightviewer.mb-none {
        display: none !important;
    }

    #leftviewer.mb-none {
        display: none !important;
    }

    #leftviewer.mb-block,
    #rightviewer.mb-block {
        display: block !important;
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        width: 50%;
        z-index: 2;
    }

    /*   #leftviewer.mb-block {
        display: block !important;
        position: absolute;
        left: 0;
        bottom: 0;
        top: 0;
        width: 50%;
        z-index: 2;
    }*/

    .page_view {
        position: relative;
        background: #fff;
        margin: auto;
        -webkit-box-shadow: 3px 3px 8px rgba(0,0,0,.1);
        box-shadow: 3px 3px 8px rgba(0,0,0,.1);
    }

    .sender-area {
        padding: 0 1em 0 1em;
    }

        .sender-area .sender-info h4 {
            font-size: 14pt;
        }

        .sender-area .align-items-center {
            padding: 0 !important;
            margin: 0 0 1em !important;
        }

    #menu-footer {
        padding: 1em 0 0 !important;
    }

    #leftviewer > div {
        width: 100%;
    }
}


/*Css new*/
@font-face {
    font-family: 'GoogleSans-Regular';
    src: url('../Content/icon-font/icon_font/fonts/GoogleSan/GoogleSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'GoogleSans-Light';
    src: url('../Content/icon-font/icon_font/fonts/GoogleSan/GoogleSans-Light.ttf') format('truetype');
}

.max-w650 {
    max-width: 650px;
}

.f-gl-18 {
    font-family: 'GoogleSans-Light';
    font-size: 18px;
}

.f-gl-21 {
    font-family: 'GoogleSans-Light';
    font-size: 21px;
}

.f-gr-24 {
    font-family: 'GoogleSans-Regular';
    font-size: 24px;
}

.fw-light {
    font-weight: LIGHTER;
}

.blur-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../Content/images/sign/bg_blur1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.background-top {
    background-image: url('../Content/images/sign/bg_top_head.png');
    background-size: cover;
    height: 137px;
}

    .background-top img {
        width: auto;
        height: 60px;
    }

.gradient {
    background: transparent linear-gradient(90deg, #B91E5B 0%, #952B6E 11%, #673B87 26%, #42489C 41%, #2553AC 56%, #105AB7 71%, #045FBE 86%, #0061C1 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}

.info-customer {
    position: absolute;
    left: 50%;
    right: 0;
    top: 53%;
    z-index: 1000;
    transform: translate(-50%,-50%);
    max-width: 650px;
}

.avatar::before {
    background: #e7e7e8;
    content: '';
    display: block;
    position: absolute;
    top: -13px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    z-index: -1;
    width: 140px;
    height: 140px;
    border-radius: 100px;
    margin: 10px auto;
}

.avatar::after {
    background: transparent linear-gradient( 90deg, #B91E5B 0%, #952B6E 11%, #673B87 26%, #42489C 41%, #2553AC 56%, #105AB7 71%, #045FBE 86%, #0061C1 100%) 0% 0% no-repeat padding-box;
    content: '';
    display: block;
    position: absolute;
    top: -18px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    z-index: -2;
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin: 10px auto;
}

.avatar {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 10px auto;
    padding: 2px;
    border: solid transparent;
    border-radius: 100px;
}

.img-avatar {
    width: 100%;
    border-radius: 100px;
}

.info-avatar {
    margin-top: 20px;
    margin-bottom: 40px;
}

.title-avatar {
    position: relative;
    padding: 10px 60px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 0.85;
    font-family: 'GoogleSans-Regular';
    border-radius: 5px;
    font-size: 18px;
}

.icon-note {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 47.5%;
    right: 0;
    top: -23px;
    border-radius: 20px;
    color: #0061C1;
    background: #FFFFFF 0% 0% no-repeat padding-box;
}

.btn-begin {
    margin-top: 40px;
    color: #FFFFFF;
    background: #0061C1 0% 0% no-repeat padding-box;
    border-radius: 5px;
}
    .btn-begin:hover {
        opacity:.8;
        color:#fff;
    }

    .sign-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px solid #cecece;
        line-height: 75px;
        z-index: 1000;
    }
/*Độ phân giải từ 768px đến 1368px*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1368px) {
    .background-top {
        height: 90px;
    }

        .background-top img {
            height: 40px;
        }

    .info-customer {
        top: 51%;
    }

    .avatar {
        width: 100px;
        height: 100px;
        padding: 0;
        border-radius: 50px;
    }

        .avatar::before {
            width: 100px;
            height: 100px;
            border-radius: 50px;
        }

        .avatar::after {
            width: 110px;
            height: 110px;
            border-radius: 55px;
        }

    .info-avatar {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }


    .btn-begin {
        margin-top: 1rem;
    }
}
/*Mobile*/
@media (max-width: 767px) {

    .m-fz-16 {
        font-size: 16px;
    }

    #top-header .max-w650 {
        padding: 0px 50px;
    }

    #top-header .f-gr-24 {
        font-size: 18px;
        line-height: 1.3;
    }

    .info-customer {
        min-width: 327px;
    }

    .avatar, .avatar::before {
        width: 120px;
        height: 120px;
    }

        .avatar::after {
            width: 130px;
            height: 130px;
        }

    .icon-note {
        left: 43%;
        top: -26px;
    }

    .title-avatar {
        padding:10px 0;
    }

    .sign-footer {
        height: 75px;
        line-height: initial;
        text-align: center;
    }

        .sign-footer .d-flex {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            padding: 16px;
        }

            .sign-footer .d-flex .f-gr-24 {
                font-size: 21px;
            }

            .sign-footer .d-flex .f-gl-21 {
                font-size: 18px;
            }
}

/*!
 *   AdminLTE v2.4.3
 *   Author: Almsaeed Studio
 *	 Website: Almsaeed Studio <https://adminlte.io>
 *   License: Open source - MIT
 *           Please visit http://opensource.org/licenses/MIT for more information
 */
/*
 * Core: General Layout Style
 * -------------------------
 */

/*
 * Component: Main Header
 * ----------------------
 */
.main-header {
    position: relative;
    max-height: 100px;
    z-index: 4;
}


    .main-header .logo {
        position: relative;
        display: block;
        text-align: center;
        width: 100%;
        height: 100%;
    }

        .main-header .logo img {
            position: relative;
            display: block;
            margin: auto;
            -webkit-transition: all .5s ease;
            -o-transition: all .5s ease;
            transition: all .5s ease;
        }

        .main-header .logo .logo-lg {
            height: 19px;
            opacity: 1;
        }

        .main-header .logo .logo-mini {
            height: 28px;
        }

/*
 * Component: Sidebar
 * ------------------
 */
.main-sidebar {
    min-height: 100%;
    -webkit-transition: -webkit-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -moz-transition: -moz-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    -o-transition: -o-transform 0.3s ease-in-out, all 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, all 0.3s ease-in-out;
}
/*@media (max-width: 767px) {
  .main-sidebar {
    padding-top: 100px;
  }
}
@media (max-width: 767px) {
  .main-sidebar {
    -webkit-transform: translate(-230px, 0);
    -ms-transform: translate(-230px, 0);
    -o-transform: translate(-230px, 0);
    transform: translate(-230px, 0);
  }
}*/


.sidebar-menu {
    white-space: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sidebar-menu > li, .sidebar-menu li .treeview-menu ul li {
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        position: relative;
        padding-left: 16px;
        width: 100%;
        height: 46px;
        border-left: 5px solid rgba(44,160,28,0);
        margin-top: 16px;
        font-size: 14px;
        cursor: pointer;
        -webkit-transition: -webkit-transform .3s ease-in-out,all .3s ease-in-out;
        -moz-transition: -moz-transform .3s ease-in-out,all .3s ease-in-out;
        -o-transition: -o-transform .3s ease-in-out,all .3s ease-in-out;
        transition: transform .3s ease-in-out,all .3s ease-in-out;
    }

        .sidebar-menu > li:hover, .sidebar-menu li .treeview-menu ul li:hover {
            background: #D0F7CC 0% 0% no-repeat padding-box;
        }

        .sidebar-menu > li a, .sidebar-menu li .treeview-menu ul li a {
            display: -ms-flexbox !important;
            display: flex !important;
            height: 100%;
            width: 100%;
            color: #3E3F3E;
            overflow: hidden;
            -ms-flex-align: center !important;
            align-items: center !important;
            text-decoration: none;
            -webkit-transition: -webkit-transform .3s ease-in-out,all .3s ease-in-out;
            -moz-transition: -moz-transform .3s ease-in-out,all .3s ease-in-out;
            -o-transition: -o-transform .3s ease-in-out,all .3s ease-in-out;
            transition: transform .3s ease-in-out,all .3s ease-in-out;
        }

        .sidebar-menu > li span {
            position: relative;
            padding-left: 18px;
            left: 0;
        }

        .sidebar-menu > li:hover, .sidebar-menu li .treeview-menu ul li:hover {
            border-left: 5px solid rgba(168,237,158,1);
        }

        .sidebar-menu > li.active {
            border-left: 5px solid rgba(44,160,28,1);
            background: #D0F7CC 0% 0% no-repeat padding-box;
        }

            .sidebar-menu > li.active > a, .sidebar-menu > li:hover a, .sidebar-menu li .treeview-menu ul li:hover a {
                color: rgba(44,160,28,1);
            }

    .sidebar-menu li > a > .pull-right-container {
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -7px;
    }

    .sidebar-menu li .treeview-menu {
        display: none;
        position: absolute;
        width: 220px;
        height: auto;
        top: -1rem;
        right: -219px;
        -webkit-transition: all 10.5s ease;
        -o-transition: all 10.5s ease;
        transition: all 10.5s ease;
    }

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

    .sidebar-menu li .treeview-menu ul {
        background: #fff;
        white-space: nowrap;
        list-style: none;
        margin: 0;
        padding: 0;
        border-radius: 8px;
        -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    }

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

            .sidebar-menu li .treeview-menu ul li .arrow {
                position: absolute;
                left: -15px;
            }


    .sidebar-menu li.header, .sidebar-menu li.header:hover {
        font-weight: bold;
        letter-spacing: 0;
        color: #3E3F3E;
        background: #F6F6F6 !important;
        cursor: default !important;
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }

    .sidebar-menu > li:last-child {
        position: absolute;
        bottom: 10px;
        /*        width: 94%;*/
        border-top: 1px solid #D9DEDB;
    }
/*
 * Component: Sidebar Mini
 */
/*@media (min-width: 768px) {*/
.sidebar-mini.sidebar-collapse #right-maincontent {
    width: calc(100% - 64px);
}

.sidebar-mini.sidebar-collapse .main-sidebar {
    width: 64px !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li {
    position: relative;
    width: auto; /*47px*/
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right {
        display: none !important;
        width: 0;
        -webkit-transform: translateZ(0);
        left: -100px;
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu > li:last-child {
        position: absolute;
        width: 100%;
    }

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini {
    height: 28px;
    transform: translateY(10px);
}

.sidebar-mini.sidebar-collapse .main-header .logo > .logo-lg {
    height: 0;
    opacity: 0;
}
/*}*/


#spa-viewer {
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow-x: hidden;
    -webkit-transition: -webkit-transform .3s ease-in-out,left .3s ease-in-out;
    -moz-transition: -moz-transform .3s ease-in-out,left .3s ease-in-out;
    -o-transition: -o-transform .3s ease-in-out,left .3s ease-in-out;
    transition: transform .3s ease-in-out,left .3s ease-in-out;
    z-index: 100;
}

.sidebar-mini.sidebar-collapse #spa-viewer {
    left: 64px;
}

.full-overlay {
    /*display: none;*/
    position: absolute;
    background: rgba(0,0,0,1);
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

@media only screen and (max-width : 320px) {
    #right-maincontent {
        width: 100%;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #right-maincontent {
        width: 100%;
    }

    #spa-viewer {
        left: 0;
    }

    #left-mainnavi {
        left: -300px;
    }

    .sidebar-open #left-mainnavi {
        left: 0;
    }

    .sidebar-open .full-overlay {
        opacity: .7;
        z-index: 3;
    }

    #fc-add, #fc-help, .navi-search, #top-header .icon-search {
        display: none !important;
    }
}


/* Make clicks pass-through */
#loading-bar,
#loading-bar-spinner {
    pointer-events: none;
    -webkit-pointer-events: none;
    -webkit-transition: 350ms linear all;
    -moz-transition: 350ms linear all;
    -o-transition: 350ms linear all;
    transition: 350ms linear all;
}

    #loading-bar.ng-enter,
    #loading-bar.ng-leave.ng-leave-active,
    #loading-bar-spinner.ng-enter,
    #loading-bar-spinner.ng-leave.ng-leave-active {
        opacity: 0;
    }

        #loading-bar.ng-enter.ng-enter-active,
        #loading-bar.ng-leave,
        #loading-bar-spinner.ng-enter.ng-enter-active,
        #loading-bar-spinner.ng-leave {
            opacity: 1;
        }

    #loading-bar .bar {
        -webkit-transition: width 350ms;
        -moz-transition: width 350ms;
        -o-transition: width 350ms;
        transition: width 350ms;
        background: #24f83c;
        position: fixed;
        z-index: 10002;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        border-bottom-right-radius: 1px;
        border-top-right-radius: 1px;
    }

    /* Fancy blur effect */
    #loading-bar .peg {
        position: absolute;
        width: 70px;
        right: 0;
        top: 0;
        height: 3px;
        opacity: .45;
        -moz-box-shadow: #29d 1px 0 6px 1px;
        -ms-box-shadow: #29d 1px 0 6px 1px;
        -webkit-box-shadow: #29d 1px 0 6px 1px;
        box-shadow: #29d 1px 0 6px 1px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
    }

#loading-bar-spinner {
    display: block;
    position: fixed;
    z-index: 10002;
    top: 10px;
    right: 10px;
}

    #loading-bar-spinner .spinner-icon {
        width: 16px;
        height: 16px;
        border: solid 3px transparent;
        border-top-color: #24f83c;
        border-left-color: #24f83c;
        border-radius: 10px;
        -webkit-animation: loading-bar-spinner 400ms linear infinite;
        -moz-animation: loading-bar-spinner 400ms linear infinite;
        -ms-animation: loading-bar-spinner 400ms linear infinite;
        -o-animation: loading-bar-spinner 400ms linear infinite;
        animation: loading-bar-spinner 400ms linear infinite;
    }

@-webkit-keyframes loading-bar-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@-moz-keyframes loading-bar-spinner {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@-o-keyframes loading-bar-spinner {
    0% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@-ms-keyframes loading-bar-spinner {
    0% {
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes loading-bar-spinner {
    0% {
        transform: rotate(0deg);
        transform: rotate(0deg);
    }

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