/*
    Primary color

            hex: #ff527f
            RGB: 255, 82, 127

      Primary Color Hover
              hex: #E63966
              RGB: 230, 57, 102

    Secondary color

            hex: #3abfe0
            RGB: 58, 191, 224

      Secondary Color Hover
              hex: #21A6C7
              RGB: 33, 166, 199

    Success Color
            hex: #1db178
            RGB: 	29, 177, 120

      Success Color Hover
              hex: #04985F
              RGB: 4, 152, 95

    Warning Color
            hex: #f2ca4c
            RGB: 242, 202, 76

      Warning Color Hover
              hex: #D9B133
              RGB: 217, 177, 51

    Danger Color
            hex: #b72a48
            RGB: 183, 42, 72

      Danger Color Hover
              hex: #9E112F
              RGB: 158, 17, 47
*/

/* Default Styles */
  a, .btn-link {
    color: #3abfe0;
  }
    a:hover {
      color: #21A6C7;
    }

    .btn-link:hover {
      color: #ff527f;
    }

  /* Buttons */

  .btn.btn-default {
    border: 1px solid #e2e8f5;
    background-color: #fff;
  }
  .btn.btn-primary {
    background-color: #ff527f !important;
    color: #fff !important;
    border-color: #ff527f !important;
  }
    .btn.btn-primary:hover,
    .btn.btn-primary:active,
    .btn.btn-primary:focus {
      background-color: #E63966 !important;
      border-color: #E63966 !important;
    }
    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus {
      box-shadow: 0 0 0 0.2rem rgba(255, 82, 127, 0.5);
    }

  .btn.btn-outline-primary {
    color: #ff527f;
    border-color: #ff527f !important;
  }
    .btn.btn-outline-primary:hover,
    .btn.btn-outline-primary:focus,
    .btn.btn-outline-primary:active {
      color: #fff;
      background-color: #ff527f !important;
      box-shadow: none !important;
    }

  .btn.btn-secondary {
    background-color: #3abfe0 !important;
    color: #fff !important;
    border-color: #3abfe0 !important;
  }
    .btn.btn-secondary:hover,
    .btn.btn-secondary:active,
    .btn.btn-secondary:focus {
      background-color: #21A6C7 !important;
      border-color: #21A6C7 !important;
    }
    .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus {
      box-shadow: 0 0 0 0.2rem rgba(58, 191, 224, 0.5);
    }

  .btn.btn-outline-secondary {
    border-color: #3abfe0;
    color: #3abfe0;
  }
    .btn.btn-outline-secondary:hover,
    .btn-outline-secondary:not(:disabled):not(.disabled).active
    {
      border-color: #3abfe0;
      background-color: #3abfe0;
      color: white;
    }

  .btn.btn-danger {
    background-color: #b72a48 !important;
    color: #fff !important;
    border-color: #b72a48 !important;
  }
    .btn.btn-danger:hover,
    .btn.btn-danger:active,
    .btn.btn-danger:focus {
      background-color: #9E112F !important;
      border-color: #9E112F !important;
    }
    .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus {
      box-shadow: 0 0 0 0.2rem rgba(183, 42, 72, 0.5);
    }
  .btn.btn-success {
    background-color: #1db178 !important;
    color: #fff !important;
    border-color: #1db178 !important;
  }
    .btn.btn-success:hover,
    .btn.btn-success:active,
    .btn.btn-success:focus {
      background-color: #04985F !important;
      border-color: #04985F !important;
    }
    .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus {
      box-shadow: 0 0 0 0.2rem rgba(29, 177, 120, 0.5);
    }
  .btn.btn-warning {
    background-color: #f2ca4c !important;
    color: #fff !important;
    border-color: #f2ca4c !important;
  }
    .btn.btn-warning:hover,
    .btn.btn-warning:active,
    .btn.btn-warning:focus {
      background-color: #D9B133 !important;
      border-color: #D9B133 !important;
    }
    .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus {
      box-shadow: 0 0 0 0.2rem rgba(217, 177, 51, 0.5);
    }

  /* Text */
    .text-primary {
      color: #ff527f !important;
    }
      a.text-primary:hover, a.text-primary:focus {
        color: #E63966 !important;
      }
    .text-secondary {
      color: #3abfe0 !important;
    }
      a.text-secondary:hover, a.text-secondary:focus {
        color: #21A6C7 !important;
      }
    .text-success {
      color: #1db178 !important;
    }
    .text-warning {
      color: #f2ca4c !important;
    }
    .text-danger {
      color: #b72a48 !important;
    }

  /* Badges */
  .badge-primary {
    background-color: #ff527f;
  }
  .badge-secondary {
    background-color: #3abfe0;
  }
  .badge-success {
    background-color: #1db178;
  }
  .badge-warning {
    background-color: #f2ca4c;
  }
  .badge-danger {
    background-color: #b72a48;
  }
   /* tags */
  .tag-primary {
    background-color: #ff527f !important;
  }
  .tag-secondary {
    background-color: #3abfe0 !important;
  }
  .tag-success {
    background-color: #1db178 !important;
  }
  .tag-warning {
    background-color: #f2ca4c !important;
  }
  .tag-danger {
    background-color: #b72a48 !important;
  }

  /* Background */
  .bg-primary {
    background-color: #ff527f !important;
  }
  .bg-secondary {
    background-color: #3abfe0 !important;
  }
  .bg-success {
    background-color: #1db178 !important;
  }
  .bg-warning {
    background-color: #f2ca4c !important;
  }
  .bg-danger {
    background-color: #b72a48 !important;
  }
    /* Background transparent */
    .bg-primary-transparent {
      background-color: rgba(255, 82, 127, .2) !important;
    }
    .bg-secondary-transparent {
      background-color: rgba(58, 191, 224, .2) !important;
    }
    .bg-success-transparent {
      background-color: rgba(29, 177, 120, .2) !important;
    }
    .bg-warning-transparent {
      background-color: rgba(242, 202, 76, .2) !important;
    }
    .bg-danger-transparent {
      background-color: rgba(183, 42, 72, .2) !important;
    }
  /* Notifcation */
    #ui_notifIt.success{
        background-color: #1db178;
        color: white;
    }
    #ui_notifIt.error{
        background-color: #b72a48;
        color: white;
    }
    #ui_notifIt.warning{
        background-color: #f2ca4c;
    }
    #ui_notifIt.primary{
        background-color: #ff527f;
    	color:#fff;
    }

  /* Main Side Menu */
    .app-sidebar .slide.active .side-menu__item {
      background: #ff527f;
    }
    .slide-menu li.active > a {
      color: #ff527f !important;
    }
    .slide.is-expanded .side-menu__item {
      background: #ff527f;
    }
    .app-sidebar .slide-menu .slide-item:hover, .app-sidebar .side-menu__item:hover {
      color: #ff527f;
    }
  /* Button navigation */
    .btn-group a.active,
    .btn-group button.active {
      background-color: #ff527f !important;
      color: #fff;
    }
    .btn-group a.active a,
    .btn-group button.active a {
      color: #fff;
    }
    .btn-group a.active a:hover,
    .btn-group button.active a:hover{
      opacity: .9;
    }
  /* Form Elements */
    .ui-datepicker .ui-datepicker-calendar td a:hover{
      background-color: #ff527f !important;
    }
    .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a,
    .dark-theme .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
      background-color: rgba(255, 82, 127, .7);
      color: #fff;
    }
    .select2-container--default .select2-results__option--highlighted[aria-selected] {
      background-color: #ff527f;
    }
    .select2-container--default .select2-search--dropdown .select2-search__field:focus {
      outline-color: #ff527f;
    }
    .ckbox span:after {
      background-color: #ff527f;
    }
    .rdiobox input[type='radio']:checked + span:before {
      background-color: #ff527f;
    }
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
      background-color: #ff527f;
    }
  /* Tables */

    .dataTables_wrapper .dataTables_paginate .paginate_button.active,
    .dark-theme .dataTables_wrapper .dataTables_paginate .paginate_button.active,
    .dataTables_wrapper .dataTables_paginate .paginate_button + .paginate_button, div.dt-container div.dt-paging ul.pagination .dt-paging-button + .dt-paging-button.active .page-link {
      background: #ff527f !important;
    }
  /* Block UI message */
    .blockMsg {
      color: #ff527f !important;
    }
  /* Variable Wizard */
    #variable-wizard-body .vw-highlight.vw-active
    {
      border-color: rgba(255, 82, 127, 0.5);
      background-color: rgba(255, 82, 127, 0.1);
    }
    #variable-wizard-body .vw-highlight.vw-active label
    {
      color: #ff527f;
    }
  /* Code wizard */
    .cw-active
    {
  		border-color: rgba(255, 82, 127, 0.5) !important;
  		background-color: rgba(255, 82, 127, 0.1) !important;
    }
  /* Icon Wizard */
    .icon-output.focused {
      box-shadow: 0px 0px 5px #f2ca4c;
    }
    .iconpicker .iconpicker-item.iconpicker-selected {
      box-shadow: 0 0 5px rgba(242, 202, 76, 0.8) !important;
    }
    .dark-theme .iconpicker-popover.popover.bottom>.arrow:after,
    .dark-theme .iconpicker-popover.popover.bottomRight>.arrow:after,
    .dark-theme .iconpicker-popover.popover.bottomLeft>.arrow:after {
      border-bottom-color: #343d56;
    }
  /* Class Wizard Modal */
    #class-wizard-body .cw-active
    {
  		border-color: rgba(122, 111, 190, 0.5);
  		background-color: rgba(122, 111, 190, 0.1);
    }
    body:has(#component-wizard-modal.show) .modal-backdrop.show  {
      z-index: 9998 !important;
    }

    /* Component Wizard */
    #component-wizard-modal {
      z-index: 9999 !important;
    }

  /* Inline widget buttons */
    .inline-widget-wizard, .inline-edit-component  {
    	color: #ff527f !important;
    }
    .inline-link-template,
    .inline-link-component {
      color: #f2ca4c !important;
    }
    .inline-widget-wizard:hover, .inline-widget-wizard:focus, .inline-edit-component:hover, .inline-edit-component:focus{
    	color: #E63966;
    }
  /* Form Wizard */
    .wizard > .steps .current a .number, .wizard > .steps .current a:hover .number, .wizard > .steps .current a:active .number,
    .dark-theme .wizard > .steps .current a .number, .dark-theme .wizard > .steps .current a:hover .number, .dark-theme .wizard > .steps .current a:active .number {
      background-color: #ff527f !important;
    }

    .wizard > .actions a {
      background-color: #ff527f;
    }
    .wizard > .actions a:hover {
      background-color: #E63966;
    }
    .wizard > .steps .done a {
      color: #3abfe0;
    }
    .wizard > .steps .current a {
      color: #ff527f;
    }
    .wizard > .steps .current a:hover, .wizard > .steps .current a:active {
      color: #E63966;
    }
    .wizard > .actions > ul > li:last-child a {
      background-color: #3abfe0;
    }
    .wizard > .actions > ul > li:last-child a:hover {
      background-color: #21A6C7;
    }
  /* Nav Line */
  .main-content-body-profile .main-nav-line .nav-link.active {
    color: #ff527f;
  }
  @media (max-width: 767px)
  {
    .main-nav-line .nav-link.active {
        background: #ff527f;
    }
  }
  /* Search Results */
  .search-results h5 a {
    color: #ff527f;
  }
  /* Timeline */
    .timeline-wrapper-primary .timeline-panel:before, .timeline-wrapper-primary .timeline-badge {
        background: #ff527f;
    }
    .timeline-wrapper-warning .timeline-panel:before, .timeline-wrapper-warning .timeline-badge {
        background: #f2ca4c;
    }
    .timeline-wrapper-success .timeline-panel:before, .timeline-wrapper-success .timeline-badge {
        background: #1db178;
    }
    .timeline-wrapper-danger .timeline-panel:before, .timeline-wrapper-danger .timeline-badge {
        background: #b72a48;
    }
  /* Nav Pills */
    .nav-pills .nav-link.active {
      background: #ff527f;
    }
  /* Change history */
    del {
      background: #b72a48;
    }
    ins {
      background: #1db178;
    }
  /* Js tree icons */
  .icon-state-danger {
    color: #b72a48;
  }
  .icon-state-primary {
    color: #ff527f;
  }
  .icon-state-secondary {
    color: #3abfe0;
  }

  /* Circle Audio */
  .circle-audio svg g.play {
    fill: #3abfe0;
  }
  .circle-audio svg g.pause line {
    stroke: #3abfe0;
  }
  .circle-audio circle.progress-bar {
    stroke: #3abfe0;
  }

  /* Date range picker */
  .daterangepicker .ranges li.active {
    background-color: #ff527f;
  }
  .daterangepicker td.in-range {
    background-color: rgba(255, 82, 127, .1);
  }
  .daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #ff527f;
  }
  /* Alert Primary */
  .alert-primary {
    background-color: #ff527f;
    color: #fff;
  }
  .alert-secondary {
    background-color: #3abfe0;
    color: #fff;
  }
  .alert-warning {
    background-color: #f2ca4c;
    color: #fff;
  }
  .alert-outline.alert-primary {
    border-color: #21b178;
  }
  .alert-outline.alert-secondary {
    border-color: #3abfe0;
  }
  .alert-outline.alert-warning {
    border-color: #f2ca4c;
  }


  /* Remove Avatar (Task form) */
  .remove-avatar {
    color: #b72a48;
  }
  .editableform-loading {
    color: #ff527f;
  }
  /* Chat */
  .main-chat-list .media::after {
    background-color:  #ff527f !important;
  }
  .dark-theme .main-nav-line-chat .nav-link.active {
    color: #ff527f !important;
  }
  .main-chat-body .media.flex-row-reverse .main-msg-wrapper {
    background-color: #ff527f;
  }
  .main-chat-list .main-img-user span {
    background-color: #ff527f;
  }
  .main-msg-send {
    color: #ff527f;
  }
  /* Context Menu */
  .context-menu-item.context-menu-hover {
    background-color: #ff527f;
  }
  .context-menu-icon.context-menu-icon--fa::before {
    color: #ff527f;
  }

  /* Borders */
  .border-primary, .dark-theme .border-primary {
    border-color: #ff527f !important;
  }
  .border-secondary, .dark-theme .border-secondary {
    border-color: #3abfe0 !important;
  }
  .border-success, .dark-theme .border-success {
    border-color: #1db178 !important;
  }
  .border-warning, .dark-theme .border-warning {
    border-color: #f2ca4c !important;
  }
  .border-danger, .dark-theme .border-danger {
    border-color: #b72a48 !important;
  }

  /* Dark Default */
    .dark-theme .btn.btn-default {
      color: #fff;
      background-color: #1e2740 ;
      border-color: rgba(255, 255, 255, 0.2);
    }
      .dark-theme .btn.btn-default:hover, .dark-theme a.btn.btn-default:focus {
        background-color: #343c51;
        border-color: rgba(255, 255, 255, 0.2);
      }

/* Logs */
.show-levels .log-error {
  color: #b72a48;
}
.show-levels .log-warning {
  color: #f2ca4c;
}


label {width: 100%;}

/* On/Off Switch */
.main-toggle {
  height: 16px;
  width: 44px;
  border-radius: 10px;
}

.main-toggle.on span {left: 31px;}

.main-toggle span {
  border-radius: 10px;
  width: 10px;
}

.main-toggle span::before,
.main-toggle span::after {
  top: -1px;
}

.main-toggle span::before {left: -22px;}
.main-toggle span::after {right: -24px;}

.main-toggle.on {background-color: #ff527f;}

.blockme {
  pointer-events: none;
  opacity: .6;
}

.scopes .panel-heading {
  background: unset;
  border: none;
}

.scopes .panel .row {margin: 0px;}

.scopes.panel-group .panel {
  border: 1px solid rgba(204, 204, 204, 0.25);
}

.scopes .panel .panel {
  margin: 10px;
}

.scopes .panel .ckbox span::before {
  top: 1px;
}

.scopes .panel h5 span,
.scopes .panel .ckbox span a {
  color: #3abfe0;
  font-size: 16px;
}

.scopes .panel {
  margin: 3px;
}

.scopes .panel .fa:hover
{
  cursor: pointer;
  color: #3abfe0 !important;
}

/* Wickedpicker Timepicker */
.dark-theme .wickedpicker
{
  background-color: #1d2740 !important;
  border: 1px solid rgba(226, 232, 245, 0.08) !important;
}

  .dark-theme .wickedpicker .wickedpicker__controls__control--hours,
  .dark-theme .wickedpicker .wickedpicker__controls__control--separator,
  .dark-theme .wickedpicker .wickedpicker__controls__control--minutes,
  .dark-theme .wickedpicker .wickedpicker__controls__control--meridiem {color: white;}

#breakpointSlider
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: .4em !important;
  background-color: #3abfe0;
  border: 1px solid #3abfe0;

}
  #breakpointSlider .ui-slider-handle
  {
    display: flex;
    justify-content: center;
    align-items: center;

    top: unset;

    width: 1em;
    height: 1em;

    border: 1px solid white;
    border-radius: 50%;
  }

  #breakpointSlider .ui-slider-handle::before
  {
    content: attr(data-breakpoint) '\A' attr(data-value);
    white-space: pre;
    text-align: center;

    position: absolute;
    bottom: 21px;

    color: white;
    background-color: #ff527f;
    line-height: 1.2;

    border-radius: 4px;
    font-size: 12px;
    padding: 4px 6px;
  }

  #breakpointSlider .ui-slider-handle::after
  {
    content: '';

    position: absolute;
    bottom: 15px;

    border-top: 10px solid #ff527f;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
  }

  #breakpointSlider .ui-slider-handle.ui-state-active {background-color: #3abfe0 !important;}
  #breakpointSlider .ui-slider-handle:focus {outline: none;}

  label .sub-label
  {
    opacity: .5;
    font-size: .9em;
    margin-left: 6px;
  }

  .custom-switch-input:checked~.custom-switch-indicator {
    background: #ff527f !important;
  }
  .custom-switch-input:focus~.custom-switch-indicator {
    box-shadow: 0 0 0 2px rgb(255 82 127 / 25%) !important;
    border-color: #ff527f !important;
  }

.oak-tags
{
  height: 100%;
  flex: 1;
  border: 1px solid rgba(226, 232, 245, 0.08);
  background: #ffffff;

  display: flex;
  align-items: center;
  padding: 7px 0px;

  flex-wrap: wrap;
}

  .oak-tags .tag
  {
    margin-left: 7px;

    display: flex;
    align-items: center;
    border: 1px solid #efeff51a;

    transition: .2s ease-in;
  }

  .oak-tags .tag:hover
  {
    border-color: #ff527f;
    cursor: pointer;
  }

    .oak-tags .tag .close
    {
      font-size: 11px;
      margin-left: 4px;
      border-radius: 50%;
      background-color: #a7a7ab;
      padding: 3px;
      height: 13px;
      width: 13px;
      display: flex;
      align-items: center;
    }

      .oak-tags .tag .close:hover
      {
        color: #b72a48;
        cursor: pointer;
      }
.main-notification-list .unread:before {
  color: #b72a48;
}
div.review-source span {
  background-color:  #ff527f;
}

#style-guide-wizard-modal .btn-default:not(.collapsed) {
  background-color: #1db178 !important;
  color: #fff !important;
  border-color: #1db178 !important;
}

.border-primary { border: 1px solid #ff527f; }
.border-default { border: 1px solid rgba(204, 204, 204, 0.25); }

.CodeMirror .marked-text-warning {
  background: rgba(242, 202, 76, 0.3);
}
.CodeMirror .marked-text-danger {
  background: rgba(183, 42, 72, 0.3);
}
.CodeMirror .marked-text-success {
  background: rgba(29, 177, 120, 0.3);
}

.form-group .group:has(input[name="group_active"][value="1"]) .power_element
{
  color: #b72a48;
}

.form-group .group:has(input[name="group_active"][value="0"]) .power_element
{
  color: #3abfe0;
}

.form-group .group .well
{
  border: 1px solid #b72a4800;
}

.form-group .group:has(input[name="group_active"][value="0"]) .well
{
  border-color: #b72a48;
}

.form-group.sort-0 .label-wrap .btn-warning
{
  background-color: unset !important;
  border: 1px solid;
  color: #f2ca4c !important;
  opacity: .4;
}

.group-collapse > .col-auto i:hover
{
  color: #3abfe0; 
}

/* Custom Table Colors */
.table td .table-tags .table-tag.primary {
  background-color: #ff527f !important;
  color: #fff !important;
}
.table td .table-tags .table-tag.secondary {
  background-color: #3abfe0 !important;
  color: #fff !important;
}
.table td .table-tags .table-tag.success {
  background-color: #1db178 !important;
  color: #fff !important;
}
.table td .table-tags .table-tag.warning {
  background-color: #f2ca4c !important;
  color: #fff !important;
}
.table td .table-tags .table-tag.danger {
  background-color: #b72a48 !important;
  color: #fff !important;
}
.table td .table-tags .table-tag.info {
  background-color: #3abfe0 !important;
  color: #fff !important;
}