/* Global Variable */
:root {
    --peak-color-grey: #333;
}


@font-face {
    font-family: "CordiaUPC_1230459";
    /*Normal*/
    src: url("Fonts/a2d6e875-5088-4138-96fd-e9c1918ff67c.eot?#iefix");
    src: url("Fonts/a2d6e875-5088-4138-96fd-e9c1918ff67c.eot?#iefix") format("eot"), url("Fonts/18841783-82f2-4ed6-be97-b2162f8239fc.woff2") format("woff2"), url("Fonts/1c24d67e-fe50-4a96-a547-6cb897481d85.woff") format("woff"), url("Fonts/30702dc8-e7f0-4e52-9e45-7caddbd10f4c.ttf") format("truetype"), url("Fonts/817c28b2-5f09-490d-b52b-4fcff395d48a.svg#817c28b2-5f09-490d-b52b-4fcff395d48a") format("svg");
}

@font-face {
    font-family: "CordiaUPC_1230461";
    /*Bold*/
    src: url("Fonts/59c7d9e6-1f1b-4722-9b7e-8c005477261b.eot?#iefix");
    src: url("Fonts/59c7d9e6-1f1b-4722-9b7e-8c005477261b.eot?#iefix") format("eot"), url("Fonts/6af9a6a7-3cc1-453a-be90-0a14d7406ee8.woff2") format("woff2"), url("Fonts/81fcd7f5-3360-4cf2-a2b4-bf98888890b0.woff") format("woff"), url("Fonts/63f27059-502f-42f4-8cdf-5d4effc431d2.ttf") format("truetype"), url("Fonts/4e159b5e-ad35-47b9-b295-96e4f5a2f8b2.svg#4e159b5e-ad35-47b9-b295-96e4f5a2f8b2") format("svg");
}

@font-face {
    font-family: "CordiaUPC_1230463";
    /*Italic*/
    src: url("Fonts/82293b73-958f-412f-b817-01293b3b2a22.eot?#iefix");
    src: url("Fonts/82293b73-958f-412f-b817-01293b3b2a22.eot?#iefix") format("eot"), url("Fonts/dfb9c099-9752-427e-96e2-2d22150d2b78.woff2") format("woff2"), url("Fonts/019496e6-41e5-470f-9a49-9229b1f93958.woff") format("woff"), url("Fonts/9ce7e90c-b02a-4788-8e04-6f4640dc1a2f.ttf") format("truetype"), url("Fonts/a06a856c-fef7-43c0-91ee-330144b20b7c.svg#a06a856c-fef7-43c0-91ee-330144b20b7c") format("svg");
}

@font-face {
    font-family: 'micrenc';
    src: url('fonts/micrenc.ttf') format('truetype');
}

@font-face {
    font-family: "FontAwesome";
    src: url('fonts/fontawesome-webfont.eot'), /*for IE */
    url('font-awesome/css/fontawesome-webfont.ttf'), url('font-awesome/css/fontawesome-webfont.svg') format('svg');
    /* for CSS3 browsers */
}

.tbpayment td {
    padding: 0 10px 10px 10px;
}

.red {
    color: red;
}

.alert-cheque:after {
    content: "";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
}

.alert-cheque {
    float: right;
    width: 50% !important;
    line-height: 30px;
}

    .alert-cheque span.red {
        float: left;
        margin-left: 10px;
    }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}


/*------------------------------------*$GENERAL ELEMENT*------------------------------------*/

* {
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
    color: #333333;
    background: #f0f0f0;
    background-image: url(images/debut_light.png);
    font-family: "CordiaUPC_1230459";
    font-size: 22px;
}

a {
    color: #6699cc;
    cursor: pointer;
}

    a:hover {
        color: #336699;
    }

    a,
    a:active,
    a:focus {
        outline: none;
    }

nav a:hover {
    color: #0a579b;
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "CordiaUPC_1230461";
}

h1 {
    color: #fff;
    /*font-size: 2em;*/
}

h2 {
    color: #333333;
    /*font-size: 1.2em;*/
}

h3 {
    color: #666666;
    /*font-size: 1em;*/
}

img {
    padding-right: 5px;
}

.heading {
    /*display: inline;*/
    float: left;
}

.clear {
    clear: both;
}

.clear-space {
    margin: 0 !important;
    padding: 0 !important;
}

.clear-left {
    margin-left: 0 !important;
}

.clear-right {
    margin-right: 0 !important;
}

.clear-bottom {
    margin-bottom: 0 !important;
}

.clear-margin {
    margin: 0 !important;
}

.clear-bd {
    border: none;
}

.add-opacity {
    opacity: 0;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

strong {
    font-family: "CordiaUPC_1230461" !important;
}

select,
input,
textarea {
    line-height: normal;
    background-color: #faffff;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    color: #333;
    font-family: "CordiaUPC_1230459";
    padding-left: 5px;
    padding-right: 5px;
    /*text-indent: 5px;*/
    word-wrap: break-word;
}

select {
    height: 30px;
    text-indent: 0;
}

textarea {
    padding-left: 5px;
    box-sizing: border-box;
    resize: none;
}

.opera input[type="password"],
.webkit input[type="password"] {
    font: large Verdana, sans-serif;
    letter-spacing: 1px;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #AAAAAA;
    opacity: 0.3;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #999999;
    opacity: 0.3;
    font-size: 20px;
}

table::-moz-placeholder {
    /* Firefox 19+ */
    color: #333333;
    opacity: 0.3;
    font-size: 20px;
}

:-ms-input-placeholder {
    /* IE 10+ */
    color: #AAAAAA;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #AAAAAA;
}

.boxsizingBorder {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/*------------------------------------*$CONTENT*------------------------------------*/

#wrapper {
    min-height: 100%;
    margin: 0 auto;
}

.basic-container {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ddd;
    float: left;
    box-sizing: border-box;
}

.dark {
    background: #000;
    z-index: 1000;
}

.blur {
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    -webkit-filter: blur(5px);
    filter: blur(5px);
}


/*Menu*/

#header {
    min-width: 100%;
    height: 100px;
    float: left;
    background-color: #6699cc;
}

.headerContent {
    width: 960px;
    margin: 0 auto;
    padding: 0 10px;
    line-height: 40px;
    color: #ffffff;
    box-sizing: border-box;
}

.peak-logo {
    width: 100px;
    height: 100px;
    background: black;
}

#header-bottom {
    min-width: 100%;
    line-height: 25px;
    margin-bottom: 30px;
    float: left;
    background-color: #ffffff;
    border-bottom: 1px solid #DDDDDD;
    top: 100px;
    z-index: 1;
    padding: 0 15px;
    box-sizing: border-box;
}

    #header-bottom .headerContent {
        color: #333333;
    }

.peak-header {
    min-width: 100%;
    float: left;
    position: relative;
    z-index: 100;
}

.peak-header-top {
    width: 100%;
    float: left;
    line-height: 10px;
    background-color: #3377bb;
    font-size: 20px;
    z-index: 1;
    padding: 0 15px;
    box-sizing: border-box;
}

.peak_menu {
    background: #6699dd;
    width: 100%;
    float: left;
    padding: 0 15px;
    box-sizing: border-box;
}

#header .ui.selection.dropdown {
    min-width: 300px;
    background: #6699cc;
    color: #fff;
    border: none;
}

#header .ui.selection.active.dropdown > .text:not(.default),
.ui.selection.visible.dropdown > .text:not(.default) {
    color: #fff;
}

.cpn-name {
    float: left;
}

    .cpn-name > .ui.selection.dropdown {
        margin-left: -5px;
        background: none;
        color: #fff;
        border: none;
    }

        .cpn-name > .ui.selection.dropdown .menu {
            top: 120%;
        }


/*ขนาดพื้นที่แสดงผลชื่อบริษัทหรือชื่อบุคคล*/

.ui.selection.dropdown.cpn-dropdown {
    min-width: 140px;
    max-width: 300px;
}

.cpn-dropdown .icon-chevron-down {
    float: right;
    line-height: 15px;
}

.chevron-dropdown {
    font-size: 10px;
    color: #FFFFFF;
}

.ui.selection.dropdown .menu.cpn-dd-fx {
    min-width: 260px;
}


/*สีชื่อบริษัท*/

.cpn-name-detail {
    color: #fff !important;
}

.text-merchant-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 140px;
    max-width: 280px;
    overflow: hidden;
    vertical-align: middle;
}

.cpn-section {
    width: 43%;
    float: left;
}

    .cpn-section .ui.label {
        min-width: 60px;
        border-radius: 0.15em;
        padding: 0 0.2em;
        color: #fff;
        font-family: 'CordiaUPC_1230461';
    }

.user-section-right {
    float: right;
}

    .user-section-right .fa {
        color: #6699dd;
        margin-right: 5px;
    }

    .user-section-right a {
        text-decoration: none;
    }

    .user-section-right > .ui.dropdown .menu {
        top: 150%;
    }



#header .ui.selection.active.dropdown > .text:not(.default),
.ui.selection.visible.dropdown > .text:not(.default) {
    color: #fff;
}

.logo-app {
    padding: 0 0.95em;
    font-size: 1rem;
    color: #000000;
    position: relative;
    display: inline-block;
    border-top: 0 solid transparent;
    background: transparent none repeat scroll 0 0;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    transition: opacity 0.2s ease 0s, background 0.2s ease 0s, box-shadow 0.2s ease 0s;
}

    .logo-app:hover {
        background: #69D;
    }

.peak-menu .menu-img {
    max-width: 20px;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    padding-right: 0;
}

.peak-menu .menu-img-home {
    max-width: 20px;
    display: block;
    margin: 0 auto;
    margin-bottom: 12px;
    padding-right: 0;
}

.user-section-alert {
    display: inline-block;
    border-right: 1px solid #fff;
    margin-right: 10px;
    padding: 0 10px;
}

    .user-section-alert img {
        position: relative;
        top: 2px;
    }


/*เปลี่ยนขนาดลูกศรที่อยู่ภายใน dropdown menu*/

.item > .fa-chevron-right {
    position: absolute;
    right: 5px;
    top: 20px;
    font-size: 12px;
}

.ui.menu .item:hover {
    background: #3377bb;
}

.ui.menu .active.item {
    background: #3377bb;
}

.ui.menu .ui.dropdown.item.visible {
    background: #3377bb;
}


/*ปุ่มสร้าง+สีตัวอักษรภายในปุ่มสร้าง*/

.ui.dropdown .menu > .item.create-button {
    background: #00B5AD;
    color: #FFF;
    border-radius: 0 0 5px 5px;
}


/*Menu*/

.ui.menu .item {
    padding: 0.50em 1.2em 0.47em;
}

    .ui.menu .item > a:not(.ui),
    .ui.menu .item > p:only-child,
    .ui.menu .text.item > * {
        color: #fff;
        text-decoration: none;
    }

.user-section-right > .ui.dropdown {
    min-width: auto;
    text-align: right;
}


/*ขนาดของรูป icon ภายใน Profile Dropdown*/

.profile-dropdown img {
    max-width: 20px;
    position: relative;
    top: -2px;
}

.language-container {
    float: left;
}

    .language-container img {
        max-width: 24px;
        float: left;
        position: relative;
        top: 12px;
        margin-right: 10px;
    }


/*Manual Section*/

.manualdl-container {
    margin-right: 15px;
    position: relative;
}



    .manualdl-container a:hover {
        text-decoration: underline;
    }

    .manualdl-container img {
        max-width: 16px;
        position: absolute;
        top: 12px;
        left: -22px;
    }

    .manualdl-container p {
        color: #ffffff !important;
        border-right: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
        padding: 0px 15px;
        line-height: 28px;
        margin: 6px 0px;
    }

/*New menu*/
.container {
    padding: 0;
}

.navbar {
    border: none;
}

.menu-newpeak {
    cursor: pointer;
    display: flex;
    align-items: center;
}

    .menu-newpeak img {
        padding: 0px;
        margin-left: 10px;
    }

    .menu-newpeak a {
    }

    .menu-newpeak .to-newPeak {
        margin-right: 20px;
        padding: 4px 10px;
        width: max-content;
    }

.to-newPeak {
    background: #333;
    font-size: 18px;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 0 6px 0 rgba(86, 176, 235, 0.49);
    background: linear-gradient(90deg, rgba(108,109,242,1) 0%, rgba(68,229,230,1) 100%) !important;
}

.to-newPeak-nav {
    width: 60px;
    background: #333;
    font-size: 18px;
    color: white;
    padding: 0px 10px;
    border-radius: 4px;
    box-shadow: 0 0 6px 0 rgba(86, 176, 235, 0.49);
    background: linear-gradient(90deg, rgba(108,109,242,1) 0%, rgba(68,229,230,1) 100%) !important;
    cursor: pointer;
    float: right;
}

.to-newPeak p {
    margin-right: 0px !important;
}

.peak_menu .navbar {
    margin: 0;
    color: #fff !important;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #ccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

    .dropdown-submenu.active > .dropdown-menu {
        display: block;
    }

    .dropdown-submenu.active > a:after {
        border-left-color: #fff;
    }

    .dropdown-submenu > a::after {
        margin-top: 10px;
        border-left-color: #6699CC;
    }

.navbar-logo {
    padding: 0 20px 0 0;
    box-sizing: border-box;
}

    .navbar-logo img {
        max-width: 48px;
        padding: 11px 0;
        vertical-align: middle;
    }

.peak-navbar-logo img {
    max-width: 100px;
    padding: 22px 20px 22px 0;
    vertical-align: middle;
    cursor: pointer;
}

.tcc-navbar-logo img {
    max-width: 48px;
    padding: 7px 20px;
    vertical-align: middle;
}

.navbar-nav > li::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .05) 100%);
}

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
    background: #3377bb;
}

.nav > li > a {
    padding: 11px 0;
    text-align: center;
    width: 90px;
}


.navbar-collapse.collapse {
    overflow: visible !important;
}

.peak-menu-container {
    width: 960px;
    padding: 0 15px;
    margin: 0 auto;
    box-sizing: border-box;
}

.peak-dropdown-menu li:hover {
    background: #F7F7F7;
}

.peak-menu .ic {
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    color: #FFFFFF;
}

.peak-menu .icon-chevron-right {
    color: #666666;
}

.create-button {
    background: #00B5AD;
    color: #FFFFFF !important;
    border-radius: 0 0 5px 5px;
}

    .create-button:hover {
        background: #00B5AD !important;
    }

    .create-button:active {
        background: #00B5AD !important;
    }

.dropdown-menu {
    padding: 0;
    box-shadow: none;
    border-radius: 5px;
    border: 1px solid #ddd;
    min-width: 100px;
}

.dropdown p {
    margin-right: 15px;
}

.dropdown-menu > li > a {
    padding: 10px;
}

.peak-menu .dropdown-menu li i {
    position: absolute;
    top: 20px;
    right: 10px;
    text-align: right;
    font-size: 10px;
}

.dropdown-menu li:hover {
    background: #EFEFEF;
}


/* menu on hover - with animation */

.dropdown.drop-collapsed .dropdown-menu {
    height: 0 !important;
    z-index: -1;
}

.navbar .navbar-nav .open .dropdown-menu {
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .175);
}

.peak-menu .dropdown:hover > .dropdown-menu {
    display: block;
}

.peak-menu .dropdown.open > .dropdown-menu,
.dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.dropdownHover > .dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transition-delay: 0s !important;
    display: block !important;
}

.peak-menu .dropdown-menu {
    visibility: hidden;
    display: block;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s linear;
}

.dropdown > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #999;
    margin-top: 5px;
    margin-right: -10px;
}

.lead {
    font-size: 16px;
}

.page-header {
    margin-bottom: 30px;
}

    .page-header .lead {
        margin-bottom: 10px;
    }

.container .navbar-header,
.container .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}

.navbar-header {
    float: left;
}

.navbar-collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
}

.navbar-toggle {
    display: none;
}

.navbar-collapse {
    border-top: 0;
}

.navbar-brand {
    margin-left: -15px;
}

.navbar-nav {
    float: left;
    margin: 0;
}

    .navbar-nav > li {
        float: left;
    }

    .navbar-nav.navbar-right {
        float: right;
    }

.navbar .navbar-nav .open .dropdown-menu {
    position: absolute;
    float: left;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-width: 0 1px 1px;
    border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #333;
}

.navbar .navbar-nav .open .dropdown-menu > .disabled > a,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:hover,
.navbar .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #999 !important;
    background-color: transparent !important;
}

@media (max-width: 767px) {
    .dropdown-header,
    .navbar-nav .open .dropdown-menu > li > a {
        padding: 10px 20px;
        line-height: 1.42857143;
    }
}

.dropdown > a::after {
    display: none;
}

.right-menu {
    position: absolute;
    top: -3px;
    left: 100%;
}

.navbar-brand,
.navbar-nav > li > a {
    color: #FFFFFF;
}


/*Begin Content*/

#content {
    width: 960px;
    margin: 0 auto;
}

.main-div {
    width: 100%;
    float: left;
}

#footer {
    background: #323232;
    border-top: 10px solid #fff;
    box-shadow: 1px 1px 2px #c8c8c8;
    min-width: 100%;
    line-height: 40px;
    float: left;
    margin-top: 20px;
}

#footerContent, #footerVersion {
    margin: 0 auto;
    width: 960px;
    box-sizing: border-box;
    color: #ffffff;
    text-align: center;
    font-weight: normal;
    line-height: 1.5;
}

#footerContent {
    padding-bottom: 10px;
}

#footerVersion {
    padding-top: 10px;
}


.top-left {
    width: 400px;
    float: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nav-content {
    width: 100%;
    margin-bottom: 25px;
    float: left;
}

    .nav-content li {
        float: left;
        line-height: 40px;
    }

.create-doccument {
    line-height: 40px;
}

.nav-table {
    width: 100%;
    height: 30px;
}


    /*เปลี่ยนสี Tab ที่กำลัง Active*/

    .nav-table ul a li.active2 {
        background: #6699CC;
        color: #FFF;
    }

.menu-list {
    width: 100px;
    height: 30px;
    background: #FFF;
    margin: auto;
}

.first {
    float: left;
}


/*เปลี่ยนลักษณะของ Tab ทั้งแบบปกติ และ Active*/

.nav-table li {
    width: auto;
    min-width: 9%;
    padding-left: 7px;
    padding-right: 7px;
    background: #FFFFFF;
    text-align: center;
    line-height: 30px;
    border-left: 1px solid #DDD;
    border-top: 1px solid #DDD;
    color: #666666;
}


.nav-table-first {
    border-radius: 5px 0 0 0;
}

.nav-table .nav-table-last {
    color: #FFF;
    background: #00B5AD;
    border-right: 1px solid #DDDDDD;
    border-radius: 0 5px 0 0;
}

    .nav-table .nav-table-last:hover {
        color: #FFF;
    }

.nav-table-last2 {
    border-right: 1px solid #DDDDDD;
    border-radius: 0 5px 0 0;
}

.nav-table .nav-table-one {
    color: #FFF;
    background: #00B5AD;
    border-right: 1px solid #DDDDDD;
    border-radius: 5px 5px 0 0;
}


/*Table*/

.table-header {
    width: 100%;
    float: left;
    padding: 10px;
    border-radius: 0px 5px 0 0;
    border: 1px solid #DDDDDD;
    border-top: none;
    line-height: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.table-header-blue {
    background: #6699cc;
}

.table-header-green {
    background: #019026;
    overflow: hidden;
}

.table-header-left {
    float: left;
    display: flex;
}

    .table-header-left span {
        margin-left: 15px;
        color: #fff;
    }


.table-header-center {
    margin: 0 auto;
    color: #FFF;
    width: 300px;
    text-align: center;
}

.table-header-right {
    float: right;
}

    .table-header-right p {
        display: inline;
        position: relative;
        right: 10px;
        color: #fff;
        text-decoration: underline;
        cursor: pointer;
    }

        .table-header-right p:hover {
            color: #f0f0f0;
        }

    .table-header-right img {
        vertical-align: middle;
    }

.table-footer {
    width: 100%;
    line-height: 50px;
    float: left;
    color: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #DDDDDD;
    border-top: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.table-footer-blue {
    background: #6699CC;
}

.table-footer-green {
    background: #019026;
}

.table-footer-left {
    margin-left: 10px;
    float: left;
}

.table-footer-right {
    margin-right: 10px;
    float: right;
}

.table-footer-left select {
    margin-left: 10px;
}

.table-footer-left span {
    margin-left: 10px;
}

.table-footer-right select {
    margin-left: 10px;
}

.table-footer-right span {
    margin-left: 10px;
}

.radius-fix {
    /*border-radius: 5px;*/
}

.pointer {
    cursor: pointer;
}

.tdcustomername {
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tdproductname {
    text-align: left !important;
    overflow: hidden !important;
}

.tdcustomeremail {
    text-align: left !important;
}

.tdcode {
    text-align: left !important;
    padding-right: 0 !important;
}

.tdstatus {
    text-align: left;
    padding-left: 40px !important;
}

.tdmoney {
    text-align: right !important;
    padding-right: 10px !important;
    /*padding-right: 30px !important;*/
}

.tabred {
    color: #f37b76 !important;
}

table {
    empty-cells: show !important;
}

    table th {
        color: #333;
        box-sizing: border-box;
        vertical-align: middle;
    }

    table td {
        /*border-bottom: 1px solid #ddd;*/
        /*line-height: 30px;*/
        color: #646464;
        box-sizing: border-box;
        vertical-align: middle;
    }

.tg {
    width: 100%;
    line-height: 30px;
    color: #ffffff;
    float: left;
    border-collapse: collapse;
    border-right: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    table-layout: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    empty-cells: hide;
}

    .tg th {
        border-bottom: 1px solid #DDDDDD;
        word-break: normal;
        color: #646464;
        text-align: center;
        vertical-align: middle;
        /*-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;*/
        padding: 10px;
        box-sizing: border-box;
    }

    .tg td {
        border-bottom: 1px solid #DDDDDD;
        word-break: normal;
        text-align: center;
        overflow: visible;
        word-wrap: break-word;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        vertical-align: middle;
        padding: 10px;
    }

.header-text th:hover {
    background: #eaeff5;
}

.th {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    line-height: 45px;
    color: #ffffff;
    float: left;
    border-radius: 0 5px 0 0;
    text-align: right;
    margin-top: 30px;
}

    .th th span {
        font-size: 12px;
        color: #6699cc !important;
    }

    .th td {
        padding: 5px 5px 5px 5px;
        border-style: solid;
        border-bottom: 1px solid #DDDDDD;
        overflow: hidden;
        word-break: normal;
        text-align: center;
    }

    .th th {
        vertical-align: middle;
        padding: 5px 10px;
        border-style: solid;
        word-break: normal;
    }

    .th tr {
        border-bottom: 1px solid #DDDDDD;
    }

.ft {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    line-height: 45px;
    background: #6699cc;
    color: #ffffff;
    float: left;
    border-radius: 0 0 5px 5px;
    box-shadow: 1px 1px 2px #c8c8c8;
    text-align: right;
}

    .ft td {
        padding: 5px 5px 0 5px;
        border-style: solid;
        border-bottom: 1px solid #DDDDDD;
        overflow: hidden;
        word-break: normal;
        text-align: center;
    }

    .ft th {
        padding: 5px 10px;
        border-style: solid;
        word-break: normal;
    }

    .ft tr {
        border-bottom: 1px solid #DDDDDD;
    }

.row-hover {
    width: 100%;
    line-height: 30px;
    background: #fff;
    color: #666666;
    cursor: pointer;
}

    .row-hover:hover {
        background: #F5FAFE;
        color: #6699cc;
    }

.row-super-admin {
    width: 100%;
    line-height: 30px;
    background: #fff;
    color: #666666;
    cursor: initial !important;
}

.search-box {
    width: 160px;
    height: 40px;
    border-radius: 5px;
    text-align: center;
    float: right;
}


/*
.new-invoice {
    min-height: 100%;
    color: #646464;
    background: #fff;
    padding: 30px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #DDDDDD;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}*/


/*New Create Invoice*/

.new-invoice {
    min-height: 100%;
    color: #646464;
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

.new-invoice-payment {
    border-radius: 5px 5px 0 0;
}

.headtext-invoice {
    text-align: center;
    padding-bottom: 20px;
    font-size: 28px;
}

.headtext-invoice-detail {
    /*width: 45%;*/
    float: left;
    text-align: left;
    font-size: 28px;
    line-height: 60px;
}

    .headtext-invoice-detail span {
        margin-left: 10px;
        font-size: 22px;
    }

.invoice-status {
    float: right;
    position: relative;
    top: -60px;
    right: 20px;
}

.invoice-header {
    width: 100%;
    float: left;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

    .invoice-header li {
        float: left;
        padding: 5px;
    }

.border-remove {
    border-top: none;
}

.invoice-header li:last-child {
    float: right;
}

.invoice-header-description li:last-child {
    float: left;
}

.invoice-header-description li:first-child {
    width: 100px;
    text-align: left;
}

.invoice-header label {
    text-align: left;
    display: block;
    margin-bottom: 10px;
}

.customer-name {
    line-height: 30px;
    text-align: center;
    color: #656565;
}

.invoice-number {
    width: 120px;
    line-height: 30px;
    font-size: 14px;
}

.vat-list {
    width: 120px;
    height: 30px;
    /*margin-left: 30px;*/
}

.label-large {
    width: 200px !important;
}

.date-input {
    width: 100px;
    height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.date-fitinput {
    width: 88px;
    height: 30px;
    text-align: center;
    text-indent: 0;
}

.docnumber-input {
    width: 140px;
    height: 30px;
}

.table-invoice-customer {
    /*border-spacing: 1;*/
    width: 100%;
    color: #646464;
    margin-top: 25px;
    /*line-height: 40px;*/
    background: #F0F0F0;
    float: left;
    text-align: center;
    border: 1px solid #DDDDDD;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    border-collapse: separate;
    box-sizing: border-box;
}

    .table-invoice-customer td {
        background: #FAFFFF;
        border-style: solid;
        border-left: 1px solid #e0e2e4;
        border-bottom: 1px solid #e0e2e4;
        text-align: center;
    }

        .table-invoice-customer td:first-child {
            border-left: none;
        }

    .table-invoice-customer th {
        text-align: center;
        padding: 10px 5px;
        word-break: normal;
        border-bottom: 1px solid #ddd;
    }

td.close-tab {
    background: #f0f0f0;
    cursor: pointer;
}

.close-tab {
    padding: 5px;
    width: 30px;
}

    .close-tab .fa-times:hover {
        color: #f35353;
    }


/*Disable ตาราง*/

.table-disable tr td {
    background: #F0F0F0;
}

.table-disable input {
    background: #F0F0F0;
    border: 0;
}

.table-disable textarea {
    background: #F0F0F0;
    border: 0;
}

.ps-textarea .table-disable {
    background: #F0F0F0;
    border: 0;
}

.table-disable select {
    background: #F0F0F0;
    border: 0;
}

.enable {
    background: #f3f8fb !important;
    border: 1px solid #c8c8c8 !important;
}

.table-disable .fa {
    color: #c8c8c8;
}

    .table-disable .fa:hover {
        color: #c8c8c8;
    }

.full-dropdown {
    width: 100%;
}


/*ปรับ input ให้เต็มช่องในตาราง*/

.table-input.unit-input {
    width: 50px;
}

.table-input {
    height: 50px;
    width: 100%;
    border: none;
    border-radius: 0;
}

.before-tax {
    text-align: right;
}

.form-table {
    width: 150px;
    height: 100%;
    border: 0;
    word-wrap: break-word;
    position: relative;
}

    .form-table:focus {
        border: 1px solid #42a1eb;
        box-shadow: 1px 0 2px #42a1eb;
    }

    .form-table > .ui.selection.dropdown {
        padding: 0;
        width: 100%;
        line-height: 50px;
    }

    .form-table .ui.selection.dropdown > .delete.icon,
    .ui.selection.dropdown > .dropdown.icon,
    .ui.selection.dropdown > .search.icon {
        padding: 1.5em 0.2em;
    }

    .form-table .ui.search.selection.dropdown > input.search {
        margin: 0.5em 0.4em;
    }

.textarea-description textarea {
    padding: 5px;
    margin: 0;
    line-height: 20px;
    border-radius: 0;
    border: 0;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    text-indent: 0;
}

    .textarea-description textarea:focus {
        border: 1px solid #6699cc;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: 148px !important;
    }

.invoice-result {
    width: 100%;
    float: left;
    margin-top: 30px;
}

.invoice-result-box {
    float: right;
    text-align: right;
}

    .invoice-result-box span {
        margin-left: 10px;
    }

    .invoice-result-box li {
        padding-top: 10px;
    }

        .invoice-result-box li span {
            font-family: 'CordiaUPC_1230461';
        }


/*total*/

.total-result {
    float: right;
    text-align: right;
}

    .total-result span {
        margin-left: 10px;
    }

    .total-result li {
        padding-top: 10px;
    }

        .total-result li span {
            font-family: 'CordiaUPC_1230461';
        }

        .total-result li:first-child {
            padding-top: 0;
        }


/*Total*/

.line-full-width {
    width: 100%;
    height: 1px;
    background: #f0f0f0;
    float: left;
}

.line-main {
    width: 960px;
    height: 1px;
    background: #c8c8c8;
    float: left;
}

.line {
    width: 800px;
    height: 1px;
    background: #959595;
    float: left;
}

.line-first {
    width: 105px;
    height: 1px;
    background: #e9e9e9;
    float: right;
}

.line-second {
    width: 300px;
    height: 1px;
    background: #000;
    float: right;
}

.line-third {
    width: 300px;
    height: 1px;
    background: #000;
    float: right;
    margin-top: 3px;
}

.line-payment {
    width: 140px;
    height: 1px;
    background: #000;
    float: right;
}

.line-payment-summary {
    width: 140px;
    height: 1px;
    background: #000;
    float: right;
    margin-top: 3px;
}

.ps-textarea {
    float: left;
    text-align: left;
    font-size: 20px;
}

    .ps-textarea li {
        margin-bottom: 10px;
        word-break: break-word;
    }

    .ps-textarea textarea {
        width: 400px;
        height: 120px;
        text-indent: 0;
    }

.crt-left {
    color: #D95C5C;
}

.save-section {
    width: 100%;
    float: left;
    margin-top: 20px;
}

    .save-section h3 {
        float: left;
        margin-bottom: 10px;
    }

.popup-payment {
    width: 900px;
}

.invoice-recieve {
    width: 100%;
    float: left;
    background: #ffffff;
    border-radius: 5px 5px 0 0;
    border: 1px solid #DDDDDD;
    padding: 30px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.invoice-recieve-radius {
    border-radius: 5px;
    margin-bottom: 30px;
}

.invoice-recieve label {
    display: block;
}

.invoice-recieve-body {
    width: 100%;
    float: left;
    position: relative;
}

    .invoice-recieve-body h2 {
        margin-bottom: 20px;
    }

    .invoice-recieve-body label {
        display: block;
    }


/*total payment*/

.total-payment {
    width: 100%;
    float: left;
    background: #eff5fa;
    border-radius: 0 0 5px 5px;
    border: 1px solid #DDDDDD;
    border-top: none;
    margin-bottom: 30px;
    padding: 30px;
    position: relative;
    box-sizing: border-box;
}

.total-lst {
    margin-bottom: 10px;
}

.total-deb {
    font-size: 16px;
}

.total-payment-left {
    float: left;
    width: 60%;
    line-height: 60px;
}

.total-payment-right {
    float: right;
    width: 40%;
    line-height: 10px;
}

    .total-payment-right p {
        line-height: 60px;
        font-family: 'CordiaUPC_1230461';
        position: absolute;
        right: 200px;
    }

    .total-payment-right li:last-child {
        padding-left: 30px;
        margin-left: 30px;
    }

.button-all-rt {
    width: 200px;
    position: absolute;
    right: 0;
    top: 10px;
}

.total-bottom {
    position: absolute;
    right: 180px;
}

.total-payment-gateway {
    right: 30px;
}

.total-bottom-btn {
    position: relative;
}

.clear-sp-button {
    margin-right: 0 !important;
}


/*Select*/

.invoice-inputfield {
    width: 750px;
    float: left;
    margin-left: 30px;
}

    .invoice-inputfield li {
        padding: 10px;
        float: left;
    }

.select-bank {
    width: 240px;
    height: 30px;
    border-radius: 3px;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
}

    .select-bank:hover {
        white-space: normal !important;
    }

    .select-bank a {
        height: 30px;
        width: 220px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inherit;
    }

.small-result {
    width: 150px;
    padding-top: 50px;
    padding-right: 20px;
    float: right;
    box-sizing: border-box;
}

    .small-result li {
        padding: 10px;
    }

.invoice-detail {
    width: 100%;
    /*overflow: hidden;*/
    margin-bottom: 30px;
    padding: 30px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
    float: left;
}

.invoice-detail-header {
    width: 100%;
    float: left;
    line-height: 80px;
    border-bottom: 1px solid #DDDDDD;
}

    .invoice-detail-header .ui.header:first-child {
        margin: 0 0 15px 0 !important;
    }

    .invoice-detail-header .fa-circle {
        font-size: 12px;
    }

    .invoice-detail-header li {
        padding: 5px;
    }

    .invoice-detail-header span {
        font-size: 22px;
    }

.invoice-detail-button {
    width: auto;
    height: auto;
    float: right;
    line-height: 30px;
}

.option-button {
    color: #fff !important;
    border: none;
}

.invoice-detail-summarize {
    float: left;
    width: 100%;
    margin-top: 30px;
    /*margin-bottom: 30px;*/
    border-bottom: 1px dashed #c8c8c8;
}

.invoice-detail-address {
    width: 300px;
    float: left;
    position: relative;
    top: -4px;
}

.customer-detail {
    width: 50px;
    float: left;
    margin-right: 30px;
}

.detail-address {
    width: 220px;
    float: left;
}

    .detail-address li {
        padding-bottom: 10px;
    }

.edit-name-merchant {
    white-space: nowrap;
    text-overflow: ellipsis !important;
    width: 220px;
    overflow: hidden;
    vertical-align: middle;
    padding-top: 4px;
    position: relative;
    top: -4px;
}

.edit-bank {
    display: none;
}

.invoice-detail-etc {
    width: 580px;
    float: right;
}

    .invoice-detail-etc li {
        float: left;
        padding-right: 55px;
        padding-bottom: 20px;
    }

.invoice-detail-table {
    width: 100%;
    table-layout: fixed;
}

    .invoice-detail-table th {
        line-height: 15px;
    }

    .invoice-detail-table td {
        line-height: 40px;
        text-align: left;
    }

    .invoice-detail-table .text-align-right {
        text-align: right;
    }

    .invoice-detail-table .line-hight30px th {
        line-height: 30px;
    }

    .invoice-detail-table .nowrap {
        white-space: nowrap;
    }

    .invoice-detail-table .spacer {
        height: 15px;
    }

    .invoice-detail-table .totalnetamount {
        text-align: center;
        font-size: 40px;
        padding: 10px;
        box-sizing: border-box;
        background: #f0f0f0;
        width: 232px;
        float: right;
    }

    .invoice-detail-table .unitspace {
        margin-left: 10px;
        font-size: 30px;
    }

.invoice-detail-table2 {
    width: 100%;
    margin-top: 15px;
    float: right;
}

    .invoice-detail-table2 th {
        line-height: 30px;
    }

    .invoice-detail-table2 td {
        text-align: left;
    }

    .invoice-detail-table2 th:last-child {
        text-align: right;
    }
    /*
    .invoice-detail-table2 td:first-child {
        width: 300px;
    }*/

    .invoice-detail-table2 td:last-child {
        text-align: center;
        font-size: 40px;
        padding: 10px;
        table-layout: fixed;
        box-sizing: border-box;
        background: #f0f0f0;
    }

    .invoice-detail-table2 td span {
        margin-left: 10px;
        font-size: 30px;
    }

    .invoice-detail-table2 .totalnetamount {
        width: 360px;
    }

/*เปลี่ยนลักษณะต่างๆของ Sub Header*/
.header-text {
    width: 100%;
    color: #646464;
    background: #eff5fc;
    line-height: 30px;
}

.total-txt {
    font-family: 'CordiaUPC_1230461';
}

.invoice-result-summarize {
    width: 600px;
    float: right;
    margin-left: 30px;
}

.invoice-detail-overall {
    font-family: 'CordiaUPC_1230461';
    float: right;
}

.invoice-detail td {
    vertical-align: top;
}

.amount {
    float: right;
    font-size: 50px;
}

.invoice-list {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20px;
}

.table-cell {
    width: 200px;
    text-align: center;
}

.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis !important;
    position: relative;
}

.invoice-list-table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    line-height: 50px;
    float: left;
    border-bottom: 1px solid #c8c8c8;
}

    .invoice-list-table .fa {
        margin: 0;
        padding: 0;
    }

    .invoice-list-table tr.invoice td {
        border-top: 1px solid #c8c8c8;
        background: #fff;
        padding: 5px 5px 5px 5px;
        border-style: solid;
        overflow: hidden;
        /*word-break: normal;*/
        text-align: center;
        word-break: break-all;
        line-height: 30px;
    }

    .invoice-list-table tr.creditNote td {
        background: #fff;
        padding: 5px 5px 5px 5px;
        border-style: solid;
        overflow: hidden;
        /*word-break: normal;*/
        text-align: center;
        word-break: break-all;
        line-height: 30px;
    }

    .invoice-list-table td:nth-child(3) {
        word-break: break-word;
    }

    .invoice-list-table th {
        text-align: center;
        background: #fff;
        padding: 5px 5px;
        overflow: hidden;
        word-break: normal;
    }

    .invoice-list-table tr {
    }

    .invoice-list-table td:hover {
        border: 0;
        box-shadow: none !important;
    }

    .invoice-list-table td.font19 {
        font-size: 19px !important;
    }

.description-detail {
    line-height: 22px;
}

.payment-date {
    float: left;
    margin: 0 10px;
    position: relative;
    top: 5px;
}

.print-wht {
    display: inline-block;
    margin-left: 20px;
}

.quotation {
    width: 470px;
    float: left;
}

.first-quo {
    margin-right: 20px;
}

.quotation-nav {
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

    .quotation-nav h2 {
        display: inline-block;
        margin-top: 10px;
    }

.quotation-nav-btm {
    margin-top: 30px;
}

.quotation-nav span {
    margin-right: 10px;
}

.quotation-nav li {
    padding: 10px 0 10px 0;
}

.quotation-nav ul:first-child {
    float: left;
    margin-top: 13px;
}

.quotation-nav ul:last-child {
    float: right;
}

.quotation-nav ul li span {
    padding-right: 20px;
}

.quotation li:first-child {
    float: left;
    margin-top: 20px;
}

.quotation-summary {
    width: 470px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    overflow: hidden;
}

.display-table {
    display: table;
    width: 100%;
}

    .display-table > div {
        display: table-cell;
        vertical-align: middle;
        height: 100px;
    }

.quotation-summary ul {
    display: inline-block;
}

    .quotation-summary ul > li {
        float: left;
    }

        .quotation-summary ul > li:first-child {
            margin-top: 8px;
        }

.quotation-summary span {
    padding-left: 5px;
}

.quotation-summary-top {
    width: 235px;
    white-space: nowrap;
}

    .quotation-summary-top p {
        text-align: center;
    }

.quotation-summary-bottom {
    width: 235px;
    font-size: 44px;
}

    .quotation-summary-bottom p {
        text-align: center;
        overflow: hidden;
    }

.quotation-summary-left {
    float: left;
    width: 235px;
    height: 100px;
    border-right: 1px solid #DDDDDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .quotation-summary-left:hover {
        background: #f0f9fe;
    }

.quotation-summary-right {
    float: left;
    width: 235px;
    height: 100px;
}

    .quotation-summary-right:hover {
        background: #f0f9fe;
    }

.debtor {
    width: 960px;
    margin-top: 30px;
}

    .debtor li {
        float: left;
        padding: 0 10px 10px 0;
    }

.debtor-summary {
    width: 960px;
    float: left;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    padding: 20px;
    margin-top: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dashboard-bottom-section {
    margin-top: 30px;
}

    .dashboard-bottom-section p {
        margin-top: 20px;
    }

.dashboard-left {
    width: 10%;
    float: left;
}

.dashboard-center {
    width: 80%;
    float: left;
    text-align: center;
}

.dashboard-right {
    width: 10%;
    overflow: hidden;
    float: right;
    text-align: right;
}

    .dashboard-right p {
        text-align: right;
    }

.dashboard-left p {
    text-align: left;
}

.quotation-detail {
    width: 960px;
    float: left;
    overflow: hidden;
    background: #fff;
    margin-top: 30px;
    border-radius: 5px 5px 5px 5px;
    border: 1px solid #DDDDDD;
}

.debtor-over1 {
    width: 960px;
    border-top: 0;
}

.debtor-row-left {
    width: 360px;
    float: left;
}

.category-db-total {
    width: 100%;
}

    .category-db-total td {
        width: 50%;
    }

    .category-db-total .fa {
        margin-right: 20px;
    }

.debtor-row-center {
    width: 300px;
    float: left;
}

.debtor-row-right {
    width: 300px;
    float: right;
    text-align: center;
}

.debtor-row {
    width: 360px;
    line-height: 60px;
    padding-left: 20px;
    background: #fff;
    float: left;
    box-sizing: border-box;
}

    .debtor-row .fa {
        margin-left: 20px;
    }

.debtor-row1 {
    width: 300px;
    line-height: 60px;
    background: #fff;
    float: left;
    text-align: center;
}

.debtor-graph {
    width: 100%;
    /*height: 305px;*/
    /* border-left: 1px solid #c8c8c8;*/
    text-align: center;
    /*padding: 50px;*/
    box-sizing: border-box;
}

.huge-row {
    width: 960px;
    overflow: hidden;
    border-style: none;
    border-bottom: 1px solid #DDDDDD;
    border-top: 0;
}

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

    .border-line:last-child {
        border: none;
    }

.debtor-row2:last-child {
    border: none;
}

.huge-row:last-child {
    border: none;
}

.debtor-row2 {
    width: 300px;
    line-height: 60px;
    background: #FFF none repeat scroll 0 0;
    float: left;
    text-align: right;
    border-bottom: 1px solid #DDDDDD;
    padding-right: 112px;
    box-sizing: border-box;
}

.quotation-detail th {
    vertical-align: middle;
    height: 50px;
    border-bottom: 1px solid #DDDDDD;
    padding-left: 20px;
}

.debtor-over {
    width: 440px;
    text-align: left;
}

.debtor-active {
    color: #346699;
    text-decoration: underline;
}

.plus-huge {
    font-size: 24px;
    color: #fff;
}

    .plus-huge:hover {
        color: #fff;
    }

.over-time {
    color: #f35353;
}

.quotation-detail-name {
    width: 440px;
    color: #46a3eb;
}

.quotation-pending {
    width: 440px;
    text-align: center;
}

.quotation-over {
    width: 250px;
    text-align: center;
    color: #fb7776;
}

.quotation-Receipt {
    width: 960px;
    float: left;
    margin-top: 20px;
    margin-bottom: 50px;
    border-radius: 5px;
}

.Receipt-summary {
    width: 150px;
    margin-left: -5px;
    white-space: nowrap;
}

.Receipt-summary-top {
    width: 235px;
    white-space: nowrap;
}

    .Receipt-summary-top p {
        text-align: center;
    }

.Receipt-summary-bottom {
    width: 235px;
    font-size: 44px;
    overflow: hidden;
}

    .Receipt-summary-bottom p {
        text-align: center;
        overflow: hidden;
    }

.quotation-page {
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.quotation-value {
    border-radius: 5px;
    box-shadow: 1px 1px 2px #c8c8c8;
}

.quotation-header {
    width: 100%;
    padding-top: 20px;
    overflow: hidden;
    float: left;
}

.quotation-headtext {
    font-size: 24px;
    float: left;
}

.quotation-logo {
    float: right;
}

.quotation-page-summary {
    width: 100%;
    float: left;
    line-height: 1.6;
    overflow: hidden;
    padding: 10px 10px 10px 0;
    text-align: left;
}

    .quotation-page-summary img {
        display: inline;
    }

    .quotation-page-summary .etc-detail {
        float: right;
        padding-right: 20px;
        word-wrap: break-word;
    }

.detail-address-summary {
    width: 180px;
    float: left;
    font-size: 14px;
    word-wrap: break-word;
}

.quotation-tax {
    padding-top: 40px;
}

.quotation-important {
    font-family: 'CordiaUPC_1230461';
    color: #000;
}

.invoice-quotation-address {
    width: 280px;
    margin-left: 20px;
    float: left;
}

.company-detail {
    width: 50px;
    float: left;
}

.quotation-description {
    padding-top: 15px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #c8c8c8;
}

.description {
    width: 100%;
}

    .description th {
        width: 120px;
        text-align: left !important;
    }

    .description td {
        width: 120px;
        text-align: left !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none;
    }

    .description tr {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none;
    }

.description-summary {
    margin-top: 30px;
}

    .description-summary td {
        width: 360px;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none;
    }

.overall-summary {
    border-top: 45px solid #f5f5f5;
    border-bottom: 45px solid #f5f5f5;
    text-align: center;
    font-size: 30px;
    font-family: 'CordiaUPC_1230461';
    color: #000;
    background: #c8c8c8;
}


/*------------------------------------*$Refferal Page--------------------------------------*/

.Referral-page {
    width: 960px;
    float: left;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #dddddd;
    padding: 15px;
    margin-bottom: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Referral-profile-personal {
    float: left;
    display: inline-block;
    width: 100%;
}

.Referral-profile-left {
    width: 100px;
    line-height: 30px;
    float: left;
    margin-right: 40px;
    margin-top: 5px;
}

.Referral-detail-address {
    float: left;
}

    .Referral-detail-address li {
        float: left;
        margin-right: 20px;
    }

.Referral-word {
    margin-top: 10px;
}

.Referral-profile-right {
    width: 700px;
    float: left;
}

.Referral-status {
    width: 960px;
    line-height: 50px;
    background: #fff;
    float: left;
    border-spacing: 0;
    border-radius: 5px;
    border: 1px solid #dddddd;
    border-collapse: unset;
}

    .Referral-status th, .Referral-status td {
        display: block;
        float: left;
        padding: 5px 20px;
    }

    .Referral-status .emailInvite {
        width: 40%;
    }

    .Referral-status .statusInvite {
        width: 60%;
        cursor: pointer;
    }

        .Referral-status .statusInvite button {
            margin: 0px 15px;
        }

        .Referral-status .statusInvite div {
            float: left;
        }

    .Referral-status thead tr th {
        border-bottom: 1px solid #efefef;
        text-align: left;
        font-weight: bold;
    }

    .Referral-status tbody tr td {
        border-bottom: 1px solid #efefef;
        text-align: left;
    }

    .Referral-status tbody tr:last-child td {
        border-bottom: none;
        text-align: left;
    }

.color-ref-one {
    color: #646464;
}

.color-ref-two {
    color: #50B2AC;
}

.color-ref-complete {
    color: #43BF76;
}

.color-ref-waiting {
    color: #FF9E40;
}

.blockState {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 250px;
    box-shadow: 0 3px 6px 0px rgb(0 0 0 / 11%);
    float: left;
    padding: 20px 0px;
    position: absolute;
    left: 10px;
    z-index: 999;
}

.block-statusInvite {
    position: relative;
}

.body-blockState {
    width: 100%;
}

.blockState .block-icon {
    display: block;
    width: 33.33%;
    text-align: center;
    float: left;
    font-size: 16px;
}

    .blockState .block-icon span {
        width: 100%;
        writing-mode: horizontal-tb;
        block-size: auto;
        float: left;
        height: auto;
        line-height: 20px;
    }

.state-line1 {
    position: absolute;
    border-top: 1px dashed;
    top: 28px;
    left: 51px;
    height: 20px;
    z-index: 1;
    width: 25%;
}

.state-line2 {
    position: absolute;
    border-top: 1px dashed;
    top: 28px;
    left: 134px;
    height: 20px;
    z-index: 1;
    width: 25%;
}

.color-state-waiting-ref {
    color: #DADBE6;
}

.color-state-complete-ref { /* remove */
    color: #646464;
}

.Referral-status tbody tr:hover {
    background: #f3f8fb;
}

.Referral-form {
    width: 330px;
    height: 30px;
    margin-top: 5px;
}

/*------------------------------------Table Advance Search*------------------------------------*/
.advance-search-box {
    width: 960px;
    /*overflow: hidden;แก้ 6/17/2015*/
    float: left;
    padding: 20px;
    margin-bottom: 30px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #cccccc;
    height: 298px;
    position: relative;
}

.table-advance-search {
    width: 100%;
}

.table-advance-search-section {
    content: "";
    display: table;
    clear: both;
    width: 100%;
}

.table-advance-search-column {
    float: left;
    width: 33.33%;
    height: 78px;
    display: flex;
}

    .table-advance-search-column > div {
        width: 100%;
        padding-right: 16px;
        padding-bottom: 16px;
    }

    .table-advance-search-column input {
        width: 100% !important;
    }

.table-advance-search-button {
    float: right;
    position: absolute;
    bottom: 36px;
    right: 36px;
}

    .table-advance-search-button p {
        display: inline;
        margin-right: 20px;
        position: relative;
        top: 15px;
    }

/*------------------------------------Advance Search*------------------------------------*/
.advance-search {
    width: 960px;
    /*overflow: hidden;แก้ 6/17/2015*/
    float: left;
    padding: 20px;
    margin-bottom: 30px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #cccccc;
}

.advance-search-left {
    width: 75%;
    float: left;
}

.advance-search-right {
    width: 25%;
    float: right;
    height: 120px;
    position: relative;
}

.advance-search-section {
    width: 100%;
    float: left;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.advance-search-right span {
    float: right;
}

.advance-search label {
    display: block;
    margin: 0 0 10px 0;
}

.advance-search li {
    float: left;
    padding-right: 10px;
}

.advance-search input {
    height: 30px;
}

.advance-main-input {
    width: 172px;
}

.tag-section {
    width: 240px;
    height: 30px;
    background-color: #f3f8fb;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    color: #646464;
}

.advance-sub-input {
    width: 115px;
}

.advance-sub-value {
    width: 130px;
    margin-top: 35px;
    text-align: right;
}

.etc-text {
    margin-top: 26px;
    margin-left: 80px;
}

.select-label {
    display: inline-block !important;
}

.advance-search .ui.selection.dropdown {
    min-width: 240px;
}

.advance-input-section {
    margin-bottom: 5px;
}

.city-dropdown {
    width: 190px;
}

.etc-text {
    margin-top: 26px;
    margin-left: 80px;
}

    .etc-text label {
        position: relative;
        right: 6px;
    }

.close-section {
    width: 100%;
    float: right;
}

.advance-search-button {
    float: right;
    position: absolute;
    bottom: 0;
    right: 0;
}

    .advance-search-button p {
        display: inline;
        margin-right: 20px;
        position: relative;
        top: 15px;
    }

input.tags {
    border: none !important;
    box-shadow: none !important;
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    color: #999;
    font-size: .9em;
    min-height: 30px;
    display: inline-block;
    background: transparent;
}

    input.tags:focus {
        outline: none;
        background: transparent;
    }

.tags-bar {
    width: 240px;
    display: block;
    background-color: #f3f8fb;
    border: 1px solid #c8c8c8;
    border-radius: 3px;
    color: #646464;
    padding-left: 5px;
    overflow: hidden;
}

.tag {
    position: relative;
    display: inline-block;
    border-radius: 4px;
    background: #6699cc;
    color: #fff;
    margin: 0 0.1em .1em .1em;
    padding: .2em 1.3em .15em .45em;
}

    .tag::after {
        position: absolute;
        display: block;
        top: .2em;
        right: 5px;
        content: "×";
        font-size: 1em;
        line-height: 1em;
        color: rgba(255, 255, 255, 0.5);
    }


/*Dashboard Home*/

.section-right {
    position: absolute;
    bottom: 0;
}

.home-container {
    background: #fff;
    float: left;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
}

.home-section {
    width: 33.33%;
    height: 300px;
    float: left;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
    border-left: 1px solid #DDDDDD;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #DDDDDD;
}

    .home-section:first-child {
        border-left: none;
    }

    .home-section:nth-child(3n) {
        border-right: none;
    }

    .home-section:nth-child(4n) {
        border-left: none;
    }

    .home-section:nth-child(7n) {
        border-left: none;
        border-bottom: none;
        border-right: 1px solid #DDDDDD;
        width: 33.5%;
    }

    .home-section:nth-child(8n) {
        border-bottom: none;
        width: 33.1%;
    }

    .home-section:nth-child(9n) {
        border-bottom: none;
    }

    .home-section:hover {
        background: #fafafa;
    }

        .home-section:hover .fa-arrows-alt {
            display: block;
        }

        .home-section:hover .fa-eye-slash {
            display: block;
        }

    .home-section > p {
        margin: 10px;
    }

.disable-home {
    opacity: 0.2;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    cursor: auto;
}

.home-section > .ui.button {
    font-family: 'CordiaUPC_1230459';
    font-weight: normal;
}

.home-input {
    background-image: url("images/logo-test-bank-feed.png") !important;
    background-repeat: no-repeat !important;
    background-position: left 10px center !important;
    margin-bottom: 30px;
}

.search-section {
    width: 960px;
    float: left;
}


/*------------------------------------*$Page button*------------------------------------*/

.finance {
    height: auto;
}

.finance-edit {
    margin-left: 20px;
}

.finance-summary-top {
    width: 40%;
    line-height: 65px;
    float: left;
    overflow: hidden;
}

.finance-mainNav {
    width: 960px;
    float: left;
}

.second-nav {
    width: 960px;
    line-height: 30px;
    float: left;
    /*margin-bottom: 30px;*/
    margin-top: 30px;
}

.nav-finance {
    min-width: 400px;
    background: #FFF none repeat scroll 0% 0%;
    border-radius: 5px;
    float: left;
    margin-left: 40px;
    border: 1px solid #DDDDDD;
}

    .nav-finance li {
        float: left;
    }

.line-vertical {
    width: 1px;
    height: 30px;
    margin-top: 5px;
    background: #c8c8c8;
    float: right;
}

.line-vertical-large {
    width: 1px;
    height: 70px;
    margin-top: 15px;
    background: #c8c8c8;
    float: right;
}

.nav-finance-button {
    width: 100px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

    .nav-finance-button:hover {
        background: #f0f9fe;
    }

.nav-finance-tax {
    min-width: 300px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    float: left;
    margin-left: 40px;
}

    .nav-finance-tax li {
        float: left;
    }

.nav-finance-taxbutton {
    width: 150px;
    line-height: 40px;
    text-align: center;
    border-radius: 5px 0 0 5px;
}

    .nav-finance-taxbutton:hover {
        background: #f0f9fe;
    }

.nav-button-first:hover {
    border-radius: 5px 0 0 5px !important;
}

.nav-button-last:hover {
    border-radius: 0 5px 5px 0 !important;
}

.nav-finance .active {
    background: #f0f9fe;
    border-radius: 5px 0 0 5px !important;
}

.nav-finance-tax .active {
    background: #f0f9fe;
}

.finance-estimate {
    width: 960px;
    line-height: 100px;
    float: left;
    background: #ffffff;
    margin-bottom: 30px;
    border: 1px solid #DDDDDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 5px;
}

.fn-lg-number {
    font-size: 42px;
}

.finance-summary {
    width: 240px;
    line-height: 33px;
    float: left;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .finance-summary:last-child {
        width: 238px;
    }

    .finance-summary li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis !important;
    }

.finance-summary-red {
    background: #feecea;
}

.finance-summary-blue {
    background: #f0f9fe;
}

.finance-summary-red span {
    color: #f35353;
}

.finance-summary-blue span {
    color: #6699cc;
}

.finance-summary-bottom {
    width: 240px;
    line-height: 50px;
    float: left;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.finance-button {
    margin-top: 25px;
}

.bank-summary {
    margin-bottom: 30px;
}

.finance-add-button {
    margin-top: 30px;
    margin-left: 60px;
}

.finance-today-text {
    float: right;
    margin-right: 40px;
}

.finance-graph {
    width: 960px;
}

    .finance-graph li {
        float: left;
        padding: 10px 10px 10px 0;
    }

.finance-graph-summary {
    width: 960px;
    float: left;
    background: #fff;
    border-radius: 5px 5px 0 0;
    border: 1px solid #DDDDDD;
    padding: 20px;
    margin-top: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.finance-graph-top {
    border-bottom: none;
}

.finance-headtext {
    width: 60%;
    float: left;
    font-size: 28px;
    display: inline;
}

.finance-text-large {
    font-size: 42px;
}

.finance-text-small {
    font-size: 20px;
}

.setting-main {
    width: 960px;
    background: #FFF none repeat scroll 0 0;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    padding: 10px;
    float: left;
}

    .setting-main h4 {
        display: inline;
    }

.peak-setting {
    width: 960px;
    padding: 10px;
    box-sizing: border-box;
    float: left;
    margin-bottom: 80px;
}

    .peak-setting li {
        padding: 5px;
    }

.img-main {
    float: left;
    margin-right: 20px;
}

.setting-bottom {
    padding-bottom: 20px;
}

.setting-left {
    width: 45%;
    float: left;
}

.setting-right {
    width: 45%;
    margin-left: 10%;
    float: right;
}

.new-user-setting {
    float: left;
    background: #fff;
    padding: 20px 20px 0;
    border-radius: 5px;
    border: 1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .new-user-setting h2 {
        display: inline;
    }

    .new-user-setting ul {
        display: inline-block;
        margin-right: 150px;
    }

.new-user-input {
    margin-right: 20px !important;
}

.new-user-setting .fa-check {
    color: #66b399;
    cursor: pointer;
}

.fa-question-circle {
    color: #DDDDDD !important;
    cursor: pointer;
}

    .fa-question-circle:hover {
        color: #666666 !important;
    }

.new-user-setting li:nth-child(2) {
    margin-top: 20px;
}

.new-user-line {
    width: 100%;
    height: 1px;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0;
    background: #c8c8c8;
}

.new-user-table {
    /*width: 920px;*/
    line-height: 50px;
    margin: 0 auto;
    background: #f2f7fa;
    margin-top: 30px;
    border-spacing: 0;
    border: 1px solid #DDDDDD;
    border-radius: 5px !important;
}

    .new-user-table th {
        width: 180px;
        text-align: center;
    }

    .new-user-table td {
        border: 1px solid #DDDDDD;
        text-align: center;
    }

        .new-user-table td select {
            width: 130px;
            height: 40px;
        }

        .new-user-table td:nth-child(1) {
            width: 200px;
            text-align: left;
            padding-left: 20px;
        }

    .new-user-table span {
        margin-left: 20px;
    }

.new-user-checkbox {
    margin-top: 20px;
}

    .new-user-checkbox input {
        margin-bottom: 20px;
        margin-left: 20px;
    }

    .new-user-checkbox span {
        margin-left: 20px;
    }

.user-button-box {
    margin-top: 20px;
    float: right;
}

    .user-button-box div {
        margin-right: 20px;
    }

.product-detail-edit ul {
    float: left;
}

.product-detail-edit {
    width: 470px;
    padding: 20px;
    min-height: 296px;
    float: left;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 20px 30px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #DDDDDD;
}

    .product-detail-edit h4 {
        display: inline-block;
    }

.product-detail-chart {
    width: 470px;
    height: 296px;
    float: left;
    background: #ffffff;
    border-radius: 5px;
    /*margin-top: 30px;*/
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #DDDDDD;
}

.product-detail-header {
    width: 100%;
    word-break: break-word;
    text-align: left;
    overflow: hidden;
}

    .product-detail-header h2 {
        display: inline-block;
        line-height: 30px;
    }

    .product-detail-header div {
        display: inline-block;
    }

.product-summary {
    margin-top: 20px;
}

.product-sub-summary ul {
    float: left;
    padding-left: 30px;
}

.product-sub-summary li {
    width: 80px;
    float: left;
    padding-left: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.product-summary p {
    line-height: 30px;
    float: left;
    text-align: center;
}

    .product-summary p:first-child {
        width: 140px;
        text-align: left;
    }

    .product-summary p:nth-child(2n) {
        width: 140px;
    }

    .product-summary p:nth-child(3n) {
        width: 30px;
    }

    .product-summary p:last-child {
        width: 118px;
    }

.product-figure {
    width: 100%;
    float: left;
    margin-top: 20px;
}

    .product-figure p {
        float: left;
        text-align: center;
    }

        .product-figure p:first-child {
            width: 100px;
            text-align: left;
        }

        .product-figure p:nth-child(2n) {
            width: 100%;
            text-align: left;
            word-wrap: break-word;
            overflow: hidden;
        }

    .product-figure li {
        float: left;
        padding-right: 40px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.product-detail-chart li {
    float: right;
    /*
    padding-right: 50px;
    margin-left: 30px;
    margin-top: 20px;*/
}

.product-detail .fa {
    color: #cccccc;
    cursor: pointer;
}

.product-detail li {
    width: 25%;
    margin: 0 auto;
    text-align: center;
}

    .product-detail li .popup {
        text-align: left;
    }

.product-detail .fa:hover {
    color: #666666;
}

.product-main {
    float: left;
}

.product-fix {
    margin-top: 10px;
}

.product-number-gd {
    color: #00B5AD;
}

.product-number-bd {
    color: #f66666;
}

.border-radius-th {
    border-radius: 5px 5px 0 0;
}

.contact-main ul li div.dropdown.search {
    width: 200px;
    height: 28px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    .contact-main ul li div.dropdown.search div.text {
        height: 28px !important;
        padding-top: 3px !important;
    }

        .contact-main ul li div.dropdown.search div.text img.ui.avatar.image.mini,
        .contact-main ul li div.dropdown.search div.menu div.item img.ui.avatar.image.mini {
            width: 20px;
            height: 20px;
        }

.contact-detail-left {
    width: 645px;
    border: 1px solid #DDDDDD;
    background: #fff;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 30px;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .contact-detail-left .adjust-button {
        float: right;
        margin-right: 0;
    }

    .contact-detail-left h2 {
        float: left;
    }

    .contact-detail-left span {
        margin-left: 10px;
    }

.contact-detail-personal {
    width: 655px;
    float: left;
}

    .contact-detail-personal li {
        float: left;
        padding-right: 20px;
    }

.contact-detail-address {
    float: left;
}

    .contact-detail-address li {
        float: none;
        margin-bottom: 10px;
    }

        .contact-detail-address li:last-child {
            margin-bottom: 0;
        }

.profile-detail {
    margin-bottom: 20px;
}

.contact-detail-line {
    width: 605px;
    height: 1px;
    float: left;
    background: #DDDDDD;
    margin-top: 20px;
    margin-bottom: 20px;
}

.contact-summary-left {
    width: 135px;
    float: left;
}

.taxt-edit-image-user {
    float: left;
    padding-left: 135px;
    padding-top: 8px;
}

    .taxt-edit-image-user h3 {
        cursor: pointer;
        color: #6699cc;
    }
/*
.contact-detail-right {
    background: #fff;
    border: 1px solid #DDDDDD;
    float: left;
    padding: 20px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}*/
.contact-detail-right {
    width: 300px;
    background: #fff;
    border: 1px solid #DDDDDD;
    float: right;
    padding: 20px;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .contact-detail-right li {
        padding: 10px;
    }

.detail-small-text {
    font-size: 26px;
}

.detail-large-text {
    font-size: 48px;
    text-align: right;
}

.detail-text-red {
    color: #ff575f;
}

.detail-text-grey {
    color: #646464;
}

.online-headerContent {
    width: 960px;
    margin: 0 auto;
    color: #ffffff;
}

.logo-online-view {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

    .logo-online-view img {
        padding-top: 15px;
        padding-right: 0;
    }

.online-view-box {
    float: right;
    margin-right: 65px;
}

    .online-view-box li {
        float: left;
    }

        .online-view-box li a {
            text-decoration: none;
            list-style-type: none;
        }

.pagination-online-view {
    width: 300px;
    text-align: center;
    margin: 0 auto;
}

    .pagination-online-view span {
        line-height: 30px;
        padding: 20px;
    }

    .pagination-online-view .fa {
        font-size: 24px;
    }

.user-profile {
    width: 960px;
    float: left;
    line-height: 30px;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    padding: 20px;
    margin-bottom: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.user-profile-line {
    width: 920px;
    height: 1px;
    float: left;
    background: #c8c8c8;
    margin-top: 10px;
}

.user-profile-logo {
    width: 150px;
    height: 150px;
    color: #fff;
    text-align: center;
    background: #c8c8c8;
    float: right;
    border-radius: 5px;
    background-image: url(images/camera1.png);
    background-repeat: no-repeat;
    background-position: center;
}

    .user-profile-logo:hover {
        background-image: url(images/camera.png);
        background-repeat: no-repeat;
        background-position: center;
    }

.user-profile-personal {
    width: 960px;
    float: left;
}

.user-profile-left {
    width: 135px;
    float: left;
}

.user-profile-right {
    width: 700px;
    float: left;
}

.user-profile-save {
    float: right;
    margin-top: 30px;
}

.user-form {
    height: 30px;
    margin-right: 10px;
}

.user-form-name {
    width: 163px;
}

.user-form-role {
    width: 340px;
}

.user-form-tel {
    width: 50px;
}

.user-tel-last {
    width: 100px;
}

.user-form-email,
.user-form-phone {
    width: 340px;
}

.payment-gateway {
    padding: 30px;
    min-height: 100%;
    float: left;
    background: #f7fdfc;
    border: 1px dashed #27be95;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

.expense-payment-gateway {
    background: #feeeee;
    border: 1px dashed #f66666;
}

.payment-gateway-left {
    width: 720px;
    overflow: hidden;
    float: left;
}

    .payment-gateway-left label {
        text-align: left;
        display: block;
        margin-bottom: 10px;
    }

.payment-gateway-heading {
    margin-left: 50px;
}

    .payment-gateway-heading li {
        display: inline-block;
        padding-right: 20px;
        padding-bottom: 20px;
    }

        .payment-gateway-heading li:first-child {
            text-align: right;
        }

    .payment-gateway-heading h2 {
        margin: 0;
        padding: 0;
    }

    .payment-gateway-heading p {
        float: left;
    }

.payment-heading-text {
    width: 200px;
}

    .payment-heading-text:nth-child(2) {
        width: 140px;
    }

.payment-summary-text {
    width: 200px;
}

.payment-gateway-left ul li span {
    padding-left: 15px;
}

.payment-gateway-summary {
    width: 80%;
    float: left;
    text-align: left;
    border-right: 1px solid #DDDDDD;
}

    .payment-gateway-summary input {
        height: 30px !important;
    }

.payment-gateway-mid {
    width: 1px;
    line-height: 30px;
    height: 100%;
    float: left;
    padding: 20px 0;
}

.payment-gateway-mid-is {
    height: 100px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.payment-gateway-summary label {
    display: inline;
    margin-left: 20px;
    margin-right: 2px;
}

.text-confirm-voidPayment {
    margin-left: 0px !important;
}

.payment-gateway-bt {
    width: 100%;
    padding: 0 30px 30px 30px;
    float: left;
    background: #fff;
    border-radius: 0 0 5px 5px;
    box-sizing: border-box;
}

.payment-bottom-section {
    display: inline;
}

.margin-top-10px {
    margin-top: 10px;
}

.margin-right-10px {
    margin-right: 10px;
}

.modal-finance {
    width: 600px;
}

.tax-dropdown {
    min-width: 80px !important;
}

.pnd-dropdown {
    min-width: 60px !important;
    width: 80px !important;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.condition-dropdown {
    min-width: 20px !important;
}

.value-input {
    width: 100px;
}

.payment-value-input {
    width: 120px;
}

.payment-date-input {
    width: 100px;
}

.billing-tp-mid-is-large {
    height: 300px;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}


/*
.invoice-recieve-header {
    overflow: hidden;
}*/

.invoice-recieve-header h2 {
    display: inline-block;
    margin-bottom: 20px;
}

.payment-gateway-summary li {
    /*padding-bottom: 20px;
    padding-right: 20px;*/
    display: inline-block;
    box-sizing: border-box;
}

    .payment-gateway-summary li:nth-child(2) {
        text-align: right;
    }

.payment-gateway-summary td {
    padding: 5px 10px 20px 10px;
    text-align: left;
}

.payment-heading th {
    padding: 5px 10px 0 10px;
}

.payment-gateway-summary td img {
    vertical-align: middle;
    cursor: pointer;
    padding-right: 0;
    max-width: 18px;
}

.btndeletepayment {
    vertical-align: middle;
    padding-left: 15px;
    padding-bottom: 14px;
}

.payment-gateway-summary .fa-times {
    margin-top: 5px;
}

    .payment-gateway-summary .fa-times:hover {
        color: #f37b76;
    }

.payment-gateway-summary table {
    width: 100%;
}

.first-summary {
    margin: 3px 20px 0 0;
}

.payment-input {
    width: 140px;
    height: 30px;
    text-align: right !important;
}

.payment-gateway-summary table .reference-input {
    width: 100%;
    height: 30px;
}

.cheque-btn-section {
    width: 50px;
}

.thpaymentamount {
    width: 200px;
    text-align: right;
}

.thpaymentchannel {
    width: 135px;
}

.thpaymentdate {
    width: 100px;
}

.payment-gateway-right {
    /*width: 210px;*/
    position: absolute;
    bottom: 0;
    right: 0;
    float: right;
}

    .payment-gateway-right p {
        float: right;
        display: block;
    }


/*
.small-result-gateway {
    width: 150px;
    padding-top: 50px;
    float: right;
}*/

.payment-gateway select {
    width: 240px;
    height: 30px;
    background-color: #f3f8fb;
    border: 1px solid #646464;
    border-radius: 3px;
}

.payment-gateway-footer {
    width: 100%;
    float: left;
    margin-top: 30px;
}

    .payment-gateway-footer span {
        margin-left: 10px;
    }

    .payment-gateway-footer input {
        float: left;
    }


/*
.payment-gateway-footer div {
    margin-left: 20px;
}
*/

.circle-payment {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    line-height: 25px;
    text-align: center;
}

.circle-payment-green {
    background: #00B5AD;
}

.circle-payment-red {
    background: #ff5b5b;
}

.circle-payment-blue {
    background: #6699cc;
}

.line-circle {
    width: 50px;
    height: 3px;
    float: left;
    position: relative;
    top: -13px;
    left: 20px;
}

.line-payment-green {
    background: #00B5AD;
}

.line-payment-red {
    background: #ff5b5b;
}

.line-payment-blue {
    background: #6699cc;
}

.button-payment {
    float: right;
}

.tiv-main {
    background: #fafafa;
    float: right;
    border-radius: 5px;
    margin-top: 30px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}

.tiv-border-top {
    border-top: 1px dashed #c8c8c8;
    margin-top: 30px;
}

.tiv-summary {
    margin-left: 15px;
}

.tiv-main p {
    display: inline;
}

.tiv-main .fa {
    color: #fff;
    font-size: 14px !important;
}

.tiv-main-black {
    background: #f0f0f0;
}

.button-box .btn-danger {
    border: 0;
}

.tiv-section {
    width: 100%;
    min-height: 40px;
    float: right;
}

.tiv-container {
    width: 100%;
    float: left;
}

    .tiv-container li {
        float: left;
        padding-right: 10px;
    }

    .tiv-container input {
        line-height: 20px;
        background: #666666;
        margin-right: 10px;
        position: relative;
    }

    .tiv-container .fa {
        color: #cccccc;
        margin-left: 10px;
        font-size: 18px !important;
    }

        .tiv-container .fa:hover {
            color: #666666;
        }

.caution-text {
    text-align: left;
    margin: 30px 0 0 0;
    float: left;
}

.expense-payment {
    margin-top: 30px;
}


/*------------------------------------*$POPUP*-----------------------------------------------*/

.main {
    display: inline-block;
}

    .main .user {
        text-align: left;
    }

.user {
    position: relative;
    width: auto;
    display: inline-block;
    vertical-align: baseline;
    /*zoom: 1;*/
    display: inline;
    vertical-align: auto;
}

    .user img {
        float: left;
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }

    .user i {
        float: left;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
    }

        .user i small {
            display: block;
            font-size: 9px;
            font-weight: bold;
            text-transform: uppercase;
            color: rgba(0, 0, 0, 0.6);
            *color: #364168;
        }

    .user:hover ul {
        visibility: visible;
        opacity: 1;
        padding: 4px 0 6px;
    }

    .user ul {
        width: 300px;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        z-index: 1000;
        top: 100%;
        left: 0;
        right: 0;
        background: #666;
        border-radius: 5px;
        border-left: 5px solid #6699cc;
        line-height: 20px !important;
        margin-top: 0;
    }

        .user ul:before,
        .user ul:after,
        .user li:first-child:after {
            display: none;
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            left: 15px;
            border: 7px outset transparent;
        }

        .user ul:before {
            border-bottom: 7px solid #000;
            top: -14px;
        }

    .user li:first-child:after {
        border-bottom: 7px solid #000;
        top: -13px;
    }

    .user ul:after {
        border-bottom: 7px solid #000;
        top: -12px;
    }

    .user li {
        padding: 0 12px;
        font-size: 14px;
        color: #fff;
    }

        .user li.sep {
            border-top: 1px solid #b4bbce;
            padding-top: 4px;
            margin-top: 4px;
            -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
            box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
        }

        .user li a {
            display: block;
            position: relative;
            margin: 0 -13px;
            padding: 0 20px 0 12px;
            color: #fff;
            border: 1px solid transparent;
        }

.main .fa {
    font-size: 16px;
    color: #6699cc;
}

    .main .fa:hover {
        color: #6699cc;
    }


/*------------------------------------*$CONTACT-NEW*------------------------------------*/

.contact-main {
    width: 960px;
    background: #fff;
    border: 1px solid #DDDDDD;
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 15px 15px 0 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .contact-main form {
        margin-top: 0;
    }

.contact-number-top {
    line-height: 30px;
    padding: 5px;
    float: right;
    text-align: center;
    /*background-color: #f0f0f0;*/
    /*border: 1px solid #646464;*/
    border-radius: 5px;
    color: #656565;
    margin-top: -20px;
}

.contact-divide {
    width: 100%;
    height: 1px;
    background: #DDDDDD;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
}

.contact-x-input {
    width: 50px;
    line-height: 30px;
    margin-left: 10px;
    text-align: center;
    text-indent: 0;
}

.select-date-invoice {
    min-width: 200px !important;
}

.contact-personal label {
    width: 100px;
    height: 20px;
}

.contact-personal {
    float: left;
    padding-bottom: 20px;
}

    .contact-personal h2 {
        display: inline;
    }

    .contact-personal .form-size:nth-child(1) {
        width: 300px;
    }

    .contact-personal ul {
        text-decoration: none;
        list-style-type: none;
    }

    .contact-personal li {
        float: left;
        padding-top: 20px;
        padding-right: 40px;
    }

    .contact-personal select {
        width: 70px;
        height: 30px;
    }

.contact-organization h3 {
    margin-top: 20px;
    color: #737373;
    padding-left: 15px;
}

.contact-personal .citizeninput-Small {
    margin-left: -0.8%;
}

.alert-txt {
    width: 60%;
    text-align: left;
    color: #D95C5C;
    font-size: 20px;
}

.contact-notfound-txt {
    width: 60%;
    text-align: left;
    color: lightgrey;
    font-size: 20px;
    width: auto;
    margin-top: 7px;
    margin-left: -25px;
}



.code-modal-tp p {
    display: inline-block;
    top: 15px;
    position: absolute;
    right: 190px;
}

.contact-organization label {
    display: block;
    padding-bottom: 10px;
}

.contact-tel {
    float: left;
    padding-bottom: 20px;
}

    .contact-tel ul {
        float: left;
    }

    .contact-tel li {
        padding-top: 20px;
    }

    .contact-tel ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .contact-tel label {
        width: 100px;
        display: inline-block;
        vertical-align: baseline;
        /*float: left;
   
    position: relative;
    top: 7px;
    /*ปรับ vertical ของตัวอักษรให้อยู่ตรงกลาง input*/
    }

.contact-tel-left {
    float: left;
    width: 380px;
    padding-left: 35px;
}

.contact-tel-right {
    float: right;
    width: 380px;
}

.contact-address1 {
    float: left;
    padding-bottom: 20px;
}

    .contact-address1 .citizeninput-Small {
        margin-left: -1%;
    }

    .contact-address1 li {
        padding-top: 20px;
    }

    .contact-address1 ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .contact-address1 label {
        width: 110px;
        display: inline-block;
        float: left;
        /*ปรับ vertical ของตัวอักษรให้อยู่ตรงกลาง input*/
        position: relative;
        top: 7px;
        /*ปรับ vertical ของตัวอักษรให้อยู่ตรงกลาง input*/
    }

    .contact-address1 .left-space {
        margin-left: 10px;
    }


.contact-address-left {
    float: left;
    width: 445px;
    padding-left: 35px;
}

.contact-address-right {
    float: right;
    width: 380px;
}

    .contact-address-right li:first-child {
        height: 32px;
    }

.contact-address1 textarea {
    margin-left: 0 !important;
    width: 200px !important;
    text-indent: 0;
}

.contact-address1 p {
    float: left;
    margin-left: 35px;
    margin-top: 20px;
}

.contact-address1 h3 {
    margin-top: 20px;
    color: #737373;
}

.contact-cash1 {
    float: left;
    padding-bottom: 20px;
}

    .contact-cash1 li {
        float: left;
        padding-top: 10px;
        padding-right: 20px;
    }

    .contact-cash1 label {
        display: block;
        height: 20px;
        padding-bottom: 10px;
    }

    .contact-cash1 h3 {
        margin-top: 10px;
        color: #737373;
        padding-left: 15px;
    }

    .contact-cash1 p {
        float: left;
        margin-left: 35px;
        margin-top: 20px;
    }

    .contact-cash1 select {
        width: 350px;
        height: 30px;
        margin-top: 15px;
    }

.contact-save1 {
    float: left;
    padding-bottom: 20px;
}

.form-collapse {
    padding-left: 35px;
}

.add-file {
    float: left;
    margin-left: 35px;
    margin-top: 15px;
}

.serial-text {
    line-height: 30px;
}

.variable {
    margin-left: 10px;
}

.contact-number {
    line-height: 30px;
    padding: 0 5px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #646464;
    border-radius: 5px;
    color: #666666;
    position: relative;
    margin-left: 20px;
    text-indent: 0;
}

.logo-organization {
    width: 150px;
    height: 150px;
    color: #fff;
    text-align: center;
    float: right;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

    .logo-organization:hover {
        background-repeat: no-repeat;
        background-position: center;
    }

.text-edit-image {
    cursor: pointer;
    position: absolute;
    right: 15px;
    top: 186px;
    color: #6699cc;
}

.logo-organization-container {
    width: 150px;
    /*height: 150px;*/
    float: right;
    position: relative;
    margin-left: 15px;
    border: 2px dashed #efefef;
    border-radius: 5px;
    padding: 5px;
}

    .logo-organization-container:first-child {
        margin-left: none !important;
    }

    .logo-organization-container img {
        max-width: 150px;
        max-height: 150px;
        box-sizing: border-box;
        padding: 0;
        position: relative;
        margin-top: 50%;
        transform: translateY(-50%);
    }

.logo-organization-console {
    width: 100%;
    float: left;
    line-height: normal;
    margin-top: 5px;
}

    .logo-organization-console a {
        font-size: 18px;
    }

        .logo-organization-console a:first-child {
            float: left;
        }

        .logo-organization-console a:last-child {
            float: right;
        }

.sign-organization-container {
    width: 150px;
    /*height: 150px;*/
    float: left;
    position: relative;
    margin-left: 15px;
    border: 2px dashed #efefef;
    border-radius: 5px;
    padding: 5px;
}

.sign-organization {
    width: 150px;
    height: 150px;
    color: #fff;
    text-align: center;
    float: right;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.sign-organization-container img {
    max-width: 150px;
    max-height: 150px;
    box-sizing: border-box;
    padding: 0;
    position: relative;
    margin-top: 50%;
    transform: translateY(-50%);
}

.sign-organization-console {
    width: 100%;
    float: left;
    margin-top: 5px;
    line-height: normal;
}

    .sign-organization-console a {
        font-size: 18px;
        /*margin: 0;
            padding: 0;
            line-height: 0;*/
    }

        .sign-organization-console a:first-child {
            float: left;
        }

        .sign-organization-console a:last-child {
            float: right;
        }

.user-profile-container {
    float: left;
    margin: 0;
}


/*------------------------------------*$CONTACT-NEW*------------------------------------*/


/*------------------------------------*$Flow icon*------------------------------------*/

.peak-timeline {
    /*margin-top: 10px;*/
    width: 800px;
    margin: 15px auto 35px;
    text-align: center;
    display: block;
    /*margin-bottom: 30px;*/
    min-height: 40px;
}

    .peak-timeline.goleft30 {
        padding-right: 30px !important;
    }

.peak-timeline-main {
    margin-left: 80px;
    margin-right: 30px;
}


/*เปลี่ยนสีเส้น*/

.peak-timeline-grey {
    width: 125px;
    height: 3px;
    background: #c8c8c8;
    margin-right: -5px;
    float: left;
}

.peak-timeline-green {
    width: 125px;
    height: 3px;
    float: left;
    background: #27be95;
}

.peak-line-green {
    width: 125px;
    height: 3px;
    float: left;
    background: #27be95;
}


/*เปลี่ยนสีเส้น*/

.peak-tineline-line ul {
    list-style: none;
    font-size: 0;
}

.peak-timeline-point {
    width: 800px;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-left: 60px;
}

    .peak-timeline-point p {
        position: relative;
        width: 100px;
        top: 40px;
        right: 40px;
        float: left;
    }

    .peak-timeline-point ul {
        float: left;
    }


    /*
.peak-timeline-point li {
    position: relative;
    width: 100px;
    top: 20px;
    right: 40px;
}*/

    .peak-timeline-point li {
        position: relative;
        width: 130px;
        top: 20px;
        right: 55px;
    }

.peak-timeline-content {
    margin: 0 auto;
    width: 620px;
}


/*เปลี่ยนสีวงกลม*/

.point-number {
    width: 20px;
    height: 20px;
    float: left;
    text-align: center;
    overflow: hidden;
    color: #27be95;
    font-family: 'CordiaUPC_1230461';
}

.point {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    background: #fff;
    border: 3px solid #27be95;
    position: relative;
    top: -15px;
    float: left;
    margin-right: 100px;
}

.point1 {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    background: #fff;
    border: 3px solid #c8c8c8;
    position: relative;
    top: -15px;
    float: left;
    margin-right: 100px;
}

.point-grey {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    background: #fff;
    border: 3px solid #c8c8c8;
    position: relative;
    top: -15px;
    float: left;
    margin-right: 100px;
}

.point-blue {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    background: #fff;
    border: 3px solid #00aeef;
    position: relative;
    top: -15px;
    float: left;
    margin-right: 100px;
}

.point-red {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 15px;
    background: #fff;
    border: 3px solid red;
    position: relative;
    top: -15px;
    float: left;
    margin-right: 100px;
}

.point:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    cursor: pointer;
}

.point1:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    cursor: pointer;
}

.point-grey:hover {
    border: 3px solid #27be95;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    cursor: pointer;
}

.point-blue:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
    cursor: pointer;
}
/*เปลี่ยนสีวงกลม*/


/*เปลี่ยนรูปในวงกลม*/

.checkmark {
    background-image: url(images/checkmark.png);
    background-repeat: no-repeat;
    background-position: center;
}

.uncheckmark {
    background-image: url(images/icon-close-000.png);
    background-repeat: no-repeat;
    background-position: center;
}

.plus {
    background-image: url(images/plus.png);
    background-repeat: no-repeat;
    background-position: center;
}

.circle {
    background-image: url(images/circle-icon.png);
    background-repeat: no-repeat;
    background-position: center;
}


/*เปลี่ยนรูปในวงกลม*/


/*Table section*/

.paid-date-section {
    width: 140px;
}

.packkage-paid-section {
    width: 340px;
}

.promotion-code-section {
    width: 180px;
}

.credit-section {
    width: 150px;
}

.status-section {
    width: 150px;
}

.service-date-section {
    width: 150px;
}

.billing-desc-section {
    width: 360px;
}

.billing-credit-section {
    width: 140px;
}

.billing-creditfl-section {
    width: 150px;
}

.billing-creditlt-section {
    width: 160px;
}

.heading-field {
    width: 120px;
}

.credit-blue-text {
    color: #6699cc;
}

.credit-yellow-text {
    color: #ffbb44;
}

.credit-green-text {
    color: #05b4af;
}

.credit-red-text {
    color: #ff6666;
}

.credit-grey-text {
    color: #666666;
}

.credit-large-text {
    font-size: 44px;
    font-weight: 700;
}

.credit-small-text {
    font-size: 18px;
}

.field:first-child {
    margin-bottom: 20px;
}

.modal-footer {
    padding: 10px;
    background: #F9FAFB;
    border-radius: 0 0 6px 6px;
}

.save-message {
    width: 100% !important;
    height: 60px !important;
}


/*-----------------------------------*$Account*------------------------------------*/

.content_large-size {
    width: 1120px;
    margin: 0 auto;
}

.account_console-tab {
    width: 1120px;
    padding: 10px;
    max-height: 60px;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 30px;
    border-radius: 5px;
    border: 1px solid #ddd;
    float: left;
}

    .account_console-tab .ui.button:first-child {
        margin-left: 0;
    }

.export-section {
    line-height: 40px;
    padding: 0 0 0 10px;
    border-left: 1px solid #ddd;
}

    .export-section img {
        vertical-align: middle;
    }

    .export-section a {
        outline: none;
    }

.table-header-right a {
    text-decoration: none;
    outline: none;
}

.menu-tab {
    height: 40px;
    padding: 0 10px;
    border-left: 1px solid #ddd;
    display: inline-block;
}

    .menu-tab li {
        float: left;
        padding: 0 10px;
        box-sizing: border-box;
        margin-top: 10px;
        margin-left: 5px;
        margin-right: 5px;
        cursor: pointer;
    }

        .menu-tab li:hover {
            border-bottom: 2px solid #6699dd;
        }

.menu-tab-active {
    border-bottom: 2px solid #6699dd;
}

.menu-tab .fa {
    font-size: 12px;
}

.menu-tab img {
    max-width: 16px;
}

.account-number-section {
    width: 60px;
}

.account-btn-section {
    width: 40px;
}

.account-name-section {
    width: 300px;
}

.account-category-section {
    width: 140px;
}

.account-sub-section {
    width: 240px;
}

.account-sub1-section {
    width: 140px;
}

.account-recieved-section {
    width: 119px;
}

.account-option-section {
    width: 40px;
}

.calendar-section {
    line-height: 40px;
    margin-left: 10px;
}

    .calendar-section p {
        display: inline-block;
        margin-left: 10px;
        margin-right: 10px;
    }

    .calendar-section input {
        margin-right: 10px;
    }

    .calendar-section img {
        vertical-align: middle;
        max-width: 16px;
    }


/*Chart of Account Table*/

.chartofacc-table {
    width: 100%;
    float: left;
    border-collapse: separate;
    background: #fff;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

    .chartofacc-table td {
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
        vertical-align: top;
    }

    .chartofacc-table th {
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
    }


/*Accounting Trial Balance*/

.accounting-trialbalance-table {
    width: 100%;
    float: left;
    border-collapse: separate;
    border-radius: 5px 5px 0 0;
    background: #fff;
    table-layout: fixed;
}

    .accounting-trialbalance-table td {
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #ddd;
    }

    .accounting-trialbalance-table th {
        padding: 10px;
        text-align: center;
        box-sizing: border-box;
        border-right: 1px solid #ddd;
    }

        .accounting-trialbalance-table th:last-child {
            border: none;
        }

.accounting-trialbalance-tablebottom {
    table-layout: fixed;
}

    .accounting-trialbalance-tablebottom th {
        border-left: 1px solid #ddd;
        padding: 10px;
        box-sizing: border-box;
        text-align: right;
    }

        .accounting-trialbalance-tablebottom th:last-child {
            border-right: 1px solid #ddd;
        }

    .accounting-trialbalance-tablebottom td {
        padding: 10px;
        background: #fff;
        border: 1px solid #ddd;
        box-sizing: border-box;
    }

    .accounting-trialbalance-tablebottom th:hover {
        background: none;
    }

.chartofacc-table-dlttd {
    padding: 0 !important;
}


/*Chart of Account Begin Balance*/


/*Chart of Account input*/

.chartofaccount-modal {
    width: 550px;
}

    .chartofaccount-modal .modal-header {
        overflow: hidden;
    }

    .chartofaccount-modal span.modal-data {
        top: 0;
        float: left;
        width: 378px;
        word-wrap: break-word;
    }

    .chartofaccount-modal .modal-form li {
        width: 100%;
        float: left;
    }

    .chartofaccount-modal .modal-body {
        width: 100%;
        display: inline-block;
    }

.main-account-input {
    width: 290px;
}

.sub-account-input {
    width: 290px;
}

.accountnumber-input {
    width: 100px;
}

.accountname-input {
    width: 360px;
}

.info-input {
    width: 360px;
    height: 80px;
}

.taxrecieved-input {
    width: 350px;
}

.wht-input {
    min-width: 40px !important;
}

.chartofacc-beginbalance-table {
    width: 100%;
    float: left;
    background: #fff;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

    .chartofacc-beginbalance-table td {
        padding: 10px;
        box-sizing: border-box;
        vertical-align: top;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

        .chartofacc-beginbalance-table td:last-child {
            border-right: none;
        }

    .chartofacc-beginbalance-table th {
        padding: 10px;
        box-sizing: border-box;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

.table-total {
    background: #EFF5FC none repeat scroll 0 0 !important;
}

.account-numberaccount-section {
    width: 100px;
}

.account-name1-section {
    width: 680px;
}

.account-debit-section {
    width: 170px;
}

.account-credit-section {
    width: 170px;
}

.tax-table-dlttd {
    padding: 0 !important;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.account-table-input {
    width: 100%;
    border-radius: 0;
    border: 0;
    padding: 10px 5px;
    background: #FAFFFF;
}

.dailyjournal-tb img {
    max-width: 18px;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

.dailyjournal-tb td {
    padding: 10px;
}

.dailyjournal-tb ui.popup {
    width: 60px !important;
    cursor: pointer;
}

.dailyjournal-tb .fa {
    font-size: 12px;
    /*line-height: 40px;*/
}

.dailyjournal-number {
    margin-top: 5px !important;
    float: left;
}

.dailyjournal-number-section, .dailyjournal-number-section-for-checkBox {
    width: 171px;
}

.dailyjournal-descpt-section {
    width: 400px;
}

.dailyjournal-descpt2-section {
    width: 220px;
}

.dailyjournal-descpt3-section {
    width: 320px;
}

.dailyjournal-date-section {
    width: 120px;
}

.dailyjournal-note-section {
    width: 139px;
}

.dailyjournal-debit-section {
    width: 120px;
}

.dailyjournal-crebit-section {
    width: 120px;
}

.dailyjournal-addfile-section {
    width: 60px;
}

.dailyjournal-status-section {
    width: 40px;
}

.dailyjournal-check-section {
    width: 40px;
}

.dailyjournal-contact-section {
    width: 320px;
}

.dailyjournal-save-section {
    width: 80px;
}

.dailyjournal-savedraft-section {
    width: 140px;
}

.dailyjournal-repeat-section {
    width: 140px;
}

.dailyjournal-console-section {
    width: 100px;
}

.dailyjournal-tb .ui.icon.button,
.ui.icon.buttons .button {
    margin: 0;
    padding: 0 !important;
    background: transparent none repeat scroll 0 0;
    vertical-align: middle;
}

    .dailyjournal-tb .ui.icon.button,
    .ui.icon.buttons .button img {
        padding: 0;
    }

.dailyjournal-detail-header {
    width: 100%;
    float: left;
}

.dj-detail-contact {
    width: 310px;
}

    .dj-detail-contact label {
        float: left;
    }

.dj-detail-content {
    width: 240px;
    float: right;
}

.dj-detail-description {
    width: 500px;
}

    .dj-detail-description label {
        float: left;
    }

.dj-detail-description-content {
    width: 340px;
    float: right;
}

.dailyjournal-detail-3 {
    width: 123px;
}

.dailyjournal-total {
    width: 363px;
    border-collapse: separate;
    border-radius: 0 0 5px 5px;
    float: right;
}

.dailyjournal-total {
    width: 363px;
    border-collapse: separate;
    border-radius: 0 0 5px 5px;
    float: right;
}

.dailyjournal-total-1 {
    width: 66px;
}

.dailyjournal-total-2 {
    width: 133px;
    text-align: right;
    border-collapse: separate;
    border-radius: 0 0 0 5px;
}

.dailyjournal-total-3 {
    width: 134px;
    text-align: right;
    border-collapse: separate;
    border-radius: 0 0 5px;
}

.dailyjournal-total td:nth-child(3n) {
    border-left: 0;
}

.dailyjournal-close {
    width: 32px;
}

.dailyjournal-total td {
    padding: 10px;
    background: #f0f0f0;
    box-sizing: border-box;
    border-top: none;
}

    .dailyjournal-total td:first-child {
        background: none;
        border: none;
    }

    .dailyjournal-total td:last-child {
        background: none;
        border: none;
    }

.list-dropdown img {
    max-width: 24px;
    margin-top: 5px;
}


/*------------------------------------*$Account*------------------------------------*/


/*------------------------------------*$FORM*------------------------------------*/

input.form-size {
    width: 200px;
    height: 30px;
}

    input.form-size.contact-name-input {
        width: 222px;
    }

input.form-size1 {
    width: 200px;
    height: 100px;
    vertical-align: text-top;
}

input.form-small {
    width: 150px;
    line-height: 30px !important;
}

input.form-smallsize {
    width: 140px;
    height: 30px;
}

input.input-invoice {
    text-align: right;
    float: right;
    padding-right: 10px;
}

.number {
    width: 100px;
    line-height: 30px;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #646464;
    border-radius: 5px;
    color: #656565;
}


/*
input[type="text"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}*/

input[type="checkbox"] {
    padding-top: 10px;
}

    input[type="checkbox"] + label span {
        display: inline-block;
        width: 15px;
        height: 15px;
        margin: 0 4px 0 0;
        vertical-align: middle;
        background: #477ca5;
        border: 1px solid #42a1eb;
        border-radius: 50px;
        cursor: pointer;
        transition: all .3s ease-in-out;
    }

input[type="file"] {
    display: block;
    font-size: 16px;
    font-family: 'CordiaUPC_1230459';
}

.field-form {
    display: inline-block;
    width: 180px;
    padding: 10px 0 10px 15px;
    font-weight: 400;
    color: #377D6A;
    background: #f3f8fb;
    border: 1px solid #42a1eb;
    border-radius: 3px;
    outline: 0;
    text-indent: 60px;
    transition: all .3s ease-in-out;
}

    .field-form::-webkit-input-placeholder {
        color: #efefef;
        text-indent: 0;
        font-weight: 300;
    }

    .field-form + label {
        display: inline-block;
        position: absolute;
        top: 8px;
        left: 0;
        bottom: 8px;
        padding: 5px 15px;
        color: #42a1eb;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        text-shadow: 0 1px 0 rgba(19, 74, 70, 0);
        transition: all .3s ease-in-out;
        border-radius: 3px;
        background: rgba(122, 184, 147, 0);
    }

        .field-form + label:after {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            top: 100%;
            left: 50%;
            margin-left: -3px;
            border-left: 3px solid transparent;
            border-right: 3px solid transparent;
            border-top: 3px solid rgba(122, 184, 147, 0);
            transition: all .3s ease-in-out;
        }

    .field-form:focus,
    .field-form:active {
        color: #377D6A;
        text-indent: 0;
        background: #fff;
    }

        .field-form:focus::-webkit-input-placeholder,
        .field-form:active::-webkit-input-placeholder {
            color: #aaa;
        }

        .field-form:focus + label,
        .field-form:active + label {
            color: #fff;
            text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);
            background: #42a1eb;
            transform: translateY(-40px);
        }

            .field-form:focus + label:after,
            .field-form:active + label:after {
                border-top: 4px solid #7ab893;
            }

.row {
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}

    .row:before {
        position: absolute;
        content: "";
        display: block;
        top: 0;
        z-index: -1;
        background: inherit;
    }

    .row span {
        position: relative;
        display: inline-block;
        margin: 0 10px 10px 0;
    }

input:checked + .slider-v2::before {
    box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset, 0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7), 3em 0 0 0 #42a1eb inset;
}

input:checked + .slider-v2::after {
    left: 2em;
}

input.size-reduce-sell {
    width: 100px;
    height: 30px;
    margin-left: 50px;
    position: relative;
    bottom: 15px;
    left: 4px;
}

input.size-reduce-buy {
    width: 100px;
    height: 30px;
    margin-left: 50px;
    position: relative;
    bottom: 15px;
    left: 16px;
}

input[type=text],
textarea {
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    input.form-size:focus,
    textarea:focus {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    input:focus,
    textarea:focus {
        border: 1px solid #6699cc;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


/* New-button */

.button-box div,
dropdown {
    margin-left: 20px;
}

.button-box a {
    text-decoration: none;
}

.button-main {
    width: 140px;
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 0 2px #c8c8c8;
    color: #fff;
    cursor: pointer;
}

.button-medium {
    width: 80px;
    display: inline-block;
    line-height: 40px;
    vertical-align: middle;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 0 2px #c8c8c8;
    color: #fff;
    cursor: pointer;
}

.button-small {
    width: 60px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    display: inline-block;
}

.different-border {
    float: left;
    border-radius: 0 0 5px 5px;
}

.delete-border-rd {
    border-radius: 0;
    border: none;
    margin-bottom: 0 !important;
}

.payment-border-mid {
    border-left: 1px dashed #27be95;
    border-right: 1px dashed #27be95;
}

.payment-border-bottom {
    border: 1px dashed #27be95;
    border-top: none;
}

.payment-border-bottom-red {
    box-shadow: 0 0 2px #c8c8c8;
}

.different-border-table {
    border-radius: 0 5px 0 0;
}

.button-green {
    background: #00B5AD !important;
}

    .button-green:hover {
        background: #00c4bc !important;
    }

.button-purple {
    background: #612895 !important;
}

    .button-purple:hover {
        background: #713ea0 !important;
    }

.button-blue {
    background: #6699cc !important;
}

    .button-blue:hover {
        background: #346699 !important;
    }

.button-Lightblue {
    background: #5fb4e5 !important;
}

    .button-Lightblue:hover {
        background: #27ade2 !important;
    }

.button-Darkblue {
    background: #009bdf !important;
}

.button-red {
    background: #f66666 !important;
}

    .button-red:hover {
        background: #f88888 !important;
    }

.button-grey {
    background: #999 !important;
}

    .button-grey:hover {
        background: #666 !important;
    }

.button-Lightgrey {
    background: #ccc !important;
}

    .button-Lightgrey:hover {
        background: #666 !important;
    }

.button-white {
    background: #fff !important;
    color: #646464 !important;
}

.button-yellow {
    background: #ffc323 !important;
}

    .button-yellow:hover {
        background: #ffc939 !important;
    }

.console-btn-section {
    background: #F9FAFB none repeat scroll 0 0;
    float: right;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 0 0 5px 5px;
    border: 1px solid #DDD;
    border-top: none;
}

.trash {
    background-image: url(images/lock.png);
    background-repeat: no-repeat;
    background-position: left 10px center;
}

.inactive-button {
    color: #fff;
    background: #c8c8c8;
    background-image: url(images/lock.png);
    background-repeat: no-repeat;
    background-position: left 10px center;
    border-radius: 5px;
}


/* New-button */


/*Loading page*/

.loading-container {
    width: 400px;
    background: #fff;
    padding: 20px;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    border-radius: 5px;
    box-shadow: 0 0 2px #c8c8c8;
}

    .loading-container p {
        margin-bottom: 20px;
    }

    .loading-container .fa-heart {
        color: #f37b76;
        margin-right: 5px;
    }

    .loading-container .progress {
        margin: 0;
        padding: 0;
    }

.progress-bar.animate {
    width: 100%;
}


/*Loading page*/


/*------------------------------------*$Semantic Class**/

.ui.popup {
    min-width: 200px;
    max-width: 200px;
    word-wrap: break-word;
    white-space: normal;
    height: auto;
    opacity: none;
    text-align: left;
    font-weight: normal !important;
    font-size: 20px;
    padding: 0.2em 0.4em;
    font-family: "CordiaUPC_1230459";
}

    .ui.popup.mini {
        min-width: 50px;
        text-align: center !important;
        padding: 0.2em 0.4em;
    }

.ui.selection.dropdown {
    background-color: #FAFFFF;
    border: 1px solid #DDD;
    border-radius: 3px;
    color: #646464;
    padding: 5px 4px;
}

    .ui.selection.dropdown.visible {
        box-shadow: none;
    }

.ui.dropdown > .dropdown.icon {
    font-family: Dropdown;
    /*line-height: 20px;*/
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

.ui.search.selection.dropdown > input.search {
    margin: 0 0.4em;
    padding: 0;
}

.ui.selection.dropdown .menu > .item {
    padding: 0.39em 0.5em !important;
}

.ui.dropdown > .text {
    margin-left: 0.3em;
}

.ui.button.ui.dropdown > .text {
    margin-left: 0;
    margin-top: 5px;
}

.ui.selection.dropdown > .text {
    margin-right: 1.5em;
}

.ui.dropdown.error {
    background-color: #FFF0F0;
    border-color: #DBB1B1;
    color: #D95C5C;
    box-shadow: none;
}

    .ui.dropdown.error,
    .ui.dropdown.error > .default.text,
    .ui.dropdown.error > .text {
        color: #D95C5C;
    }

i.icon {
    font-size: 0.8em;
    vertical-align: middle;
}

.selection-popup {
    min-width: 100px !important;
}

.selection-popup-mid {
    min-width: 120px !important;
}

.selection-popup-huge {
    min-width: 200px !important;
}

.selection-large-popup {
    min-width: 400px !important;
}

.selection-dropdown-bank {
    min-width: 400px !important;
}

.ui.selection.dropdown > .delete.icon,
.ui.selection.dropdown > .dropdown.icon,
.ui.selection.dropdown > .search.icon {
    padding: 0.85em 0.2em;
}

.ui.label {
    padding: 0.2em 0.2em;
    margin-top: 3px;
}

    .ui.label:first-child {
        margin-left: 6px;
    }

.ui.dropdown .menu .active.item {
    font-weight: normal;
    color: #000;
}

.new-user-table .ui.selection.dropdown {
    padding: 15px 12px !important;
    border: none;
}

    .new-user-table .ui.selection.dropdown > .text {
        margin-right: 0;
    }

#header .ui.selection.active.dropdown > .text:not(.default),
.ui.selection.visible.dropdown > .text:not(.default) {
    color: #666;
}


/*
.ui.dropdown .menu > .item span {
    margin-left: 20px;
}*/

.peak-header.ui.dropdown .menu > .item {
    padding: 0.714286em 1.14286em 0.714286em 0.6em;
}

.ui.dropdown .menu > .item {
    padding: 0.714286em 0.6em;
}

.ui > .fa-times {
    float: right;
    cursor: pointer;
}

.ui.message .header {
    font-weight: normal;
    font-family: "CSPraJad";
}

.header > .fa-check {
    color: #B7CAA7 !important;
}

.header > .fa-times {
    color: #DBB1B1 !important;
}

.ui.button {
    font-weight: normal;
    font-family: "CordiaUPC_1230459";
}

.ui.header {
    font-family: "CordiaUPC_1230461";
    font-weight: normal;
}

.ui.button.focus {
    box-shadow: none;
}


/*
.ui.buttons {
    margin: 0;
}*/

.ui.button {
    padding: 9px 0.50em;
    color: #fff;
}

    .ui.button:hover {
        color: #fff;
    }

.ui.icon.button,
.ui.icon.buttons .button {
    padding: 0.75em 0.30em;
}


/*dashboard home*/

.ui.selection.dropdown {
    min-height: 0;
}

.ui.multiple.search.dropdown,
.ui.multiple.search.dropdown > input.search {
    /* width: 240px;*/
    margin: 0;
    padding: 0;
}

.ui.multiple.dropdown .dropdown.icon {
    margin: -7px -0.714286em 0 0;
}

.accounting-record-tag .ui.multiple.dropdown .dropdown.icon {
    display: none;
}

.label {
    font-weight: normal;
}

.ui.label {
    font-weight: normal;
}

.ui.multiple.search.dropdown > input.search {
    color: #000;
}

.advance-search .typing-text {
    height: 0;
}

.ui.multiple.search.dropdown > input.search {
    height: 15px;
}

.ui.multiple.search.dropdown > .text {
    margin: 0 0 0.45241em 0.714286em;
}

i.icon.cancel::before,
i.icon.close::before,
i.icon.delete::before,
i.icon.remove::before,
i.icon.x::before {
    content: "x";
}

.ui.blue.button,
.ui.blue.buttons .button {
    background: #6699cc;
}

    .ui.blue.button:hover {
        background: #346699;
    }

.search-section .ui.search.dropdown > .text {
    padding-left: 30px;
}

.search-section .ui.search.selection.dropdown > input.search {
    padding-left: 45px !important;
    padding-top: 12px !important;
}

.search-section .ui.selection.dropdown {
    padding: 0.785714em 2.6em 0.785714em 1em !important;
}


/*category dropdown*/

.tbproductcategory.top {
    height: 0;
}

.category-dropdown {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    background: none !important;
    margin: 0;
    margin-left: 0 !important;
    border-radius: 0 !important;
}

.ui.top.left.pointing.dropdown > .menu {
    min-width: 200px;
}

.ui.icon.button,
.ui.icon.buttons .button {
    text-align: center;
}

.category-dropdown .fa {
    color: #6699cc;
    margin: 0 !important;
}

.category-dropdown .fa-question {
    font-size: 24px !important;
    color: #6699cc;
}

.category-dropdown .fa:hover {
    color: #346699 !important;
}

.ui.button:focus {
    box-shadow: none !important;
}

.ui.icon.button,
.ui.icon.buttons .button {
    vertical-align: middle;
}

.category-dropdown .fa {
    color: #6699cc !important;
}


/*
.ui.icon.button,
.ui.icon.buttons .button {
    padding: 0;
}*/

.item .innercatetext {
    display: inline-block;
    margin-left: 5px;
}

.text .innercatetext {
    display: none;
}


/*Checkbox+radio*/

.ui.checkbox {
    vertical-align: middle;
}

    .ui.checkbox.is-inline-label label {
        white-space: nowrap;
    }

.check > .ui.checkbox {
    width: 100%;
}

    .check > .ui .checkbox label {
        margin: 0;
    }

.checkbox,
.radio {
    margin-top: 0;
    margin-bottom: 0;
}

.ui.checkbox label,
.ui.checkbox + label {
    margin: 0;
}

.ui.checkbox label {
    line-height: 20px;
}

    .ui.checkbox .box::before,
    .ui.checkbox label::before {
        border-radius: 0.15em;
    }

    .ui.checkbox .box::after,
    .ui.checkbox .box::before,
    .ui.checkbox label::after,
    .ui.checkbox label::before {
        font-size: 14px;
    }

    .modal-dialog.ui.checkbox .box::before,
    .ui.checkbox label::before {
        width: 15px;
        height: 15px;
    }

.modal-dialog.ui.radio.checkbox .box::before,
.ui.radio.checkbox label::before {
    width: 13px;
    height: 13px;
}

.ui.radio.checkbox .box::after,
.ui.radio.checkbox label::after {
    width: 15px;
    height: 15px;
}

.ui.checkbox .box::before,
.ui.checkbox label::before {
    border: 1px solid #DDDDDD;
}


/*Category in popup*/

.ui.selection.dropdown .menu {
    /*min-width: 100%;*/
    /* overflow: visible;*/
}

.ui.button {
    color: #fff;
}


    /*
.ui.button:hover {
    color: #646464;
}*/

    .ui.button:focus {
        color: #fff;
    }


/**UI SEMANTIC DD**/

.contact-dropdown {
    width: 200px;
}

.refer-dropdown {
    min-width: 120px !important;
}

.tax-table-dropdown {
    min-width: 40px !important;
    border: 0 !important;
}

.discount-table-dropdown {
    min-width: 40px !important;
    border: 0 !important;
}

.disable-div > .dropdown.icon::before {
    color: #c8c8c8;
}

.ui.icon.input input {
    padding-right: 0 !important;
}

.ui.selection.dropdown .menu {
    max-height: 7em;
    width: -webkit-fill-available;
}

.ui.icon.button,
.ui.icon.buttons .button {
    padding: 0.41em 0.3em !important;
}

h2.ui.header {
    font-size: 1.4em;
}

.ui.header > .image,
.ui.header > img {
    width: 1.2em;
    margin-top: 0;
}

.ui.dropdown .menu .menu {
    margin: 0 !important;
}

.ui.styled.accordion .accordion .content,
.ui.styled.accordion .content {
    margin: 0;
    padding: 0.5em 3em 1.5em;
}

.ui.checkbox .box,
.ui.checkbox label {
    padding-left: 1.2em;
}

.ui.icon.button > .icon,
.ui.icon.buttons .button > .icon {
    vertical-align: middle;
}

i.icon {
    font-size: 16px;
}

.ui.header:first-child {
    margin-top: -0.165em !important;
}

.ui.top.right.pointing.dropdown > .menu {
    margin: 0.5em -10px 0;
}

.ui.buttons .button:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.ui.buttons .button:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.ui.search.dropdown > .text {
    color: #666;
}

.ui.form input:not([type]),
.ui.form input[type="number"],
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="search"],
.ui.form input[type="password"],
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="url"] {
    font-size: 22px;
    font-family: 'CordiaUPC_1230459';
    line-height: 1.4em;
    padding: 0.24em 1em 0.04em 1em;
    border-radius: 3px;
    margin-top: -1px;
}

.ui.input input:focus,
.ui.input.focus input {
    background-color: #FAFFFF;
    border: 1px solid #6699CC;
}

.ui.input input:active,
.ui.input.down input {
    border: 1px solid #6699CC;
}

.ui.compact.button,
.ui.compact.buttons .button {
    padding: 0.3em 0.83em;
}

.daterangepicker .ranges .input-mini {
    font-size: 20px;
}

.daterangepicker .daterangepicker_start_input label,
.daterangepicker .daterangepicker_end_input label {
    font-size: 18px;
}

.ui.icon.input > i.icon::after,
.ui.icon.input > i.icon::before {
    margin-top: -0.4em;
}

.ui.input[class*="left icon"] > input {
    padding-left: 1.8em !important;
}

.daterangepicker table {
    font-size: 16px;
}


/*----------------------------------*$Table Material*------------------------------------*/

.table-width-checkbox {
    width: 40px;
    text-align: center;
}

.table-wi .ui.blue.button,
.ui.blue.buttons .button {
    background: #6699cc;
}

dth-head {
    width: 80px;
    text-align: left;
}

.table-width-genaral {
    width: 145px;
    text-align: left !important;
}

.table-width-date {
    width: 122px;
    text-align: center;
}

.table-width-duedate {
    width: 136px;
    text-align: center;
}

.table-width-base {
    width: 18%;
    text-align: center;
}

.table-width-email {
    width: 200px;
    text-align: left !important;
}

.table-width-name {
    width: 240px;
    text-align: left !important;
}

.table-width-customer {
    /*width: 290px;*/
    text-align: left !important;
}

.table-width-email {
    width: 170px;
    text-align: left !important;
}

.table-width-account {
    width: 160px;
    text-align: left !important;
}

.table-width-amount {
    width: 120px;
    text-align: right !important;
    padding-right: 10px !important;
}

.table-width-amount-small {
    width: 120px;
    text-align: right !important;
    padding-right: 10px !important;
}

.table-width-three {
    width: 300px;
}

.table-width-longname {
    width: 360px;
}

.table-width-income {
    width: 180px;
}

.table-width-short {
    width: 10px;
}

.table-align {
    text-align: center !important;
}

.table-alignR {
    text-align: right !important;
}

.td-color {
    color: #666666;
}

td > .fa-yellow {
    margin: 0 !important;
}

.table-footer-option {
    width: 100px;
    text-align: left;
}

.table-footer-option-center {
    width: 220px;
    text-align: left;
    padding-right: 10px;
}

.table-footer-option-right {
    width: 580px;
    text-align: left;
}

    .table-footer-option-right select {
        margin-right: 10px;
    }

.table-ref-section {
    width: 140px;
}

.table-checkDate-section {
    width: 100px;
}

.table-checkRemain-section {
    width: 80px;
}

.table-number-section {
    width: 120px;
}

.table-bank-section {
    width: 80px;
}

.table-productCode-section {
    width: 140px;
}

.table-productDesc-section {
    width: 180px;
}

.table-productPrice-section {
    width: 100px;
}

.table-productRadio-section {
    width: 50px;
    text-align: center;
}

.table-productTotal-section {
    width: 80px;
}

.table-productButton-section {
    width: 60px;
}

.ddl-table-footer-option {
    width: 58px;
    text-indent: 0;
}

.table-customerName-section {
    width: 259px;
}

.table-expireDate-section {
    width: 120px;
}

.table-value-section {
    width: 120px;
}

.table-status-section {
    width: 40px;
}

.table-option-section {
    width: 120px;
}

.table-check-section {
    width: 40px;
}

.table-date-section {
    width: 100px;
}

.table-service-section {
    width: 180px;
}

.table-tax-section {
    width: 80px;
}

.table-paytax-category-section {
    width: 160px;
}

.table-totalproduct-section {
    width: 119px;
}

.table-totalrecieved-section {
    width: 145px;
}

.table-totaltax-section {
    width: 107px;
}

.table-statusconsole-section {
    width: 120px;
}

.table-list-section {
    width: 120px;
}


/*reset password*/

.reset-password {
    width: 445px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    margin: 0 auto;
    box-shadow: 0 0 2px #c8c8c8;
}

    .reset-password h2 {
        text-align: center;
    }

    .reset-password label {
        width: 160px;
        display: inline-block;
    }

    .reset-password li {
        margin-top: 20px;
    }

    .reset-password input {
        width: 240px;
        height: 30px;
        box-sizing: border-box;
    }

.reset-password-button {
    text-align: center;
    padding: 20px 0 0 0;
    box-sizing: border-box;
}

    .reset-password-button div {
        margin-left: 10px;
    }


/*-------------------------------------------Boostrap fix----------------------------------------------*/

.button-box li {
    float: left;
}

.button-box .btn {
    border: 0;
}

    .button-box .btn:first-child {
        width: 110px;
        height: 40px;
    }

        .button-box .btn:first-child:hover {
            background: #339999;
        }

.button-btn-green {
    width: 30px;
    height: 40px;
    border-left: 1px solid #339999 !important;
    background: #66b399 !important;
}

    .button-btn-green:hover {
        background: #339999 !important;
    }

.button-btn-blue {
    width: 30px;
    height: 40px;
    border-left: 1px solid #346699 !important;
    background: #6699cc !important;
}

    .button-btn-blue:hover {
        background: #346699 !important;
    }

.button-box .dropdown-menu li a {
    min-width: 150px;
    box-sizing: border-box;
}

    .button-box .dropdown-menu li a:hover {
        background: #f0f0f0;
    }


/*invoice detail button dropdown from boostrap*/

.invoice-detail-header .btn {
    width: 180px;
    background: #6699cc;
    color: #fff;
}

.invoice-detail-header .btn-default {
    text-shadow: none;
}

.invoice-detail-header .btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    background: #346699;
    color: #fff;
}

.invoice-detail-header .btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open > .dropdown-toggle.btn-default {
    color: #fff;
    background: #346699;
}

.invoice-detail-header .btn .dropdown-menu {
    margin-left: 20px;
}

.invoice-detail-header .dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    background: none;
}

.invoice-detail-header .button-box .btn:first-child {
    width: 140px;
}

    .invoice-detail-header .button-box .btn:first-child:hover {
        background: #346699;
    }

.invoice-detail-header .caret {
    margin-left: 50px;
}

.btn-danger {
    border: none !important;
}


/*Finance boostrap button*/


/*invoice detail button dropdown from boostrap*/

.finance-summary-bottom:last-child {
    width: 238px;
    padding: 25px 50px 25px 50px;
    box-sizing: border-box;
}

.finance-summary-bottom .btn {
    width: 140px !important;
    background: #6699cc;
    color: #fff;
    text-align: left;
}

.finance-summary-bottom.btn-group {
    margin-left: 50px;
}

.finance-summary-bottom .btn-default {
    text-shadow: none;
}

.finance-summary-bottom .btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
    background: #346699;
    color: #fff;
}

.finance-summary-bottom .btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open > .dropdown-toggle.btn-default {
    color: #fff;
    background: #346699;
}

.finance-summary-bottom .btn .dropdown-menu {
    margin-left: 20px;
}

.finance-summary-bottom .dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    background: none;
}

.finance-summary-bottom .button-box .btn:first-child {
    width: 140px;
}

.finance-summary-bottom .caret {
    margin-left: 50px;
}

.finance-summary-bottom.button-box .btn:first-child:hover {
    background: #346699 !important;
}


/*------------------------------------*$Popup*------------------------------------*/

.product-popup {
    width: 800px;
    height: 400px;
    background: #fff;
    margin: 0 auto;
    border: 1px solid #c8c8c8;
    border-radius: 5px;
    z-index: 20;
    position: relative;
}

.popup-header {
    width: 100%;
    line-height: 50px;
    float: left;
    border-bottom: 1px solid #c8c8c8;
}

    .popup-header li {
        float: left;
        padding: 10px 20px;
    }

.popup-number {
    line-height: 30px;
    float: right;
    margin-right: 40px;
}

.popup-content {
    width: 100%;
    height: 410px;
    float: left;
    padding-left: 40px;
}

    .popup-content li {
        float: left;
        padding: 10px 20px;
    }

.account-category {
    width: 120px;
    float: left;
    line-height: 30px;
}

.popup-product {
    width: 100%;
    height: 50px;
    float: left;
}

.popup-info-buy {
    width: 100%;
    height: 60px;
    float: left;
    padding: 10px 0 0 0;
}

.popup-info-sell {
    width: 100%;
    height: 60px;
    float: left;
    padding: 10px 0 0 0;
}

.popup-summary {
    width: 100%;
    height: 100px;
    float: left;
    padding-left: 160px;
}

.popup-footer {
    width: 100%;
    line-height: 40px;
    float: left;
    margin: 0;
}

.number-product {
    line-height: 30px;
    padding: 0 10px;
    text-align: center;
    background-color: #FAFFFF;
    border: 1px solid #DDD;
    border-radius: 5px;
    color: #666666;
    position: relative;
    bottom: 8px;
    right: 10px;
    margin-left: 10px;
    text-indent: 0;
}

.popup-productnumber {
    line-height: 30px;
    float: left;
    padding-left: 10px;
}

.popup-line {
    width: 720px;
    height: 1px;
    background: #c8c8c8;
    margin: 0 auto;
    float: left;
}

.popup-dateinput {
    width: 120px;
    height: 30px;
}

.reciept-popup {
    width: 700px;
    height: 350px;
    background: #ffffff;
    text-align: center;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #c8c8c8;
    text-decoration: none !important;
}

.headtext-reciept-popup {
    line-height: 50px;
    padding-left: 15px;
}

.close-popup {
    float: right;
    padding-top: 20px;
    position: relative;
    right: 15px;
}

.reciept-popup ul a {
    text-decoration: none;
}

.reciept-popup li {
    line-height: 60px;
    padding: 20px;
    border-bottom: 1px solid #c8c8c8;
    text-decoration: none !important;
}

    .reciept-popup li:nth-child(1) {
        border-top: 1px solid #c8c8c8;
    }

    .reciept-popup li:nth-child(3) {
        border-bottom: 0;
    }

.popup-update-product {
    width: 800px;
    height: 275px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 1px 1px 2px #c8c8c8;
    margin: 0 auto;
}

.popup-headtext {
    float: left;
    padding-left: 20px;
}

.update-product-number {
    float: right;
    margin-right: 30px;
    margin-top: 10px;
}


/*
.popup-update-form {
    padding-left: 60px;
}
*/

.popup-update-form li {
    float: left;
    padding-right: 20px;
    line-height: 60px;
}

.popup-update-summary {
    font-size: 20px;
    line-height: 40px;
}

    .popup-update-summary ul {
        float: left;
        text-align: center;
        margin-right: 15px;
    }

    .popup-update-summary li {
        text-align: center;
    }

.product-unit {
    width: 320px;
    float: left;
    margin-right: 80px;
}

.product-loss {
    float: left;
}

.popup-update-bottom {
    margin-top: 10px;
}

    .popup-update-bottom li {
        float: left;
    }

    .popup-update-bottom p {
        font-size: 16px;
        float: left;
        margin-top: 10px;
    }

.product-unit-summary {
    width: 105px;
    font-size: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.summary-sign {
    font-size: 50px;
    color: #fb7776;
}

.product-loss-summmary {
    /*width: 85px;*/
    font-size: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.loss-text {
    color: #f66666;
}

.product-result-summary {
    width: 150px;
    font-size: 32px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.button-wrapper {
    float: right;
    margin-top: -5px;
    padding-right: 20px;
}

.modal-form ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.modal-header h4 {
    float: left;
}

.caution-green-text {
    color: #16BD6D;
}

.modal-update {
    width: 1000px;
    min-height: 200px;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.add-newcontact {
    width: 530px;
}

.modal-radio span {
    margin-left: 5px;
}

.modal-form li {
    padding: 10px 0;
    position: relative;
}

.modal-form ul li.is-hidden {
    display: none;
}

.productname-input {
    width: 518px;
}

.modal-form input[type=text] {
    height: 30px;
    /* width: 420px;*/
}

    .modal-form input[type=text].error,
    .modal-form #ddladdcountry.error {
        background-color: #FFF6F6 !important;
        border: 1px solid #E0B4B4 !important;
    }

span.modal-date {
    margin-left: 18px;
}

.modal-date label span {
    margin-left: 30px;
}

.modal-form input[type=text]:focus {
    padding: 0 5px;
    border: 1px solid #6699cc;
    /*box-shadow: 1px 0px 2px #6699cc;*/
}

.modal-note {
    float: left;
    padding-left: 100px;
    font-size: 18px;
    color: #F37B76;
    position: absolute;
    margin-top: 4px;
}

.send-input {
    width: 420px;
}

.headline-input {
    width: 420px;
}

.modal-radio {
    float: left;
    padding: 10px 0 10px 100px;
}

.modal-select {
    width: 220px;
    background-color: #f3f8fb;
    border: 1px solid #646464;
    border-radius: 3px;
}

.finance-modal-form input[type="text"] {
    width: 200px;
    padding: 0 5px !important;
}

.check {
    margin-left: 100px;
}

.checkbox-ft {
    width: 80px !important;
}

.modal-checkbox {
    margin-left: 10px;
}

.modal-button {
    float: right;
}

.citizen-input {
    width: 130px !important;
}

.citizeninput-large {
    width: 60px !important;
    height: 30px !important;
    display: inline;
    padding-right: 0 !important;
}

.citizeninput-middle {
    width: 50px !important;
    height: 30px !important;
    display: inline;
    padding-right: 0 !important;
}

.citizeninput-Small {
    width: 20px !important;
    line-height: 30px;
    display: inline;
    padding: 0 !important;
    margin-left: -0.8%;
    text-align: center;
    text-indent: 0;
}

.citizeninput-collapse {
    margin-left: 0 !important;
}

.delete-border-radius {
    border-radius: 0;
}

.delete-border-left {
    border-left: none;
}

.first-digit {
    border-radius: 3px 0 0 3px;
}

.last-digit {
    border-radius: 0 3px 3px 0;
    margin-right: 10px;
}

.branch-input {
    width: 120px !important;
}

.address-main-input {
    width: 360px !important;
}

.address-input {
    width: 120px !important;
    margin-right: 20px;
    float: left;
}

.country-input {
    width: 200px !important;
}

.close {
    font-size: 42px;
    font-family: 'CordiaUPC_1230461';
    line-height: 18px;
    color: #000000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
    text-decoration: none;
}

    .close:hover {
        color: #000000;
        text-decoration: none;
        opacity: 0.4;
        filter: alpha(opacity=40);
        cursor: pointer;
    }

.vat-checkbox {
    line-height: 30px;
}

    .vat-checkbox label {
        width: 200px;
        padding-left: 1em;
    }


/*------------------------------------*$Modal Choose or Add Product*--------------------------------------*/

.modal-choose-product > .modal-header {
    padding: 0;
}

.modal-header-right > .ui.button {
    padding: 0.20em 0.5em;
    border-radius: 3px;
}

.modal-header-blue {
    min-height: 30px;
    background: #69C none repeat scroll 0 0;
    color: #FFF;
    padding: 10px;
    border-radius: 5px 5px 0 0;
}

.modal-productTable {
    padding: 10px;
}

.modal-choose-product {
    width: 600px;
}

.choose-product {
    width: 100%;
    table-layout: fixed;
}

    .choose-product th {
        padding: 5px 10px;
        border-top: 1px solid #f0f0f0;
        box-sizing: border-box;
    }

    .choose-product td {
        padding: 5px 10px;
        border-top: 1px solid #f0f0f0;
        box-sizing: border-box;
    }

    .choose-product th .fa-chevron-up {
        color: #c8c8c8;
        position: static;
        font-size: 12px !important;
    }

    .choose-product th .fa-chevron-down {
        color: #c8c8c8;
        position: static;
        font-size: 12px !important;
    }

.modal-footer p {
    float: left;
    line-height: 20px;
    margin: 0 10px;
}

.table-popup-search {
    height: 30px;
}

    .table-popup-search input {
        padding-left: 5px;
    }

.modal-footer-right {
    float: right;
}

    .modal-footer-right p {
        line-height: 40px;
    }

.modal-footer-left {
    float: left;
    padding: 0;
    margin-top: 5px;
}

    .modal-footer-left p:first-child {
        margin-left: 0;
    }

input[type="checkbox"] + label span {
    border: none;
    background: none;
}


/*popup add product*/

.modal-add-product {
    width: 600;
    table-layout: fixed;
}

    .modal-add-product .ui.checkbox label {
        padding: 0 !important;
    }


/*popup add product*/


/*------------------------------------*$Modal Tax*--------------------------------------*/

.modal-tax {
    width: 360px;
}

    .modal-tax li {
        padding-right: 0;
    }

        .modal-tax li:nth-child(2n) {
            margin-right: -10px;
        }

.modal-tax-body {
    padding: 0;
}

    .modal-tax-body .fa {
        color: #cccccc;
        cursor: pointer;
        font-size: 18px !important;
        line-height: 40px;
    }

        .modal-tax-body .fa:hover {
            color: #666666;
        }

    .modal-tax-body .popup {
        min-width: 200px;
        padding-left: 0;
    }


/*Peak Modal Setting */


/**Sizes ,Colors ,Margin ,Padding and Others**/

.modal-small {
    width: 300px;
}

.modal-medium {
    width: 600px;
}

.modal-large {
    width: 800px;
}


/*------------------------------------*$Tax pp-------------------------------*/

.modal-tax-pp {
    width: 960px;
}

.act-date {
    width: 120px;
}

.filling-by {
    min-width: 100px !important;
}

.filling-nml {
    min-width: 100px !important;
}

.tax-month {
    width: 60px;
}

.tax-year {
    width: 60px;
}

.tax-input {
    padding: 0 40px 0 60px;
    width: 800px;
    box-sizing: border-box;
    margin: 0 auto;
}

    .tax-input ul {
        margin-bottom: 20px;
    }

    .tax-input li {
        display: inline-block;
        margin-right: 20px;
    }

        .tax-input li:last-child {
            margin-right: 0;
        }

    .tax-input label {
        min-width: 40px;
        display: inline-block;
        float: left;
        margin-top: 6px;
        margin-right: 20px;
    }

.tax-menu-tab {
    width: 480px;
    margin: 0 auto;
    border-radius: 5px;
}

    .tax-menu-tab li {
        min-height: 1em;
        padding: 0.37em 0;
        float: left;
        background: #FFF none repeat scroll 0 0;
        border: 1px solid #ccc;
        text-align: center;
        width: 150px;
        cursor: pointer;
    }

        .tax-menu-tab li:first-child {
            border-radius: 5px 0 0 5px;
        }

        .tax-menu-tab li:last-child {
            border-radius: 0 5px 5px 0;
            border-left: 0;
        }

        .tax-menu-tab li:hover {
            background: #e0ebf5;
        }

.tax-tab-active {
    background: #e0ebf5 !important;
}

.tax-content {
    padding: 0 20px;
    margin-top: 30px;
}

.tax-container {
    width: 100%;
    padding: 30px 15px;
    box-sizing: border-box;
    float: left;
}

.circle-main {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 18px;
    color: #FFF;
    line-height: 21px;
    text-align: center;
}

.container-red {
    background: #feefef;
    border: 1px solid #f66666;
    border-radius: 5px;
    margin-bottom: 30px;
}

.container-green {
    background: #e6f7f7;
    border: 1px solid #05b4af;
    border-radius: 5px;
    margin-bottom: 30px;
}

.container-grey {
    background: #fafafa;
    border: 1px solid #cccccc;
    border-radius: 5px;
    margin-bottom: 30px;
}

.tax-container ul {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

.tax-container-bftotal {
    margin-bottom: 0 !important;
}

.tax-container ul:last-child {
    margin-bottom: 0;
}

.tax-container li {
    float: left;
}

.tax-container-input {
    width: 100px;
    margin: 0;
    line-height: 0;
    position: relative;
    top: -3px;
}

.tax-section-first {
    width: 5%;
}

.tax-section-second {
    width: 55%;
}

.tax-section-third {
    width: 40%;
    text-align: right;
    font-size: 24px;
}

.print-section {
    float: none;
    text-align: center;
}

.branchinput-small {
    width: 20px !important;
    line-height: 30px;
    display: inline;
    padding: 0 !important;
    margin-left: -2.3%;
    text-align: center;
}

.table-tax-mainsection {
    padding: 0 20px;
}

.table-tax {
    border-top: 1px solid #c8c8c8;
    border-radius: 5px;
    border-collapse: separate;
    border-radius: 5px 5px 0 0;
}

    .table-tax th {
        border-bottom: 1px solid #c8c8c8;
    }

        .table-tax th:first-child {
            border-radius: 5px 0 0 0;
        }

        .table-tax th:last-child {
            border-radius: 0 5px 0 0;
        }

.total-tax-table {
    width: 886px;
    line-height: 50px;
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
    background: #eaeff5;
    float: left;
}

    .total-tax-table div {
        float: left;
    }

.totaltax-table-right {
    float: right !important;
}

.totaltax {
    padding: 0 10px;
    box-sizing: border-box;
    text-align: right;
}

.totaltax-overall {
    width: 250px;
}

    .totaltax-overall span {
        margin: 0 30px;
    }

.totaltax-value {
    width: 50px;
}

.totaltax-value-number1 {
    width: 110px;
}

.totaltax-value-number2 {
    width: 110px;
}

.send-section {
    width: 188px;
}

.pnd3-tab {
    width: 320px;
}


/*------------------------------------*$Tax detail-------------------------------*/

.tax-table th:last-child {
    border-left: 1px solid #ccc;
}

.tax-table td:last-child {
    border-left: 1px solid #ccc;
}

.tax-table-btm th:nth-child(8n) {
    border-left: 1px solid #ccc;
}

.tax-table-btm td:nth-child(8n) {
    border-left: 1px solid #ccc;
}

.tax-table-btm th:last-child {
    border-left: none;
}

.tax-table-btm td:last-child {
    border-left: none;
}

.tax-table img {
    max-width: 16px;
    vertical-align: middle;
}

.tax-table-section {
    width: 115px;
}

.tax-table-section2 {
    width: 153px;
}

.tax-dutycycle-section {
    width: 100px;
}

.tax-listnumber-section {
    width: 120px;
}

.tax-totalpay-section {
    width: 220px;
}

.tax-totalsend-section {
    width: 220px;
}

.tax-penalty-section {
    width: 120px;
}

.tax-liquidated-section {
    width: 120px;
}

.tax-liquidatedpnd-section {
    width: 160px;
}

.table-check-section {
    width: 40px;
}

.tax-table-date {
    width: 105px;
}

.tax-doccument-number {
    width: 115px;
}

.table-taxcustomerName-section {
    width: 290px;
}

.tax-valuerate-section {
    width: 100px;
}

.table-pnd3customerName-section {
    width: 180px;
}

.tax-condition-section {
    width: 100px;
}

.tax-conditionattc-section {
    width: 100px;
}

.tax-pay-section {
    width: 120px;
}

.tax-deduc-section {
    width: 150px;
}

.tax-bfvat-section {
    width: 150px;
}

.tax-valuett-section {
    width: 159px;
}

.tax-creditbalance-section {
    width: 159px;
}

.tax-incometax-section {
    width: 115px;
}

.tax-input-section {
    width: 115px;
}

.tax-output-section {
    width: 115px;
}

.tax-paydate-section {
    width: 139px;
}

.tax-value-total {
    width: 145px;
}

.tax-inout-section {
    width: 54px;
}


/*Text Style*/

.green-txt {
    color: #05b4af;
}

.blue-txt {
    color: #6699dd;
}

.Seablue-txt {
    color: #20CBD4;
}

.Lightblue-txt {
    color: #5fb4e5;
}

.Darkblue-txt {
    color: #009bdf;
}

.red-txt {
    color: #ff6666;
}

.Brightred-txt {
    color: #ff4e00;
}

.Orangered-txt {
    color: #FF4E00;
}

.Orange-txt {
    color: #ffa269;
}

.grey-text {
    color: #cccccc;
}

.grey-txt {
    color: #999999;
}

.Lightgrey-txt {
    color: #dddddd;
}

.secure-green-txt {
    color: #16BD6D;
}

.yellow-txt {
    color: #f7ae3b;
}

.sso-txt {
    color: #3f5a93;
}

.tax-table-dlttd {
    padding: 0 !important;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.tax-table-dlttd-sm {
    padding: 0 !important;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.paytax-category {
    width: 100%;
    border-radius: 0;
    border: 0;
    padding: 10px 5px;
    background: #FAFFFF;
}

.tax-selection-dropdown .ui.icon.button,
.ui.icon.buttons .button {
    margin: 0;
    padding: 0 !important;
    background: transparent none repeat scroll 0 0;
}

.tax-selection-dropdown .ui.left.pointing.dropdown > .menu {
    top: -15px;
}

.tax-selection-dropdown img {
    max-width: 16px;
}

.tax-table-dlttd .ui.selection.dropdown {
    padding: 15px 12px !important;
    border: 0 !important;
    background: none !important;
    min-width: 134px;
}

.tax-table-dlttd-sm .ui.selection.dropdown {
    padding: 15px 12px !important;
    border: 0 !important;
    background: none !important;
    min-width: 75px;
}

.modal-tax-pp .ui.header:first-child {
    margin-top: -0.165em !important;
}

.tax-header-section {
    width: 342px;
    font-size: 24px;
    text-align: right;
}

.tax-value-first {
    width: 30%;
    text-align: center;
}

.tax-value-second {
    width: 30%;
}

.tax-value-third {
    width: 40%;
}


/*------------------------------------*$Import File popup-------------------------------*/

.modal-import li {
    display: inline-block;
    line-height: 50px;
}

.input-import {
    padding: 5px 5px 2px 5px;
}

.import-ex-txt {
    width: 420px;
}

.input-import-limit {
    color: red;
    font-size: 13px;
}
/*------------------------------------*$Add Group popup-------------------------------*/

.modal-addgroup {
    width: 300px;
}

.group-name {
    width: 218px !important;
    display: inline-block;
}

.add-group li {
    padding: 10px 0 10px 0;
}


/*------------------------------------*$Add Contact popup-------------------------------*/

.modal-savecontact {
    width: 400px;
}

.ui.checkbox label {
    font-size: 20px;
}

.modal-contact {
    width: 520px;
}

.contactrow-container .citizeninput-Small {
    margin-left: -0.75%;
    width: 24px !important;
}

    .contactrow-container .citizeninput-Small.withsearch-btn {
        margin-left: -0.70% !important;
    }

.contactrow-container-branchcode .citizeninput-Small {
    margin-left: -2.65%;
}

.modal-contact-number {
    float: right !important;
    position: relative;
    top: -8px;
    right: 15px;
}

    .modal-contact-number input {
        width: 70px;
        text-align: center;
    }

.contactrow-container {
    margin: 10px 0;
    width: 100%;
}

    .contactrow-container .ui.button {
        margin-left: 11px;
    }

    .contactrow-container:first-child {
        margin-top: 0;
    }

    .contactrow-container:last-child {
        margin-bottom: 0;
    }

.contactrow-companytype {
    min-width: 100px !important;
    max-width: 120px;
    float: left;
    display: inline;
    margin-top: 6px;
}

.contactrow-container label {
    width: 80px;
    margin-bottom: 2px;
    margin-top: 0;
}

.contactrow-container:after {
    content: " ";
    display: block;
    clear: both;
}

.contactrow-container-line {
    margin: 0.5px !important;
}

.contactrow-companydropdown {
    min-width: 155px !important;
}

.contactrow-addressinput {
    width: 100%;
}

.contactrow-branchlabel {
    margin-right: 5px;
    width: 50px !important;
}

.contactrow-addressleft,
.contactrow-addressright {
    width: 50%;
}

.contactrow-addressleft {
    float: left;
}

    .contactrow-addressleft label {
        width: 100%;
    }

    .contactrow-addressleft input {
        width: 95%;
    }

.contactrow-addressright input {
    width: 95%;
    float: right;
}

.contactrow-addressright {
    float: right;
}

    .contactrow-addressright label {
        width: 96%;
        float: right;
    }

.contactrow-emailinput {
    width: 269px;
}

.ui.radio.checkbox {
    margin: 0;
}

.modal-contact .ui.selection.dropdown {
    padding: 3px 0;
}

.modal-contact .ui.divider {
    margin: 15px 0;
}

.ui.divider:not(.vertical):not(.horizontal) {
    margin: 15px 0;
    border-top: 1px solid #f1f1f1;
}

.contactrow-container-right {
    width: 50%;
    float: right;
}

.contactrow-container-en label {
    width: 120px;
}

.contactrow-addressright label {
    width: 100% !important;
}

.contactrow-container-right label {
    width: 100% !important;
}

.contactrow-container-right input {
    margin-left: -1.6% !important;
}

.label-middle {
    margin-top: 6px !important;
}

.ui.checkbox label {
    font-size: 20px;
}

.modal-contact {
    width: 520px;
}

.modal-contact-number {
    float: right !important;
    position: relative;
    top: -8px;
    right: 15px;
}

.contactrow-container {
    margin: 10px 0;
    width: 100%;
}

    .contactrow-container .ui.button {
        margin-left: 11px;
    }

    .contactrow-container:first-child {
        margin-top: 0;
    }

    .contactrow-container:last-child {
        margin-bottom: 0;
    }

    .contactrow-container label.main-email-phone-label {
        width: 100px;
    }

.contactrow-companytype {
    min-width: 100px !important;
    max-width: 120px;
    float: left;
    display: inline;
    margin-top: 6px;
}

.contactrow-companytypeback {
    display: inline;
}

.contactrow-container:after {
    content: " ";
    display: block;
    clear: both;
}

.contactrow-container-line {
    margin: 0.5px !important;
}

.contactrow-companyinput {
    width: 250px;
}

.contactrow-addressinput {
    width: 100%;
}

.contactrow-branchlabel {
    width: 60px !important;
    margin-right: 5px;
}

.contactrow-addressleft,
.contactrow-addressright {
    width: 50%;
}

.contactrow-addressleft {
    float: left;
}

    .contactrow-addressleft label {
        width: 100%;
    }

    .contactrow-addressleft input {
        width: 95%;
    }

.contactrow-addressright input {
    width: 95%;
    float: right;
}

.contactrow-addressright {
    float: right;
}

    .contactrow-addressright label {
        width: 96%;
        float: right;
    }

.contactrow-emailinput {
    width: 269px;
}

.ui.loading.button.contact-button::before {
    width: 0.75em;
    height: 0.75em;
    margin: -0.60em -0.55em;
}

.ui.loading.button.contact-button::after {
    width: 0.75em;
    height: 0.75em;
    margin: -0.60em -0.55em;
}

.ui.radio.checkbox {
    margin: 0;
}

.modal-contact .ui.checkbox label {
    width: 100px;
}

.modal-contact .ui.selection.dropdown {
    padding: 3px 5px;
}

.modal-contact .ui.divider {
    margin: 15px 0;
}

.ui.divider:not(.vertical):not(.horizontal) {
    margin: 15px 0;
    border-top: 1px solid #f1f1f1;
}

.contactrow-container-right {
    width: 50%;
    float: right;
}

.contactrow-container-en label {
    width: 120px;
}

.contactrow-addressright label {
    width: 100% !important;
}

.contactrow-container-right label {
    width: 100% !important;
}

.contactrow-container-right input {
    margin-left: -1.6% !important;
}

.label-middle {
    margin-top: 6px !important;
}


/*------------------------------------*$Add Contact to Group popup-------------------------------*/

.modal-addcontogroup {
    width: 300px;
}

.addcontogroup-dd {
    min-width: 208px !important;
}


/*------------------------------------*$Cheque popup-------------------------------*/

.cheque-desc {
    width: 580px;
}

    .cheque-desc label {
        display: inline;
    }

.cheque-desc-input {
    width: 405px !important;
    float: left;
}

.cheque-date-input {
    width: 100px !important;
}

.cheque-no-input {
    width: 200px !important;
}

.cheque-desc ul:nth-child(2n) {
    margin-top: 20px;
    float: left;
}

.cheque-second-sec li {
    float: left;
    padding: 0 15px 0 0;
}


/*------------------------------------*$Cheque popup*------------------------------------*/

.modal-title {
    line-height: 20px;
}

    .modal-title img {
        max-width: 18px;
    }

.cheque-popup {
    width: 640px;
}

.carrying-depreciation-popup-main {
    width: 925px;
    background: none;
    -webkit-box-shadow: unset;
    -webkit-box-shadow: unset;
    border: unset;
    border-radius: unset;
}

.carrying-depreciation-popup-left {
    width: 600px;
    float: left;
}

.carrying-depreciation-popup-right {
    width: 300px;
    float: left;
    background: none;
    -webkit-box-shadow: unset;
    -webkit-box-shadow: unset;
    border: unset;
    border-radius: unset;
}

.carrying-asset-form > div > li,
.carrying-asset-form > li {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 35px;
}

    .carrying-asset-form > div > li > .carrying-asset-label,
    .carrying-asset-form > li > .carrying-asset-label {
        width: 150px !important;
        text-align: right;
    }

    .carrying-asset-form > div > li > input,
    .carrying-asset-form > li > input {
        width: 150px;
        text-align: right;
    }

    .carrying-asset-form > div > li > label,
    .carrying-asset-form > li > label {
        width: 67%;
    }

    .carrying-asset-form > div > li > .carrying-asset-toggle,
    .carrying-asset-form > li > .carrying-asset-toggle {
        width: 67%;
    }

.cheque-header {
    width: 330px;
}

.cheque-date-popup {
    width: 40px;
    float: left;
    display: inline-block;
    font-size: 16px;
    position: relative;
    bottom: 8px;
}

.cheque-date-detail {
    width: 100px;
    position: relative;
    bottom: 8px;
    right: 10px;
    max-height: 30px;
}

.cheque-body {
    padding-bottom: 0;
}

.cheque-popup li {
    float: left;
    padding: 0;
}

.modal-cheque-header {
    border-bottom: none;
}

.cheque-peak {
    background: #eff5fa;
}

.citizeninput-cheque {
    width: 20px !important;
    line-height: 30px;
    display: inline;
    padding: 0 !important;
    margin-left: -1.45%;
    text-align: center;
    position: relative;
    bottom: 8px;
}

.cheque-divide {
    width: 100%;
    height: 1px;
    background: #000;
    float: left;
}

.cheque-top-pay {
    width: 56px;
    font-size: 16px;
    margin-top: 10px;
}

.cheque-top-company {
    width: 490px;
}

.cheque-top-bearer {
    font-size: 16px;
    margin-top: 10px;
}

.cheque-bottom-pay {
    width: 56px;
    font-size: 16px;
}

.cheque-bottom-company {
    width: 490px;
    font-weight: bold;
}

.cheque-bottom-bearer {
    font-size: 16px;
}

.cheque-top-amount {
    width: 56px;
    font-size: 16px;
    margin-top: 10px;
}

.cheque-top-thAmount {
    width: 490px;
}

.cheque-bottom-amount {
    width: 56px;
    font-size: 16px;
}

.cheque-bank-label {
    width: 50px;
    font-size: 16px;
}

.cheque-pu-bank {
    width: 300px;
}

    .cheque-pu-bank.input-error,
    .select-bank.input-error,
    .input-error {
        background-color: #feeeee !important;
        border-color: #f66666 !important;
    }

.cheque-dropdown-bank {
    min-width: 250px !important;
    margin-right: 25px;
}

.cheque-amount-bath {
    width: 180px !important;
    height: 33px !important;
    border-radius: 0;
    margin-left: 15px;
    text-align: right;
}

.cheque-bath {
    width: 25px;
    font-size: 16px;
}

.modal-cheque-footer {
    background: #F9FAFB;
    border-radius: 3px;
}

.modal-cheque-input {
    background: #fff !important;
}

.cheque-number {
    width: 120px;
    text-align: center;
    font-size: 16px;
    margin-left: 20px;
}

.branch-number {
    width: 100px;
    text-align: center;
    font-size: 16px;
    margin-left: 26px;
}

.account-number {
    width: 180px;
    text-align: center;
    font-size: 16px;
    margin-left: 24px;
}

.number-console li {
    margin-top: 60px;
}

.cheque-number-input {
    font-family: 'micrenc';
    width: 120px;
    margin-left: 20px;
    font-size: 18px;
    height: 30px;
}

.branch-number-input {
    font-family: 'micrenc';
    width: 100px;
    margin-left: 26px;
    font-size: 18px;
    height: 30px;
}

.account-number-input {
    font-family: 'micrenc';
    width: 180px;
    margin-left: 24px;
    font-size: 18px;
    height: 30px;
}

.cheque-input-console input {
    margin-left: 20px;
    font-size: 24px;
}

.cheque-pu-footer {
    margin-top: 9px;
}


/*------------------------------------*$Popup update*------------------------------------*/

.modal-adjust {
    width: 540px;
}


/*------------------------------------*$Popup email*------------------------------------*/

.email-modal {
    width: 540px;
}

.email-modal-sendinput {
    width: 400px;
}

.email-modal-subjectinput {
    width: 400px;
}

.email-modal-textarea {
    width: 400px;
    height: 230px;
}


/*------------------------------------*$Small popup*------------------------------------*/

.small-popup {
    width: 260px;
    min-height: 120px;
    background: #fff;
    border-radius: 5px;
    padding: 5px 10px 15px;
    margin: 0 auto;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgb(220, 220, 220);
    background: rgba(255, 255, 255, 0.5);
    /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(255, 255, 255, 0.5);
}

.small-popup-header span {
    font-size: 24px;
}

.small-popup-content .fa {
    margin-right: 10px;
    color: #c8c8c8;
}

.small-popup-bottom span {
    font-size: 24px;
}

.small-popup-line {
    width: 220px;
    height: 1px;
    margin: 0 auto;
    background: #f0f0f0;
    margin-top: 10px;
}

.small-popup p {
    text-align: center;
    margin-top: 10px;
}


/*.small-popup::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    bottom: -2em;
    left: 50%;
    bottom: -10%;
    box-sizing: border-box;
    border: 0.5em solid #fff;
    border-color: transparent transparent $green--light $green--light;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    box-shadow: -2px 2px 2px rgb(220, 220, 220);
}*/


/*------------------------------------*$Onboarding*------------------------------------*/

.onboarding-header {
    width: 100%;
    float: left;
}

    .onboarding-header h2 {
        display: inline;
    }

.onboarding-content {
    width: 100%;
    float: left;
    font-size: 14px;
    margin-top: 10px;
}

    .onboarding-content img {
        padding: 0;
    }

.onboarding-left {
    width: 100%;
    float: left;
}

    .onboarding-left img {
        margin-top: 30%;
    }

.onboarding-right {
    line-height: 30px;
    margin-top: 10px;
    float: right;
}

    .onboarding-right p {
        text-align: left;
        padding-left: 10px;
    }

.onboarding-footer {
    width: 100%;
    float: right;
    margin-top: 10px;
}

.onboarding-box div {
    font-size: 14px;
    margin-left: 10px;
}

.circle-onboarding {
    width: 15px;
    line-height: 15px;
    border-radius: 50%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #6699cc;
    margin-right: 10px;
    display: inline-block;
    font-family: 'CordiaUPC_1230461';
}

.circle-lightblue {
    background: #99ccff;
}

.circle-lightred {
    background: #fabfb7;
}

.circle-lightgreen {
    background: #66b399;
}


/*Arrow right top*/

.onboarding-right-top-container {
    width: 400px;
    min-height: 200px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgb(220, 220, 220);
    float: left;
    overflow: visible;
    z-index: 3200;
    display: none;
}

    .onboarding-right-top-container:after,
    .onboarding-right-top-container:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        left: 100%;
        position: absolute;
        width: 0;
    }

    .onboarding-right-top-container:after {
        border-width: 9px;
        border-left-color: #fff;
        top: 40px;
    }


/*Arrow right bottom*/

.onboarding-right-bottom-container {
    width: 400px;
    min-height: 200px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgb(220, 220, 220);
    float: left;
    overflow: visible;
    z-index: 3200;
    display: none;
}

    .onboarding-right-bottom-container:after,
    .onboarding-right-bottom-container:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        left: 100%;
        position: absolute;
        width: 0;
    }

    .onboarding-right-bottom-container:after {
        border-width: 9px;
        border-left-color: #fff;
        bottom: 40px;
    }


/*Arrow left top*/

.onboarding-left-top-container {
    width: 400px;
    min-height: 200px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgb(220, 220, 220);
    float: left;
    overflow: visible;
    z-index: 3200;
    display: none;
}

    .onboarding-left-top-container:after,
    .onboarding-left-top-container:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        right: 100%;
        position: absolute;
        width: 0;
    }

    .onboarding-left-top-container:after {
        border-width: 9px;
        border-right-color: #fff;
        top: 40px;
    }


/*Arrow left bottom*/

.onboarding-left-bottom-container {
    width: 400px;
    min-height: 200px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgb(220, 220, 220);
    float: left;
    overflow: visible;
    z-index: 3200;
    display: none;
}

    .onboarding-left-bottom-container:after,
    .onboarding-left-bottom-container:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        right: 100%;
        position: absolute;
        width: 0;
    }

    .onboarding-left-bottom-container:after {
        border-width: 9px;
        border-right-color: #fff;
        bottom: 40px;
    }


/*Arrow top*/

.onboarding-top-container {
    width: 400px;
    min-height: 200px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgb(220, 220, 220);
    float: left;
    overflow: visible;
    z-index: 3200;
    display: none;
}

    .onboarding-top-container:after,
    .onboarding-top-container:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        bottom: 100%;
        position: absolute;
        width: 0;
    }

    .onboarding-top-container:after {
        border-width: 9px;
        border-bottom-color: #fff;
        left: 180px;
    }


/*Arrow bottom*/

.onboarding-bottom-container {
    width: 400px;
    min-height: 200px;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    margin: 0 auto;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgb(220, 220, 220);
    float: left;
    overflow: visible;
    z-index: 3200;
    display: none;
}

    .onboarding-bottom-container:after,
    .onboarding-bottom-container:before {
        border: solid transparent;
        content: ' ';
        height: 0;
        top: 100%;
        position: absolute;
        width: 0;
    }

    .onboarding-bottom-container:after {
        border-width: 9px;
        border-top-color: #fff;
        left: 180px;
    }


/*--------------*point-circle*-----------*/

.point-tutorial {
    width: 20px;
    height: 20px;
    float: left;
    position: absolute;
    z-index: 9999;
}

.point-icon,
.point-icon::before,
.point-icon::after {
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
    position: absolute;
    vertical-align: middle;
    background: #6699cc;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

    .point-icon::before {
        content: "";
        animation: bounce 1.5s infinite;
    }

    .point-icon::after {
        content: "";
        animation: bounce 1.5s -0.4s infinite;
    }

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

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

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

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

.point-icon p {
    text-align: center;
    color: #fff;
    margin-top: 2px;
    z-index: 9999;
    font-weight: bold;
    transform: translate(0px, 0px);
}


/*New Onboarding*/


/*POPUP*/

.new-user-setting {
    position: relative;
}

#content {
    position: relative;
}

.ui.flowing h4.ui.header {
    border-bottom: 1px solid #efefef;
    margin-bottom: 15px;
}

.ui.popup {
    padding: 11px;
}

.onboarding-button {
    z-index: 100;
}

.ui.flowing.popup {
    min-width: 280px;
    max-width: 280px;
    box-sizing: border-box;
}

    .ui.flowing.popup .ui.button {
        font-size: 20px !important;
        padding: 7px 0.50em;
        margin-left: 0;
    }

.spinner-wrapper {
    position: absolute;
}

.spinner-container {
    width: 40px;
    height: 40px;
    position: relative;
    float: left;
    cursor: pointer;
}

.spinner {
    width: 40px;
    height: 40px;
    background-color: #6699cc;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.5s infinite;
    animation: sk-scaleout 1.5s infinite;
    z-index: 1;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
    }

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

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

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

.spinner-sub {
    width: 40px;
    height: 40px;
    background-color: #6699cc;
    border-radius: 100%;
    -webkit-animation: sksub-scaleout 1.5s -0.4s infinite;
    animation: sksub-scaleout 1.5s -0.5s infinite;
    z-index: 1;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@-webkit-keyframes sksub-scaleout {
    0% {
        -webkit-transform: scale(0.0);
    }

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

@keyframes sksub-scaleout {
    0% {
        -webkit-transform: scale(0.0);
        transform: scale(0.0);
    }

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

.spinner-content {
    width: 20px;
    height: 20px;
    opacity: 1;
    text-align: center;
    border-radius: 100%;
    background: #6699cc;
    color: #ffffff;
    z-index: 9999;
    font-size: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -moz-user-select: none;
}

.onboarding-tooltip-footer {
    border-top: 1px solid #efefef;
    padding-top: 10px;
    margin-top: 15px;
    float: left;
    width: 100%;
    margin: 15px auto 0;
    text-align: center;
}

.onboarding-footer-nav {
    width: 30%;
    display: inline;
    text-align: center;
}

.footer-nav-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dddddd;
    display: inline-block;
    cursor: pointer;
    margin: 0 2px;
}

.footer-nav-circle-active {
    background: #999999;
}

.footer-nav-circle:hover {
    background: #999999;
}


/*------------------------------------*$font-awesome*------------------------------------*/

.fa {
    font-size: 16px;
    margin-right: 5px;
}

.fa-plus {
    font-size: 12px;
    color: #fff;
}

.fa-circle {
    font-size: 14px;
}

.fa-circle-o {
    font-size: 14px;
}

.fa-long-arrow-right {
    color: #27be95;
}

.fa-ellipsis-h {
    color: #27be95;
    margin-left: 5px;
}

.fa-times {
    color: #cccccc;
}

.fa .fa-circle {
    font-size: 12px;
}

.fa-align-justify {
    color: #c8c8c8;
    margin-right: 10px;
}

    .fa-align-justify:hover {
        color: #42a1eb;
    }

.fa-lock {
    color: #c8c8c8;
}

.fa-arrows {
    color: #c8c8c8;
}

.dd-item .fa-times {
    float: right;
    margin-top: 5px;
}

.fa-th {
    color: #c8c8c8;
    margin-right: 10px;
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.dd-handle .fa-th {
    cursor: move;
}

.fa-red {
    color: #f37b76 !important;
}

.fa-orange {
    color: #ff975e;
}

.fa-OrangeRed {
    color: #ff6666;
}

.fa-Crimson {
    color: #ff7f66;
}

.fa-LightCoral {
    color: #ff9966;
}

.fa-blue {
    color: #6699cc !important;
}

.fa-Lightblue {
    color: #5fb4e5;
}

.fa-Darkblue {
    color: #009bdf;
}

.fa-black {
    /*color: #000;*/
    color: #333333;
}

.fa-green {
    color: #00B5AD;
}

.fa-lightseagreen {
    color: #08aba5;
}

.fa-aquamarine {
    color: #5bc5aa;
}

.fa-seaGreen {
    color: #5bc586;
}

.fa-yellow {
    color: #fec97b;
}

.fa-darkyellow {
    color: #fec97b;
}

.fa-grey {
    color: #cccccc;
}

.fa-dark-grey {
    color: #646464 !important;
}

.fa-chevron-down {
    color: #fff;
    position: relative;
    top: 5px;
    right: 10px;
}

table .fa-chevron-down {
    color: #6699dd !important;
    position: static;
}

table .fa-chevron-up {
    color: #6699dd !important;
    position: static;
}

.fa-chevron-right,
.fa-chevron-left {
    color: #6699cc;
}

    .fa-chevron-right:hover {
        color: #346699;
    }

    .fa-chevron-left:hover {
        color: #346699;
    }

.fa-pencil-square-o {
    color: #666666;
}

.fa-list {
    color: #666666;
}

.fa-arrows-alt {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
    color: #c8c8c8;
}

    .fa-arrows-alt:hover {
        color: #666666;
    }

.fa-eye-slash {
    display: none;
    position: absolute;
    top: 60px;
    left: 20px;
    cursor: pointer;
    color: #c8c8c8;
}

    .fa-eye-slash:hover {
        color: #666666;
    }

.fa-search {
    cursor: default;
    position: absolute;
    text-align: center;
    top: 10px;
    right: 0;
    margin: 0;
    height: 100%;
    width: 2.82142em;
    opacity: 0.5;
    border-radius: 0 0.2857rem 0.2857rem 0;
    transition: opacity 0.3s ease 0s;
}

.fa-university {
    color: #6699cc;
}

.fa-exchange {
    color: #ccc !important;
}

    .fa-exchange:hover {
        color: #6699cc !important;
    }

#content .fa {
    margin-left: 3px;
}

.modal-dialog .fa {
    margin-left: 5px;
}

.align-right {
    text-align: right !important;
}

.align-left {
    text-align: left !important;
}

.align-center {
    text-align: center !important;
}

.element-marginleft {
    margin-left: 15px !important;
}

.element-marginright {
    margin-right: 15px !important;
}

.element-margintop {
    margin-top: 15px !important;
}

.element-marginbottom {
    margin-bottom: 15px !important;
}

.fluid-container {
    width: 100%;
    float: left;
}

.disable-div {
    background: #f0f0f0 !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default;
}

.disable-paymentRank {
    background: #f0f0f0 !important;
    border: 0;
}

.disable-text {
    color: #f0f0f0 !important;
    cursor: default !important;
}

.ui.selection.dropdown.disabled,
.ui.selection.dropdown.disabled:hover {
    opacity: 1 !important;
}


/*------------------------------------*$font-awesome*------------------------------------*/


/*------------------------------------*$Notification*------------------------------------*/

.notification-main {
    width: 100%;
    line-height: 60px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #27be95;
    margin-bottom: 30px;
    font-size: 22px;
}

.noti-green {
    background: #f2f9f4;
    border: 1px solid #66b399;
    color: #27be95;
}

.noti-red {
    background: #ffecea;
    border: 1px solid #f37b76 !important;
    color: #ec3737;
}

.noti-yellow {
    background: #fff2e2;
    border: 1px solid #ffce9e !important;
    color: #ff9e40;
}

.noti-red .fa {
    color: #f35353;
}

img.img-noti {
    position: relative;
    top: 10px;
}

.close-noti {
    font-size: 12px;
    margin-top: 10px;
    padding-right: 10px;
    float: right;
}

.close-noti-red {
    color: #f37b76 !important;
}

    .close-noti-red:hover {
        color: #f35353 !important;
    }

.close-noti-green {
    color: #66b399 !important;
}

    .close-noti-green:hover {
        color: #339999 !important;
    }

.close-noti-yellow {
    color: #ff9e40 !important;
}

.description .fa {
    color: #646464;
    margin-right: 10px;
}

.etc-detail .fa {
    color: #646464;
    margin-right: 10px;
}

.heading-pic {
    color: #6699cc;
    float: left;
    margin-right: 10px;
    margin-top: 5px;
}

.green-status {
    color: #27be95;
    font-size: 12px !important;
}

.red-status {
    color: #f37b76;
    font-size: 12px !important;
}

.blue-status {
    color: #42a1eb;
    font-size: 12px !important;
}

.text-countApproveTransaction {
    display: inline-block;
    background-color: #eff5fc;
    color: #000 !important;
    border-radius: 20px 20px 20px 20px;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    #content {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.text.width100 {
    width: 100% !important;
}

.tbnumber {
    width: 24px;
}

.tbdrag {
    width: 30px;
}

.tbproductcode {
    width: 10.38%;
}

.tbproductaccount {
    text-align: left;
    width: 9.42%;
}

.tbproductdescription {
    width: 22.75%
}

.tbproductamount {
    width: 7.55%;
    text-align: right;
}

.tbproductunit {
    width: 6.5%;
    text-align: center;
}

.tbproductprice {
    width: 10.38%;
    text-align: right;
}

.tbproductdiscount {
    width: 7.55%;
    text-align: right;
}

.tbproducttax {
    width: 5.66%;
    text-indent: 0;
}

.tbproductnetamount {
    width: 11.32%;
    text-align: right !important;
    margin-right: 5px;
}

.tbproductnetamount-label {
    margin-right: 5px;
}

.input-number {
    text-align: right;
}

.tbWhtType {
    width: 8.49%;
    padding: 0 !important;
}

.tbWhtInput {
    width: 70px;
    text-align: right;
}

.tbproductaccount-create-edit-expense {
    text-align: left;
    width: 120px;
}

.tbproductcategory {
    width: 155px;
}

.tbWhtInput::-webkit-input-placeholder { /* Chrome */
    color: #333;
    opacity: 1;
}

.tbWhtInput:-ms-input-placeholder { /* IE 10+ */
    color: #333;
    opacity: 1;
}

.tbWhtInput::-moz-placeholder { /* Firefox 19+ */
    color: #333;
    opacity: 1;
}

.tbWhtInput:-moz-placeholder { /* Firefox 4 - 18 */
    color: #333;
    opacity: 1;
}


.tbproductnetamount label {
    min-width: 120px;
}

.tbclosetab {
    width: 25px;
}

.redmark {
    color: #f37b76;
}

.bluemark {
    color: #42a1eb;
}

.ddlaccountid {
    width: 140px;
}

.tbWhtAmount {
    width: 105px;
}

.tutorial-background {
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    min-height: 250%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3150;
}

.tutorial-highlight {
    position: relative;
    z-index: 3170;
}

.tutorial-light-background {
    display: none;
    position: absolute;
    min-height: 250%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3190;
}

.loading-content {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    min-height: 1000%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}


/*Add Frome expense-po.html*/

.detail-result-left {
    width: 50%;
    float: left;
}

.detail-result-right {
    width: 50%;
    float: right;
}

.total-sm {
    float: right;
    line-height: 30px;
    color: #f66666;
}

.subtotal p, .subtotal span {
    line-height: 30px;
    display: block;
    float: left;
    text-align: left;
    margin-left: 30px;
}

.subtotal {
    float: right;
    display: block;
    clear: both;
}

    .subtotal p:first-child {
        min-width: 120px !important;
        text-align: right;
    }

    .subtotal p:nth-child(2n) {
        text-align: right;
        min-width: 100px;
    }

    .subtotal p:last-child {
        text-align: right;
    }

.payment-heading {
    height: 20px;
}

.line-second {
    width: 335px;
    height: 1px;
    background: #000;
    float: right;
}

.line-third {
    width: 335px;
    height: 1px;
    background: #000;
    float: right;
    margin-top: 3px;
}

.tooltip-line {
    line-height: 0;
}

.popup {
    line-height: 1.5em !important;
    background: #333333;
}

.delete-bg {
    background-image: none;
}

.payment-heading {
    height: 20px;
}

.overflow {
    overflow: hidden;
}

.modal-product {
    width: 700px;
}

    .modal-product .modal-form label {
        width: 100px;
    }

.modal-form .product-information label {
    width: 120px;
}

.product-txt {
    width: 220px;
    display: inline-block;
    color: #F35353;
    padding-left: 10px;
    margin-top: 3px;
    word-wrap: break-word;
    font-size: 14px;
}

.commentary-box {
    width: 488px !important;
    height: 80px !important;
    text-indent: 0;
}

#mdcptardescription,
#mdcpiptname {
    width: 510px !important;
    text-indent: 0;
}

.modal-product .fa:hover {
    color: #666666;
}

.modal-product .popup {
    min-width: 200px;
}

.product-name {
    float: left;
}

    .product-name li {
        float: left;
    }

    .product-name input[type="radio"] {
        margin-left: 20px;
    }

    .product-name input[type="text"] {
        width: 200px;
    }

    .product-name ul li label {
        display: inline;
    }

    .product-name label {
        width: 140px;
    }

.txt-chrome {
    line-height: 0;
}

    .txt-chrome label {
        padding-top: 34px;
    }

li > .ui.radio.checkbox {
    width: 100px;
    /* margin-left: 20px;*/
    margin-top: 5px;
}

.category-dd-pu > .ui.selection.visible.dropdown .menu {
    overflow: visible;
}

.selection-popup {
    min-width: 100px !important;
}

.selection-popup-large {
    min-width: 120px !important;
}

.modal-footer ul li:first-child {
    line-height: 40px;
}

.begin-price {
    margin-left: 20px;
}

.lock-function {
    color: #c8c8c8 !important;
}

.dropdown-menu li i {
    position: relative;
    top: -3px;
}

.modal-body-product {
    padding-top: 0;
    padding-bottom: 0;
}

.glow-text {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: none;
    /*color: #ffffff;*/
    text-shadow: 0 0 3px #FFF, 0 0 5px #FFF, 0 0 8px #FFF, 0 0 13px #99ccff, 0 0 21px #99ccff, 0 0 34px #99ccff, 0 0 55px #99ccff;
    z-index: 3170;
}

.loading-icon,
.loading-icon::before,
.loading-icon::after {
    left: 50%;
    top: 50%;
    margin-left: -10px;
    margin-top: -10px;
    position: absolute;
    vertical-align: middle;
    background: #6699cc;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

    .loading-icon::before {
        content: "";
        animation: bounce 1.2s infinite;
    }

    .loading-icon::after {
        content: "";
        animation: bounce 1.5s -0.4s infinite;
    }

    .loading-icon p {
        text-align: center;
        color: #fff;
        margin-top: 2px;
        line-height: 18px;
        z-index: 9999;
        font-weight: bold;
        transform: translate(0px, 0px);
    }

.ui.menu {
    box-shadow: none;
}


/*.dropdown.icon {
    color: #fff;
    text-align: center;
    padding: 0.2em 0.6em;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}*/

.circle-status {
    color: #FFF;
    border-radius: 1000px;
    min-width: 1em;
    line-height: 1em;
    text-align: center;
    padding: 0.2em 0.6em;
    position: absolute;
    top: 20px;
    right: 20px;
}

    .circle-status:nth-child(2n) {
        top: 50px;
        right: 20px;
    }

    .circle-status:last-child {
        top: 80px;
        right: 20px;
    }

.circle-blue {
    background: #6699cc !important;
}

.circle-red {
    background: #ff5b5b !important;
}

.circle-grey {
    background: #cccccc !important;
}

.circle-yellow {
    background: #ffbb00 !important;
}

.circle-green {
    background: #05b4af !important;
}

.icon-category {
    position: absolute;
    right: 5px;
    font-size: 12px !important;
}

.new-invoice {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

    .new-invoice .fa {
        color: #DDDDDD;
        cursor: pointer;
    }

        .new-invoice .fa:hover {
            color: #666666;
        }

.icon-category {
    position: absolute;
    right: 5px;
    font-size: 12px !important;
}

.orangemark {
    color: #f66666;
}


/*Spinner*/

.number-input {
    width: 75%;
    height: 50px;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    position: relative;
    right: 9px;
}

.spinner-group {
    position: relative;
    display: inline;
    float: right;
}

    .spinner-group .fa {
        margin-left: 0;
        color: #ccc;
    }

.spinner-up {
    position: absolute;
    right: 0;
    width: 20px;
    line-height: 26px;
    cursor: pointer;
    text-align: center;
}

.spinner-down {
    position: absolute;
    top: 25px;
    right: 0;
    width: 20px;
    line-height: 26px;
    cursor: pointer;
    text-align: center;
}

.spinner-group .fa-minus {
    margin-right: 5px;
    font-size: 12px !important;
}

.spinner-up > .fa:hover {
    color: #00B5AD;
}

.spinner-down > .fa:hover {
    color: #f66666;
}

.spinner-down .fa {
    margin: none;
}

.product-code-dropdown {
    min-width: 120px !important;
    border: 0 !important;
}

.finance-modal-form > .ui.checkbox {
    line-height: 26px;
}

.finance-modal-form > .ui.radio.checkbox label::before {
    width: 14px;
    height: 14px;
}

.ui.button {
    margin: 0 0 0 0.23em;
    background: #999;
}

    .ui.button:hover {
        background: #666;
    }

.ui.buttons {
    margin: 0 0 0 0.25em;
}

.ui.input input {
    font-family: 'CordiaUPC_1230459';
    background-color: #FAFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    color: #646464;
    padding: 5px 5px;
    /*Add top and bottom 5px for input height*/
}

.ui.icon.button,
.ui.icon.buttons .button {
    padding: 0.41em 0.4em;
}

.table-headtext {
    font-family: 'CordiaUPC_1230461';
    color: #646464;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1250;
}

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


/*Tax Online View*/

.a4-onlineview {
    top: 150px;
    position: relative;
}

.pdf-check-main .fa-check {
    margin-left: 0 !important;
    color: #666;
}

.google-visualization-tooltip {
    border: 0;
    font-size: 16px;
}


/*Cheque page*/

.finance .fa {
    color: #DDDDDD;
    cursor: pointer;
}

    .finance .fa:hover {
        color: #666666;
    }

.finance .popup {
    text-align: left;
}

.ui.button {
    box-shadow: none;
}

.finance-console {
    width: 100%;
    float: left;
}

.finance-console-tab {
    float: right;
}

    .finance-console-tab li {
        min-height: 1em;
        padding: 0.37em .9em;
        float: left;
        background: #fff;
        border: 1px solid #DDDDDD;
    }

        .finance-console-tab li:hover {
            background: #f0f9fe;
            cursor: pointer;
        }

    .finance-console-tab li {
        border-left: none;
    }

        .finance-console-tab li:first-child {
            border-left: 1px solid #DDDDDD;
            border-radius: 5px 0 0 5px;
        }

        .finance-console-tab li:last-child {
            border-radius: 0 5px 5px 0;
        }

.tab-active {
    background: #6699cc !important;
    color: #fff;
}

.cheque-table td {
    cursor: auto;
}

.cheque-waiting {
    float: left;
    width: 200px;
    line-height: 62px;
    color: #fff;
    text-align: right;
    padding-right: 10px;
}

.cheque-total {
    float: left;
    background: #fff;
    width: 250px;
    line-height: 62px;
    text-align: right;
    color: #6699cc;
    font-size: 32px;
    padding-right: 10px;
}

.negative {
    color: #f47b76;
}

.currency-table {
    width: 60px;
    line-height: 62px;
    text-align: center;
    color: #fff;
}

.table-footer-left span {
    line-height: 30px;
}

.table-footer-right span {
    line-height: 30px;
}

.table-customer-section {
    width: 260px;
}

.table-option-section {
    width: 120px;
}

.ui.teal.button,
.ui.teal.buttons .button.button-red {
    background: #f66666;
}

    .ui.teal.button,
    .ui.teal.buttons .button.button-red:hover {
        background: #f88888;
    }

.ui.header {
    position: relative;
    /* display: inline-block;*/
}

    .ui.header > .circle-status {
        padding: 1px 1px;
    }

.header-section {
    float: left;
    width: 100%;
    margin-top: 30px;
    margin-bottom: 10px;
    position: relative;
}

.circle-finance-status {
    color: #FFF;
    border-radius: 1000px;
    min-width: 1em;
    line-height: 1em;
    text-align: center;
    padding: 0.2em 0.6em;
    position: absolute;
    cursor: pointer;
    display: inline;
    left: 100px;
}

    .circle-finance-status:nth-child(2n) {
        left: 150px;
    }

.cheque-total-main {
    width: 640px;
    margin: 30px auto;
    background: #fff;
    box-sizing: border-box;
}

.cheque-total-tab {
    width: 320px;
    float: left;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    font-size: 22px;
    border: 1px solid #DDDDDD;
    position: relative;
}

.cheque-total-left {
    border-radius: 5px 0 0 5px;
    cursor: pointer;
}

    .cheque-total-left:hover {
        background: #f0f9fe;
    }

    .cheque-total-left li span {
        color: #5b8ed8;
        /*font-family: 'CordiaUPC_1230461';*/
        font-size: 36px;
    }

.cheque-total-right {
    border-radius: 0 5px 5px 0;
    border-left: none;
    cursor: pointer;
}

    .cheque-total-right:hover {
        background: #ffdada;
    }

    .cheque-total-right li span {
        color: #ff5b5b;
        /*font-family: 'CordiaUPC_1230461';*/
        font-size: 36px;
    }

.cheque-left-active {
    background: #f0f9fe;
}

.cheque-right-active {
    background: #ffdada;
}


/*New Menu*/

.ui.menu {
    margin: 0;
    background: #6699dd none repeat scroll 0 0;
}

    .ui.menu .active.item {
        color: #346699;
    }

    .ui.menu .item {
        color: #fff;
    }

.peak-menu-console i {
    margin-right: 20px;
}

.ui.menu {
    width: 960px;
    margin: 0 auto;
    border-radius: 0;
}

.ui.large.menu .item {
    font-size: 1rem;
}

.ui.menu .active.item {
    color: #ffffff;
}

.ui.link.menu .menu > .item:hover,
.ui.link.menu > .item:hover,
.ui.menu .menu > .link.item:hover,
.ui.menu .menu > a.item:hover,
.ui.menu > .link.item:hover,
.ui.menu > a.item:hover {
    color: #fff;
}

.ui.menu > a.item:hover {
    background: #3377bb;
}

.dropdown-menu-fw {
    min-width: 131px;
}

.active-menu {
    background: #3377bb !important;
    color: #fff !important;
    box-shadow: none;
}

.billing-sub-dropdown {
    background: none;
    line-height: none;
    padding: 0;
}

    .billing-sub-dropdown.menu .active.item.selected {
        background: #00b5ad !important;
    }

.addcredit-sub-item {
    background: #00B5AD !important;
    color: #fff !important;
    border-radius: 0 0 5px 5px;
}

    .addcredit-sub-item:hover {
        background: #00c4bc !important;
    }

.company-sub-name {
    text-overflow: ellipsis;
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
}

.remove_cursor-item {
    cursor: default !important;
}

.ui.large.menu .item > .fa {
    color: #6699cc;
}

.ui.large.menu .item > .fa-building-o {
    color: #fff;
}

.ui.dropdown > .fa {
    color: #6699cc;
}


/*REPEATING*/

.ui.toggle.checkbox .box::before,
.ui.toggle.checkbox label::before {
    width: 40px;
    height: 20px;
    top: 5px;
}

.ui.toggle.checkbox .box::after,
.ui.toggle.checkbox label::after {
    width: 20px;
    height: 20px;
    top: 5px;
}

.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
    padding-left: 2em;
}

.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box::after,
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label::after,
.ui.toggle.checkbox input[type="radio"]:checked ~ .box::after,
.ui.toggle.checkbox input[type="radio"]:checked ~ label::after {
    left: 1rem;
}

.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box::before,
.ui.toggle.checkbox input[type="checkbox"]:checked ~ label::before,
.ui.toggle.checkbox input[type="radio"]:checked ~ .box::before,
.ui.toggle.checkbox input[type="radio"]:checked ~ label::before {
    background: #00B5AD;
}

.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
    padding-left: 2.2em;
}

td .ui.checkbox label {
    line-height: 20px;
}

.dailyjournal-tb a {
    line-height: 40px;
}

.datepicker {
    z-index: 10500 !important;
}


/*Accounting record*/

.accounting-record {
    width: 100%;
    background: #fff;
    padding: 30px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #ddd;
    float: left;
    box-sizing: border-box;
}

.accounting-record-dateinput {
    width: 100px;
}

.accounting-record-referinput {
    width: 130px;
}

.accounting-record-accountnoteinput {
    width: 110px;
}

.accounting-record-numberinput {
    width: 110px;
    text-indent: 0;
}

.accounting-record-contactinput {
    width: 200px;
}

.accounting-record-descriptioninput {
    width: 420px;
}

.accounting-record label {
    margin-right: 5px;
}

.accounting-record-header {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-bottom: 30px;
}

    .accounting-record-header li {
        float: left;
        padding: 0 5px 0 10px;
    }

        .accounting-record-header li:last-child {
            padding-right: 0;
        }

.accounting-record-content {
    float: left;
    width: 100%;
}

    .accounting-record-content li {
        float: left;
        padding: 0 10px 0 10px;
    }

        .accounting-record-content li:last-child {
            padding-right: 0;
        }

        .accounting-record-content li:first-child {
            padding-left: 0;
        }

.accounting-record-content-topsection {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

.accounting-record-console {
    margin-left: 29px;
    max-height: 30px;
}

    .accounting-record-console img {
        max-width: 18px;
        vertical-align: middle;
        max-height: 18px;
        padding-right: 0;
        display: inline-block;
        cursor: pointer;
    }

    .accounting-record-console span {
        box-sizing: border-box;
        position: relative;
        top: 2px;
    }

    .accounting-record-console p {
        display: inline-block;
        margin-right: 10px;
    }

    .accounting-record-console li {
        float: left;
        padding: 5px 10px;
    }

    .accounting-record-console img:last-child {
        padding-right: 0;
    }

    .accounting-record-console li:last-child {
        padding-right: 0;
    }

.accounting-record-table {
    border-collapse: separate;
    border-radius: 5px 5px 0 0;
    border-top: 1px solid #ddd;
}

    .accounting-record-table th {
        border-collapse: separate;
    }

    .accounting-record-table td {
        border-right: 1px solid #ddd;
        border-left: none;
    }

        .accounting-record-table td:last-child {
            border-right: none;
        }

.accounting-record-table-header {
    background: #f0f0f0 !important;
}

.accounting-record-table img {
    padding: 0;
    margin: 0;
}

.accounting-record-accountname {
    width: 160px;
}

.accounting-record-subaccount {
    width: 140px;
}

.accounting-record-descriptionlist {
    width: 460px;
}

.accounting-record-debit {
    width: 133px;
}

.accounting-record-credit {
    width: 134px;
}

.accounting-record-close {
    width: 32px;
}

.accounting-record-input {
    width: 100%;
    border-radius: 0;
    border: 0;
    padding: 10px 5px;
    background: #FAFFFF;
}

.margin-top-20 {
    margin-top: 20px;
}

.productrow-accounting-record {
    margin-left: 110px;
}

.productrow-container .accounting-record-input {
    width: 400px;
    border: 1px solid #DDDDDD;
    border-radius: 3px;
    background-color: #faffff;
}

.accounting-record-input-value {
    text-align: right;
}

.add-list-section {
    border-radius: 0 0 5px 5px !important;
    margin: 0 !important;
}

.accounting-record-total {
    width: 363px;
    border-collapse: separate;
    border-radius: 0 0 5px 5px;
    float: right;
}

.accounting-record-total-1 {
    width: 66px;
}

.accounting-record-total-2 {
    width: 133px;
    text-align: right;
    border-collapse: separate;
    border-radius: 0 0 0 5px;
}

.accounting-record-total-3 {
    width: 134px;
    text-align: right;
    border-collapse: separate;
    border-radius: 0 0 5px;
}

.accounting-record-total td:nth-child(3n) {
    border-left: 0;
}

.accounting-record-close {
    width: 32px;
}

.accounting-record-total td {
    padding: 10px 5px;
    background: #f0f0f0;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-top: none;
}

    .accounting-record-total td:first-child {
        background: none;
        border: none;
    }

.accounting-record-taxcheck {
    margin: 10px 50px 0 0;
}

.import-dropdown .ui.header {
    line-height: 10px;
}

.ui.dropdown .menu > .divider {
    margin: 0;
}

.import-dropdown img {
    max-width: 24px;
}

.accounting-record-console .ui.icon.button,
.ui.icon.buttons .button {
    margin: 0;
    padding: 0 !important;
    background: transparent none repeat scroll 0 0;
}

.accounting-repeating-notedropdown {
    min-width: 120px !important;
}

.accounting-repeating-datestartinput {
    width: 100px;
}

.accounting-repeating-dateendinput {
    width: 40px;
}

.accounting-repeating-eachdayinput {
    width: 40px;
}


/*Comment Popup*/

.chat-bg {
    background: #f2f7fe;
    height: 350px;
    overflow-y: scroll;
}

.sender {
    padding: 10px;
    border-radius: 5px;
}

.sender-main {
    max-width: 75%;
    display: block;
    margin-bottom: 20px;
    clear: both;
}

    .sender-main img {
        max-width: 40px;
        display: inline-block;
    }

.sender-left {
    max-width: 75%;
    margin-left: 30px;
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    float: left;
}

    .sender-left:before {
        content: "";
        position: absolute;
        right: 100%;
        top: 10px;
        width: 0;
        height: 0;
        border-top: 8px inset transparent;
        border-right: 11px dashed #ccc;
        border-bottom: 8px inset transparent;
    }

    .sender-left:after {
        content: "";
        position: absolute;
        right: 100%;
        top: 11px;
        width: 0;
        height: 0;
        border-top: 7px inset transparent;
        border-right: 10px dashed #FFF;
        border-bottom: 7px inset transparent;
    }

.sender-right {
    max-width: 75%;
    margin-right: 30px;
    position: relative;
    background: #6699dd;
    border: 1px solid #ddd;
    color: #fff;
    float: right;
}

    .sender-right:after {
        content: "";
        position: absolute;
        left: 100%;
        top: 11px;
        width: 0;
        height: 0;
        border-top: 7px inset transparent;
        border-left: 10px dashed #6699dd;
        border-bottom: 7px inset transparent;
    }

.sender-detail-left {
    margin-top: 5px;
    margin-right: 12px;
    float: right;
    font-size: 18px;
    clear: both;
}

.sender-detail-right {
    display: block;
    font-size: 18px;
    clear: both;
    max-width: 100%;
    float: right;
    margin-top: 5px;
    margin-right: 72px;
}

.chat-popup .ui.primary.button {
    box-shadow: 0 0 0 0 rgba(39, 41, 43, 0.15) inset;
    display: block;
    margin-bottom: 5px;
}

.chat-input {
    width: 86%;
    height: 85px;
    float: left;
}


/*test*/

.sender-img {
    width: 40px;
    padding: 0;
    margin: 0;
}

    .sender-img img {
        padding: 0;
        margin: 0;
    }

.accounting-record-total td:last-child {
    background: none;
    border: none;
}

.accounting-record-tagsection img {
    margin-right: 15px;
    vertical-align: middle;
    position: absolute;
    top: 0;
    max-width: 16px;
}

.accounting-record-tagsection {
    position: relative;
    margin-top: 8px;
}

.accounting-record-tag {
    width: 640px;
    display: inline-block;
    margin-left: 30px !important;
}

.ui.multiple.dropdown > .label {
    padding: 0.1em 0.8em;
    font-size: 18px;
}

.ui.label {
    border-radius: 0.8em;
    background: none;
    color: #69d;
}

    .ui.label > .icon {
        margin: -5px 0.75em 0 0;
        font-weight: 700;
        color: #6699dd;
        font-size: 12px;
    }

    .ui.label > .close.icon,
    .ui.label > .delete.icon {
        font-size: 12px;
    }

.ui.multiple.search.dropdown,
.ui.multiple.search.dropdown > input.search {
    border: medium none;
    background: transparent none repeat scroll 0 0;
}

.ui.multiple.dropdown > .label {
    box-shadow: 0 0 0 1px #6699dd inset;
}

.accounting-record-repeatingheader {
    width: 100%;
    float: left;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
}

    .accounting-record-repeatingheader ul {
        margin-bottom: 30px;
    }

        .accounting-record-repeatingheader ul:first-child {
            margin-bottom: 0;
        }

    .accounting-record-repeatingheader li {
        float: left;
        padding: 0 10px 0 20px;
    }

        .accounting-record-repeatingheader li:last-child {
            padding-right: 0;
        }

    .accounting-record-repeatingheader .ui.radio.checkbox {
        width: 90px;
        margin-top: 7px;
    }

    .accounting-record-repeatingheader label:first-child {
        margin-top: 7px;
    }
/*Accounting trial balance*/

.account-trial-header th {
    color: #fff;
    line-height: 30px;
}

.table-header-bg {
    background: #6699dd;
}

.accounttrial-number-section {
    width: 90px;
}

.accounttrial-name1-section {
    width: 310px;
}

.accounttrial-debit-section {
    width: 120px;
}

.accounttrial-credit-section {
    width: 120px;
}

.accounttrial-trial-balance {
    width: 400px;
}


/*Billing*/

.billing {
    width: 100%;
    float: left;
    background: #fff;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
}

    .billing .ui.header {
        margin-top: 0;
    }

.billing-package-container {
    width: 100%;
    float: left;
    padding: 0px 9px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

    .billing-package-container .color-purple {
        color: #898af5;
    }

.color-geadient {
    background: -webkit-linear-gradient(#6c6df2, #44e5e6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.container-billing-package {
    float: left;
    width: 245px;
}

.billing-price-first {
    position: absolute;
    top: 180px;
    right: 0px;
    left: 0px;
}

    .billing-price-first h3 {
        margin-bottom: 0px;
    }

    .billing-price-first p {
        color: #9d9eb1;
        font-size: 20px;
    }

.btn.promocode {
    width: 100%;
    padding: 9px 0.50em;
    line-height: 1;
    color: #fff;
    margin-top: 0;
    font-size: 22px !important;
}

.billing-package-main {
    width: 245px;
    min-height: 450px;
    padding: 20px 10px;
    float: left;
    margin-left: 20px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: relative;
}

    .billing-package-main .ui.button {
        margin-left: 0;
        float: left;
    }

    .billing-package-main:first-child {
        margin-left: 0;
    }

    .billing-package-main .ui.center.aligned.header,
    .ui.centered.header {
        font-size: 38px;
        margin-bottom: 0;
    }

    .billing-package-main.half {
        min-height: 180px;
        margin-left: 0;
    }

        .billing-package-main.half + .billing-package-main.half {
            margin-top: 10px;
        }

        .billing-package-main.half.billing-package-free {
            min-height: 260px;
        }

.billing-package-btm {
    float: left;
    margin: 15px 0;
}

    .billing-package-btm span {
        width: 100%;
        float: left;
        margin-bottom: 5px;
    }

.billing-package-btn-compare {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.billing-value {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 56px;
}

.billing-price {
    width: 100%;
    float: left;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    box-sizing: border-box;
    font-size: 25px;
}

.billing-detail {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

/*.billing-detail-basicpro {
    margin-bottom: 0;
}*/

.billing-value-detail {
    display: block;
    font-size: 28px;
    font-family: 'CordiaUPC_1230459';
}

.billing-package-submit {
    position: absolute;
    bottom: 20px;
    right: 20px;
    left: 20px;
    display: flex;
    justify-content: center;
}

    .billing-package-submit .ui.button {
        width: 182px;
    }

    .billing-package-submit .ui.dropdown > .dropdown.icon {
        float: right;
    }

    .billing-package-submit .ui.dropdown .menu {
        min-width: 99%;
    }

    .billing-package-submit ul {
        width: 100%;
        float: left;
    }

    .billing-package-submit li {
        float: left;
    }

        .billing-package-submit li:first-child {
            width: 80px;
        }

        .billing-package-submit li:last-child {
            width: 140px;
        }

    .billing-package-submit label:last-child {
        min-width: 160px;
    }

    .billing-package-submit .ui.radio.checkbox:last-child {
        margin-left: 6px;
    }

.billing-compare {
    float: left;
    width: 100%;
    padding: 0 59px;
    box-sizing: border-box;
}


.billing-refund {
    text-align: center;
    padding: 20px 0;
    display: inline-block;
    border-top: 1px solid #ddd;
}

.billing-footer {
    width: 100%;
    float: left;
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid #ddd;
}

    .billing-footer p {
        margin-bottom: 30px;
    }

        .billing-footer p:last-child {
            font-size: 32px;
        }

.payment-process li {
    padding: 10px 0;
}

    .payment-process li:first-child {
        padding-top: 0;
    }

.payment-process .ui.circular.label,
.ui.circular.labels .label {
    min-width: 0.5em;
    min-height: 0.5em;
    padding: 0.5em !important;
    line-height: 0.5em;
    text-align: center;
    border-radius: 500rem;
    margin-right: 10px;
    color: #fff;
}

.billing-payment {
    width: 100%;
    float: left;
    padding: 30px 59px;
    border-top: 1px solid #DDD;
    margin-bottom: 30px;
    box-sizing: border-box;
}

.billing-address-top {
    width: 70%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 50px;
    float: left;
}

.billing-address-bottom {
    width: 50%;
    float: left;
    padding-left: 50px;
    margin-bottom: 20px;
}

    .billing-address-bottom .ui.header {
        margin-bottom: 10px;
    }


/*Billing Modal*/

.billing-modal {
    width: 440px;
}

    .billing-modal .ui.selection.dropdown {
        padding: 3px 4px;
    }

.billing-modal-detail {
    margin-left: 30px;
}

.billing-modal-check {
    width: 100%;
    margin-left: 40px;
    float: left;
    margin-top: 10px;
}

    .billing-modal-check label {
        min-width: 140px;
    }

    .billing-modal-check li {
        float: left;
        width: 160px;
    }

.billing-pay-dropdown {
    width: 250px;
}

.billing-pay-input {
    width: 260px;
}

.billing-from-input {
    width: 260px;
}

.billing-value-input {
    width: 100px;
}

.billing-code-input {
    width: 80px;
}

.billing-save-input {
    width: 260px;
}

.billing-date1-input {
    width: 100px;
}

.billing-date2-dropdown {
    min-width: 50px !important;
}

.billing-expiredate-dropdown {
    min-width: 20px !important;
}

.billing-cvvcvc-input {
    width: 80px;
}

.billing-package-proplus .billing-price:last-child {
    border-bottom: 0;
}

.billing-package-pro .billing-price:last-child {
    border-bottom: 0;
}

.billing-package-basic .billing-price:last-child {
    border-bottom: 0;
}

.billing-off {
    font-size: 20px;
    color: #439ad9;
}

.billing-price-off {
    font-size: 20px;
    color: #d9563b;
}

.strikethrough {
    position: relative;
}

    .strikethrough:before {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        right: 0;
        border-top: 1px solid;
        border-color: inherit;
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

.secure-green-txt .fa {
    color: #16BD6D;
}

.aft-text {
    margin-left: 10px;
}


/*Create*/

.create-main {
    width: 100%;
    padding: 30px;
}

    .create-main:last-child {
        margin-top: 30px;
    }

.create-main-header {
    float: left;
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

    .create-main-header li {
        float: left;
        padding: 0 5px 0 10px;
        line-height: 33px;
    }

        .create-main-header li:last-child {
            padding-right: 0;
        }

.create-main-header-approved li {
    padding: 0px 30px 0px 10px;
}

.detail-main-header-approved li {
    padding: 0px 30px 0px 10px;
}

.create-main-header-approved .ui.header {
    margin-bottom: 0;
}

.create-main-header-bottom {
    float: left;
    margin: 10px 0;
}

    .create-main-header-bottom li {
        float: left;
        padding-right: 10px;
        font-size: 20px;
    }

        .create-main-header-bottom li:first-child {
            padding-left: 0;
        }

.create-main-content {
    float: left;
    width: 100%;
}

    .create-main-content li {
        float: left;
        padding: 0 10px 0 10px;
        /*line-height: 33px;*/
    }

        .create-main-content li:last-child {
            padding-right: 0;
        }

        .create-main-content li:first-child {
            padding-left: 0;
        }

.create-main-content-topsection {
    width: 100%;
    float: left;
    margin-bottom: 20px;
}

.create-main-content-bottom li {
    float: left;
    padding: 0 10px;
}

.create-main-content-bottomsection {
    width: 100%;
    float: left;
}

    .create-main-content-bottomsection ul {
        width: 100%;
        position: relative;
        float: left;
        margin-top: 20px;
    }

.create-main-content-bottomleft {
    width: 80%;
    float: left;
}

    .create-main-content-bottomleft li {
        float: left;
        padding-right: 50px;
    }

.create-main-content-bottomright {
    width: 20%;
    float: right;
    position: relative;
}

    .create-main-content-bottomright ul {
        float: right;
        margin-top: 20px;
    }

    .create-main-content-bottomright li {
        padding-right: 0;
        padding-bottom: 10px;
        text-align: right;
        display: block;
    }

.create-main-detail {
    float: left;
}

.create-main label {
    margin-right: 5px;
}

.create-main-table {
    border-collapse: separate;
    border-radius: 5px 5px 0 0;
    border-top: 1px solid #ddd;
}

.create-main-table-approved {
    border-collapse: separate;
    border-radius: 5px 5px 0 0;
    border-top: 1px solid #ddd;
}

    .create-main-table-approved td {
        border-right: none;
    }

.create-main-table-header {
    background: #f0f0f0;
}

.create-main-table img {
    padding: 0;
    margin: 0;
}

.create-main-table th {
    border-collapse: separate;
    padding: 10px;
}

.create-main-table td {
    border-right: 1px solid #ddd;
    border-left: none;
    padding: 10px;
    background: #FAFFFF;
}

    .create-main-table td:last-child {
        border-right: none;
    }

.create-main-table .number-input {
    right: 19px;
    position: relative;
}

.create-main-top {
    border-radius: 5px 5px 0 0;
}

.create-main-bottom {
    width: 100%;
    float: left;
}

.create-main-notes {
    width: 40%;
    float: left;
    margin-top: 30px;
}

    .create-main-notes label {
        display: block;
    }

.create-main-total {
    min-width: 300px;
    float: right;
    margin-top: 30px;
}

.create-main-row {
    float: right;
    margin-bottom: 10px;
    clear: both;
}

    .create-main-row div {
        float: right;
        box-sizing: border-box;
    }

.create-main-rowSecond {
    float: right;
    position: relative;
    padding: 0 0 10px 0;
    clear: both;
}

    .create-main-rowSecond:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 5px;
        width: 100%;
        height: 1px;
        background: #333333;
    }

    .create-main-rowSecond div {
        float: right;
        box-sizing: border-box;
    }

.create-main-rowTotal {
    float: right;
    margin-bottom: 10px;
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #333333;
    clear: both;
}

    .create-main-rowTotal:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 100%;
        height: 1px;
        background: #333333;
    }

    .create-main-rowTotal div {
        float: right;
        box-sizing: border-box;
    }

.create-main-row-txt {
    min-width: 140px;
    text-align: right;
    padding-right: 5px;
}

.create-main-row-value {
    min-width: 120px;
    padding-right: 5px;
    text-align: right;
}

.create-main-row-currency {
    min-width: 34px;
    padding-left: 5px;
}

.create-pay-number {
    width: 100px;
}

.create-date-number {
    width: 140px;
}

.create-value-dropdown {
    min-width: 80px !important;
}


/*Dashboard*/

.dashboard-main {
    width: 540px;
    min-height: 210px;
    float: left;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 40px;
    position: relative;
}

.dashboard-main-header {
    width: 100%;
    float: left;
    margin-bottom: 15px;
}

    .dashboard-main-header ul {
        float: right;
    }

    .dashboard-main-header .ui.header {
        margin-bottom: 0;
    }

    .dashboard-main-header p {
        line-height: 30px;
        display: inline;
        position: relative;
        top: 5px;
    }

    .dashboard-main-header li {
        float: left;
        padding: 0 15px;
        line-height: 30px;
        margin-top: 5px;
    }

        .dashboard-main-header li img {
            max-width: 8px;
            padding-left: 0;
            cursor: pointer;
        }

        .dashboard-main-header li:last-child {
            padding-right: 0;
            border-left: 1px solid #ddd;
        }

.dashboard-main-right li:last-child {
    border-left: none;
}

.dashboard-main-header-console-right li:last-child {
    border-left: 1px solid #ddd;
}

.dashboard-main-header li .fa {
    margin: 0 5px;
}

.dashboard-main-content {
    /* width: 100%;
    float: left;
    position: relative;*/
    box-sizing: border-box;
}

.dashboard-main-contentLeft {
    width: 50%;
    float: left;
}

.dashboard-main-contentRight {
    width: 50%;
    float: right;
}

.dashboard-main-contentButton > .ui.button {
    margin-top: 10px;
}

.dashboard-main-contentRight .fa {
    font-size: 12px;
}

.dashboard-main-contentRbottom {
    position: absolute;
    top: 20px;
    right: 15px;
}

.dashboard-main-contentMain {
    width: 100%;
    float: left;
    margin-bottom: 15px;
}

.dashboard-main-contentRight .ui.divider {
    margin-top: 0;
    margin-bottom: 15px;
}

.dashboard-main-contentButton {
    text-align: center;
}

.dashboard-main-contentInfo {
    width: 55%;
    float: left;
}

    .dashboard-main-contentInfo .fa {
        float: left;
        margin-top: 3px;
    }

.dashboard-main-contentValue {
    width: 45%;
    float: right;
    text-align: right;
}

.contentInfo-right {
    width: 70%;
}

.contentValue-right {
    width: 30%;
}

.dashboard-main-content img {
    max-width: 220px;
    float: left;
}

.dashboard-main-left {
    margin-right: 20px;
}

.dashboard-main-right {
    float: right;
}

.dashboard-main-total {
    width: 100%;
    float: left;
    padding-top: 15px;
    border-top: 1px solid #ddd;
}


/*Revenue*/

.dashboard-revenue-content img {
    max-width: 130px;
    float: left;
    margin-left: 30px;
}

.info-name {
    width: 100px;
    float: left;
    position: relative;
}

    .info-name a {
        width: 120px;
    }

.ellipsis {
    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}

    .ellipsis:hover {
        text-decoration: underline;
    }

.bath-value {
    width: 32px;
    text-align: left !important;
}

.accounting-overview {
    width: 100%;
    float: left;
    background: #fff;
    padding: 20px 10px 20px 20px;
    border-radius: 5px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

.accounting-overview-left {
    width: 60%;
    float: left;
    box-sizing: border-box;
}

.accounting-overview-left-content {
    width: 100%;
    float: left;
}

    .accounting-overview-left-content ul {
        width: 25%;
        float: left;
    }

    .accounting-overview-left-content li {
        padding-top: 5px;
        padding-bottom: 15px;
    }

.accounting-overview-center {
    width: 20%;
    box-sizing: border-box;
    padding: 0 20px;
    float: left;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
}

.accounting-overview-center-content {
    width: 100%;
    float: left;
    min-height: 380px;
}

.accounting-overview-right {
    width: 20%;
    box-sizing: border-box;
    padding: 0 10px;
    float: left;
}

.accounting-overview-doctype {
    width: 100%;
    float: left;
    margin-bottom: 15px;
}

    .accounting-overview-doctype .ui.header {
        margin: 0;
        color: #6699dd;
    }

.accounting-overview-doctype-img {
    width: 25%;
    float: left;
}

    .accounting-overview-doctype-img img {
        max-width: 24px;
    }

.accounting-overview-doctype-text {
    width: 75%;
    float: right;
}

    .accounting-overview-doctype-text p {
        color: #ddd;
        font-style: italic;
        font-size: 18px;
    }

.ui.header img {
    max-width: 24px;
}

.accounting-overview-btn {
    width: 100%;
    margin-bottom: 15px;
}

.modal-cheque-detail {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.tag-transection-container {
    width: 65%;
    float: left;
}

    .tag-transection-container h3 {
        position: relative;
        top: 3px;
    }

    .tag-transection-container .icon-tag {
        font-size: 16px;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }

.tag-createtransection-container {
    float: left;
    width: 60%;
    text-align: left;
}

    .tag-createtransection-container .tag-transection-container {
        width: 100%;
    }

.tag-transection-container input {
    background: #faffff;
}

.tag-subcontainer {
    margin-top: 15px;
}

.tag-transection {
    border: 1px solid rgb(102, 153, 204);
    border-radius: 100px;
    padding: 3px 0 3px 10px;
    display: inline-block;
    margin: 0 5px 5px 0;
    font-size: 18px;
    cursor: default;
}

    .tag-transection:hover {
        background: #f2fafe;
    }

    .tag-transection i {
        float: right;
    }

.tag-transection-container .icon-circle-close {
    width: 10px;
    font-size: 10px;
    padding-left: 3px;
    margin: 2px 5px 0 5px;
    text-decoration: none;
    padding-bottom: 2px;
    padding-top: 1px;
    padding-right: 1px;
}

.tag-transection-container .icon-close:hover {
    color: #FFFFFF;
}

.report-tag-container {
    width: 100%;
}

    .report-tag-container label {
        float: left;
        margin-right: 4px;
    }

.icon-circle-close:hover {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background: #f26549;
    color: #FFFFFF !important;
    cursor: pointer;
}


/*Account Ledger*/

.account-ledger-tableheader {
    width: 300px;
    float: left;
    height: 60px;
    /* padding-top: 10px; */
    padding: 10px 10px 0 10px;
    background: #556c8b;
    box-sizing: border-box;
    border-radius: 5px 0 0 0;
}

    .account-ledger-tableheader .ui.input input {
        padding: 5px;
    }

.account-ledger-tablefooter {
    width: 300px;
    float: left;
    padding: 10px;
    background: #556c8b;
    box-sizing: border-box;
    border-radius: 0 0 0 5px;
    line-height: 30px;
    border-bottom: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-top: 1px solid #DDDDDD;
}

.account-ledger-accountname {
    width: 20%;
}

.account-ledger-accountcategory {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /*display: block;*/
}

    .account-ledger-accountcategory p {
        display: inline-block;
    }

.account-ledger-tr:hover .account-ledger-accountcategory {
    white-space: normal;
    overflow: visible;
}

.account-ledger-export-all {
    color: #fff;
    font-family: "THSarabunNew-Bold";
    padding: 0 0 0 10px;
    border-left: 1px solid #fff;
}

    .account-ledger-export-all img {
        margin-left: 10px;
    }

    .account-ledger-export-all a {
        text-decoration: none;
        outline: none;
    }

.account-ledgerright-table {
    width: 820px;
    border: 1px solid #ddd;
    border-left: none;
}

    .account-ledgerright-table td {
        padding: 10px;
        border-bottom: 1px solid #ddd;
        cursor: default;
    }

    .account-ledgerright-table th {
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

.account-ledger-date {
    width: 100px;
}

.account-ledger-list {
    width: 120px;
    cursor: pointer;
}

.account-ledger-description {
    width: 260px;
}

.account-ledger-debit {
    width: 120px;
}

.account-ledger-credit {
    width: 120px;
}

.account-ledger-total {
    width: 120px;
}

.account-ledger-topdate {
    width: 100px;
}

.account-ledger-toplist {
    width: 120px;
    cursor: pointer;
}

.account-ledger-topdescription {
    width: 240px;
}

.account-ledger-topdebit {
    width: 110px;
}

.account-ledger-topcredit {
    width: 110px;
}

.account-ledger-toptotal {
    width: 132px;
}

.account-ledger-btmdate {
    width: 99px;
}

.account-ledger-btmlist {
    width: 119px;
    cursor: pointer;
}

.account-ledger-btmdescription {
    width: 236px;
}

.account-ledger-btmdebit {
    width: 116px;
}

.account-ledger-btmcredit {
    width: 116px;
}

.account-ledger-btmtotal {
    width: 115px;
}

.account-ledger-select:hover {
    border-left: 5px solid rgb(102, 153, 221) !important;
    background: #f5fafe;
    box-sizing: border-box;
}

.account-ledger-select-active {
    border-left: 5px solid rgb(102, 153, 221);
    background: #f5fafe;
    box-sizing: border-box;
}

.table-footer-accounting-ledger {
    border-radius: 0px 0px 5px 0;
}

.dlt-btm-footer {
    border-bottom: none !important;
}

.account-ledger-totaltable {
    width: 100%;
    border-radius: 5px;
    border: 1px solid #ddd;
    border-top: none;
    border-collapse: separate;
}

    .account-ledger-totaltable td {
        padding: 10px;
    }

.account-ledger-tabletotalbtm {
    border: 1px solid rgb(221, 221, 221);
    border-collapse: separate;
    border-radius: 0px 0px 5px;
    border-top: 0;
}


/*table-left*/

.account-ledger-container .table-header {
    border-bottom: none;
}

.account-ledger-table {
    width: 100%;
    float: left;
    background: #fff;
    border-left: 1px solid #ddd;
}

.account-ledger-tr {
    width: 99.8%;
    box-sizing: border-box;
    float: left;
    background: #fff;
    border-top: 1px solid #DDDDDD;
    border-right: none;
    border-left: none;
}

    .account-ledger-tr:hover {
        background: #EAEFF5;
        border-left: 3px solid #6699DD;
    }

    .account-ledger-tr:first-child {
        border-bottom: 1px solid #DDDDDD;
    }

.account-ledger-trright {
    width: 100%;
    float: left;
    background: #fff;
    border-top: 1px solid #ddd;
    box-sizing: border-box;
}

    .account-ledger-trright:first-child {
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }

.tr-active {
    background: #EAEFF5;
    border-left: 3px solid #6699DD;
}

.account-ledger-th {
    padding: 10px;
    line-height: 30px;
    float: left;
    box-sizing: border-box;
}

.account-ledger-td {
    padding: 10px;
    line-height: 30px;
    float: left;
    box-sizing: border-box;
}

.account-ledger-tableLeft .mCustomScrollBox {
    border-right: none;
}

.account-ledger-footer {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0 0 5px 0;
}

.account-ledger-container .mCustomScrollBox {
    height: 509px;
    max-width: none;
    border-right: 1px solid #ddd;
}

.is-page {
    height: 459px;
}

.account-ledger-container .mCSB_inside > .mCSB_container {
    margin-right: -5px;
}

.account-ledger-container .mCSB_scrollTools {
    width: 4px;
}

    .account-ledger-container .mCSB_scrollTools .mCSB_draggerRail {
        width: 4px;
    }

    .account-ledger-container .mCSB_scrollTools .mCSB_dragger {
        height: 120px;
    }

.account-ledger-container .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #DDD !important;
}

.account-ledger-container .mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #f0f0f0;
}

.account-ledger-tbody {
    float: left;
    width: 100%;
}

.account-ledger-tfoot {
    float: left;
    width: 100%;
    font-family: "CordiaUPC_1230461";
}

.account-ledger-container .ui.form {
    display: inline-block;
    margin-right: 15px;
    min-width: 220px;
}

.account-ledger-container form {
    margin-top: 0;
}

.account-ledger-container .ui.form input:not([type]),
.ui.form input[type="number"],
.ui.form input[type="text"],
.ui.form input[type="email"],
.ui.form input[type="search"],
.ui.form input[type="password"],
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="tel"],
.ui.form input[type="time"],
.ui.form input[type="url"] {
    font-size: 22px;
    font-family: "CordiaUPC_1230459";
    line-height: 1.4em;
    padding: 0.24em 1em 0.04em 1em;
    border-radius: 3px;
    margin-top: -1px;
}

.account-ledger-container .ui.compact.button,
.ui.compact.buttons .button {
    padding: 0.3em 0.83em;
}

.account-ledger-container .daterangepicker .ranges .input-mini {
    font-size: 20px;
}

.account-ledger-container .daterangepicker .daterangepicker_start_input label,
.daterangepicker .daterangepicker_end_input label {
    font-size: 18px;
}

.account-ledger-container .ui.icon.input > i.icon::after,
.ui.icon.input > i.icon::before {
    margin-top: -0.4em;
}

.account-ledger-container .ui.input[class*="left icon"] > input {
    padding-left: 1.8em !important;
}

.account-ledger-container .daterangepicker table {
    font-size: 16px;
}

.changePassword-summary-left {
    width: 160px;
    float: left;
}

.day-dropdown {
    min-width: 60px !important;
}

.adjustduedate-dropdown {
    min-width: 255px !important;
}

.companytype-active {
    border: 1px solid #6699cc;
    /*background:#f5fbfe ;*/
    background: #f5fbfe url("images/confirm.png") no-repeat fixed right 5px top 5px;
    background-position-x: 5px;
    background-position-y: 5px;
    color: #6699cc;
}


/*UserRight*/

.top-console {
    float: left;
    margin-bottom: 30px;
}

    .top-console .ui.button:first-child {
        margin-left: 0;
    }

.table-delete-pd {
    padding-bottom: 0 !important;
}

.userRight-newposition-container {
    width: 100%;
    padding: 30px;
    border-radius: 5px 5px 0 0;
}

.userRight-checkbox-container {
    width: 100%;
    padding: 30px;
    border-radius: 0 0 5px 5px;
    border-top: none;
}

.userRight-positionform li {
    margin-bottom: 15px;
}

    .userRight-positionform li:last-child {
        margin-bottom: 0;
    }

.userRight-positionform label {
    width: 100px;
}

.userRight-positioninput {
    width: 300px;
}

.userRight-descriptioninput {
    width: 600px;
}

.userRight-allright label:first-child {
    font-family: "CordiaUPC_1230461";
    float: left;
    width: 214px;
}

.userRight-checkbox-content {
    width: 100%;
    float: left;
    margin-top: 30px;
    border-radius: 5px 5px 0 0;
}

.userRight-checkbox-content-header {
    padding: 30px 15px;
}

.userRight-checkbox-content-table {
    width: 100%;
    float: left;
    border-radius: 0 0 5px 5px;
    border-top: none;
    padding: 15px 0 15px 0;
}

    .userRight-checkbox-content-table .fa {
        margin: 0 !important;
    }

.userRight-detail-container .ui.checkbox input[type="checkbox"][disabled] ~ label {
    padding: 0;
}

.userRight-checkbox-content-table th {
    text-align: center;
    padding: 7px 0;
}

.userRight-checkbox-content-table td {
    text-align: center;
    padding: 7px 0;
}

    .userRight-checkbox-content-table td:first-child {
        text-align: left;
        padding-left: 15px;
    }

.userRight-checkbox-content-table th:first-child {
    text-align: left;
}

.userRight-checkbox-table {
    width: 100%;
    float: left;
}

    .userRight-checkbox-table thead tr:first-child:hover {
        background: #ffffff;
    }

    .userRight-checkbox-table .ic {
        font-size: 14px;
    }

.userRight-table-subject {
    width: 174px;
}

.userRight-checkbox-content-table tr {
    position: relative;
}

.bg-table tr:hover {
    background: #f7f7f7;
}

.bg-table .noselect {
    width: 120px;
    padding-right: 50px;
}

.bg-table tr:hover .noselect {
    color: #f7f7f7 !important;
}

.all-line td {
    padding: 10px 0;
    border-bottom: 1px solid #cccccc;
}


/*
.all-line tr:hover td {
    border-bottom: 1px solid #cccccc !important;
}*/

.after-line td {
    padding-top: 10px;
}

.userRight-table-top {
    width: 117px;
}

.userRight-table-btm {
    width: 226px;
    position: relative;
    left: 5px;
}

    .userRight-table-btm:first-child {
        left: 0;
    }

.allright-all {
    width: 230px !important;
}

.bottom-console {
    float: left;
    margin-top: 30px;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Chrome/Safari/Opera */
    -khtml-user-select: none;
    /* Konqueror */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}
/*
td .ui.checkbox label {
	color: #ffffff;
}*/

.check-outside .ui.checkbox label,
.ui.checkbox + label {
    color: #FFFFFF;
    position: absolute;
    /* left: -4px;*/
}


/*DETAIL*/

.userRight-detail-container {
    width: 100%;
    padding: 30px;
    border-radius: 5px 5px 0 0;
}

.userRight-detail-header {
    margin: 15px 0;
    width: 100%;
    float: left;
    position: relative;
}

    .userRight-detail-header h2 {
        font-size: 36px;
        text-align: center;
    }

    .userRight-detail-header p {
        font-style: italic;
        text-align: center;
    }

    .userRight-detail-header .ui.button {
        position: absolute;
        right: 0;
        top: 0;
    }

.userRight-detail-user {
    width: 100%;
    padding: 30px;
    border-radius: 0 0 5px 5px;
    border-top: none;
}

.userRight-detail li {
    float: left;
}

.userRight-detail-userHeader {
    width: 100%;
    float: left;
    position: relative;
}

    .userRight-detail-userHeader h2 {
        float: left;
    }

    .userRight-detail-userHeader div {
        position: absolute;
        top: -8px;
        left: 60px;
    }

.userRight-detail-userImage {
    width: 100%;
    float: left;
    margin-top: 45px;
}

.userRight-userImage {
    text-align: center;
    float: left;
    margin-right: 111px;
}

    .userRight-userImage p {
        width: 140px;
        display: block;
        word-wrap: break-word;
    }

    .userRight-userImage:nth-child(4n) {
        margin-right: 0;
    }

    .userRight-userImage img {
        position: relative;
        height: 128px;
        width: 128px;
        border: 4px solid white;
        border-radius: 80px;
        overflow: hidden;
        z-index: 1;
        background-color: #FFFFFF;
        vertical-align: middle;
        position: relative;
        text-align: center;
        margin-bottom: 15px;
    }


/*Userright Add User*/

.modal-addcontact {
    width: 600px;
}

.newUser-left {
    width: 30%;
    margin-right: 10%;
    float: left;
    text-align: center;
}

    .newUser-left a {
        font-size: 18px;
    }

        .newUser-left a:first-child {
            float: left;
            margin-left: 15px;
        }

        .newUser-left a:last-child {
            float: right;
            margin-right: 15px;
        }

.newUser-right {
    width: 60%;
    float: right;
}

    .newUser-right input {
        width: 240px;
    }

    .newUser-right .ui.selection.dropdown {
        min-width: 230px;
    }

    .newUser-right label {
        margin: 0;
        padding: 0;
    }

.userRight-userImage img {
    position: relative;
    height: 128px;
    width: 128px;
    border: 4px solid white;
    border-radius: 80px;
    overflow: hidden;
    z-index: 1;
    background-color: #FFFFFF;
    vertical-align: middle;
    position: relative;
    text-align: center;
    margin-bottom: 15px;
}


/*Userright Table*/

.userRight-container {
    width: 100%;
    float: left;
}

.userRight-table {
    width: 100%;
}

.userRight-imgUser {
    position: relative;
    height: 64px;
    width: 64px;
    border: 4px solid white;
    border-radius: 80px;
    overflow: hidden;
    z-index: 1;
    background-color: #FFFFFF;
    vertical-align: middle;
    margin: 0 auto;
}

.userRight-table td {
    padding: 5px;
}

.userRight-table tr {
    border-bottom: 1px solid #DDDDDD;
}

    .userRight-table tr:last-child {
        border-bottom: none;
    }

.userRight-imgUser img {
    max-width: 64px;
}

.userRight-table-userimage {
    width: 100px;
}

.userRight-table-username {
    width: 230px;
}

.userRight-table-userrole {
    width: 200px;
    text-align: left;
}

.userRight-table-uservisited {
    width: 170px;
    text-align: center;
}

.userRight-table-userstatus {
    width: 100px;
    text-align: left;
}

.userRight-table-useraction {
    width: 160px;
    text-align: center;
}

.userstatus-active {
    color: #19bb5a;
}

.userstatus-pending {
    color: #9db0d2;
}

.userstatus-suspended {
    color: #ffa719;
}

.userstatus-deactiveted {
    color: #9db0d2;
}

.userRight-container.ui.active.button {
    color: #ffffff;
}

    .userRight-container .ui.active.button:hover {
        color: #ffffff;
    }


/*Credit Note*/

.creditnote-cause-maincontainer {
    width: 100%;
    padding: 15px;
    float: left;
}

.creditnote-cause-container {
    width: 100%;
    float: left;
    line-height: 30px;
}

.creditnote-cause-header {
    float: left;
}

    .creditnote-cause-header .ui.header {
        float: left;
        line-height: 30px;
        margin-right: 15px;
    }

.creditnote-cause-content {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

    .creditnote-cause-content label {
        float: left;
        line-height: 30px;
        width: 210px;
        margin-right: 15px;
    }

    .creditnote-cause-content .ui.selection.dropdown {
        width: 800px;
    }

    .creditnote-cause-content .ui.checkbox label {
        font-size: 22px;
        width: 400px;
    }

.creditnote-cause-footer {
    width: 100%;
    float: left;
    border-top: 1px solid #dddddd;
    padding-top: 15px;
}

.creditnote-footer-left {
    float: left;
}

.creditnote-footer-right {
    float: right;
}

.creditnote-create .ps-textarea label {
    display: block;
}

.creditnote-create .credit-note-custname {
    margin-right: 200px;
    text-align: left;
}

.creditnote-create .debit-note-custname {
    margin-right: 170px;
    text-align: left;
}

.creditnote-create span.subtitle {
    font-size: 22px;
    color: red;
    position: absolute;
    margin-left: 10px;
}

.cn-tbproductcode {
    width: 118px;
}

.cn-tbproductaccount {
    width: 80px;
}

.cn-tbproductdescription {
    width: 360px;
}

.cn-tbproductamount {
    width: 80px;
}

    .cn-tbproductamount input {
        text-align: right;
    }

.cn-tbproductprice {
    width: 120px;
    text-align: right;
}

.cn-gn-tbproductprice {
    width: 168px;
    text-align: right;
}

.cn-tbproductdiscount {
    width: 80px;
    text-align: right;
}

.cn-tbproducttax {
    width: 80px;
}

.cn-tbtotal {
    width: 138px;
}

.cn-tbgnamount {
    width: 133px;
}

.cn-tbeditor {
    width: 60px;
}

.cn-tbproductnetamount {
    width: 140px;
}

.textarea-cndescription textarea {
    padding: 5px;
    margin: 0;
    line-height: 20px;
    border-radius: 0;
    border: 0;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    max-height: 50px;
}

.creditnote-create .subtotal1 {
    margin-top: 15px;
    padding: 0 0 0 15px;
    /* background: #efefef;*/
}

    .creditnote-create .subtotal1 p:first-child {
        min-width: 120px !important;
        text-align: left;
    }

    .creditnote-create .subtotal1 p:last-child {
        min-width: 157px !important;
        text-align: right;
    }

.creditnote-create.tag-subcontainer {
    margin-bottom: 0;
}

.creditnote-reason-input {
    width: 400px;
}

.creditnote-detail-top {
    width: 100%;
    margin-bottom: 30px;
    margin-top: 0px;
    color: #666666;
    padding: 30px;
    float: left;
}

    .creditnote-detail-top .ui.header {
        float: none;
        text-align: center;
    }

.creditnote-detail-section {
    width: 16.667%;
    float: left;
}

.credit-note-detail-table {
    width: 100%;
    table-layout: fixed;
}

    .credit-note-detail-table th {
        padding: 5px 10px;
        text-align: left;
    }

    .credit-note-detail-table td {
        padding: 10px;
        text-align: right;
    }

.creditnote-tableivnumber {
    width: 120px;
}

creditnote-refdetail-container {
    width: 25%;
}

.creditnote-tablevalue {
    width: 140px;
}

.creditnote-tablevaluat {
    width: 160px;
}

.creditnote-tablevaluest {
    width: 160px;
}

.creditnote-tablevaluevt {
    width: 160px;
}

.creditnote-tablevaluecn {
    width: 158px;
}

.table-detail {
    width: 100%;
    float: left;
    border-bottom: 1px solid #666666;
    table-layout: fixed;
}

    .table-detail th {
        padding: 20px 10px 10px;
    }

    .table-detail td {
        padding: 5px 10px 20px;
    }

.creditnote-detail-tablecustomer {
    width: 340px;
}

.creditnote-detail-tabledate {
    width: 120px;
}

.creditnote-detail-tablenumber {
    width: 158px;
}

.creditnote-detail-tablerefer {
    width: 280px;
}

.creditnote-detail .ps-textarea label {
    display: block;
}

.creditnote-detail .ps-textarea span {
    font-size: 20px;
    color: #999999;
}

.creditnote-detail .subtotal1 {
    margin-top: 15px;
}

    .creditnote-detail.subtotal1 p:first-child {
        min-width: 120px !important;
        text-align: right;
    }

    .creditnote-detail.subtotal1 p:last-child {
        min-width: 157px !important;
        text-align: right;
    }

.creditnote-detail.accounting-record-number span {
    margin-right: 15px;
}

.creditnote-detail.tag-subcontainer {
    margin-bottom: 0 !important;
}

.creditnote-number-heading {
    width: 100%;
}

.creditnote-number-detail {
    width: 100%;
}

.creditnote-number-detail-content {
    width: 100%;
    float: left;
    margin: 0;
}


/*Credit Note Pay*/

.creditnote-pay-maincontainer {
    width: 100%;
    padding: 15px;
    float: left;
    /*margin-left: -5em;*/
}

.creditnote-pay-header {
    margin-bottom: 30px;
}

.creditnote-pay-content:first-child {
    margin-bottom: 0;
}

.creditnote-pay-content {
    padding: 15px 0;
    border-bottom: 1px solid #dddddd;
}

.creditnote-pay-maincontainer .ui.checkbox label {
    width: 800px;
    margin-left: 30px;
}

    .creditnote-pay-maincontainer .ui.checkbox label span {
        margin-right: 15px;
        display: inline;
        font-family: "CordiaUPC_1230459";
        font-size: 20px;
        width: 400px;
    }

        .creditnote-pay-maincontainer .ui.checkbox label span:first-child {
            font-size: 28px;
            font-family: "CordiaUPC_1230461";
            color: #666666;
        }

.creditnote-pay-footer {
    width: 100%;
    float: left;
    border-top: 1px solid #dddddd;
    padding-top: 15px;
}

.creditnote-footer-left {
    float: left;
}

.creditnote-footer-right {
    float: right;
}

.creditnote-pay-maincontainer.ui.accordion .title:not(.ui) {
    font-family: "CordiaUPC_1230461";
    font-weight: normal;
}

.creditnote-pay-maincontainer.ui.fluid.accordion,
.ui.fluid.accordion .accordion {
    float: left;
}

.creditnote-pay-maincontainer.ui.accordion span {
    font-weight: normal;
}

.creditnote-pay-maincontainer .ui.styled.accordion .accordion .content,
.ui.styled.accordion .content {
    padding: 15px 15px 30px;
}

.credit-note-tabledetail {
    width: 100%
}

.credit-note-detail-table {
    width: 70%;
    border-right: 1px solid #dddddd;
    display: inline-block;
    padding-left: 45px;
}

    .credit-note-detail-table.paddingleft0 {
        padding-left: 0 !important;
    }

    .credit-note-detail-table.width70per {
        width: 70% !important;
    }

.credit-note-detail-tabletotal {
    width: 24%;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    bottom: 0;
    z-index: -1
}

    .credit-note-detail-tabletotal div {
        box-sizing: border-box;
    }

.credit-note-detail-payheader {
    width: 100%;
    display: block;
    margin-bottom: 10px;
}

    .credit-note-detail-payheader div {
        display: inline-block;
        padding: 5px 10px;
        box-sizing: border-box;
    }

.credit-note-detail-paycontent div {
    display: inline-block;
    white-space: nowrap;
    padding: 5px 10px;
    box-sizing: border-box;
}

.credit-note-detailnumber {
    width: 130px;
    text-align: right;
}

.credit-note-detailvalue {
    width: 160px;
    text-align: right;
}

.credit-note-detailtotal {
    width: 160px;
    text-align: right;
}

.credit-note-detailtotal1 {
    width: 220px;
    text-align: right;
}

    .credit-note-detailtotal1 input {
        text-align: right;
    }

.creditnote-subtotal {
    position: relative;
}

    .creditnote-subtotal:after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 5px;
        width: 110px;
        height: 1px;
        background: black;
    }

.creditnote-total {
    position: relative;
}

    .creditnote-total:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 5px;
        width: 110px;
        height: 1px;
        background: #000000;
    }

    .creditnote-total:after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: 110px;
        height: 1px;
        background: #000000;
    }

.creditnotedetail-tabletotal-value {
    width: 55%;
    float: left;
    font-size: 20px;
    text-align: right;
    padding: 5px;
}

.creditnotedetail-tabletotal-total {
    width: 45%;
    float: right;
    text-align: right;
    padding: 5px;
}

.creditnote-subtotal {
    width: 45%;
    float: right;
    text-align: right;
    padding: 5px;
}

.creditnote-table-container {
    border-right: 1px solid #dddddd;
    box-sizing: border-box;
    display: inline-block;
    min-height: 120px;
    padding-left: 60px;
    width: 67.5%;
}

.creditnote-table th .new-invoice {
    padding: 0 5px 5px;
}

.creditnote-table td {
    padding: 0 5px 5px;
}

.creditnote-table input {
    width: 100%;
}

.creditnote-table-return {
    width: 160px;
}

.creditnote-table-chreturn {
    width: 290px;
}

.creditnote-table-note {
    width: 160px;
}

.creditnote-table-duedate {
    width: 160px;
}


/*Create Referraldoc*/

.credit-note-category {
    width: 100%;
    float: left;
    margin-bottom: 30px;
    padding: 15px;
}

.credit-note-maincontainer {
    width: 100%;
    position: relative;
    float: left;
}

.credit-note-container {
    width: 100%;
    float: left;
    border-bottom: none;
    margin-right: 30px;
}

    .credit-note-container table {
        border: none;
    }

.credit-note-table {
    width: 100%;
}

.creditnote-rightpanel {
    float: right;
    width: 302px;
    padding: 15px;
}

    .creditnote-rightpanel p {
        text-align: center;
    }

    .creditnote-rightpanel span {
        font-size: 32px;
        color: #666666;
        font-family: "CordiaUPC_1230461";
    }

.creditnote-rightpanel-total {
    width: 100%;
    margin-bottom: 15px;
}

    .creditnote-rightpanel-total p {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
    }

        .creditnote-rightpanel-total p:first-child {
            line-height: 30px;
        }

        .creditnote-rightpanel-total p:nth-child(2n) {
            float: right;
        }

.creditnote-rightpanel-bottom {
    width: 100%;
    padding-bottom: 15px;
    margin: 30px 0 15px;
    border-bottom: 1px solid #dddddd;
    font-size: 18px;
}

.credit-note-menu {
    float: left;
    margin-right: 30px;
    margin-top: 4px;
}

    .credit-note-menu span {
        margin-right: 15px;
    }

    .credit-note-menu:nth-child(4n) {
        margin-right: 0;
    }

.table-creditnote-check {
    width: 40px;
}

.table-creditnote-number {
    width: 180px;
}

.table-creditnote-checkdate {
    width: 120px;
}

.table-creditnote-value {
    width: 159px;
}

.table-creditnote-tiv {
    width: 140px;
}

.creditnote-footer {
    margin-bottom: 0;
    color: #666666;
    border-right: none;
    border-left: none;
}

div#wrapper {
    margin: 0 auto;
    width: 100%;
    min-width: 1120px;
}

div#mainContent {
    width: 790px;
    float: left;
}

div#sideBar {
    width: 300px;
    margin-left: 30px;
    float: left;
    box-sizing: border-box;
}

div#sticker {
    width: 300px;
    box-sizing: border-box;
}

.stick {
    position: fixed;
    top: 30px;
}


/*Main Style*/

.modal-header {
    position: relative;
}


/*
    .modal-header .ui.button {
        position: absolute;
        top: 7px;
        right: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

/*Alert*/

.success-container .sweet-alert {
    /*width: 400px;
            top: 200px;*/
    padding: 15px;
    box-sizing: border-box;
}

.sweet-alert button {
    background: #00b5ad;
    font-family: "CordiaUPC_1230459";
    font-size: 22px;
}

.sweet-alert h2 {
    font-size: 32px;
    color: #666666;
    margin-bottom: 5px;
    font-weight: normal;
}

.sweet-alert button:hover {
    background: #00c4bc;
}

.sweet-alert .sa-icon {
    margin: 15px auto 15px;
}
/*Modal Product*/
.modal-addproduct {
    width: 700px;
}

.productrow-container:after {
    content: " ";
    display: block;
    clear: both;
}


.productrow-container label {
    width: 120px;
    float: left;
    margin-top: 6px;
    margin-right: 10px;
}

.productname-input {
    width: 488px;
}

.ui.divider {
    margin: 15px 0;
}

    .ui.divider:not(.vertical):not(.horizontal) {
        border-top: 1px solid #efefef;
    }

.productrow-container .ui.radio.checkbox {
    margin: 0;
}

    .productrow-container .ui.radio.checkbox:first-child {
        margin-left: 25px;
    }

    .productrow-container .ui.radio.checkbox label {
        width: 60px;
    }

.product-information {
    float: left;
}

    .product-information:last-child {
        float: right;
    }

    .product-information label {
        width: 120px;
    }

.product-information-date {
    float: left;
}

    .product-information-date:last-child {
        float: right;
    }

    .product-information-date label {
        width: 72px !important;
    }

.product-information-unit {
    float: left;
}

    .product-information-unit:last-child {
        float: right;
    }

    .product-information-unit label {
        width: 120px !important;
        margin-left: 50px;
    }



.productvalue-input {
    width: 120px;
}

.productaccount-category {
    margin: 15px 0;
}

.productcostcalculation-category {
    margin-top: 15px;
}

.productaccount-category span:first-child {
    margin-right: 26px;
}

.productrow-container textarea {
    width: 76.8%;
    height: 80px;
    float: right;
}

.productrow-check .ui.checkbox label {
    padding-left: 3.8em;
}

.product-checkbox {
    width: 20px;
    vertical-align: middle;
    float: left;
    margin-right: 5px;
}

.tax-dropdown {
    min-width: 120px !important;
}

.choosecategoryproduct-onboarding-button {
    position: absolute;
    top: 53px;
    left: 350px;
}

.buyproduct-onboarding-button {
    position: absolute;
    top: 155px;
    left: 550px;
}

.sellproduct-onboarding-button {
    position: absolute;
    top: 265px;
    left: 550px;
}

.broughtfwproduct-onboarding-button {
    position: absolute;
    top: 445px;
    left: 110px;
    clear: both;
}

.input-alert {
    border: 1px solid #fd808b !important;
    background: #ffe8e8 !important;
}

.input-warning {
    border: 1px solid #b58105 !important;
    background: #fff8db !important;
}

.invoice-detail-console {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    top: 50%;
}

    .invoice-detail-console .fa {
        position: absolute;
        color: #999999 !important;
        font-size: 28px;
        cursor: pointer;
    }

        .invoice-detail-console .fa:hover {
            color: #666666 !important;
        }

    .invoice-detail-console .fa-chevron-left {
        left: -60px;
    }

    .invoice-detail-console .fa-chevron-right {
        right: -60px;
    }

.alert-txt-red {
    font-size: 20px;
    color: #fb0016;
}

.tooltip {
    font-family: "CordiaUPC_1230459";
    font-size: 22px;
}

/* Favorite */

.clear-ui {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

    .clear-ui.ui.selection.dropdown > .dropdown.icon {
        line-height: 40px !important;
    }

.expense-favorite {
    margin-top: -5px;
    font-size: 26px;
}

.fa-star:hover {
    color: #f5d36d !important;
}

.fa-star span {
    font-size: 20px;
    font-family: "CordiaUPC_1230459";
    margin-left: 5px;
    color: #666666;
}

.modal-form label {
    width: 80px;
    float: left;
}

    .modal-form label.long {
        width: 110px;
        float: left;
    }

.favorite-container {
    width: 100%;
    float: left;
    margin: 0 auto 30px;
    position: relative;
}

.favorite-tab {
    width: 16.67%;
    height: 100px;
    float: left;
    padding: 15px;
    box-sizing: border-box;
    border-right: 1px solid #dddddd;
    text-align: left;
    vertical-align: middle;
    /*background-image: url("images/Features-Finance.png");*/
    position: relative;
}

    .favorite-tab:last-child {
        text-align: center;
    }

    .favorite-tab h4 {
        width: 154px;
        font-size: 20px;
        text-overflow: ellipsis;
        /*overflow: hidden;*/
        white-space: nowrap;
    }

    .favorite-tab p {
        width: 154px;
        color: #666666;
        font-size: 20px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .favorite-tab:hover {
        background: #f5fbfe;
        border: 1px solid #6699cc;
        cursor: pointer;
    }

    .favorite-tab:first-child {
        width: calc(16.67% - 1px);
    }

        .favorite-tab:first-child:hover {
            border-radius: 5px 0 0 5px;
        }

    .favorite-tab:last-child {
        width: calc(16.67% - 1px);
        border-right: none;
    }

        .favorite-tab:last-child:hover {
            border: none;
        }

    .favorite-tab img {
        max-width: 18px;
        padding: 0;
        vertical-align: middle;
        margin-right: 5px;
    }

.dlt-expensebookmark {
    max-width: 18px;
    position: absolute;
    right: 10px;
    top: 10px;
}

.favorite-tab p {
    font-size: 20px;
    margin-top: 5px;
}

.favorite-tab .icon-close {
    top: 5px;
    right: 5px;
    position: absolute;
    font-size: 12px;
    color: #999999;
    background: none;
    border-radius: 100%;
    line-height: 18px;
    padding: 0 5px;
    text-align: center;
}

    .favorite-tab .icon-close:hover {
        color: white;
        background: #999999;
        border-radius: 100%;
        vertical-align: middle;
        box-sizing: border-box;
        font-weight: bold;
        line-height: 18px;
        padding: 0 5px;
        text-align: center;
    }

    .favorite-tab .icon-close:before {
        display: table-cell;
        vertical-align: middle;
    }

.favorite-new img {
    max-width: 36px;
    text-align: center;
    margin: 5px auto 10px;
    display: block;
}

.favorite-new p {
    width: 154px;
    font-size: 18px;
    color: #cecece;
    text-align: center;
}

.btn {
    font-size: 22px;
}

.expense-favorite-btn {
    position: absolute;
    pointer-events: none;
    left: 0;
    opacity: 0;
}

#modalFavorite input[type="text"] {
    width: 448px;
}

.finance-head-link {
    max-width: 77.5%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    height: 30px;
    position: relative;
    top: 10px;
}

.accountname {
    display: inline-block;
    width: 73.5%;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: 10px;
}

.headerContent span {
    width: auto;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    line-height: 1;
    position: relative;
    top: 6px;
}

#header-bottom .headerContent span {
    width: auto;
    padding-top: 5px;
}

label.alert-error {
    width: 200px;
    color: #fd808b;
}

.date-lockperiod {
    display: inline-block;
    width: 50%;
    position: relative;
}

.productrow-container .container-box-input {
    float: right;
}

    .productrow-container .container-box-input p {
        display: block;
        width: 100%;
        text-align: right;
    }

.character-length {
    text-align: right;
}

#ddlyear {
    text-indent: 0;
}

#haccountname,
#hEditAccount {
    word-wrap: break-word;
    width: 100%;
}

.product-detail-chart ul > li select {
    text-indent: 0;
}

.invoice-header.table-disable input[type="text"] {
    text-indent: 0;
}

#ipciscreatetaxinvoice.receipttaxinvoice + label::after {
    visibility: hidden;
}

#ipciscreatetaxinvoice.receipttaxinvoice.show + label::after {
    visibility: visible;
}

_::-webkit-full-page-media, _:future, :root .headerContent span {
    top: 0;
}

_::-webkit-full-page-media, _:future, :root .finance-head-link {
    top: 0;
}

.chardescription {
    float: right;
    display: none;
}

.textarea-description.only textarea:focus + .chardescription {
    display: block;
    float: right;
    width: 100%;
    background-color: #faffff;
    text-align: right;
    border: none;
}

.finance-modal-form li label:first-child {
    width: 100px;
}

#paymentremark {
    text-align: left !important;
}

#banktypearea .ui.dropdown {
    width: 190px;
}

.finance-modal-form #description,
.finance-modal-form #editdescription {
    width: 200px;
}

#uploadModal .btn.button-blue {
    font-size: 23px;
    color: #fff;
    float: left;
    padding: 3px 12px;
}

#fileList .fileList {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

.table-loading {
    background: url('../Content/images/loading.gif') no-repeat center center;
    display: none;
    width: 100%;
    height: 300px;
    background-color: white;
}

.transaction-setting-header {
    text-align: center;
    display: inline-block;
    font-family: "CordiaUPC_1230461";
}

/****************************************************/
.row2 {
    margin-right: -15px;
    margin-left: -15px;
}

.tdassetcategory, .tdgenericid, .tdname, .tdrecordnumber, .tduniqueid, .tddate, .tdduedate {
    text-align: left !important;
}

.tdnumberofitem, .tdtotalcost, .tdtotalaccdepre, .tdtotalbookvalue, .tdpurchasecost, .tdaccountdepreciate, .tdcurrentbookvalue, .tdage, .tdserialnumber, .tdmoney {
    text-align: right !important;
}

/* NEW CLASS BY FIRST */
.divspace {
    min-height: 30px;
}

.alertLockPeriod {
    font-style: italic;
}

.rightSpace10px {
    margin-right: 10px !important;
}

.nowrap {
    white-space: nowrap !important;
}


.tdpurchasedate {
    text-align: center !important;
}

.font-bold {
    font-family: "CordiaUPC_1230461" !important;
}

.taxtable-Category {
    width: 100px;
    white-space: nowrap;
}

.taxtable-AssetGenericId {
    width: 100px;
}

.taxtable-AssetName {
    width: 250px;
}

.taxtable-recordNumber {
    width: 160px;
}

.taxtable-purchaseDate {
    width: 160px;
}

.taxtable-faage {
    width: 130px;
}

.panel-active {
    background: #6699CC !important;
    color: #FFF !important;
}

.ScrapValue_label {
    color: #333;
}

.usefulInput {
    width: 100px !important;
}

.nowrap {
    white-space: nowrap !important;
    margin-right: 10px !important;
}


.goLeft5px {
    margin-left: -5px !important;
}

.goLeft11px {
    margin-left: -11px !important;
}

.goLeft12px {
    margin-left: -12px !important;
}

.goLeft24px {
    margin-left: -24px !important;
}

.goLeft30px {
    margin-left: -30px !important;
}

.goLeft35px {
    margin-left: -35px !important;
}

.goLeft37px {
    margin-left: -37px !important;
}

.goLeft42px {
    margin-left: -42px !important;
}

.goLeft45px {
    margin-left: -45px !important;
}

.goLeft50px {
    margin-left: -50px !important;
}

.goLeft54px {
    margin-left: -54px !important;
}

.goLeft60px {
    margin-left: -60px !important;
}

.goLeft65px {
    margin-left: -65px !important;
}

.goRight2px {
    margin-left: 2px !important;
}

.goRight10px {
    margin-left: 10px !important;
}

.goRight6px {
    margin-left: 6px !important;
}

.goRight8px {
    margin-left: 8px !important;
}

.goRight12px {
    margin-left: 12px !important;
}

.goRight16px {
    margin-left: 16px !important;
}

.goRight18px {
    margin-left: 18px !important;
}

.goRight20px {
    margin-left: 20px !important;
}

.goRight23px {
    margin-left: 23px !important;
}

.goRight26px {
    margin-left: 26px !important;
}

.goRight30px {
    margin-left: 30px !important;
}

.goRight40px {
    margin-left: 40px !important;
}

.goRight41px {
    margin-left: 41px !important;
}

.goRight46px {
    margin-left: 46px !important;
}

.goRight59px {
    margin-left: 59px !important;
}


.goTop5px {
    margin-top: -5px !important;
}

.goTop5px {
    margin-top: -7px !important;
}

.goTop30px {
    margin-top: -30px !important;
}

.goBottom7px {
    margin-top: 7px !important;
}

.goBottom10px {
    margin-top: 10px !important;
}

.goBottom24px {
    margin-top: 24px !important;
}

.goBottom29px {
    margin-top: 29px !important;
}

.setWidth538px {
    width: 538px !important;
}

.setWidth178px {
    width: 178px !important;
}

.setWidth120px {
    width: 120px !important;
}

.setWidth158px {
    width: 158px !important;
}

.setWidth168px {
    width: 168px !important;
}

.setWidth188px {
    width: 188px !important;
}

.setWidth200px {
    width: 200px !important;
}

.goBottom5px {
    margin-top: 5px !important;
}

.setHeight35px {
    height: 35px !important;
}

.setWidth100percentage {
    width: 100% !important;
}

.setWidth15Percentage {
    width: 15% !important;
}

.label-depreciation {
    line-height: 35px;
}

.depreciate-selection {
    margin-left: 10px;
}

.image-container-fixedasset {
    float: none !important;
    margin-left: 0 !important;
    height: 185px !important;
    border: 2px dashed #efefef;
}

    .image-container-fixedasset a {
        position: relative;
    }

.image-container-fixedasset-detail {
    float: none !important;
    margin-left: 0 !important;
    height: 185px !important;
    border: none !important;
}

.setBorderColor-Pink {
    border-color: lightpink !important;
}

.country-select-label {
    width: 100px !important;
}

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

/* 
   Button Components
   * Buttons
   * Button
*/
.ui.buttons.buttons-image-and-caption {
    background-color: white !important;
}

    .ui.buttons.buttons-image-and-caption button.tab-btn:hover,
    .ui.buttons.buttons-image-and-caption button.subtab-btn:hover,
    .ui.buttons.buttons-image-and-caption button.is-active {
        background-color: #F4F5F7 !important;
    }

    .ui.buttons.buttons-image-and-caption button.is-choosing-active {
        background-color: #F5FBFE !important;
    }

    .ui.buttons.buttons-image-and-caption button.is-active span {
        color: #52BCEA !important;
        font-family: "CordiaUPC_1230461";
    }

    .ui.buttons.buttons-image-and-caption button span {
        font-size: 19px !important;
    }

    .ui.buttons.buttons-image-and-caption.is-caption-bottom button {
        height: 135px;
    }

        .ui.buttons.buttons-image-and-caption.is-caption-bottom button span {
            display: block;
        }

            .ui.buttons.buttons-image-and-caption.is-caption-bottom button span img {
                width: 50px;
                height: 50px;
            }

    .ui.buttons.buttons-image-and-caption.is-caption-right button {
        height: auto;
    }

        .ui.buttons.buttons-image-and-caption.is-caption-right button span {
            display: table-cell;
            vertical-align: middle;
            white-space: nowrap;
        }

            .ui.buttons.buttons-image-and-caption.is-caption-right button span img {
                width: 25px;
                height: 25px;
            }

.fixasset.padding {
    padding: 10px;
}

.fixasset.fixasset-table {
    table-layout: auto !important;
    border-radius: 5px 5px 0 0 !important;
}

.fixasset.fixasset-edit-area {
    width: 19%;
    float: left;
    padding-right: 15px;
    padding-left: 15px;
    text-align: right !important;
}

.fixasset h2.title strong {
    font-weight: bolder;
    font-size: 50px;
    color: #333;
    font-style: normal;
    margin-right: 10px;
}

.fixasset h2.title {
    font-weight: normal !important;
    font-size: 25px;
    color: #333;
    font-style: italic;
}

.fixasset label.header {
    font-weight: bold !important;
}

.fixasset label.cost-number {
    display: block;
}

.fixasset div.has-text-left {
    text-align: left !important;
}

.fixasset.fixasset-info-container {
    width: 80%;
    float: left;
    padding-right: 0px;
    padding-left: 0px;
}

.fixasset.fixasset-depreciation {
    margin-top: 10px;
}

    .fixasset.fixasset-depreciation.has-text-left div {
        text-align: left;
    }

    .fixasset.fixasset-depreciation input[type="text"].fixasset-input {
        width: 100px;
    }

    .fixasset.fixasset-depreciation div.fixasset-depreciation-container {
        width: 35%;
        float: left;
        padding-right: 0px;
        padding-left: 15px;
        white-space: nowrap;
    }

        .fixasset.fixasset-depreciation div.fixasset-depreciation-container label.radio-inline {
            margin-right: 5px;
        }

        .fixasset.fixasset-depreciation div.fixasset-depreciation-container label.header {
            white-space: nowrap;
            font-weight: bold;
        }

.fixasset.fixasset-image-container {
    width: 20%;
    float: left;
    padding-right: 0px;
    padding-left: 0px;
}

    .fixasset.fixasset-image-container div.fixasset-image img {
        border-radius: 4px;
        border: solid 1px #e5e5e5;
    }

    .fixasset.fixasset-image-container div div label {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .fixasset.fixasset-image-container div div a.ui.button {
        width: 100px;
    }

.fixasset div.fixasset-highlight-container {
    background-color: #eeeaea;
}

    .fixasset div.fixasset-highlight-container.fullwidth {
        width: 1118px;
        margin: 0 -10px 0 -10px;
    }

    .fixasset div.fixasset-highlight-container.startatleft {
        margin: 0 0 0 -10px;
    }

    .fixasset div.fixasset-highlight-container label:nth-child(1),
    .fixasset div.fixasset-highlight-container label:nth-child(2) {
        margin-left: 10px;
    }

.is-hidden {
    display: none !important;
}

.is-nowarp {
    white-space: nowrap !important;
    word-break: keep-all !important;
}


.product-edit-table td input[type="text"]:disabled.cn-gn-vat {
    text-align: center;
}

.product-edit-table td input[type="text"]:disabled,
.product-edit-table td textarea:disabled,
.product-edit-table td label:disabled,
.product-edit-table td div:disabled {
    background: #F0F0F0 !important;
}

.header-with-dropdown-right h2.ui.header {
    display: inline-block;
    margin-right: 5px;
    margin-left: 0px;
}

.header-with-dropdown-right div.ui.dropdown {
    display: inline-block;
    margin-left: 5px;
    width: 185px;
}

.td-none td,
.td-none input[disabled] {
    background: #F0F0F0 !important;
}

.add-newdesc {
    margin-left: 2.5px;
}

.table-payment-row6.closebtn-en {
    padding-left: 0 !important;
}

.contactname-billing-note {
    float: left;
    text-align: left;
    width: 35%;
}

.paymentChartAccountId {
    width: 240px;
}

.receive-withholdingtax-text {
    font-family: CordiaUPC_1230459;
    font-size: 21px;
}

.select-bank.disable-div div.bankname_label {
    padding-left: 10px;
    padding-top: 4.3px;
    white-space: nowrap;
}

    .select-bank.disable-div div.bankname_label:hover {
        padding-top: 4.3px;
        overflow-x: scroll;
        overflow-y: hidden;
    }

.paymentChartAccountId.ui.search.dropdown.paymentFee .text {
    font-size: 20px;
    width: 220px;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    height: 15px;
}

th.purchaseTaxInvoiceNumber {
    width: 200px;
    padding-left: 10px;
}

td.purchaseTaxInvoiceNumber {
    width: 200px;
    padding-left: 10px;
}

.label-depreciation-with-option {
    width: 100%;
    position: absolute;
    margin-left: 10px;
}

.cheque-modal-status {
    padding-left: 10px;
    padding-top: 10px;
}

.cheque-modal-img-status {
    padding-left: 10px;
    padding-bottom: 3px;
}

.wht-creditnote-create-label-checkbox {
    width: 230px;
    padding-right: 10px;
}

.fixasset-detail-tab-content {
    word-break: break-word;
}

.cpn-create.cpn-header {
    height: 60px;
    margin: 0;
}

    .cpn-create.cpn-header h3 {
        line-height: 60px;
        margin: 0;
    }

.cpn-create.cpn-table-payment {
    margin-top: 10px;
}

.cpn-create.cpn-input-remark {
    width: 100px;
}

.cpn-detail-input-save {
    width: 210px !important;
}

#notificationDropdown > #countNotificationUnseen {
    position: absolute;
    top: -8px;
    right: -5px;
}

#notificationDropdown > img {
    width: 20px;
    filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(346deg) brightness(100%) contrast(97%);
}

    #notificationDropdown > img:hover {
        background-color: unset !important;
        filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(346deg) brightness(100%) contrast(97%) drop-shadow(2px 4px 6px black);
    }

#notificationDropdown.disabledIconNotification > img {
    filter: invert(50%) sepia(100%) saturate(100%) hue-rotate(346deg) brightness(100%) contrast(20%);
}

#notificationDropdown > .ui.circular.red.label.tiny {
    font-size: 12px;
}

#divNotificationDropDown {
    position: relative;
}

    #divNotificationDropDown .iconNotification {
        margin-top: 6px;
        position: relative;
        cursor: pointer;
        height: 34px;
    }

    #divNotificationDropDown .disabledIconNotification {
        cursor: unset;
    }



    #divNotificationDropDown .dropdownNotification {
        position: absolute;
        right: -30px;
        border-radius: 4px;
        background: #fff;
        width: 360px;
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 0px;
        z-index: 9999;
        box-shadow: 0 2px 4px 0px rgba(0, 0, 0, 0.2);
        transition: 0.25s;
    }

        #divNotificationDropDown .dropdownNotification .notification-title {
            padding-right: 50px;
            line-height: 25px;
            margin-top: 7px;
        }


        #divNotificationDropDown .dropdownNotification::-webkit-scrollbar {
            width: 8px;
        }

        #divNotificationDropDown .dropdownNotification::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0);
        }


        #divNotificationDropDown .dropdownNotification::-webkit-scrollbar-thumb {
            margin-right: 20px;
            background: #d1d1d1;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.5s;
        }

            #divNotificationDropDown.dropdownNotification::-webkit-scrollbar-thumb:hover {
                background: #626262;
            }

    #divNotificationDropDown .showBoxDropdown {
        max-height: 250px;
    }

    #divNotificationDropDown .list {
        background: #fff;
        transition: 0.25s;
    }

        #divNotificationDropDown .list:hover {
            background: #EFF5FC;
        }

        #divNotificationDropDown .list > div {
            cursor: pointer;
        }

        #divNotificationDropDown .list hr {
            margin-top: 0px;
            margin-bottom: 0px;
        }

        #divNotificationDropDown .list p {
            color: black !important;
        }

        #divNotificationDropDown .list .download {
            color: skyblue !important;
            cursor: pointer;
        }

        #divNotificationDropDown .list .remove {
            color: #FA897D !important;
            cursor: pointer;
            position: absolute;
            right: 10px;
        }

            #divNotificationDropDown .list .remove:hover {
                color: #ff3e3e !important;
            }

        #divNotificationDropDown .list > div {
            padding: 0px 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    #divNotificationDropDown .listUnSeen {
        background: #D1F5F9;
    }

    #divNotificationDropDown .list-item {
        display: inline-block;
        margin-right: 10px;
    }

    #divNotificationDropDown .list-enter-active, .list-leave-active {
        transition: all .25s;
    }

    #divNotificationDropDown .list-enter, .list-leave-to {
        opacity: 0;
        transform: translateX(30px);
    }


.ui.basic.button:hover, .ui.basic.buttons .button:hover {
    background-color: unset !important;
    box-shadow: unset;
}

#notificationDropdown > .menu > .header.notfound-notification {
    text-align: center;
    line-height: 51px;
    vertical-align: middle;
    text-transform: none;
    font-style: italic;
    color: rgba(0,0,0,0.3);
    font-size: 20px;
}

.ui-autocomplete .tooltip {
    position: fixed;
    z-index: 9999;
}

.iframePreview {
    height: 600px;
    width: 100%;
}

#downloadFileViewerModal .modal-dialog {
    width: 900px;
    min-height: 800px;
}

#downloadFileViewerModal .modal-body {
    text-align: center;
    margin: 30px;
    overflow: auto;
    margin-top: 65px;
    min-height: 250px;
}


#downloadFileViewerModal #previewImage {
    height: 380px;
    bottom: 5px;
}

#downloadFileViewerModal #modal-content {
}

#downloadFileViewerModal .next-file {
    position: absolute;
    top: 50%;
    right: 0px;
    font-size: 30px;
    margin-top: -15px;
    cursor: pointer;
}

#downloadFileViewerModal .prev-file {
    position: absolute;
    top: 50%;
    left: 0px;
    font-size: 30px;
    margin-top: -15px;
    cursor: pointer;
}

#downloadFileViewerModal .display-none {
    display: none;
}

.peak-header-notification {
    background-color: #333;
    display: block;
    text-align: center;
    padding: 10px;
}

.textNotificationPackage {
    text-align: center;
    color: #fff;
}

#exportTaxFilingFileModal .modal-form label {
    width: 40%;
}

.exportMonth, #exportType {
    width: 37%;
    box-sizing: border-box;
}

.linkUpgradePackages {
    color: #fff;
    padding: 0px 15px;
    text-decoration: underline;
}

    .linkUpgradePackages:hover {
        color: #fff;
    }

#closeNotification.close {
    color: #fff;
}

.closeFinanceStatment {
    -webkit-appearance: none;
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: 0px 15px;
    font-size: 35px;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.4;
    color: #000;
}

    .closeFinanceStatment span {
        display: block;
    }

.dropdown-section .ui.selection.dropdown.journalTypeDropdown {
    width: 45%;
}

.tutorial {
    margin: 6px 4px;
    padding: 4px 6px;
    border-radius: 4px;
}

    .tutorial .menu {
        top: 121% !important;
    }

    .tutorial .icon {
        margin: 0 0 0 5px !important;
    }

    .tutorial .menu > .item {
        color: rgba(0,0,0,.8);
        text-decoration: none;
    }

.preventVatWrong {
    font-size: 18px;
    /*text-align: left;
    float: left;*/
    margin-left: 0px !important;
}

.text-custom-margin {
    margin-left: 10px !important;
}

.button-gradientBlue {
    background: linear-gradient(90deg, rgba(108,109,242,1) 0%, rgba(68,229,230,1) 100%) !important;
}

.section-approveAll {
    padding-left: 10px;
    display: flex;
    align-items: center;
}

.dailyjournal-number-section-for-checkBox {
    text-align: left !important;
}

    .dailyjournal-number-section-for-checkBox .text-countVatItem {
        font-size: 16px;
    }

.block-count-transaction {
    display: inline-block;
    width: 25px;
    margin-right: 5px;
    text-align: center;
}

#dvYellowAlert label.textAlert {
    margin-left: 8px;
    max-width: 90%;
    line-height: 30px;
    margin: 10px;
}

#dvYellowAlert a#yellowAlert {
    margin-left: 10px;
}

#btnApproveAll.button-green.disable {
    cursor: auto;
    background-color: #999 !important;
}

#btnApproveAllArrow.button-green.disable {
    cursor: auto;
    background-color: #999 !important;
}

.divloading1 {
    background: url('../Content/images/loading.gif') no-repeat center center;
    display: none;
    width: 1120px;
    height: 260px;
    background-color: white;
    margin-top: 32px;
}

/* NPS Score */
.icon-nps {
    width: 30px;
    padding: 0px;
}

.block-icon-nps {
    max-width: 30px;
    max-height: 30px;
    display: inline-block;
    padding: 5px;
    width: 10%;
}

.peak-header-npsScore {
    background-color: #43BF76;
    width: 100%;
    display: block;
    position: relative;
}

.container-nps {
    width: 960px;
    text-align: center;
    margin: 0 25%;
}

.textNpsScore {
    text-align: right;
    display: block;
    padding: 10px;
    color: #fff;
}

.block-npsScore {
    width: 60%;
    display: inline-block;
}

.btn-npsScore {
    width: 80%;
    display: inline-block;
}

.block-text-npsScore {
    width: 35%;
    display: inline-block;
    float: left;
}

.block-btn-close-npsScore {
    position: absolute;
    text-align: right;
    right: 0px;
    top: 0px;
}

    .block-btn-close-npsScore button {
        color: #fff;
        padding: 10px
    }

.vote-score {
    display: block;
    width: 10%;
    background-color: #fff;
    text-align: center;
    float: left;
    border: 1px #ddd solid;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
}

    .vote-score:hover {
        background-color: #f0f0f0;
    }

.nps-score-purple {
    color: #7878F4
}

.nps-score-red {
    color: #F35B35
}

.nps-score-yellow {
    color: #FFA849
}

.nps-score-green {
    color: #43BF76
}

/* PP30 */
.block-field-search {
    width: 20%;
    text-align: right;
    display: block;
    float: left;
}

.block-btn-search {
    width: 10%;
    float: left;
    text-align: center;
}

.block-text {
    width: 50%;
    float: left;
    text-align: right;
}

.block-pp30TaxInvoice-text, .block-pndWithholdingTax-text {
    width: 12%;
    float: left;
    text-align: right;
}

.block-pp30TaxInvoice-search, .block-pndWithholdingTax-search {
    width: 18%;
    float: left;
    text-align: center;
}

#pvTaxListDetail .block-pp30TaxInvoice-search {
    width: 15%;
}

#pvTaxListDetail .section-type-taxInvoice, #pvTaxListDetail .section-status {
    width: 18%;
    margin-right: 5px;
}

.block-pp30TaxInvoice-textSearch, .block-pndWithholdingTax-textSearch {
    width: 24%;
    float: left;
    text-align: center;
}

#pvTaxListDetail .block-pp30TaxInvoice-textSearch, #pvTaxListDetail .block-btn-search {
    width: auto;
    margin-right: 5px;
}

.block-field-search span {
    padding: 0px 5px;
}

.input-pp30TaxInvoice-search, .input-pndWithholdingTax-search {
    width: 150px;
}

.sectionSearch-pp30Tax .table-header span, .sectionSearch-whtTransaction {
    padding: 0px 15px;
}

.link-text {
    display: inline;
    position: relative;
    right: 10px;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}

tr.header-text {
    width: 100%;
}

th.table-width-status, td.td-status, td.td-status-text {
    width: 18%;
    text-align: left;
    cursor: default;
}

th.table-width-status {
    text-align: center;
}

th.table-width-number, td.td-number {
    width: 22%;
    text-align: left;
}

th.table-width-remainingTaxCredit, td.td-remainingTaxCredit, th.table-width-taxToClaim, td.td-taxToClaim,
th.table-width-taxToPay, td.td-taxToPay, th.table-width-changeTaxCredit, td.td-changeTaxCredit {
    width: 15%;
    text-align: right;
    cursor: default;
}

.pp30Month {
    width: 100%;
}

.modal-form .row {
    padding: 10px 0px;
    display: block;
}

    .modal-form .row label {
        width: 35%;
        text-align: left;
    }

    .modal-form .row .pp30Month, .modal-form .row .pnd53Month,
    .modal-form .row .pnd3Month {
        width: 40%;
        text-align: left;
        float: left;
    }

    .modal-form .row .pp30Count, .modal-form .row .filingCount {
        width: 15%;
        text-align: left;
        float: left;
    }

    .modal-form .row .radio-type-pp30 {
        width: 65%;
        display: inline-block;
    }

.sectionSearch .searchDate {
    width: 100px;
}

.chartOfAccountReportType .radio-group {
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 20px;
}

.chartOfAccountReportType label.radio {
    width: 100%;
}

#mdExportChartOfAccount .modal-form li {
    padding: 0px;
}

/* new _PP30TaxInvoiceTable */

.pp30TaxInvoice-table, .whtTransaction-table {
    width: 100%;
    float: left;
    margin: 0px;
    border-right: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    box-sizing: border-box;
}

.pp30TaxInvoice-table-footer, .whtTransaction-table-footer {
    width: 100%;
    line-height: 50px;
    float: left;
    color: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #DDDDDD;
    border-top: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.section-actionPage {
    width: 100%;
    height: auto;
    display: block;
}

.actionPage {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
    padding: 5px 0px;
    background-color: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;
}

.block-button-left, .block-button-right {
    width: 50%;
    display: block;
}

.block-button-right {
    text-align: right;
    float: right;
}

.block-button-left {
    text-align: left;
    float: left;
}

.block-group-total .totalPayment {
    text-align: right;
}

.button-btn-white {
    border: 1px solid #DDDDDD !important;
    color: #000 !important;
    background-color: #fff !important;
    font-size: 18px !important;
}

.block-button-right .button-blue {
    margin: 0px 10px !important;
}

.button-btn-white:hover {
    background-color: #f7f7f7 !important;
}

/* style from _PP30TaxInvoice */

.pp30.taxtable-check {
    padding: 10px 0 0 30px;
}

.taxtable-chevron {
    width: 2%;
    text-align: center;
    padding: 10px 2px !important;
}

.taxtable-countVatItem, .taxtable-countItem {
    width: 2%;
    text-align: center;
    padding: 10px 0px !important;
    font-size: 16px;
}

.taxtable-check {
    width: 3%;
    height: 51px;
    text-align: center;
    padding: 10px 2px 10px 10px !important;
}

.taxtable-check-vatExempted {
    width: 3%;
    height: 51px;
    line-height: 30px;
    text-align: right;
    padding: 10px;
}

.taxtable-document {
    width: 13%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.taxtable-filingDate {
    width: 10%;
    text-align: center;
}

.taxtable-taxInvoiceDate {
    width: 12%;
    text-align: center;
}

.taxtable-buyers-salesTax {
    width: 9%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.taxtable-buyers-purchaseTax {
    width: 12%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.taxtable-attachedFile, .taxtable-purchaseTaxNumber {
    width: 12%;
}

.taxtable-vatNo, .taxtable-totalVatNo {
    width: 12%;
    text-align: right;
}

.taxtable-vatApplicable, .taxtable-vatZero, .taxtable-totalVatApplicable, .taxtable-totalVatZero {
    width: 12%;
    text-align: right;
}

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

.block-pp30TaxInvoice-search .date-input {
    height: auto;
}

.block-pp30TaxInvoice-search .menu {
    box-sizing: border-box;
}

.block-pp30TaxInvoice-search .ui.checkbox label, .block-pndWithholdingTax-search .ui.checkbox label {
    position: relative;
}

.dropdown-status {
    width: 180px !important;
}

    .dropdown-status .dropdown.icon, .dropdown-type-taxinvoice .dropdown.icon {
        top: .5em !important;
    }

    .dropdown-status .ui.selection.dropdown > .text {
        margin-right: 0px !important;
    }

    .dropdown-status .textSelect, .dropdown-type-taxinvoice .textSelectTypeTaxInvoice {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        max-width: 150px !important;
        overflow: hidden !important;
        vertical-align: middle;
    }

    .dropdown-status .textSelect, .dropdown-type-receivedtaxinvoice .textSelectTypeTaxInvoice {
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        max-width: 150px !important;
        overflow: hidden !important;
        vertical-align: middle;
    }

.dropdown-type-taxinvoice {
    width: 100%;
    box-sizing: border-box;
}

.taxtable-vat, .taxtable-totalVat {
    width: 12%;
    text-align: right;
}

.taxtable-status {
    width: 12%;
    text-align: center;
}

.taxtable-description {
    width: 29%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10px 10px 10px 0px !important;
}

.taxtable-chevron-children {
    width: 8%;
    text-align: right;
}

.taxtable-totalText-salesTax {
    width: 37%;
    text-align: right;
}

.taxtable-totalText-purchaseTax {
    width: 64%;
    text-align: right;
}

.taxtable-description .fa-check {
    margin: 0 15px 0 0 !important;
}

.taxtable-chevron-children .ui.checkbox label {
    padding: 0px !important;
}

.taxtable-vat span {
    width: 36px;
    display: inline-block;
    margin-right: 10px;
    font-size: 18px;
}

.taxtable-container .taxtable-th:last-child {
    border-radius: 0 5px 0 0;
}

.table-disabled {
    color: #efefef;
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
}

    .table-disabled a {
        color: #efefef;
    }

    .table-disabled i {
        color: #efefef;
    }

    .table-disabled .fa-chevron-down {
        color: #efefef !important;
    }

.fa-chevron-down {
    cursor: pointer;
    position: static;
}

.row-fluid {
    float: left;
    width: 100%;
}

    .row-fluid:last-child {
        border-bottom: none;
    }

.taxtable-tr {
    border-bottom: 1px solid #dddddd;
    display: block;
    float: left;
}

.taxtable-th {
    background: #eff5fc;
    box-sizing: border-box;
    color: #646464;
    float: left;
    line-height: 30px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
}

.taxtable-td {
    box-sizing: border-box;
    float: left;
    line-height: 40px;
    padding: 10px;
    word-wrap: break-word;
}

.taxtable-tr .ui.default.dropdown > .text,
.ui.dropdown > .default.text {
    color: #333333;
}

.salestax-date {
    width: 100%;
    margin-bottom: 30px;
    padding: 15px;
    line-height: 40px;
}

.taxtotal-container {
    width: 100%;
    padding: 15px;
}

.tabletax-total {
    width: 100%;
    float: right;
    border: 1px solid #dddddd;
}

    .tabletax-total th {
        text-align: right;
        padding: 5px 10px;
    }

    .tabletax-total td {
        text-align: right;
        padding: 5px 10px;
    }

    .tabletax-total span {
        font-size: 28px;
    }

    .tabletax-total strong {
        font-size: 28px;
    }

.taxform-container {
    width: 100%;
}

.taxtable-tr {
    border-bottom: 1px solid #dddddd;
    display: block;
    float: left;
    width: 100%;
    background: #fff;
}

.taxtable-th {
    background: #eff5fc;
    box-sizing: border-box;
    color: #646464;
    float: left;
    line-height: 30px;
    padding: 10px;
    border-bottom: 1px solid #dddddd;
}

.taxtable-td {
    box-sizing: border-box;
    float: left;
    line-height: 40px;
    padding: 10px;
    word-wrap: break-word;
}

    .taxtable-td:hover {
        overflow: visible;
        white-space: normal;
        text-overflow: ellipsis;
    }

/*.taxtable-Document {
    width: 160px;
}*/

.taxtable-Purchasetax {
    width: 200px;
}

.taxtable-Salestax {
    width: 200px;
}

.table-transaction-count {
    font-size: 18px !important;
}

.hiddenRow {
    padding: 0 !important;
    border-bottom: 0 !important;
}

.table-footer-white {
    background: #ffffff;
    color: #666666;
    padding: 3px 0;
}

.date-input {
    width: 88px !important;
    text-align: center;
    margin-right: 5px;
}

.date-input, .text-align-left {
    text-align: left !important;
}

.dropdown-section,
.note-statementOfChangesInEquityType-detail, .note-incomeStatement-detail, .note-statementOfFinancialPosition-detail,
.note-statementOfChangesInEquityType-block, .note-incomeStatement-block, .note-statementOfFinancialPosition-block {
    display: block;
    width: 100%;
}

    .note-statementOfChangesInEquityType-block label,
    .note-incomeStatement-block label,
    .note-statementOfFinancialPosition-block label {
        display: inline-block;
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }

    .note-statementOfChangesInEquityType-block .text-title,
    .note-incomeStatement-block .text-title,
    .note-statementOfFinancialPosition-block .text-title {
        font-weight: bold;
    }

.note-financial-left {
    width: 60%;
    float: left;
    /*padding: 10px;*/
}

.note-financial-right {
    width: 35%;
    float: right;
    /*padding: 10px;*/
}

.block-link-statementOfFinancialPosition-addMore, .block-link-incomeStatement-addMore,
.block-link-statementOfChangesInEquity-addMore {
    padding: 10px 0px;
    display: inline-block;
}

.dropdown-section .ui.selection.dropdown {
    width: 100%;
}

.end-line {
    margin: 10px 0px;
    border: 1px solid #DDDDDD;
}

#tableCarousel1 td input {
    text-align: right;
}

#modalDBDEfiling .modal-backdrop.fade.in {
    height: 1500px !important;
}

#exportTaxFilingFileModal .modal-dialog {
    width: 550px;
}

/* pp30 summary */
.summary {
    margin-bottom: 30px;
}

.section-summary, .section-pp30Payment-summary, .section-pp30Payment, .section-rdContact, .section-pndPayment-summary {
    width: 100%;
    line-height: 50px;
    float: left;
    background-color: #fff;
    border: 1px solid #DDDDDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.section-pp30Payment-summary, .section-pp30Payment, .section-rdContact {
    margin-bottom: 30px;
}

.block-header-left {
    width: 70%;
    float: left;
    padding: 0px 20px;
    box-sizing: border-box;
}

    .block-header-left span {
        padding-right: 10px;
    }

.block-header-right {
    width: 30%;
    float: right;
    text-align: right;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-footer-right {
    width: 50%;
    float: right;
    text-align: right;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-title-tab a.highlight {
    font-weight: bold;
    padding-right: 10px;
    text-decoration: underline;
    color: #000;
    margin-left: 30px;
}

.taxCredit input {
    text-align: right;
}

span.highlight, div.highlight {
    font-weight: bold;
}

.row-summary span.highlight {
    padding-right: 10px;
}

.row-summary .block-title {
    text-align: right;
}

.block-pp30Payment-checkbox label {
    padding: 0px 30px !important;
}

.block-value span.currencyText, .block-pp30Payment-value span.currencyText,
.block-total-value span.currencyText, .block-input-taxCredit span.currencyText {
    padding-left: 5px;
}

.section-pp30Form-header, .section-pp30Form-body, .section-pp30Form-summary, .section-pp30Form-footer,
.section-summaryDetail-header, .section-summaryDetail-body, .section-summaryDetail-summary, .section-pp30Payment-header,
.section-pp30Payment-body, .section-rdContact-body, .section-pndForm-header, .section-pndForm-body, .section-pndForm-footer {
    border-bottom: 1px solid #DDDDDD;
    display: block;
    height: auto;
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0px;
}

.section-summaryDetail-summary, .section-summaryDetail-body {
    padding-bottom: 30px;
}

.section-pp30Payment-body {
    padding: 0px;
    border-bottom: none;
}

.block-body-left, .block-body-right, .block-footer-left {
    width: 50%;
    float: left;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-upload-file {
    padding: 0px 20px;
    box-sizing: border-box;
}

    .block-upload-file .save-section {
        line-height: 1;
    }

.block-summary-row {
    float: right;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-summary-left {
    width: 45%;
    float: right;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-summaryDetail-left {
    width: 45%;
    float: left;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-summary-right, .block-summaryDetail-right {
    width: 55%;
    float: right;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-summary-row {
    width: 75%;
    margin-left: 25%;
}

.block-pp30Payment {
    width: 35%;
    float: left;
    text-align: left;
    padding: 10px 20px; /*  0px 20px */
    box-sizing: border-box;
}

    .block-pp30Payment:last-child {
        width: 65%;
    }

.block-group-total, .block-group-remark, .block-group-canalPayment {
    width: 30%;
}

.block-group-paymentBy, .block-group-service {
    width: 40%;
}

.block {
    float: left;
    display: inline-block;
}

    .block span, .block input, .block .ui.dropdown.selection {
        width: 95%;
        display: block;
        /*padding: 0px;*/
        box-sizing: border-box;
    }

    .block input, .block .ui.dropdown.selection {
        margin-top: 10px;
    }

.block-pp30Payment:last-child {
    border-left: 1px solid #DDDDDD;
}

.block-total-text {
    width: 50%;
    display: inline-block;
    text-align: right;
    float: left;
}

.block-total-value, .block-button-option {
    width: 25%;
    display: inline-block;
    float: left;
    text-align: right;
}

    .block-button-option .button-green {
        width: 80%;
    }

    .block-button-option .ui.buttons .button-green {
        width: auto;
    }

    .block-button-option .ui.buttons .dropdown.icon.active {
        color: #fff;
    }

.block-pp30payment-header {
    width: 100%;
    padding: 0px 20px;
    box-sizing: border-box;
}

.icon-dropdown-print {
    max-height: 15px;
    margin: unset;
    padding: 0px 10px;
    content: url(https://peakmini-sit.azurewebsites.net/Content/images/icon-print-333.png);
    background-repeat: no-repeat;
}

.pp30-loading {
    content: url('../Content/images/loading.gif');
    background-repeat: no-repeat;
    margin: auto;
    height: 50px;
    display: inline-block;
}

.section-loading {
    background-color: #fff;
    padding: 30px 0px;
    width: 100%;
    float: left;
    text-align: center;
    display: none;
}

.block-pp30payment-header span {
    padding: 0px 10px;
}

.line-summary {
    width: 100%;
    height: 1px;
    background: #000;
    margin-top: 3px;
}

.row-pp30, .row-summary, row-pnd {
    width: 100%;
    display: inline-block;
}

.row-line {
    display: block
}

.row-summary {
    padding: 10px 0px;
}

.block-title, .block-title-tab {
    width: 60%;
    display: inline-block;
    text-align: left;
}

.block-value {
    width: 40%;
    float: right;
    text-align: right;
}

.block-pp30Payment-value {
    width: 60%;
    display: inline-block;
    float: right;
    text-align: right;
}

.block-pp30Payment-title {
    width: 40%;
    display: inline-block;
    text-align: left;
}

    .block-pp30Payment-title .fa {
        margin: 0px 30px 0px 0px;
    }

.section-pp30Form-summary .block-title {
    width: 60%;
}

.section-pp30Form-summary .block-value {
    width: 40%;
}

.section-pp30Form-summary .row-summary .block-title {
    width: 25%;
}

.section-pp30Form-summary .row-summary .block-value {
    width: 75%;
}

.block-pp30Payment-received {
    width: 100% !important;
}

    .block-pp30Payment-received .row-pp30, .block-pp30Payment-received .row-pp30:last-child {
        width: 65%;
    }

        .block-pp30Payment-received .row-pp30:last-child {
            float: right;
        }

.block-typeTax {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 5px;
    height: 50px;
}

    .block-typeTax .radio-group { /* radio */
        text-align: left;
        float: left;
        width: 50%;
    }

        .block-typeTax .radio-group:first-child {
            width: 20%;
        }

        .block-typeTax .radio-group:nth-child(2) {
            width: 50%;
            margin-top: 0px;
        }

        .block-typeTax .radio-group:last-child {
            width: 30%;
        }

    .block-typeTax .radio-group, .block-typeTax .radio-group-left, .block-typeTax .radio-group-right {
        padding: 0px 10px;
        box-sizing: border-box;
    }

    .block-typeTax .radio input[type='radio'] {
        height: 40px;
    }

    .block-typeTax .radio:last-child {
        margin-top: 0px;
    }

.section-pp30Form-summary {
    border-bottom: 1px solid #000;
}

.pp30-taxStatus {
    width: 100%;
}

#confirmChangeStatusModal .row {
    text-align: left;
}


.vatItemStatus-yellow {
    color: #FFB166;
}

.vatItemStatus-green {
    color: #69CC91;
}

.vatItemStatus-blue {
    color: #5CACFF;
}

.vatItemStatus-red {
    color: #F1502F;
}

.column-disabled {
    color: #DDDDDD;
}

.block-title-refund {
    width: 100%;
}

.pp30TimeLine .point1, .pp30TimeLine .point, .pp30TimeLine .point-blue,
.pndTimeLine .point1, .pndTimeLine .point, .pndTimeLine .point-blue {
    cursor: default;
}

.text-countVatItem {
    display: inline-block;
    background-color: #6699cc;
    color: #fff;
    width: 100%;
    border-radius: 20px 20px 20px 20px;
    font-weight: 600;
}

.pp30Table .td-status-text, .pp30Table th.table-width-remainingTaxCredit, .pp30Table .td-status-text-void,
.pnd53Table .td-status-text {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
}

.td-status-text-void {
    text-align: center;
}

.td-status label {
    width: 90%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    vertical-align: middle;
}

.disabled-input {
    background: #F0F0F0 !important;
}

.disable-dropdown-option {
    pointer-events: none;
}

.block-rdContact-title, .block-rdContact-input {
    width: 40%;
    display: inline-block;
    text-align: center;
    float: left;
    padding: 0px 20px;
    box-sizing: border-box;
}

.block-rdContact-button {
    width: 20%;
    text-align: center;
    display: inline-block;
    text-align: left;
    float: left;
    padding: 0px 20px;
    box-sizing: border-box;
}

.rdContact {
    width: 100%;
}

/* TaxInvoice Ref Number Modal */

.text-title {
    width: 50%;
    float: left;
    padding: 5px 0px;
}

.block-input {
    display: inline-block;
    width: 100%;
}

.value-input {
    width: 50%;
    float: left;
}

.sectionReferenceTaxInvoice {
    padding: 10px 0px;
    text-align: left;
}

.pp30-table-header, .whtTransaction-table-header {
    width: 100%;
    float: left;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #DDDDDD;
    border-top: none;
    line-height: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.block-notification {
    width: 35%;
    float: left;
}

.notificationText {
    color: #f37b76;
    font-weight: bold;
}

.notificationTextModal {
    float: left;
    text-align: left;
    color: #f37b76;
    font-weight: bold;
    padding-right: 10px;
}

.createTaxCredit, .editTaxCredit {
    width: 65%;
    float: right;
}

.linkSetTaxCredit {
    display: inline;
    color: #6699cc;
    cursor: pointer;
    font-weight: bold;
}

    .linkSetTaxCredit:hover {
        text-decoration: underline;
    }

.valueTaxCreditDisplay {
    padding-left: 10px;
    font-weight: bold;
}

.block-input-taxCredit {
    padding: 15px 0px;
}

.inputTaxCredit {
    width: 60%;
    box-sizing: border-box;
}

.referenceTaxInvoiceInput {
    width: 170px;
}

.radio-exportReport-pp30 {
    padding: 5px;
    display: inline-block;
}

    .radio-exportReport-pp30 label {
        width: 100%;
        display: inline-block;
        margin: 10px 0px;
    }

.checkBox-exportReport-pp30 {
    padding-left: 30px;
    display: none;
}

    .checkBox-exportReport-pp30 .ui.checkbox {
        width: 100%;
        margin: 5px;
        display: inline-block;
    }


.inaccessible-feature {
    opacity: unset !important;
    cursor: pointer !important;
    color: rgba(0,0,0,.8) !important;
    background: #f0f0f0 !important;
}

    .inaccessible-feature.item {
        border-bottom-left-radius: .2857rem;
        border-bottom-right-radius: .2857rem;
    }

    .inaccessible-feature.button-save {
        min-width: 120px;
    }

.inaccessible-feature-link-click {
    color: rgba(0,0,0,.8) !important;
    pointer-events: none;
}

.ui.button.inaccessible-feature.button-main {
    margin-left: 20px;
}

.create-button.inaccessible-feature {
    color: rgba(0,0,0,.8) !important;
    background: #f0f0f0 !important;
}

.inaccessible-feature i {
    position: unset !important;
    font-size: 14px !important;
}

/*status features*/
.newFeaturesNavbar {
    position: absolute;
    right: 5px;
    top: 22px;
    background-color: #f1502f;
    padding: 0px 8px;
    font-size: 16px;
    color: white;
    border-radius: 6px;
}


.newFeaturesDotNavbar {
    position: absolute;
    font-size: 16px;
    color: #f1502f;
    font-weight: 900;
    left: 20px;
    margin-top: -14px;
}

    .newFeaturesDotNavbar::before {
        content: " ";
        display: block;
        position: absolute;
        margin-top: 8px;
        margin-left: -10px;
        background-color: #f1502f;
        height: 7px;
        width: 7px;
        border-radius: 50%;
    }

.newFeatures {
    background-color: #f1502f;
    padding: 0px 8px;
    font-size: 14px !important;
    color: white;
    border-radius: 6px;
    margin-bottom: 20px;
}


.updateFeaturesNavbar {
    position: absolute;
    right: 5px;
    top: 22px;
    background-color: #ffa639;
    padding: 0px 8px;
    font-size: 17px;
    color: white;
    border-radius: 6px;
}

.updateFeaturesDotNavbar {
    position: absolute;
    font-size: 16px;
    font-weight: 900;
    left: 20px;
    margin-top: -14px;
    color: #ffa639;
}

    .updateFeaturesDotNavbar::before {
        content: " ";
        display: block;
        position: absolute;
        margin-top: 8px;
        margin-left: -10px;
        background-color: #ffa639;
        height: 7px;
        width: 7px;
        border-radius: 50%;
    }

.updateFeatures {
    background-color: #ffa639;
    padding: 0px 8px;
    font-size: 14px !important;
    color: white;
    border-radius: 6px;
}

span.newFeatures, span.updateFeatures, span.updateFeaturesDot {
    margin-left: 10px;
    margin-right: 10px;
}

.ic-rotate {
    cursor: pointer;
    position: fixed;
    top: 70px;
    right: 0px;
}

    .ic-rotate:hover {
        cursor: pointer;
    }

.ic-zoom {
    cursor: pointer;
    position: fixed;
    top: 70px;
    right: 50px;
}

    .ic-zoom:hover {
        cursor: pointer;
    }

.ic-zoomin {
    cursor: pointer;
    position: fixed;
    top: 70px;
    right: 100px;
}

    .ic-zoomin:hover {
        cursor: pointer;
    }

.ic-zoomout {
    cursor: pointer;
    position: fixed;
    top: 70px;
    right: 150px;
}

    .ic-zoomout:hover {
        cursor: pointer;
    }

div.features-access-rights-info-modal {
    position: absolute;
    width: 234px;
    height: 200px;
    z-index: 1000;
    background: white;
    border: 1px solid #DDD;
    border-radius: 10px;
    text-align: center;
    display: none;
}

    div.features-access-rights-info-modal div.features-access-rights-header {
        padding: 20px 10px 20px 10px;
    }

    div.features-access-rights-info-modal div.features-access-rights-body {
        border-top: 1px solid #DDD;
        padding: 20px 10px 20px 10px;
    }
/*status features*/

/* PND 53 */

th.table-width-totalPayAmount, td.td-totalPayAmount {
    width: 30%;
    text-align: right;
}

th.table-width-totalWhtAmount, td.td-totalWhtAmount {
    width: 30%;
    text-align: right;
}

.taxtable-whtDescription {
    width: 13%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.taxtable-whtFormNumber {
    width: 13%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.taxtable-whtDate {
    width: 10%;
    text-align: center;
}

.taxtable-whtContact {
    width: 13%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.taxtable-paymentAmount {
    width: 10%;
    text-align: right;
}


.taxtable-whtAmount {
    width: 12%;
    text-align: right;
}

.taxtable-whtType {
    width: 12%;
    text-align: center;
}

.taxtable-whtStatus {
    width: 12%;
    text-align: center;
}

.taxtable-totalText-summary {
    width: 54%;
    text-align: right;
}

.pnd53 .peak-timeline-content, .pnd3 .peak-timeline-content {
    margin: 0 auto;
    width: 420px;
}

#mdVoidPndPayment .modal-dialog {
    width: 400px;
}

#createTaxPnd53Modal .modal-dialog, #createTaxPnd3Modal .modal-dialog {
    width: 500px;
}

.pnd-payment {
    margin-top: 20px;
}

/* header document transaction */

.section-header-doc-left {
    display: inline-block;
    width: 60%;
}

.section-header-doc-right {
    width: 40%;
    text-align: right;
}

.section-refPP30 {
    display: inline-block;
}

/* Pnd 3 */

#voidPnd3ConfirmationModal .modal-dialog {
    width: 400px;
}

.detail-remark {
    background: white;
    border: none !important;
}

.deletemodal {
    width: 400px;
    overflow-wrap: break-word;
}

#purchaseTaxInvoiceDetail {
    width: 192px;
    overflow-wrap: break-word;
}

.button-main.button-blue.isShowReport.TaxInvoice {
    margin-left: 0;
}

.statusWhtNameColor {
    color: #00B5AD;
    font-weight: bold;
}

.archive-button, .unArchive-button {
    margin-right: 15px;
}

span.remainingText {
    font-size: 16px;
    text-align: left;
    font-weight: 500;
    color: #CCCCCC;
    float: left;
    padding-left: 5px;
}

.detail-product {
    background: white;
    border: none !important;
    width: -webkit-fill-available;
    white-space: pre-line;
}

.block-upload-file-sectionContact {
    padding: 0px;
}

.logoBankWidth {
    width: 7% !important;
}

#hchequetable {
    margin-bottom: 0;
}

/* Peerpower */

.partner-finance-modal {
    width: 800px;
}

.partnerFinanceDetail-row {
    width: 100%;
}

.header-partner-finance {
    text-align: center;
    width: 100%;
}

    .header-partner-finance img, .block-grab-finance-notification img {
        padding-right: 0px !important;
    }

    .header-partner-finance img {
        width: 150px;
        height: 150px;
    }

.sub-partner-detail {
    margin-left: 15px;
}

.title-partner-finance {
    display: block !important;
    text-align: center;
    font-size: 22px;
    width: 100%;
    color: #2e2e2e;
    font-weight: bold;
}

.container-modal {
    padding: 15px;
}

.modal-header-partner-finance {
    min-height: 16.43px;
}

.modal-body-partner-finance {
    margin: 10px 20px;
    box-sizing: border-box;
    display: inline-block;
    width: 95%;
}

.block-partner-finance-detail {
    padding: 10px;
}

    .block-partner-finance-detail label {
        color: #3366AA;
        font-size: 22px;
        font-weight: bold;
        padding: 5px 0px;
    }

    .block-partner-finance-detail p {
        font-size: 20px;
    }

.modal-footer-partner-finance {
    margin-top: 10px;
    text-align: center;
}

.footer-partner-finance {
    width: 50%;
    margin: 2% 25%;
}

.button-partner-finance {
    background-color: #3366AA !important;
    color: #fff;
    width: 198px;
    border-radius: 6px;
    padding: 9px 0.50em;
    text-align: center;
    display: inline-block;
}

    .button-partner-finance.disable {
        opacity: 0.5;
        cursor: auto;
    }

.partnerFinanceForm {
    display: block;
    width: 50%;
    margin: 0% 25%;
}

.block-partner-finance-form {
    padding: 10px 0px;
}

    .block-partner-finance-form label {
        font-size: 20px;
        font-weight: bold;
    }

    .block-partner-finance-form input, .block-partner-finance-form #loanAmount, .block-partner-finance-form #objectiveLoan {
        width: 100%;
        box-sizing: border-box;
    }

.partnerFinanceTerms {
    width: auto;
    height: 609px;
    border-radius: 12px;
    border: solid 1px #c1c1c1;
}

.block-partner-finance-terms {
    width: 757px;
    height: 609px;
    overflow: auto;
    padding: 20px 30px;
    box-sizing: border-box;
}

    .block-partner-finance-terms p.title-partner-finance-terms, .block-partner-finance-notification h4 {
        text-align: center;
        padding: 20px;
    }

    .block-partner-finance-terms p.detail-text-center, .block-partner-finance-notification p {
        text-align: center;
        line-height: 30px;
    }


p.title-partner-finance-terms {
    font-weight: bold;
}

.title-partner-finance-terms {
    text-align: center;
}

.block-partner-finance-notification {
    display: inline-block;
    width: 50%;
    margin: 2% 25%;
    text-align: center;
}

.block-btn-close-modal {
    display: inline-block;
    width: 100%;
    text-align: right;
}

#loanAmount.ui.selection.dropdown .menu {
    max-height: 5em !important;
    box-sizing: border-box;
}

.detail-text-left {
    text-align: left;
    margin-top: 20px;
}

.detail-list-text-left {
    text-align: left;
    line-height: 25px;
}

.block-detail-list-text {
    margin-left: 40px;
    line-height: 20px;
}

    .block-detail-list-text span {
        margin: 0px 5px;
    }

.block-list-text {
    margin: 20px 10px;
}

.list-text-left {
    line-height: 20px;
}

.note-detail {
    border-top: 1px #ccc solid;
}

    .note-detail span {
        font-size: 14px;
        color: #2e2e2e;
        padding: 20px 0px;
        display: inline-block;
    }

.peak-menu-home-padding-top {
    padding-top: 13px;
}

/* banner refer friend */

.block-banner-package {
    width: 1120px;
    height: 120px;
    margin-bottom: 15px;
    /*    cursor: pointer;*/
}

.block-banner-promotion {
    width: 982px;
    height: 120px;
    margin-bottom: 15px;
}

.block-banner-referFriends {
    width: 960px;
    height: 120px;
    margin-bottom: 15px;
}

    .block-banner-package img, .block-banner-promotion img, .block-banner-referFriends img {
        width: 100%;
        height: 100%;
        padding-right: 0px;
    }

.block-refer-friends {
    display: inline-block;
}

    .block-refer-friends .button-btn-white {
        margin-left: 20px;
    }

    .block-refer-friends button {
        margin: 0px 15px !important;
    }

.button-cancel {
    background-color: #999999;
    color: #fff;
}

.refer-modal-button {
    width: auto;
    padding: 0px 15px;
}

.conditionReferFriend {
    display: inline-block;
    padding-left: 5px;
    padding-top: 4px;
}

#custom-tooltip {
    display: none;
    padding: 5px 12px;
    background-color: #000000df;
    border-radius: 4px;
    color: #fff;
}

.icon-chart {
    cursor: pointer;
    margin-left: -13px !important;
    margin-right: -2px;
}

    .icon-chart img {
        margin-bottom: -4px;
    }

#fileArea {
    padding-bottom: 15px
}

.newPeak-fontWeight {
    font-weight: bold;
}