:root {
  --mnc-primary-color: #38A0FA;
  --mnc-primary-hover-color: #004D64;
  --mnc-on-primary-color: #FFFFFF;
  --mnc-primary-container-color: #BEE9FF;
  --mnc-primary-container-hover-color: #68D3FF;
  --mnc-on-primary-container-color: #001F2A;
  --mnc-primary-container-low-color: #E0F4FF;
  --mnc-secondary-color: #5E5E5D;
  --mnc-secondary-hover-color: #474746;
  --mnc-on-secondary-color: #FFFFFF;
  --mnc-secondary-container-color: #E4E2E0;
  --mnc-secondary-container-hover-color: #C8C6C5;
  --mnc-on-secondary-container-color: #1B1C1B;
  --mnc-tertiary-color: #5D5B7D;
  --mnc-tertiary-hover-color: #454364;
  --mnc-on-tertiary-color: #FFFFFF;
  --mnc-tertiary-container-color: #E3DFFF;
  --mnc-tertiary-container-hover-color: #C6C2EA;
  --mnc-on-tertiary-container-color: #1A1836;
  --mnc-error-color: #BA1A1A;
  --mnc-error-hover-color: #93000A;
  --mnc-on-error-color: #FFFFFF;
  --mnc-error-container-color: #FFDAD6;
  --mnc-error-container-hover-color: #FFB4AB;
  --mnc-on-error-container-color: #410002;
  --mnc-positive-color: #006E22;
  --mnc-positive-hover-color: #005317;
  --mnc-on-positive-color: #FFFFFF;
  --mnc-positive-container-color: #6EFF7D;
  --mnc-positive-container-hover-color: #4BE262;
  --mnc-on-positive-container-color: #002105;
  --mnc-warning-color: #7D5800;
  --mnc-warning-hover-color: #5F4100;
  --mnc-on-warning-color: #FFFFFF;
  --mnc-warning-container-color: #FFDEA9;
  --mnc-warning-container-hover-color: #FABC43;
  --mnc-on-warning-container-color: #271900;
  --mnc-surface-dim-color: #D9DADC;
  --mnc-surface-color: #F8F9FB;
  --mnc-surface-bright-color: #F8F9FB;
  --mnc-surface-container-lowest-color: #FFFFFF;
  --mnc-surface-container-low-color: #F2F4F6;
  --mnc-surface-container-color: #EDEEF0;
  --mnc-surface-container-high-color: #E7E8EA;
  --mnc-surface-container-highest-color: #E1E2E4;
  --mnc-on-surface-color: #191C1E;
  --mnc-on-surface-variant-color: #40484C;
  --mnc-on-surface-variant2-color: #585F64;
  --mnc-outline-color: #8A9297;
  --mnc-outline-variant-color: #C0C8CD;
  --mnc-outline-variant2-color: #CED5DB;
  --mnc-inverse-surface-color: #2E3132;
  --mnc-inverse-on-surface-color: #EFF1F3;
  --mnc-inverse-primary-color: #D0021B;
  --mnc-hover-gradient-color: rgba(0, 0, 0, .1);
  --mnc-modal-backdrop-color: rgba(0, 0, 0, .3);
  --mnc-button-radius: 4px;
  --mnc-dialog-radius: 6px;
  --mnc-input-radius: 4px;
  --mnc-panel-radius: 4px;
  --mnc-input-background-color: var(--mnc-surface-container-lowest-color);
}
:root:not(.mnc-dark){
  --mnc-inverse-primary-color: #D0021B;
}
input:focus, textarea:focus, select:focus, a:focus-visible {
 /* outline: .2em solid var(--mnc-primary-container-color);*/
  outline-offset: 0;
  z-index: 1;
}


body {
  background: #FAFCFC;
}
a {
  text-decoration: none;
}
#content {
  padding: 0px;
}

.mnc.grid .one.wide.column {
  width: 100px;
}

.mnc.dropdown>.text img {
  vertical-align: middle !important;
}

.mnc.three.wide.column.field.bottom.aligned.widget.widget-panel.pdn-40 {
  padding-left: 40px;
}
.application > .container {
  width: 100%;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .meta.container {
    width: 100%;
  }
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .meta.container {
    width: 100%;
  }
}

/* Small Monitor */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .meta.container {
    width: 100%;
  }
}

/* Large Monitor */
@media only screen and (min-width: 1200px) {
  .meta.container {
    width: 100%;
  }
}
.mnc.table td.active, .mnc.table tr.active {
  background: #e0e0e0 !important;
  color: rgba(0,0,0,.87) !important;
}

.mnc.grid>.row>.column.footer {
   color: rgba(0,0,0,0.4);
   padding-bottom: 1.5rem;
   padding-top: 1rem;
   justify-content: center;
   display: flex;
   flex-direction: row;
}

/* navigation */
.mnc.grid>.row>.column.navigation {
  padding-left: 50px;

  padding-bottom: 10px;
  padding-right: 25px;
}

.navigation .main-title {
  font-size: 36px;
  color: #16135F;
  letter-spacing: 2px;
  
}

/* breadcrumb */
.navigation .mnc.breadcrumb .divider {
  padding-left: 10px;
  padding-right: 10px;
}
.mnc.breadcrumb {
  padding-left: 1rem;
}

.navigation .mnc.breadcrumb .mnc.buttons.version {
  margin-left: 10px;
}
.mnc.button.green {
  background-color: #27ae60;
  color: white;
}
.mnc.button.orange {
  background-color: #e67e22;
  color: white;
}
.mnc.button.yellow {
  background-color: #e1b12c;
  color: white;
}
.mnc.button.red {
  background-color: #e74c3c;
  color: white;
}
.mnc.button.blue {
  background-color: #2980b9;
  color: white;
}
.navigation .mnc.breadcrumb .active.section {
  color: #16135F;
  font-weight: normal;
}
/* main header */


.header.main .avatar .hub a:link, .header.main .avatar .hub a:visited {
  color: white;
}

.mnc.grid>.row>.column.commhub-content {
  background: #FFFFFF;
  border: 1px solid #E3EDED;
  box-shadow: 0 5px 20px 0 #F6F9FE;
  border-radius: 3px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 25px;
  margin-right: 25px;

}

.application-loader {
  height: 100vh;
}

.assemblyEditor .stencil .joint-paper.joint-theme-default {
  background-color: #f9fafb;
}

.assemblyEditor .diagram .paper {
  width: 800px;
  height: 400px;
}

.flowDiagram .joint-paper.joint-theme-default {
  background-color: rgba(22,19,95,0.04);
}

.flowDiagram .joint-paper-scroller.joint-theme-default {
  border: 1px solid #979797;
  border-radius: 2px;
}

.flowEditor.component .stencil {
  background-color: #ffffff;
}

.flowEditor.component .stencil > .menu {
  margin-bottom: 0px;
  background-color: white;
}

.flowEditor.component .stencil .mnc.accordion .title {
  color: #16135F!important;
  font-size: 14px!important;
  padding-left: 7px;
  letter-spacing: normal;
}

.flowEditor.component .inspector.component .mnc.disabled.dropdown {
  opacity: 1;
}

/*
.topSpace {
  padding-top: 5rem;
}

.leftSpace {
  padding-left: 5rem;
}*/

iframe {
  border:none;
}
.search.component  {
  padding-left: 1rem;
}

.search.component {
  background-color: #f9fafb;
  border-top-left-radius: .5rem;
  border-top-right-radius: 0.5rem;
}

.template-editor.component > .header {
  background-color: #f9fafb;
  border-top-left-radius: .5rem;
  border-top-right-radius: 0.5rem;
}

/* inspector */
.commhub .component.inspector .mnc.form {
  font-size: 0.9rem;
}

.commhub .component.inspector h3.mnc.header {
  font-size: 1.1rem;
}

.commhub .component.inspector h4.mnc.dividing.header {
  color: #161360;
  font-size: 20px;
}


.commhub .component.inspector .mnc.form label {
  font-size: 16px;
  color: #4A4A4A;
  letter-spacing: 0;
  font-weight: normal;
}

.commhub .component.inspector .mnc.form input:not([type='file']) {
  border-radius: 2px;
  border: 1px solid #9B9B9B;
  font-size: 14px;
  color: #516C85;
  letter-spacing: 0;
}

.commhub .component.inspector .mnc.form .mnc.dropdown, .commhub .component.inspector .mnc.form .mnc.dropdown.active {
  border-radius: 2px;
  border: 1px solid #9B9B9B;
  font-size: 14px;
  color: #516C85;
  letter-spacing: 0;
}

.commhub .component.inspector .mnc.form .mnc.dropdown .menu.visible {
  border-radius: 2px;
  border: 1px solid #9B9B9B;
}

.flow.component .mnc.grid>.row>.column.buttons-panel {
  margin-top: 2rem;
}

.flow.component {
  padding-left: 1rem;
  padding-bottom: 1rem;
  padding-right: 1rem;
}

/*.flow.component .tableWrapper {
  overflow-x: auto;
}*/

.flow.component .no-table-scroll .tableWrapper {
  overflow-x: visible;
}

@media only screen and (max-width: 576px) {
  .flow.component .tableWrapper {
    overflow-x: visible;
  }
}


.meta.component.padded {
  padding: 1rem;
}


/* template editor - parts */
.template-editor .paper {
  background-color: white;
}

.template-editor .vspace {
  padding-top: 20px;
  padding-bottom: 20px;
}

.template-editor .hspace {
    padding-left: 50px;
    padding-right: 50px;
}

.template-editor .center {
  text-align: center;
}

.template-editor .template img {
   max-width: 100%;
}

.template-editor .button.moneta {
  background-color: rgb(54,47,88);
  color: white;
  padding: 5px 20px;
  width: max-content;
  font-weight: 600;
  font-size: 18px;
  display: flex;
}

.template-editor .button.nps-survay {
    background-color: rgb(54,47,88);
    color: white;
    padding: 5px 20px;
    width: max-content;
    font-weight: 600;
    font-size: 18px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
}

.template-editor .button.moneta  > span {
  flex-grow: 1;
  text-align: right;
  padding-left: 30px;
}

.template-editor .borderTop {
  border-top-color: gray;
  border-top-style: solid;
  border-top-width: 1px;
}

.template-editor .borderBottom {
  border-bottom-color: gray;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

.template-editor .moneta.background {
  background: linear-gradient(to right, rgb(20,7,87) 25%, rgb(237, 28, 36) 85%);
}

.template-editor .flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.template-editor .no-wrap {
  white-space: nowrap;
}

.template-editor .mobile .button.nps-survay {
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
}
.template-editor .horizontal-center {
  justify-content: center;
  display: flex;
}

.template-editor .moneta-footer {
  color: #767e88;
}


.template-editor .metlife .blue-color {
  color: rgb(21, 117, 181);
}

.template-editor .metlife .large-text {
  font-size: large;
  line-height: 30px;
}

.template-editor .metlife a {
  background: 0 0;
  color: #4183C4;
  text-decoration: none;
}


/* miniclient */
.mnc.grid>.column:not(.row), .mnc.grid>.row>.column.meta.left-padded {
  padding-left: 2rem;
}

/* template */
.panel-template {
  background-color: rgb(250, 250, 247);
  margin-left: 1rem;
  margin-right: 1rem;
}

.panel-template.selected {
  background-color: rgb(245, 245, 240);
}

.mnc.form td .mnc.grid {
  margin-right: auto;
}

.mnc.list.flow-management .mnc.segment.basic-element {
  min-width: 330px;
}

.mnc.list.flow-management .mnc.segment.time-constraints-element {
  min-width: 250px;
}

.mnc.list.flow-management .mnc.segment.flow-element {
  min-width: 450px;
}

/* reports */
.ch-metrics .field>label.help {
  display: none;
}

.ch-metrics h3.mnc.header {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ch-metrics h5.mnc.header {
  margin-top: 10px;
  margin-bottom: 10px;
}

.ch-metrics .mnc.wide.column.widget.segment {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* calendar */

.form.calendar  .header .day {
  font-size: large;
  font-weight: normal;
}

.form.calendar .header  a {
  color: #16135F;
  cursor: pointer;
  font-weight: normal;
}

.form.calendar .header  a:hover {
  color: #4A90E2;
}

/* new 
.field.widget.delete {
  background: transparent;
  border-radius: 2px;
  color: #D0021B;
  letter-spacing: 0;
  font-size: 16px;
  font-weight: normal;
  border: 1px solid #D0021B;
}

.field.widget.delete a, .field.widget.delete span {
  
  display: block;
}

.field.widget.delete i {
  color: #D0021B;
}
*/
.field.widget.delete:hover {
  background: #fae6e8;
}

.field.widget.flat button {
  background-color: transparent;
  color: #16135F;
  padding-left: 8px;
  padding-right: 8px;
}

.field.widget.divider-left {
  border-left: 1px solid #D8D8D8;
}

.field.widget.flat button:hover {
  color: #4A90E2;
}

/* validations */
.field.widget.validation-invalid .mnc.menu.compact {
  border: none;
  box-shadow: none;
}

.field.widget.validation-invalid .mnc.menu.compact > a {
  color: red;
}

.field.widget.validation-invalid .mnc.menu.compact a.item:hover {
  background: transparent;
}

.field.widget.validation-invalid .mnc.menu.compact .icon-span-right i {
  color: #516C85;  
}

.field.widget.validation-invalid .mnc.menu .active.item {
  background: transparent;
  border: none;
  box-shadow: none;
  color: red;
}


.field.widget.validation-valid {
  padding-top: 10px;
}
/* flat button */

.field.widget.flat-button a, .field.widget.flat-button span {
  padding: 11px;
  display: block;
}

.field.widget.flat-button a i {
  color: #16135F;
}

.field.widget.flat-button a:hover i {
  color: #4A90E2;
}

/* tables */
.flow.component .table-overflow-visible .tableWrapper {
  overflow-y: visible;
  overflow-x: visible;
}

.template-message-modeler-part {
  background-color: #eeeeee;
  
}

/* template message detail */
.template-message-detail .preview.desktop > .widgetContainer > .column, .template-message-detail .preview.tablet > .widgetContainer > .column {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: rgb(233,236,237);
}

.template-message-detail .preview.desktop iframe {
  width: 800px;
}

.template-message-detail .preview.tablet iframe {
  width: 600px;
}

.template-message-detail .preview.mobile > .widgetContainer > .column {
  display: flex;
  flex-direction: row;
  justify-content: center;
}


.template-message-detail .preview.mobile > .widgetContainer {
    overflow: hidden;
    /*background-color: white;*/
    background-image: url(smartphone.png);
    background-size: 465px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 465px;
    height: 1000px;
}


.template-message-detail .preview.mobile > .widgetContainer > .column {
  margin-top: 120px;
  margin-left: 39px;
  width: 363px!important;
  height: 646px;
  margin-right: 62px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white;


}

.template-message-detail .modeler.mobile > .widgetContainer {
    overflow: hidden;
    /*background-color: white;*/
    background-image: url(smartphone.png);
    background-size: 465px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    width: 465px;
    height: 1000px;
}


.template-message-detail .modeler.mobile > .widgetContainer > .column {
  margin-top: 120px;
  margin-left: 39px;
  width: 363px!important;
  height: 646px;
  margin-right: 62px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: white;


}

/* MOBIL */
/* template message detail */
.template-mobile .preview.desktop > .widgetContainer > .column, .template-mobile .preview.tablet > .widgetContainer > .column {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    background: rgb(233,236,237);
  }
  
  .template-mobile .preview.desktop iframe {
    width: 800px;
  }
  
  .template-mobile .preview.tablet iframe {
    width: 600px;
  }
  
  .template-mobile .preview.mobile > .widgetContainer > .column {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  
  .template-mobile .preview.mobile > .widgetContainer {
      overflow: hidden;
      /*background-color: white;*/
      background-image: url(smartphone.png);
      background-size: 370px;
      background-repeat: no-repeat;
      background-position: 0px 0px;
      width: 465px;

  }
  
  
  .template-mobile .preview.mobile > .widgetContainer > .column {
    margin-top: 120px;

    width: 363px!important;
    height: 646px;
    margin-right: 62px;
    overflow-y: auto;
    overflow-x: hidden;

  
  
  }
  
  .template-mobile .modeler.mobile > .widgetContainer {
      overflow: hidden;
      /*background-color: white;*/
      background-image: url(smartphone.png);
      background-size: 370px;
      background-repeat: no-repeat;
      background-position: 0px 0px;
      width: 465px;

  }
  
  
  .template-mobile .modeler.mobile > .widgetContainer > .column {
    margin-top: 120px;

    width: 363px!important;
    height: 646px;
    margin-right: 62px;
    overflow-y: auto;
    overflow-x: hidden;

  
  
  }
/* MOBIL END */
.template-message-modeler-repeater.mnc.grid>.column:not(.row) {
  padding-top: 0px;
  padding-bottom: 0px;
}


/* dropdown-menu */

.dropdown-menu .mnc.menu.compact {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.dropdown-menu .mnc.menu.compact .item:hover {
  background: white;
}

.dropdown-menu .mnc.menu.compact a.item:hover {
  background: transparent;
}

.dropdown-menu .mnc.menu.compact .active.visible.dropdown {
  border: none;
  background: transparent;
}

.red-color {
  color: red;
}
.green {
  background-color: green;
}

.font20 {
  font-size: 20px;
}

.mnc.five.wide.column.field.bottom.aligned.widget.widget-label.valued.chatRight{
  font-size: 14px;
  background-color: #556b2f;
  border-radius: 10px;
  color: #fff;
  padding-top: 10px;
}
.mnc.eight.wide.column.field.bottom.aligned.widget.widget-label.valued.chatLeft{
  font-size: 14px;
  background-color: #7f8c8d;
  border-radius: 10px;
  color: #fff;
  padding-top: 10px;
}

.mnc.twelve.column.grid.stackable.widgetContainer.fixHeight{
  height: 550px;
  overflow: auto;
}
.mnc.twelve.column.grid.stackable.widgetContainer.WrapperStyleR {
  background-color: #18af68;
  padding:10px;
  border-radius:10px;
  color: #ffffff;
}
.mnc.twelve.column.grid.stackable.widgetContainer.WrapperStyleL {
  background-color: #32483e;
  padding:10px;
  border-radius:10px;
  color: #ffffff;
}
.mnc.header.flex-row.flex-middle.flex-right.whiteText {
  color: #fff;
}
.mnc.header.flex-row.flex-middle.whiteText {
  color:#fff;
}
.mnc.twelve.wide.column.field.btnStyle.widget.widget-label.valued.btnStyle1 {
  background-color: grey;
  font-weight: bold;
  color: yellow;
  border-radius: 5px;
  padding: 10px;
}
.mnc.six.wide.column.field.bottom.aligned.widget.widget-repeater.RemovePadding {
  padding-right: 0px;
  padding-left: 0px;
}
.mnc.twelve.column.grid.stackable.widgetContainer.segment.fixHeight2 {
  height: 541px;
  overflow: auto;
}

.mnc.table.celled.striped.segment.TonoPadding
 {
   padding-top: 14px;
 }

.mnc.two.wide.column.field.widget.widget-imageviewer.avatarResize {
  padding: 0;
  max-width: 10%;
} 
.mnc.eight.wide.column.field.bottom.aligned.widget.widget-panel.pt10 {
  padding-top:10px;
}
.mnc.table {
  border: 1px solid rgba(34,36,38,.15) !important;
  border-radius: 7px !important;
}

/* LABEL TEXT*/
input[type="text"]{
 border-radius: 7px !important;
}

/* LABEL NUMBER*/
input[type="number"]{
 border-radius: 7px !important;
}

/* COMBOBOX */
.component.flow div.mnc.dropdown, .component.flow div.mnc.dropdown.active{
  border-radius: 7px !important;
}

/* NEW BUTTON */
.component.flow .new-button button{
  border-radius: 7px !important;
}

/* BUTTON */
.button{
  border-radius: 7px !important;
}
[data-widget-name="lblBtnLeft"] {
  text-align: center;
    background-color: grey;
    padding: 0.5rem;
    border-radius: 10px;
    color: white;
}

.mnc.form.xs-auto > .mnc.icon.message {
 animation: fadeIn 1s; 
 width: 210px !important;
 margin: 0 0 0 auto;
 font-size: 10px;
}

.mnc.form.xs-auto > .mnc.icon.message > .checkmark.icon {
   font-size: 20px;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1;}
}