html,
body {
    width: calc(100% - 3px);
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: "\e151";
}

a.desc:after {
    content: "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view td {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 50px;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav > li > form {
    padding: 8px;
}

@media(max-width:768px) {
    .nav li > form {
        padding: 3px;
    }
}

.nav > li > form > button:hover {
    text-decoration: none;
}


/* User Defined */

.addbtn {
    width: 40px;
}

div.form
{
}

div.form input,
div.form textarea,
div.form select
{
    /*margin: 0.2em 0 0.5em 0;*/
}

div.form fieldset
{
    border: 1px solid #DDD;
    padding: 10px;
    margin: 0 0 10px 0;
    -moz-border-radius:7px;
}

div.form label
{
    font-weight: normal;
    font-size: 12px;
    display: block;
    color: #4B5A6C;    
}

div.form .row
{
    margin: 5px 0;
}

div.form .hint
{
    margin: 0;
    padding: 0;
    color: #999;
}

div.form .note
{
    font-style: italic;
}

div.form span.required
{
    color: red;
}

div.form div.error label:first-child,
div.form label.error,
div.form span.error
{
    color: #C00;
}

div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error
{
    background: #FEE;
    border-color: #C00;
}

div.form div.success input,
div.form div.success textarea,
div.form div.success select,
div.form input.success,
div.form textarea.success,
div.form select.success
{
    background: #E6EFC2;
    border-color: #C6D880;
}

div.form div.success label
{
    color: inherit;
}

div.form .errorSummary
{
    border: 2px solid #C00;
    padding: 7px 7px 12px 7px;
    margin: 0 0 20px 0;
    background: #FEE;
    font-size: 0.9em;
}

div.form .errorMessage
{
    color: red;
    font-size: 0.9em;
}

div.form .errorSummary p
{
    margin: 0;
    padding: 5px;
}

div.form .errorSummary ul
{
    margin: 0;
    padding: 0 0 0 20px;
}

div.wide.form label
{
    float: left;
    margin-right: 10px;
    position: relative;
    text-align: right;
    width: 100px;
}

div.wide.form .row
{
    clear: left;
}

div.wide.form .buttons, div.wide.form .hint, div.wide.form .errorMessage
{
    clear: left;
    padding-left: 110px;
}

form div.required label.control-label:after {
    content:" * ";
    color:red;
}

#cover
{
    height: 100%;
    width: 100%;
    position: fixed;   
    top: 0px;
    left: 0px;
    z-index: 2000;
    background: transparent;
    -moz-opacity: 0.70;
    opacity:.70;
    filter: alpha(opacity=70);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";    
}

#pageloder-cover
{
    height: 100%;
    width: 100%;
    position: fixed;   
    top: 0px;
    left: 0px;
    z-index: 2000;
    background: transparent;
    -moz-opacity: 0.50;
    opacity:.50;
    filter: alpha(opacity=50);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  
}

#progressbar-cover
{
    height: 100%;
    width: 100%;
    position: fixed;   
    top: 0px;
    left: 0px;
    z-index: 2000;
    background: #000000;
    -moz-opacity: 0.20;
    opacity:.20;
    filter: alpha(opacity=20);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";  
}

.pageloader-gif
{
    margin-left: 45%;
    margin-top: 20%;
    position: fixed;
    z-index: 5000;
    border-radius: 5px;
}

th.ui-th-column div {
    height:auto !important;
    overflow:hidden;
    padding-right:4px;
    padding-top:2px;
    position:relative;
    vertical-align:text-top;
    white-space:normal !important;
    font-size: 12px;

}

#group_size_name_list .form-group
{
    margin-bottom: 5px;
}

.ui-jqgrid td input
{
    height: 22px;
}


/* Login Page */

.login-container
{
    width: 100%;
}

#login-box 
{
    background: transparent;
    border: 0px;
}

#login-box .widget-body
{
    background: transparent;
}

#login-box .widget-main
{
    /*background-color: rgba(0, 0, 0, 0.2);*/
    background-color: rgba(0, 0, 0, 0.62);
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #E9E9E9;
}

#login-box .widget-main label, #login-box .widget-main i
{
    color: #ffffff;
}

#login-box .widget-main input
{
    background: transparent;
    border: 0px !important;
    border-bottom: 1px solid #c5161d !important;
    color: #000000;
    border-radius: 0px;
    box-shadow: none;
    font-family: Helvetica;
    padding-left: 0px;
    /*border: 0px;
    background: rgba(0, 0, 0, 0.49);
    padding: 10px 15px;
    color: #ffffff !important;
    line-height: 20px;
    height: auto;*/
}

#login-box .widget-main .header
{
    border: none;
}

#login-box .widget-main input::-webkit-input-placeholder {
    color:    #cccccc;
}
#login-box .widget-main input:-moz-placeholder {
    color:    #cccccc;
}
#login-box .widget-main input::-moz-placeholder {
    color:    #cccccc;
}
#login-box .widget-main input:-ms-input-placeholder {
    color:    #cccccc;
}

@media only screen and (max-width: 1280px) {
    .blue-login {
        background: #DFE0E2 url('images/fashion_1400_700.jpg') repeat;    
    }
}

@media only screen and (min-width: 1300px) {
    .blue-login {
        background: #DFE0E2 url('images/fashion_2000_1000.jpg') repeat;    
    }
}


.login_left_panel {
    background: #ffffff;
    color: #000000;

    padding: 10px;
    margin-top: 50%;
    border: thin solid #1B6AAA;
    /*border-radius: 10px;*/
    /*-webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.55);
    -moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.55);
    box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.55);*/
}

.login_left_bg {
    background: #ffffff;
    height: 100%;
    -webkit-box-shadow: -5px 0px 23px 4px rgba(0,0,0,0.55);
    -moz-box-shadow: -5px 0px 23px 4px rgba(0,0,0,0.55);
    box-shadow: -5px 0px 23px 4px rgba(0,0,0,0.55);
}


.btn-pds
{
    background-color: #846263 !important;
    border-color: #846263;
    color: #ffffff;
}

/* Dashboard Tablet */
.announcement-heading {
    font-size: 20px;
    margin: 0;
}

.announcement-text {
    margin: 0;
    text-align: right;
}

.qtn_approval
{
    width: 100%;
}

.qtn_approval tr td
{
    font-size: 11px;
}

.pending_approved_qtn_list a {
    text-decoration: none;
}

.costing_pendingappr {
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.15);
    /*border-radius: 5px;*/
}


.costing_pendingappr {
    position: relative;
    max-width: 100%;

    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.costing_pendingappr:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.quotation_details_div
{
    padding: 10px;
    border: 1px solid #cccccc;
}

.history_quotation_tbl
{
    width: 100%;
}

.history_quotation_tbl tr td
{
    padding: 2px;
    vertical-align: top;
}

.header_bgcolor {
    background: #cccccc;
    border: 1px solid #000000;
    color: #000000;
    padding: 6px;
}

.tblsale_order
{
    border: 1px solid #000000;
    border-collapse: collapse;
}

.tblsale_order tr td
{
    border: 1px solid #000000;
    border-collapse: collapse;
    padding: 2px;
    vertical-align: top;
}

.techpack_sidemenu
{
    position: absolute;
    margin-left: -20px;
}

.techpack_sidemenu li a
{
    background: transparent !important;
    color: #c5161d !important;
}

.techpack_sidemenu > li:hover > a {
    background-color: #E1EAF1 !important;
    color: #000000 !important;
}

.techpack_cover_images {
    margin-left: 0px;
}

.techpack_cover_images li {
    list-style: none;
    float: left;
    text-align: center;
    /*padding-right: 10px;*/
    width: 140px;
    height: 140px;
    border: 1px solid rgb(226, 226, 226) !important;
}

.techpack_cover_images li.bigger {
    list-style: none;
    float: left;
    /*padding-right: 10px;*/
    width: 200px;
    height: 200px;
    border: 1px solid rgb(226, 226, 226) !important;    
}

.techpack_cover_images li img {
    /*width: 100%;*/
    /*height: 70px;*/
    height: 140px;

}

.techpack_sample_bigger_images li img {
    height: 200px !important;
}

.carousel-control.left {
    background: transparent !important;
}

.carousel-control.right {
    background: transparent !important;
}


.techpack_ul
{
    list-style: none;
    margin-left: 0px;
}

.techpack_ul li 
{
    font-size: 11px;
}


/* Techpack timeline */

#techpack_timeline {
    list-style: none;
    position: relative;
}
#techpack_timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 2px;
    background-color: #4997cd;
    left: 50%;
    margin-left: -1.5px;
}
#techpack_timeline .clearFix {
    clear: both;
    height: 0;
}
#techpack_timeline .timeline-ballon {
    padding-top: 10px;
}
#techpack_timeline .timeline-badge {
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 1.2em;
    text-align: center;
    position: absolute;
    top: 20px;
    left: 50%;
    margin-left: -25px;
    background-color: #4997cd;
    z-index: 100;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}
#techpack_timeline .timeline-badge span.timeline-balloon-date-day {
    font-size: 1.4em;
}
#techpack_timeline .timeline-badge span.timeline-balloon-date-month {
    font-size: .7em;
    position: relative;
    top: -10px;
}
#techpack_timeline .timeline-badge.timeline-filter-movement {
    background-color: #ffffff;
    font-size: 1.7em;
    height: 35px;
    margin-left: -18px;
    width: 35px;
    top: 40px;
}
#techpack_timeline .timeline-badge.timeline-filter-movement a span {
    color: #4997cd;
    font-size: 1.3em;
    top: -1px;
}
#techpack_timeline .timeline-badge.timeline-future-movement {
    background-color: #ffffff;
    height: 35px;
    width: 35px;
    font-size: 1.7em;
    top: -16px;
    margin-left: -18px;
}
#techpack_timeline .timeline-badge.timeline-future-movement a span {
    color: #4997cd;
    font-size: .9em;
    top: 2px;
    left: 1px;
}
#techpack_timeline .timeline-movement {
    border-bottom: dashed 1px #4997cd;
    position: relative;
}
#techpack_timeline .timeline-movement.timeline-movement-top {
    height: 60px;
}
#techpack_timeline .timeline-movement .timeline-item {
    padding: 20px 0;
}
#techpack_timeline .timeline-movement .timeline-item .timeline-panel {
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    background-color: #FFFFFF;
    color: #666;
    padding: 10px;
    position: relative;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
#techpack_timeline .timeline-movement .timeline-item .timeline-panel .timeline-panel-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#techpack_timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul {
    text-align: right;
}
#techpack_timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li {
    color: #666;
}
#techpack_timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li span.importo {
    color: #468c1f;
    font-size: 1.3em;
}
#techpack_timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul {
    text-align: left;
}
#techpack_timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul span.importo {
    color: #e2001a;
    font-size: 1.3em;
}



.infobox > .infobox-data > a > .infobox-data-number {
    display: block;
    font-size: 22px;
    margin: 2px 0 4px;
    position: relative;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
    color: #ffffff;
}

.infobox > .infobox-data > a
{
    text-decoration: none;
}

#businesshead .bg-primary
{
    color: #fff !important;
    background-color: #337ab7 !important;
}

#businesshead .bg-primary .infobox-content
{
    color: #fff !important;
}

.label-sampleassign, .label.label-sampleassign, .badge.badge-sampleassign, .badge-sampleassign, .infobox.infobox-sampleassign {
    background-color: rgba(255, 193, 7, 0.83);
}

.label-sampleack, .label.label-sampleack, .badge.badge-sampleack, .badge-sampleack, .infobox.infobox-sampleack {
    background-color: #ffb000;
}

.infobox.infobox-warning {
    background-color: #F89406;
}

.infobox.infobox-yellow {
    background-color: #FEE188;
}

.infobox {
    width: 200px !important;
}

.chosen_dropdown_btn {
    margin-bottom: 15px;
}

.fabricdocs_list
{
    list-style: none;
    margin-left: 0px;
}

.fabricdocs_list li 
{
    list-style: none;
    border: 2px solid rgba(158, 158, 158, 0.71);
    display: block;
    position: relative;
    overflow: hidden;
    margin: 2px;
    font-size: 10px;
    padding: 2px;
}

.comments_footer
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/*
 * Component: Direct Chat
 * ----------------------
 */
.direct-chat .modal-body {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: relative;
    overflow-x: hidden;
    padding: 0;
}
.direct-chat.chat-pane-open .direct-chat-contacts {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.direct-chat-messages {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    padding: 10px;

    overflow: auto;
}
.direct-chat-msg,
.direct-chat-text {
    display: block;
}
.direct-chat-msg {
    margin-bottom: 10px;
}
.direct-chat-msg:before,
.direct-chat-msg:after {
    content: " ";
    display: table;
}
.direct-chat-msg:after {
    clear: both;
}
.direct-chat-messages,
.direct-chat-contacts {
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    -moz-transition: -moz-transform 0.5s ease-in-out;
    -o-transition: -o-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}
.direct-chat-text {
    border-radius: 5px;
    position: relative;
    padding: 5px 10px;
    background: #d2d6de;
    border: 1px solid #d2d6de;
    margin: 5px 0 0 50px;
    color: #444444;
}
.direct-chat-text:after,
.direct-chat-text:before {
    position: absolute;
    right: 100%;
    top: 15px;
    border: solid transparent;
    border-right-color: #d2d6de;
    content: ' ';
    height: 0;
    width: 0;
    pointer-events: none;
}
.direct-chat-text:after {
    border-width: 5px;
    margin-top: -5px;
}
.direct-chat-text:before {
    border-width: 6px;
    margin-top: -6px;
}
.right .direct-chat-text {
    margin-right: 50px;
    margin-left: 0;
}
.right .direct-chat-text:after,
.right .direct-chat-text:before {
    right: auto;
    left: 100%;
    border-right-color: transparent;
    border-left-color: #d2d6de;
}
.direct-chat-img {
    border-radius: 50%;
    float: left;
    width: 40px;
    height: 40px;
}
.right .direct-chat-img {
    float: right;
}
.direct-chat-info {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
}
.direct-chat-name {
    font-weight: 600;
}
.direct-chat-timestamp {
    color: #999;
}
.direct-chat-contacts-open .direct-chat-contacts {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.direct-chat-contacts {
    -webkit-transform: translate(101%, 0);
    -ms-transform: translate(101%, 0);
    -o-transform: translate(101%, 0);
    transform: translate(101%, 0);
    position: absolute;
    top: 0;
    bottom: 0;
    height: 250px;
    width: 100%;
    background: #222d32;
    color: #fff;
    overflow: auto;
}
.contacts-list > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px;
    margin: 0;
}
.contacts-list > li:before,
.contacts-list > li:after {
    content: " ";
    display: table;
}
.contacts-list > li:after {
    clear: both;
}
.contacts-list > li:last-of-type {
    border-bottom: none;
}
.contacts-list-img {
    border-radius: 50%;
    width: 40px;
    float: left;
}
.contacts-list-info {
    margin-left: 45px;
    color: #fff;
}
.contacts-list-name,
.contacts-list-status {
    display: block;
}
.contacts-list-name {
    font-weight: 600;
}
.contacts-list-status {
    font-size: 12px;
}
.contacts-list-date {
    color: #aaa;
    font-weight: normal;
}
.contacts-list-msg {
    color: #999;
}
.direct-chat-danger .right > .direct-chat-text {
    background: #dd4b39;
    border-color: #dd4b39;
    color: #ffffff;
}
.direct-chat-danger .right > .direct-chat-text:after,
.direct-chat-danger .right > .direct-chat-text:before {
    border-left-color: #dd4b39;
}
.direct-chat-primary .right > .direct-chat-text {
    background: #3c8dbc;
    border-color: #3c8dbc;
    color: #ffffff;
}
.direct-chat-primary .right > .direct-chat-text:after,
.direct-chat-primary .right > .direct-chat-text:before {
    border-left-color: #3c8dbc;
}
.direct-chat-warning .right > .direct-chat-text {
    background: #f39c12;
    border-color: #f39c12;
    color: #ffffff;
}
.direct-chat-warning .right > .direct-chat-text:after,
.direct-chat-warning .right > .direct-chat-text:before {
    border-left-color: #f39c12;
}
.direct-chat-info .right > .direct-chat-text {
    background: #00c0ef;
    border-color: #00c0ef;
    color: #ffffff;
}
.direct-chat-info .right > .direct-chat-text:after,
.direct-chat-info .right > .direct-chat-text:before {
    border-left-color: #00c0ef;
}
.direct-chat-success .right > .direct-chat-text {
    background: #00a65a;
    border-color: #00a65a;
    color: #ffffff;
}
.direct-chat-success .right > .direct-chat-text:after,
.direct-chat-success .right > .direct-chat-text:before {
    border-left-color: #00a65a;
}

.dashboard_search_btn a
{
    border-radius: 0 !important;
    border-color: #ffffff !important;
    background-color: #ffffff !important;
    color: #337ab7 !important;
    margin-right: -1px;
    line-height: 18px;
    padding: 0px !important;
    padding-top: 8px !important;
}

.columnnames_list_ul
{
    list-style: none;
    padding-left: 10px;
}

.columnnames_list_ul li
{
    list-style: none;
    color: #545456;
    font-size: 12px;
}

.inspirational_sampelelist
{
    list-style: none;
}

.inspirational_sampelelist li 
{
    list-style: none;
    height: 100px;
    width: 100px;
    border: thin solid #000000;
    display: inline-block;
    margin-right: 4px;
}

.inspirational_sampelelist li img
{

    height: 90px;
    width: 90px;

}

.clipboard_image_dropbox {
    height: 200px;
    width: 100%;
    margin-top: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: 300ms all;
    position: relative;
    border: 1px solid #8486898c;
    overflow: auto;

}

.contain {
    background-size: cover;
    position: relative;
    z-index: 10;
    top: 0px;
    left: 0px;
}

.imagepaste_active {
    box-shadow: 0px 0px 10px 10px rgba(225, 225, 225, 0.62);
}

.movement_placeholder
{
    border: 1px solid #cccccc;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 15px;
    -webkit-box-shadow: -4px 4px 9px -2px rgba(0,0,0,0.58);
    -moz-box-shadow: -4px 4px 9px -2px rgba(0,0,0,0.58);
    box-shadow: -4px 4px 9px -2px rgba(0,0,0,0.58);
}



.notification_bar li
{
    padding: 0 8px;
    background-color: #FFF;
}

/*.notification_bar > li > a {
    border-top-color: #E4ECF3;
    padding: 10px 2px;
    margin: 0;
    border-top: 1px solid;
    font-size: 12px;
    line-height: 16px;
    color: #555 !important;
    background-color: transparent !important;
    white-space: normal;
    clear: both;
    font-weight: normal;
}*/

.notification_bar .msg-photo {
    max-width: 42px;
    float: left;
    margin-top: 2px;
}

.notification_bar .msg-body_no {
    display: block;
    line-height: 20px;
    white-space: normal;
    vertical-align: middle;
    /*margin-left: 50px;*/
}

.notification_bar .msg-title {
    display: inline-block;
    line-height: 14px;
}

.notification_bar .msg-time {
    display: block;
    font-size: 11px;
    color: #777;
}

.notification_bar {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: auto;
    display: block;
    float: none;
    border-width: 0;
    position: static;
    z-index: auto;
    border-color: #BCD4E5;
    border-radius: 0 !important;    
}

/*.notification_bar {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}*/

.notification_bar table
{
    margin-top: 8px;
    margin-bottom: 8px;
    border-bottom: thin solid #E4ECF3;
}


.floating-chat {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    transform: translateY(70px);
    transition: all 250ms ease-out;
    border-radius: 50%;
    opacity: 0;
    /*background: green;
    background: green;*/
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.floatgreen {
    background: green !important;
}

.floatred {
    background: red !important;
}

.floating-chat.enter:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    opacity: 1;
}
.floating-chat.enter {
    transform: translateY(0);
    opacity: 0.6;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 1px 2px rgba(0, 0, 0, 0.14);
}
.floating-chat.expand {
    width: 300px;
    max-height: 400px;
    height: 400px;
    border-radius: 5px;
    cursor: auto;
    opacity: 1;
    background: #ffffff !important;
}
.floating-chat :focus {
    outline: 0;
    box-shadow: 0 0 3pt 2pt rgba(14, 200, 121, 0.3);
}
.floating-chat button {
    background: transparent;
    border: 0;
    color: white;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
}
.floating-chat .chat {
    display: flex;
    flex-direction: column;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    transition: all 250ms ease-out;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.floating-chat .chat.enter {
    opacity: 1;
    border-radius: 0;
    /*margin: 10px;*/
    width: auto;
    height: auto;
}
.floating-chat .chat .chatheader {
    flex-shrink: 0;
    padding: 4px;
    display: flex;
    background: #333333;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.floating-chat .chat .chatheader .title {
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0 5px;
}
.floating-chat .chat .chatheader button {
    flex-shrink: 0;
}
.floating-chat .chat .chatmessages {
    padding: 10px;
    margin: 0;
    list-style: none;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-grow: 1;
    border-radius: 4px;
    background: transparent;
}
.floating-chat .chat .chatmessages::-webkit-scrollbar {
    width: 5px;
}
.floating-chat .chat .chatmessages::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(25, 147, 147, 0.1);
}
.floating-chat .chat .chatmessages::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(25, 147, 147, 0.2);
}
.floating-chat .chat .chatmessages li {
    position: relative;
    clear: both;
    display: inline-block;
    padding: 14px;
    margin: 0 0 20px 0;
    font: 12px/16px 'Noto Sans', sans-serif;
    border-radius: 10px;
    background-color: rgba(25, 119, 147, 0.2);
    word-wrap: break-word;
    max-width: 81%;
}
.floating-chat .chat .chatmessages li:before {
    position: absolute;
    top: 0;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    content: '';
    background-size: cover;
}
.floating-chat .chat .chatmessages li:after {
    position: absolute;
    top: 10px;
    content: '';
    width: 0;
    height: 0;
    border-top: 10px solid rgba(25, 147, 147, 0.2);
}
.floating-chat .chat .chatmessages li.other {
    /*animation: show-chat-odd 0.15s 1 ease-in;
    -moz-animation: show-chat-odd 0.15s 1 ease-in;
    -webkit-animation: show-chat-odd 0.15s 1 ease-in;*/
    float: right;
    /*margin-right: 45px;*/
    color: #000000;
}
.floating-chat .chat .chatmessages li.other:before {
    /*right: -45px;
    background-image: url(https://github.com/Thatkookooguy.png);*/
}
.floating-chat .chat .chatmessages li.other:after {
    border-right: 10px solid transparent;
    right: -10px;
}
.floating-chat .chat .chatmessages li.self {
    /*animation: show-chat-even 0.15s 1 ease-in;
    -moz-animation: show-chat-even 0.15s 1 ease-in;
    -webkit-animation: show-chat-even 0.15s 1 ease-in;*/
    float: left;
    /*margin-left: 45px;*/
    color: #000000;
}
.floating-chat .chat .chatmessages li.self:before {
    /*left: -45px;
    background-image: url(https://github.com/ortichon.png);*/
}
.floating-chat .chat .chatmessages li.self:after {
    border-left: 10px solid transparent;
    left: -10px;
}
.floating-chat .chat .chatfooter {
    flex-shrink: 0;
    display: flex;
    padding: 5px;
    max-height: 90px;
    background: #333333;
}
.floating-chat .chat .chatfooter .text-box {
    border-radius: 3px;
    background: rgba(25, 147, 147, 0.2);
    min-height: 100%;
    width: 100%;
    margin-right: 5px;
    color: #0EC879;
    overflow-y: auto;
    padding: 2px 5px;
}
.floating-chat .chat .chatfooter .text-box::-webkit-scrollbar {
    width: 5px;
}
.floating-chat .chat .chatfooter .text-box::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(25, 147, 147, 0.1);
}
.floating-chat .chat .chatfooter .text-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(25, 147, 147, 0.2);
}

@keyframes show-chat-even {
    0% {
        margin-left: -480px;
    }
    100% {
        margin-left: 0;
    }
}
@-moz-keyframes show-chat-even {
    0% {
        margin-left: -480px;
    }
    100% {
        margin-left: 0;
    }
}
@-webkit-keyframes show-chat-even {
    0% {
        margin-left: -480px;
    }
    100% {
        margin-left: 0;
    }
}
@keyframes show-chat-odd {
    0% {
        margin-right: -480px;
    }
    100% {
        margin-right: 0;
    }
}
@-moz-keyframes show-chat-odd {
    0% {
        margin-right: -480px;
    }
    100% {
        margin-right: 0;
    }
}
@-webkit-keyframes show-chat-odd {
    0% {
        margin-right: -480px;
    }
    100% {
        margin-right: 0;
    }
}


.new-info-box-3 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    height: 70px;
    display: flex;
    cursor: default;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.new-info-box-3 .icon {
    position: absolute;
    right: 10px;
    bottom: 2px;
    text-align: center;
}

.new-info-box-3 .content {
    display: inline-block;
    padding: 7px 16px;
}

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

.new-info-box-3 .icon i {
    color: rgba(0, 0, 0, 0.15);
    font-size: 40px;
}

.new-info-box-3 .content .text {
    font-size: 13px;
    
    color: #ffffff;
}

.new-info-box-3 .content .number {
    font-weight: normal;
    font-size: 22px;
    margin-top: -4px;
    color: #ffffff;
}

.new-info-box-3 .content a {
    text-decoration: none;
}

.bg-indigo {
    background-color: #3F51B5 !important;
    color: #fff;
}

.bg-pink {
    background-color: #E91E63 !important;
    color: #fff;
}

.bg-light-blue {
    background-color: #03A9F4 !important;
    color: #fff;
}

.bg-green {
    background-color: #4CAF50 !important;
    color: #fff;
}

.bg-light-green {
    background-color: #8BC34A !important;
    color: #fff;
}

.bg-yellow {
    background-color: #ffe821 !important;
    color: #fff;
}

.bg-amber {
    background-color: #FFC107 !important;
    color: #fff;
}

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

.bg-deep-orange {
    background-color: #FF5722 !important;
    color: #fff;
}

.bg-lime {
    background-color: #CDDC39 !important;
    color: #fff;
}

.bg-blue {
    background-color: #2196F3 !important;
    color: #fff;
}

.bg-purple {
    background-color: #9C27B0 !important;
    color: #fff;
}

.bg-cyan {
    background-color: #00BCD4 !important;
    color: #fff;
}

.bg-teal {
    background-color: #009688 !important;
    color: #fff;
}

.bg-deep-purple {
    background-color: #673AB7 !important;
    color: #fff;
}

.bg-grey {
    background-color: #9E9E9E !important;
    color: #fff;
}

.bg-blue-grey {
    background-color: #607D8B !important;
    color: #fff;
}

.bg-black {
    background-color: #000000 !important;
    color: #fff;
}

.zoomContainer {
    z-index: 1000001 !important;
}


.image_row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.image_row_column {
    -ms-flex: 23%; /* IE10 */
    flex: 23%;
    max-width: 23%;
    padding:4px;
    border: 1px solid #707070;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    height: 100px;
    text-align: center;
}

.image_row_column img {
    margin-top: 4px;
    /*width: 90%;*/
    max-width: 90%;
    max-height: 90%;
}

.image_thumbnail_display {
    max-width: 100px;
    padding:4px;
    border: 1px solid #707070;
    border-radius: 4px;
    margin-right: 5px;
    margin-bottom: 5px;
    height: 100px;
}

.image_thumbnail_display img {
    margin-top: 9px;
    height: 80%;
    width: 100%;
    
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .image_row_column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .image_row_column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

.highcharts-container {
    margin: 0 auto;
}

/* Support Post */

.post
{
	margin: 0 0 20px;
}

.post .title
{
	font-size: 1.5em;
	border-bottom: 1px solid #C9E0ED;
}

.post .title a
{
	color: #555;
	text-decoration: none;
}

.post .author
{
	color: #888;
	margin: 0 0 5px;
}

.post .nav
{
	-moz-border-radius:7px;
	padding: 5px;
	background: #EFFDFF;
}

/*.techpack_comment_clipboard_dropbox {
    height: 400px;
    width: 100%;
    margin-top: 1em;
    border-radius: 4px;
    cursor: pointer;
    transition: 300ms all;
    position: relative;
    border: 1px dashed #AAA;
    overflow: auto;

}*/


a.fa-comment {
  position: relative;
  font-size: 2em;
  color: grey;
  cursor: pointer;
}
span.fa-circle {
    position: absolute;
    font-size: 16px;
    color: #4B95E9;
    margin-left: -10px;
    margin-top: -6px;
}
span.num {
    position: absolute;
    font-size: 10px;
    color: #fff;    
    margin-top: -7px;
    margin-left: -6px;
}

.sizecolor tr td{
    background-color: #7B7F93 !important;
    font-size: 14px;
    color: #FFFFFF;
    border: 1px solid #707070 !important;
    padding-bottom: 0px !important;
   
}
.sizecolor tr td .form-group{
     margin-bottom: 0px !important;  
    
}
.sizecolor tr td .form-control{
 color: #4B5A6C !important;
}

div.scroll
{  
overflow-x:scroll;
white-space: nowrap;
}

.customize_image
{
    border:1px solid #707070;
    border-radius:7px;
    text-align:center;
    padding:5px;
    float:left;
    margin:0px 5px;
    list-style-type: none
}

/* The popup - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 14px;
  z-index: 9;
  width: 400px;
  margin-bottom: 110px;
  height: 160px;
}

/* Add styles to the form container */
.form-container {
  max-width: 400px;
  padding: 10px;
  border: 1px solid #7B7F93;
  border-radius: 7px;
  background-color: white;
  height: 184px;
}

.down {
  width: 0; 
  height: 0; 
  display: inline-block;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  margin-right: 480px;
  border-top: 20px solid #7B7F93;
}