button.qcpro-success:not(.disabled),
button.qcpro-success,
.qcpro-success {
    color: white;
    text-align: center;
    line-height: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    border: 1px solid transparent;
    background-color: #4cb050;
    cursor: pointer;
    font-size: 12px;
    transition: transform .1s linear, background-color .1s linear, box-shadow .1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.qcpro-success:hover:not(.disabled),
button.qcpro-success:hover,
.qcpro-success:hover {
	background-color: #368239;
}

.qcpro-danger {
    color: white;
    text-align: center;
    line-height: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    border: 1px solid transparent;
    background-color: #dc3545;
    cursor: pointer;
    font-size: 12px;
    transition: transform .1s linear, background-color .1s linear, box-shadow .1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qcpro-danger:hover {
  background-color: #B02A37;
}

.qcpro-danger:disabled, .qcpro-danger.disabled {
  background-color: #e4606d;
}

.qcpro-success:disabled, .qcpro-success.disabled {
  background-color: #81c784;
  cursor: not-allowed;
}

.qcpro-neutral {
    color: #424242;
    text-align: center;
    line-height: 100%;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
    border-radius: 3px;
    border: 1px solid transparent;
    background-color: #E0E0E0;
    cursor: pointer;
    font-size: 12px;
    transition: background-color .1s linear, box-shadow .1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qcpro-neutral:hover {
    color: white;
    background-color: #BDBDBD;
}

.qcpro-default {
    color: white;
    text-align: center;
    line-height: 100%;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
    border-radius: 3px;
    border: 1px solid transparent;
    background-color: #504CB0;
    cursor: pointer;
    font-size: 12px;
    transition: background-color .1s linear, box-shadow .1s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qcpro-default:hover {
    color: white;
    background-color: #403D8D;
}

.qcpro-neutral:disabled, .qcpro-neutral.disabled {
    color: #A2A2A2;
    background-color: #E9E9E9;
}

.qcpro-failed {
    color: white;
    text-align: center;
    line-height: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    border: 1px solid transparent;
    background-color: #B04C50;
    cursor: pointer;
    font-size: 12px;
    transition: background-color .1s linear, box-shadow .1s linear;
}

.qcpro-failed:hover {
    background-color: #823639;
}

.qcpro-disappear {
    opacity: 0;
    visibility: hidden;
}

/* This is a special case for  */
.brighttheme {
    background-image: none;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url("../img/google-icons.woff2") format('woff2');
}

.google-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*css for standard default clear btn*/
.clearBtn > .google-icons {
  opacity: 0;
  font-size: 21px;
  cursor: text;
}

.clearBtn.show > .google-icons {  
  cursor: pointer;
  font-size: 21px;
  opacity: 1;
}

.legal-modal-border {
  border-radius: 12px !important;
  width: 598px;
}

.qcpro-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  background-color: rgba(210,210,210,.4);
}

.active-overlay-item {

}

.overlay-details {
  position: absolute;
  background-color: rgb(210,210,210);
  background-color: white;
  width: 140px;
  border-radius: 6px;
  border: 1px solid;
  border-radius: 6px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  font-size: 12px;
  /* Make sure these are hidden to start to we can correctly position them in JS*/
  visibility: hidden;
  opacity: 0;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    margin-top: 1px;
}
.status-dot.green {
    background-color: #00AF00;
}
.status-dot.yellow {
    background-color: #FFD54F;
}
.status-dot.blue {
    background-color: #3F48CC;
}
.status-dot.red {
    background-color: #EE534F;
}


/*these are important because on pages like AGCO they have a different font which breaks the icons*/
.glyphicon {
  font-family: 'Glyphicons Halflings'!important;
}
.fa {
  font-family: FontAwesome!important;
}

.ellipsis-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-main-container {
  min-height: 80VH;
}

.overflow, select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-logo {
  max-height: 40px;
}

.custom-error-msg-container {
  background-color: #ef5350!important;
  border-color: #B94A48!important;
}

.notifyjs-corner,
.notifyjs-wrapper {
	z-index: 10001 !important;
}

.swal2-container {
  z-index: 99999;
}

.swal2-confirm {
  background-color: #4cb050 !important;
}