html, body
{
   font-family: Arial;
   font-size: 14px;
}

h2
{
   font-size: 20px;
   margin-bottom: 10px;
}

ul
{
   list-style-position: outside;
}

md-checkbox
{
   border-collapse: separate;
}

a
{
   color: #becd40;
}

.loadingArea
{
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #999;
   opacity: 0.1;
   z-index: 99;
}

.logoContainer
{
   margin-bottom: 20px;
}

md-input-container.no-errors-spacer div.md-errors-spacer
{
   display: none;
}

md-list-item.selected
{
   background-color: rgba(210, 247, 173, 0.31);
}

.TemplatePage md-divider
{
   border-bottom: 1px solid rgba(0, 0, 0, 0.22);
   height: 2px;
   border-top-color: rgba(0, 0, 0, 0.22);
}

.licenseList .md-list-item-inner
{
   white-space: nowrap;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
}

span.info
{
   font-size: 12px;
   color: gray;
   display: block;
   line-height: 20px;
}

.menu
{
   position: fixed;
   right: 20px;
   bottom: 5px;
}

.footer
{
   margin: 10px 100px 10px 10px;
}

md-input-container.small
{
   margin: 0;
}

md-input-container.small .md-errors-spacer, .no-error-spacer .md-errors-spacer
{
   visibility: hidden;
   display: none;
}

md-option md-icon
{
   margin-right: 8px;
}

.md-chips
{
   font-size: 14px;
}

md-chips
{
   margin-bottom: 20px;
}

.evenRow
{
   background-color:#F6F6F6;
}

.duplicateExtensionPreview
{
   color: rgb(221, 44, 0);
}

button.md-button i.material-icons
{
   vertical-align: middle;
}

md-select.small
{
   margin: 0;
}

#browserWarning
{
   visibility: hidden;
   display: none;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   width: 100%;
   background-color: white;
   text-align: center;
   border-top: 2px solid black;
   z-index: 100;
   font-weight: bold;
   font-size: 22px;
   padding: 30px;
   box-sizing: border-box;
}

#browserWarning button
{
   font-weight: bold;
   color: white;
   background-color: black;
   cursor: pointer;
   border: none;
   padding: 5px 15px;
}

.unlicensesCustomer
{
   color: gray;
   font-style: italic;
}

.isTemplate
{
   font-style: italic;
}

md-autocomplete.small md-input-container
{
   margin-bottom: 0;
}
/****************************************************************************************************************/
/* #region start messageBox */
.messageBox
{
   box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);
   border-radius: 2px;
   margin: 10px;
   background-repeat: no-repeat;
}

.messageBox a
{
   color: #37474F;
   text-decoration: underline;
}

.messageBox .iconArea
{
   background-color: rgba(0, 0, 0, 0.05);
}

.messageBox .icon
{
   width: 34px;
   height: 24px;
   opacity: 0.3;
   background-repeat: no-repeat;
   padding: 10px 0 10px 10px;
   background-position: 10px 10px;
}

.messageBox .message
{
   line-height: 110%;
   width: 100%;
   padding: 13px 15px 10px 10px;
}

.messageBox .messageClose
{
   background-image: url(../icons/close.png);
   width: 16px;
   height: 16px;
   opacity: 0.3;
   display: block;
   margin: 10px 10px 0 0;
}

.messageBox .closeArea
{
   background-color: rgba(0, 0, 0, 0.05);
   padding-left: 10px;
}

.messageBox table
{
   width: 100%;
   height: 100%;
}

.messageBox td
{
   vertical-align: top;
}

.messageBox.messageBoxOK, .md-toast-OK .md-toast-content
{
   background-color: #d2f7ad;
   color: black;
}

.messageBox.messageBoxOK .icon
{
   background-image: url(../icons/ok.png);
}

.messageBox.messageBoxINFORMATION, .md-toast-INFORMATION .md-toast-content
{
   background-color: #cfe6fc;
   color: black;
}

.messageBox.messageBoxINFORMATION .icon
{
   background-image: url(../icons/info.png);
}

.messageBox.messageBoxHELP, .md-toast-HELP .md-toast-content
{
   background-color: #cfe6fc;
   color: black;
}

.messageBox.messageBoxHELP .icon
{
   background-image: url(../icons/help.png);
}

.messageBox.messageBoxWARNING, .md-toast-WARNING .md-toast-content
{
   background-color: #fae7a2;
   color: black;
}

.messageBox.messageBoxWARNING .icon
{
   background-image: url(../icons/warning.png);
}

.messageBox.messageBoxERROR, .md-toast-ERROR .md-toast-content
{
   background-color: #ffd5af;
   color: black;
}

.messageBox.messageBoxERROR .icon
{
   background-image: url(../icons/error.png);
}


/* #endregion end messageBox */
/****************************************************************************************************************/
/* #region start drag and drop */
.editPhonesDialog .dragable
{
   border: 1px solid #ddd;
   padding: 5px 10px 5px 10px;
   background-color: white;
   cursor: grab;
}

.editPhonesDialog .dndDragging
{
   cursor: grabbing;
}

.editPhonesDialog .dndPlaceholder
{
   background-color: #bbb;
   padding: 5px 10px 5px 10px;
}

.editPhonesDialog .targetList
{
   min-height: 100px;
   background-color: #bbb;
   height: 100%;
}

.editPhonesDialog .headerRow div
{
   font-weight: bold;
   padding: 5px 10px 5px 10px;
}

.autocomplete-custom-template .resultTemplate
{
   display: block;
   line-height: 2;
}

.autocomplete-custom-template.md-autocomplete-suggestions li
{
   padding: 5px;
   height: auto;
   padding-top: 8px;
   padding-bottom: 8px;
   white-space: normal;
   border-bottom: 1px solid #ccc;
}

/* #endregion end drag and drop */
/****************************************************************************************************************/
/* #region start template */

.isDirty
{
   background-color: rgba(243, 255, 0, 0.08)
}
.isDirty.evenRow
{
   background-color: rgba(243, 255, 0, 0.16)
}
.isNew
{
   background-color: rgba(0, 255, 0, 0.08)
}
.isNew.evenRow
{
   background-color: rgba(0, 255, 0, 0.16)
}

.iconButtonRaised
{
   background-color: #becd40 !important;
}

/* #endregion end template */
/****************************************************************************************************************/
/* #region start default */

.checkboxPlaceholder
{
   width: 56px;
}

/* #endregion end default */
/****************************************************************************************************************/
/* #region start license */

.license .licenseRow
{
   margin-top: 10px;
   margin-bottom: 10px;
}

/* #endregion end license */
/****************************************************************************************************************/





.selectdemoSelectHeader
{
   /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */
}

.selectdemoSelectHeader .demo-header-searchbox
{
   border: none;
   outline: none;
   height: 100%;
   width: 100%;
   padding: 0;
}

.selectdemoSelectHeader .demo-select-header
{
   box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
   padding-left: 10.667px;
   height: 42px;
   cursor: pointer;
   position: relative;
   display: flex;
   align-items: center;
   width: auto;
}

.selectdemoSelectHeader md-content._md
{
   max-height: 240px;
}

.no-errors-spacer md-errors-spacer
{
   display: none;
}

.dropdownSearchContainer
{
   width: 90%;
   margin-left: 5%;
}

#mermaid
{
   height: auto !important;
   max-height: calc(100vH - 80px);
   max-width: 100% !important;
   width: 100%;
}

md-dialog.ExportFlowViewerDialog md-dialog-actions
{
   border-top: 1px solid rgba(0,0,0,0.12);
}

md-dialog.md-dialog-fullscreen
{
   min-height: 100%;
   min-width: 100%;
   border-radius: 0
}

.dropzone .dz-preview .dz-error-message
{
   color: white !important;
}