:root {
  --left-image-url: url('/content/dam/public/mastercardcom/chat-application/images/left-image.png');
}

body, html {
  overflow-y: auto !important;
}

header.dxp-header-rich {
  z-index: 99 !important;
}

.lc-container .dot {
  height: 30px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 15px;
  padding: 3px;
}

.lc-container .dxp-theme-white #liveChatIcon {
  box-shadow: 0 0 0.4375rem 0 #FF691F;
}

.lc-container .ChatLink .dxp-theme-white{
}

.lc-container .logoutButtons{
  display: flex;
  justify-content: space-evenly;
  margin-top: 10px;
  align-items: flex-start;
  height: 0px;
}

.lc-container .logoutWarning{
  display: flex;
  font-size: 15px;
  padding: 15px 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog {
  padding: 0px;
}
.lc-container .user{
  background-color: #cf4500;
  color: white;
  border-color: white;
  border: solid;
  width: 30px;
}
.lc-container .agent{
  background-color: white;
  color: black;
  margin: 0px 5px 0px 0px;
}
.lc-container .right {
  right: 50px;
  padding: 15px;
  text-align: right;
  margin: 10px;
}
.lc-container .left {
  right: 50px;
  padding: 10px;
  text-align: left;
}
.lc-container .messageUser{
  padding: 0px 5px 5px 5px;
  color: #323231;
  background: white;
  border-radius: 10px;
  border-bottom-right-radius: 0px;
  overflow-wrap: break-word;
}
/*.lc-container .messageAgent{
  padding: 10px 10px 10px 10px;
  background: #323231;
  color: white;
  border-radius: 10px;
  border-bottom-right-radius: 0px;
  border-color: black;
  border: solid;
  overflow-wrap: break-word;
}*/
.lc-container .messageUser  a{
  color: rgb(136, 27, 27) !important ;
}

.lc-container .chatBottom{
  overflow-y: auto ;
  display: flex;
  flex-direction: column-reverse;
  height: 245px;
}

.lc-container .chatwindow{
  flex: 1 1 0%;
}

.lc-container .chatwindowparent {
  overflow-y: auto;
  max-height: 70vh;
  visibility: visible;
  background-color: white;
  /*box-shadow: 0 0 0.625rem 0 rgba(20,20,19,.6);*/
}

.lc-container .chatwindowparenthide {
  position: absolute;
  left: -999em;
  visibility: hidden;
  background : transparent;
  box-shadow: none;
}

.lc-container .minimizedHeader{
  text-align: left;
  background: #cf4500;
  color: white;
  font-size: 13px;
  padding: 7px 6px 7px 6px;
  width: 100%;
  border-radius: 5px 5px 5px 5px;
  align-items: center;
}

.lc-container .chatHeader{
  display: flex;
  background: #cf4500;
  color: white;
  font-size: 20px;
  padding: 7px 13px;
  width: 100%;
  border-radius: 5px 5px 0 0;
  align-items: center;
  justify-content: space-between;
}

.lc-container #externalLink-btn{
  text-align: right;
  font-size: 12px;
  padding-left: 75px;
}

.lc-container #minimize-btn{
  text-align: right;
  font-size: 12px;
  padding-left: 20px;
}

.lc-container #closeChat{
  text-align: right;
  font-size: 12px;
  padding-left: 20px;
}



.lc-container div.dxp.dxp-modal .dxp-comp-modal .dxp-modal-dialog {
  padding: 0px !important;
}

.lc-container .dxp-modal-dialog {
  height: auto;
  margin: auto auto !important;
  overflow-y: hidden !important;
  background : transparent;
  box-shadow: none;
}

.lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-body .modal-title {
  margin-bottom: 0px;
}

.lc-container .modal-title {
  display: contents;
}

.lc-container .inputWidth {
  width: 175px;
  float: left;
}

.lc-container .registrationBox {
  margin: 50px 0px;
  padding: 0px 50px;
}

.lc-container .wallpaperBox {
  background-image: var(--left-image-url);
  color: white;
}

.lc-container .floatRight {
  float: right;;
}

.lc-container .checkBoxText {
  position: absolute;
  font-size: 11px;
  padding: 0px 9px;
}
.lc-container .dialog-title{
  margin-bottom: 0px !important;
}

.lc-container .dialog-slogan {
  font-size: 14px !important;
}

.lc-container .spaceOutside {
  margin: 50px 35px
}

.lc-container .marginTop {
  margin-top: 20px !important;
}

.lc-container .bottomSection {
  position: absolute;
  bottom: 55px;
}

.lc-container .bottomSection p {
  padding-bottom: 15px;
}

.lc-container .chattext {
  color: #000 !important;
  background-color: #e8e4e4 !important;
  border: unset !important;
  height: 3rem !important;
}

.lc-container .marginTopOnChatSend {
  position: relative;
  bottom: 36px;
  right: 6px;
}

.lc-container .chatCheckBox {
  text-align: center;
  margin-left: 0.625rem;
}

.lc-container .spaceRight{
  padding-left: 10px;
}

.lc-container .box-margin {
  margin-right: 0px;
  margin-left: -8px;
  overflow: auto;
  max-height:100vh;
}

.lc-container .position-relative {
  position: relative;
}
.lc-container .error-icon-position {
  position: absolute;
  top: 12px;
  right: 0px;
}

.lc-container .input-container input::placeholder {
  font-size: 12px;
}

.lc-container .checkbox-font{
  font-size: 10px !important;
}

.lc-container .IssuerLink {
  border: 2px solid white;
  padding: 10px 30px;
  border-radius: 20px;
}


.lc-container .IssuerLink .dxp.dxp-theme-white a, .dxp .dxp-theme-white a1 {
  color: white;
}

.lc-container .btn-close{
  z-index: 1111;
  color: #cf4500;
}

.lc-container .dxp.dxp-theme-white.dxp-checkbox input[type=checkbox]+label, .dxp .chatPopupDiv .dxp-theme-white.dxp-checkbox input[type=checkbox]+label {
  font-size: 12px !important;
  font-weight: bold;
  top:10px;
}

.lc-container .dxp-checkbox input[type=checkbox]+label span.input-check {
  top: unset;
}

.dxp .dxp-theme-white.dxp-checkbox-group input[type=checkbox]+label, .dxp .chatPopupDiv .dxp-theme-white.dxp-checkbox input[type=checkbox]+label {
  line-height: unset;
}

.dxp .dxp-theme-white.dxp-checkbox-group input[type=checkbox]+label, .dxp .chatPopupDiv .newChatPopupDiv .dxp-theme-white.dxp-checkbox input[type=checkbox]+label {
  line-height: unset;
  font-size: 12px !important;
  font-weight: bold;
  top: 10px;
}

.lc-container div.dxp.dxp-checkbox {
  position: relative;
  top: -15px;
}

.dxp .dxp-theme-white.dxp-modal.show{
  width: 0;
  height: 0;
  bottom: 0;
  position: absolute;
}

.lc-container .dxp-modal.show .dxp-comp-modal.dxp-sidebar-container{
  width: 0;
  height: 0;
  bottom: 0;
}

.lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper.dxp-sidebar-wrapper.right{
  position: fixed;
  bottom: 0;
  right: 0;
}

.lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog.dxp-sidebar-wrapper.right {
  left: auto;
  border-radius: 5px;
  position: absolute;
  top: 200px;
  right: 30px;
  width: 22%;
  outline: none;
  padding: 0px !important;
  transform: none;
  min-width: 350px;
}

.lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog.dxp-sidebar-wrapper.right .btn-close {
  display: none;
}

.lc-container div.dxp.dxp-modal .dxp-comp-modal .dxp-modal-dialog.dxp-sidebar-wrapper.right .dxp-modal-body .modal-title {
  text-align: left !important;
}

.lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-body .modal-title-text {
  background: #cf4500;
  color: white;
  font-size: 20px;
  padding: 5px 15px;
  width: 100%;
  text-align: left !important;
  display : none;
}
.lc-container .chattext {
  background-color: white !important;
  outline-offset: 0px;
  outline: unset;
  padding-right: 27px;
  padding-left: 7px;
}

.lc-container .borderTop {
  border-top: 1px solid #beb7b7;
}
.lc-container .panel1 {
  z-index: 1;
}

.lc-container .dxp .dxp-theme-white.dxp-form input {
  color: #000;
  background-color: #fff;
  border: 1px solid #96918b;
  display: block;
  width: 100%;
  height: 2.5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  line-height: 1.25rem;
  background-image: none;
  background-clip: padding-box;
  border-radius: .25rem;
  appearance: none;
}

.lc-container .dxp .dxp-theme-white input {
  width: 100%;
  padding-left: 10px;
}

.dxp input.form-control-md, input {
  font-size: 16px !important;
}

@media only screen and (max-width: 380px) {

  .lc-container .chatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper{
    height: 65vh !important;
    width: 95% !important;
    margin: 10px !important;
    padding: 15px !important;
  }

  .lc-container .newChatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    height: 65vh !important;
    width: 22rem !important;
  }

  /*added for new chat window drag issue*/
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper.dxp-sidebar-wrapper .dxp-modal-dialog {
    height: inherit !important;
    position: unset !important;
    width: unset !important;
  }
}

@media only screen and (min-width: 381px)  and (max-width: 400px){

  .lc-container .chatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper{
    height: 60vh !important;
    width: 95% !important;
    margin: 10px !important;
    padding: 15px !important;
  }

  .lc-container .newChatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    height: 60vh !important;
  }

  /*added for new chat window drag issue*/
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper.dxp-sidebar-wrapper .dxp-modal-dialog {
    height: inherit !important;
    position: unset !important;
    width: unset !important;
  }
}

@media only screen and (min-width: 401px)  and (max-width: 480px){

  .lc-container .chatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper{
    height: 55vh !important;
    width: 95% !important;
    margin: 10px !important;
    padding: 15px !important;
  }

  .lc-container .newChatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    height: 55vh !important;
    width: 26rem !important;
  }

  /*added for new chat window drag issue*/
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper.dxp-sidebar-wrapper .dxp-modal-dialog {
    height: inherit !important;
    position: unset !important;
    width: unset !important;
  }
}

@media (max-width: 450px) {

  .lc-container .newChatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    top: unset !important;
    left: unset !important;
    padding: 25px !important;
  }

  .lc-container .closeModalDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper{
    height: 30vh !important;
    top: 50%;
  }

  /*added for new chat window drag issue*/
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper.dxp-sidebar-wrapper .dxp-modal-dialog {
    height: inherit !important;
    position: unset !important;
    width: unset !important;
  }
}

@media (max-width: 575.98px) {
  .lc-container .closeModalDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper{
    overflow-y: hidden;
    position: sticky;
    height: 50vh;
    margin: 15px;
    border: 1px solid #cf4500;
  }

  .lc-container .closeModalDiv div.dxp.dxp-modal .dxp-comp-modal .dxp-modal-dialog {
    overflow-y: auto;
  }

  .dxp .dxp-theme-white.dxp-modal.show{
    width: initial;
    height: initial;
    bottom: initial;
    position: fixed;
    background: transparent;
  }

  .lc-container .chatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper{
    width: 22rem;
    height: 55vh;
    margin: 0;
    padding: 0;
  }

  .lc-container .newChatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    width: 24rem;
    top: 50px;
    left: 50px;
    padding: 10px;
  }

  /*added for new chat window drag issue*/
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper.dxp-sidebar-wrapper .dxp-modal-dialog {
    height: auto;
    position: fixed;
    bottom: 0;
    width: inherit;
  }
}

.lc-container .dxp.dxp-theme-white .icon-sprite, .dxp .dxp-theme-white .icon-sprite {
  display: none;
}

@media (max-width: 767.98px) {
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog.dxp-sidebar-wrapper.right {
    top: unset;
    bottom: 0px;
  }

  .lc-container .chatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper{
    width: 22rem;
    height: 55vh;
    margin: 0;
    padding: 0;
  }

  .lc-container .newChatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    width: 24rem;
    margin: 0;
    padding: 0;
    height: 70vh;
  }
}

@media (max-width: 1024px) {
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog.dxp-sidebar-wrapper.right {
    width: 82%;
    top: unset;
    bottom: 0px;
  }
  .lc-container .dxp h2 {
    font-size: 32px;
  }
  .lc-container .floatRight {
    float: unset;
  }
  .lc-container .inputWidth {
    width: unset;
    float: unset;
  }
}
@media (min-width: 768px){
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper .dxp-modal-dialog {
    padding: 0 !important;
  }}

@media (min-width: 768px){
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    position: relative;
    z-index: 999;
    top: unset;
  }}

@media (min-width: 768px){
  .lc-container .chatPopupDiv .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper {
    position: relative;
    z-index: 999;
    margin-top: 327px;
    right: auto;
    width: 22rem;
  }
}

.lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-footer {
  margin-bottom: 1.5rem !important;
}

@media (min-width: 768px){
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog.dxp-sidebar-wrapper {
    height: 65vh;
  }
}
@media (min-width: 768px){
  .lc-container .dxp-modal.show .dxp-comp-modal .dxp-modal-dialog-wrapper.dxp-sidebar-wrapper .dxp-modal-dialog {
    height: auto;
    /*background-color: transparent;*/
    /*box-shadow: none;*/
  }
}

.lc-container #agentUserChat:focus
{
  border: 2px solid #CF4500;
  outline-offset: 1px;
}

.lc-container .type-message-label {
  float: left;
  padding-left: 9px;
  font-size: 11px;
  padding-top: 12px;
}

.lc-container #findIssuer{
  color: #FF9966;
  border-color: #FF9966;
}

.lc-container input#message::placeholder {
  color: #6B6B6B;
}

.lc-container #findIssuer:hover{
  top: -2px;
  box-shadow: 0 0.125rem 0.25rem 0 rgb(184 125 96 / 74%);
  color: #FF9966;
  border-color: #FF9966;
}

/* autoGrow Height */
.dxp .dxp-theme-white textarea.form-control {
    height: 45px;
    box-shadow: none;
    padding: 4px;
    border-radius: 4px;
}

.dxp textarea.form-control {
    border-radius: .25rem;
    height: 45px;
    width: 100%;
    color: #000;
    background-color: #fff;
    border: 1px solid #96918b;
    resize: none;
    padding: 4px;
}

.dxp .dxp-theme-white textarea.form-control:focus {
    box-shadow: none;
}

.dxp textarea.form-control:focus {
    box-shadow: none;
}

.lc-container .input-container textarea::placeholder {
    font-size: 12px;
}

.dxp-textarea .textarea-wrapper {
    position: relative;
    padding-left: 7px;
    padding-right: 26px;
}

.dxp .dxp-theme-white label {
    font-size:  0.8rem;
}

.dxp label {
    margin-bottom: unset !important;
}

.dxp-textarea label {
    margin-bottom: unset !important;
}

.lc-container .error-message {
    color: red;
    font-size: small;
    clear: both;
    float: left;
    text-align-last: center;
    text-align: center;
    margin: 4px;
}