body {
    min-height: 100vh;
    position: relative;
    margin: 0;
}

/* ajax loader */
.ajax-loader {
  display   : none;
  background: rgba(255, 255, 255, 0.698) none repeat scroll 0 0;
  height    : 100%;
  margin    : auto;
  position  : fixed;
  right     : 0;
  top       : 0;
  width     : 100%;
  z-index   : 100000000000000000;
}
.ajax-loader img {
  position    : absolute;
  z-index     : 100000000000000000;
  top         : 0;
  bottom      : 0;
  right       : 0;
  left        : 0;
  margin      : auto;
}
/* ./ajax loader */

.custom-hide{
    display : none;
}

.top-actions {
    margin-bottom: 8px;
}

.top-actions .dropdown-menu {
    right: 0;
    left: auto;
}

.input.error {
    border: solid 1px #ffafaf;
    margin: 10px 0px;
}

.input .error-message {
    display: block;
    background-color: #ffafaf;
    padding: 2px 6px;
}

.message {
    padding: 5px;
    color: #fff;
    margin-bottom: 20px;
}

.message.error {
    background-color: #dd4b39;
}

.message.success {
    background-color: #00a65a;
}

/* purchase-orders status confirm css*/
.inline-form form {
    display: inline;
}

.inline-form button,
table.inline-form a {
    margin-right: 4px;
}

.pre-wrap pre {
    white-space: pre-wrap;
    word-break: normal;
}

.ticketBox {
    cursor: pointer;
}

form table td {
    vertical-align: middle !important;
}

.mb-1 {
    margin-bottom: 10px !important;
}

.mt-1 {
    margin-top: 10px !important;
}

.table>thead>tr>th {
    vertical-align: middle;
}

/****
*For vendor Email Flag
******/

.switch input {
    display: none;
}

.switch {
    display: inline-block;
    width: 50px;
    height: 18px;
    /*margin: 8px;*/
    transform: translateY(50%);
    position: relative;
}

.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px #777, 0 0 4px #777;
    cursor: pointer;
    border: 4px solid transparent;
    overflow: hidden;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: #777;
    border-radius: 30px;
    transform: translateX(-30px);
    transition: .4s;
}

input:checked+.slider:before {
    transform: translateX(30px);
    background: limeGreen;
}

input:checked+.slider {
    box-shadow: 0 0 0 2px limeGreen, 0 0 2px limeGreen;
}

/*****/


/*to move profile menu to the left*/
.main-header .navbar-custom-menu,
.main-header .navbar-right {
    float: left;
}

.navbar-custom-menu>.navbar-nav>li>.dropdown-menu {
    right: auto;
    left: 0;
}

.navbar-custom-menu {
    background: black;
}

/*to move logo to the right*/
.main-header .container-fluid>.navbar-header {
    float: right;
}

.main-header .container-fluid {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/*spacing between two logos*/
.main-header .navbar-brand {
    margin-left: 2px !important;
}

.main-header .navbar-brand img {
    height: 100%;
}

.main-header .navbar-toggle {
    float: left;
}

/*left menu style for mobile devices*/
@media(max-width: 767px) {
    .navbar-collapse.collapse {
        clear: left;
        padding-left: 30px;
    }
}


/*For select2 dropdown*/

.filter .select2 {
    width: 100% !important;
}

/* Select 2 width for forms in tickets*/
.select2 {
    width: 100% !important;
}

.select2.w-200{
  width: 200px !important;
}

.select2-container .select2-selection--multiple{
    min-height: 28px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
    margin-top: 1px;
}

.modal-header .close {
    color: white !important;
    opacity: 1;
}


.modal-content {
    /*min-height: 200vh;*/
    position: relative;
    margin: 0;
}

/*FOR table row highligh in tickets*/

.tickets-line-items-selected {
    background-color: #bebebe;
    ;
}

.popreview th,.popreview td{
        border: 1px solid black;

}

.popreview >thead>tr>th{
        border-bottom: 1px solid black !important;
        border-top: none;

}

/* added on 22-03-2019*/
.ticket-reply-col .direct-chat-msg:not(:first-child){
  display: none;
}

.ticket-reply-col:hover  .direct-chat-msg{
  display: block;
}

.ticket-view ul.mailbox-attachments{
  display: flex;
  overflow-x: scroll;
}

.ticket-view ul.mailbox-attachments li{
  height: 100%;
}

.direct-chat-text{
  padding:0 10px;
}
.direct-chat-text:after, .direct-chat-text:before{
  top:10px;
}
.ticket-reply-col{
  padding: 5px;
}
/* end of added on 22-03-2019*/

/******/
/* Display Block class for filters  */

.display-block {
    display: block;
}

.display-none {
    display: none;
}

.display-inline {
    display: inline;
}

/* Set width 150 px*/

.w-80{
    width: 80px;
}
.w-150{
    width: 150px;
}

.w-20p{
    width: 20%;
}

.w-65p{
    width: 65%;
}

.w-75p{
    width: 75%;
}

.max-width-200{
  max-width: 200px;
}

/* To expand table cell content on hover */

/*.expand-cell {
    padding-right: 5px;
  max-width: 70px;
  white-space : nowrap;
  overflow : hidden;
}

.expand-maximum-on-hover:hover {
    /*max-width: 120px; */
 /* max-width : initial; */
 /* white-space:normal !important; word-wrap: break-word; word-break: normal;
}

tr.expand-maximum-on-hover:hover > td {
  white-space:normal !important; word-wrap: break-word; word-break: normal;
}
*/


td {
    padding-right: 5px;
  max-width: 70px;
  white-space : nowrap;
  overflow : hidden;
}

tr:hover {
  white-space:normal !important; word-wrap: break-word; word-break: normal;
}

tr:hover > td {
  white-space:normal !important; word-wrap: break-word; word-break: normal;
}

th{
    width: 7%;
}

td .radio, td .checkbox{
    margin:0;
}

td .btn{
    line-height: 1;
}


/** Padding Right  **/


.padding-right-7{
    padding-right: 100px
}

.padding-right-100{
    padding-right: 100px
}

.padding-6-25{
    padding: 6px 25px;
}

/***  Text decoration class ***/
.color-black{
    color:black;
}

.text-underline{
    text-decoration:underline
}

.vertical-align-top{
    vertical-align: top !important;
}

.vertical-align-bottom{
  vertical-align: bottom !important;
}


/** Purchase Order Print Preview **/

.border-height-180{
    border: 1px solid black;height:180px;
}


/*** Forecast report Col Group Highlight Table columns **/

colgroup col.success {
  background-color: #c9ebbb;
}
colgroup col.error{
  background-color: #f2dede;
}
colgroup col.warning {
  background-color: #f7f0c7;
}
colgroup col.info {
  background-color: #bddceb;
}

/**
Table alternate column highlight
***/

/*  Define the background color for all the ODD table columns  */
    .table tr td:nth-child(odd){
        /*background: #eeeeef;*/
        /*background: #b8d1f3;*/
    }
    /*  Define the background color for all the EVEN table columns  */
    .table tr td:nth-child(even){

    }

    /*.table tbody{
        border: 1px solid #dfdede;
    }

    .table td,.table th ,.table tbody{
        border-right:1px solid #dfdede;
    }*/

    .table>thead>tr>th, .table>tbody>tr>th,
     .table>tfoot>tr>th, .table>thead>tr>td,
      .table>tbody>tr>td, .table>tfoot>tr>td {
        border: 1px solid #ededed;
    }


/*
 By: angler1013
 Date: 13-02-2019
 Reason:
    1. removed the page top spacing after the menu
    2. used flex to align the content as per the discussion with the team
    3. auto space occupy as per title content
    4. breakpoint need to change as per the layout for the safe point we made the point as 768px

*/
.common-header-content.content{/* [1.] */
    padding-top: 0;
}
.common-header-content .common-header-content-wrapper{ /* [2.] */
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 5px 0px;
}
.common-header-content .common-header-content-wrapper .content-header{/* [3.] */
    flex: 1 0 auto;
    flex-direction: column;
    display: flex;
    justify-content: flex-start;
}
.common-header-content .common-header-content-wrapper .content-header .page-section-title{
    margin-top: 0;
    margin-bottom: 0;
}
.common-header-content .common-header-content-wrapper .content-header > .breadcrumb{
    position: static;
    float: none;
    padding: 0;
    right: initial;
    background: none;
}

@media (max-width: 768px){/* [4.] */
    .common-header-content .common-header-content-wrapper{
        flex-direction: column;
        align-items: flex-start;
    }
}


/*To fix button overlap in mobile view*/
.common-header-content-action-btn .btn{
    margin-top: 3px !important;
}

/*Status info dropdown style*/
.dropdown-menu.status-info{
    background-color: rgba(0,0,0,0.6);
    padding-left: 10px;
}


/*LC required*/
.required > label:after {
  color: red;
  content: '*';
}

.asterisk:after {
  color: red;
  content: '*';
}

/*
 By: angler1013
 Date: 20-02-2019
 Reason:
    1. V-Guard logo is displayed as design issue in mobile view
    2. Material Price Change Request status legend label alignment
    3. Set 100px height for the empty table
    4. Maintenance card for temp. period
    5. Button align on letter of credits page at center and updated active color for the button 

*/
.main-header .navbar.navbar-static-top.bg-black .container-fluid > .navbar-custom-menu + .navbar-header{/* [1.] */
	margin-left: 0;
	margin-right: 0;
}
@media (max-width: 768px){/* [2.] */
    .status-info-legend label{
        display: block;
    }
    .status-info-legend{
        right: 0;
        left: initial;
    }
}

table.table tbody.empty-tbody{/* [3.] */
    display: block;
    min-height: 100px;
}
/*
 [4.] Under maintenance baner starts 
.um-card {
  cursor: pointer;
  width: 260px;
  margin: 0 auto;
  z-index: 15000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 20px;
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: clapper;
          animation-name: clapper;
}
@media (max-width: 768px){
    .um-card {
        left: -90px;
    }
}
.um-card:hover,
.um-card:focus{
    animation-name: none;
}
.um-card .wrapper-card {
  margin: 0 auto;
  width: 250px;
}
.um-card .wrapper-card:after {
  content: "";
  display: table;
  clear: both;
}
.um-card .picture {
  width: 300px;
  height: 300px;
  position: relative;
  float: left;
  margin: 0 20px;
}
.um-card .hook {
  width: 4px;
  height: 4px;
  background-color: #5c5c5d;
  margin: 0 auto 32px auto;
  border-radius: 50%;
  box-shadow: 0 1px 0 1px #a49c7c;
}
.um-card .hook:before {
  content: '';
  width: 40px;
  height: 40px;
  border: 2px solid #a49c7c;
  position: absolute;
  left: calc(50% - 20px);
  top: 13px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  z-index: -1;
}
.um-card .frame {
  border-top: 6px solid #b89675;
  border-right: 6px solid #7b654f;
  border-bottom: 6px solid #7b654f;
  border-left: 6px solid #a67c52;
  box-shadow: 4px 4px 0 0 rgba(189, 166, 72, 0.6);
  z-index: 1;
  background: #fff;
}
.um-card .inside {
  padding: 10px;
  background: linear-gradient(149deg, #d3d4d5 0%, #d3d4d5 50%, #cccccc 51%, #cccccc 100%);
  border: 10px solid #fff;
  box-shadow: 1px 1px 1px 1px rgba(189, 193, 194, 0.3) inset;
}
.um-card .close-button {
    font-size: 20px;
    position: absolute;
    top: 58px;
    right: -66px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

@-webkit-keyframes clapper {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  15% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  65% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}

@keyframes clapper {
  0% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  15% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  50% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  65% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  100% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
}*/
/* 
  [5.]*/
.letterOfCredits.form ul.nav.nav-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.letterOfCredits.form .nav>li>a:hover,
.letterOfCredits.form .nav>li>a:active,
.letterOfCredits.form .nav>li>a:focus,
.letterOfCredits.form .nav-tabs>li.active>a,
.letterOfCredits.form .nav-tabs>li.active>a:hover,
.letterOfCredits.form .nav-tabs>li.active>a:focus{
  background-color: #3c8dbc;
  border-color: #367fa9;
  color: #fff;
}


/*PO Print preview*/
.po-terms-conditions *{
  font-size: 11px !important;
  line-height: 11px !important;
  padding: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

.popreview.table *{
  font-size: 11px  !important;
  line-height: 11px !important;
}

.popreview.table tr {
  white-space:normal !important;
}

.popreview.table tr > td {
  white-space:normal !important;
}

.popreview.table th{
    width: auto;
}

.popreview.table td{
  padding: 2px;
}

@media all {
.page-break { display: none; }
}

@media print {
.page-break { display: block; page-break-before: always; page-break-after: avoid; }
}

/*margins*/
.margin-l-10{
  margin-left: 10px; 
}



/*
 By: angler1013
 Date: 23-03-2019
 Reason:
    1. Ticket page add replay action button padding was updated
*/
.logBtn-custom{
  padding-top: 6px;
  padding-bottom: 6px;
}
.direct-chat-marginRight\:2px{
  margin-right: 4px;
  overflow: hidden;
}
.img-push-margin\:4px,
.direct-chat-info-margin\:4px{
  margin-left: 4px;
  margin-right: 4px;
}

.multicheckbox{
  max-height: 200px;
  overflow: scroll;
}

.navbar-nav>.user-menu>.dropdown-menu>.user-footer{
background-color:#444444;
}