/* widgets.css */

/************************* CSS RIBBONS *************************/

.ribbon {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px;
  height: 75px;
  text-align: right;
  z-index: 1000;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #555555;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #eeeeee;
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px;
  right: -21px;
  text-shadow: none;
}
.ribbon span::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid #eeeeee;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #eeeeee;
}
.ribbon span::after {
  content: "";
  position: absolute;
  right: 0px;
  top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #eeeeee;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #eeeeee;
}

/* danger ribbon */
.ribbon.ribbon-danger span {
  background: #d9534f;
  color: #ffffff;
}

.ribbon.ribbon-danger span::before {
  border-left-color: #d9534f;
  border-top-color: #d9534f;
}

.ribbon.ribbon-danger span::after {
  border-right-color: #d9534f;
  border-bottom-color: #d9534f;
}
/* /danger ribbon */

/* warning ribbon */
.ribbon.ribbon-warning span {
  background: #f0ad4e;
  color: #ffffff;
}

.ribbon.ribbon-warning span::before {
  border-left-color: #f0ad4e;
  border-top-color: #f0ad4e;
}

.ribbon.ribbon-warning span::after {
  border-right-color: #f0ad4e;
  border-bottom-color: #f0ad4e;
}
/* /warning ribbon */

/* info ribbon */
.ribbon.ribbon-info span {
  background: #5bc0de;
  color: #ffffff;
}

.ribbon.ribbon-info span::before {
  border-left-color: #5bc0de;
  border-top-color: #5bc0de;
}

.ribbon.ribbon-info span::after {
  border-right-color: #5bc0de;
  border-bottom-color: #5bc0de;
}
/* /info ribbon */

/* success ribbon */
.ribbon.ribbon-success span {
  background: #5cb85c;
  color: #ffffff;
}

.ribbon.ribbon-success span::before {
  border-left-color: #5cb85c;
  border-top-color: #5cb85c;
}

.ribbon.ribbon-success span::after {
  border-right-color: #5cb85c;
  border-bottom-color: #5cb85c;
}
/* /success ribbon */

/* primary ribbon */
.ribbon.ribbon-primary span {
  background: #337ab7;
  color: #ffffff;
}

.ribbon.ribbon-primary span::before {
  border-left-color: #337ab7;
  border-top-color: #337ab7;
}

.ribbon.ribbon-primary span::after {
  border-right-color: #337ab7;
  border-bottom-color: #337ab7;
}
/* /primary ribbon */


.ribbon-fixed {
  position: fixed;
  top: 0;
  right: 0;
}

content > .ribbon-fixed {
  top: 49px;
  right: -5px;
}

content > .ribbon-fixed.ribbon-lg {
  top: 48px;
  right: -6px;
}

.ribbon.ribbon-lg {
  width: 150px;
  height: 150px;
  z-index: 1000;
}

.ribbon.ribbon-lg > span {
  font-size: 20px;
  line-height: 40px;
  width: 200px;
  top: 38px;
  right: -42px;
}

.ribbon.ribbon-fixed > span:before, .ribbon.ribbon-fixed > span:after {
  border-width: 3px;
}

/* top left */
body > .ribbon.ribbon-tl {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  transform: rotate(-90deg);
}

body > .ribbon.ribbon-tl > span {

}

body > .ribbon.ribbon-tl > span::before, body > .ribbon.ribbon-tl > span::after {
  display: none;
}
/* /top left */

/* bottom left */
body > .ribbon.ribbon-bl {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  transform: rotate(180deg);
}

body > .ribbon.ribbon-bl > span {
  transform: rotate(225deg);
}

body > .ribbon.ribbon-bl > span::before, body > .ribbon.ribbon-bl > span::after {
  display: none;
}
/* /bottom left */

/************************* /CSS RIBBONS *************************/

/************************* PILLS ********************************/

.nav.flex-column > li > ul.nav.flex-column {
  margin: 0 0 0 2em;
  padding: 0;
}

.nav.flex-column > li > .nav.flex-column > li > a {
  
}

.nav-pills a > i.fa {
  transition: none;
}

.nav-pills.nav-navy > li > ul > li {
  margin: 0;
}

.nav-pills.nav-navy > li.active.has-children, .nav-pills.nav-navy > li.active.has-children > a, .nav-collapse > .list-group > .list-group-item.active {
  background-color: rgba(28, 64, 148, 0.125);
  color: #1c4094;
  border: 0;  
}

.nav-pills.nav-navy > li.has-children > ul > li:not(.active) > a:focus,
.nav-pills.nav-navy > li.has-children > ul > li:not(.active) > a:hover,
.nav-pills.nav-navy > li.has-children > ul > li:not(.active) > a:active, 
.nav-pills.nav-navy > li.active.has-children > ul > li:not(.active) > a:focus,
.nav-pills.nav-navy > li.active.has-children > ul > li:not(.active) > a:hover,
.nav-pills.nav-navy > li.active.has-children > ul > li:not(.active) > a:active {
  background-color: rgba(28, 64, 148, 0.125);
  color: #1c4094;
}

.nav-pills.nav-navy > li.active.has-children {
  padding-bottom: 5px;
  border-radius: var(--bs-nav-pills-border-radius);
}

.nav-pills.nav-navy > li.active.has-children > ul {
  margin-top: 5px;
  margin-right: 5px;
}

#nav-account-collapse ul.list-group > li.list-group-item.active > a + ul {
  margin-top: 10px;
  margin-bottom: 0;
  margin-left: 23px;
}

.nav-pills.nav-navy > li.active.has-children > a, .nav-collapse > .list-group > .list-group-item.active > a, .nav-collapse > .list-group > .list-group-item.active.has-children > .list-group > li.list-group-item:not(.active) > a {
  color: #1c4094;
}

.nav-pills.nav-navy > li.separator {
  margin: 5px 0;
  height: 0;
  border-top: 1px solid #dddddd;
}

.nav-pills.nav-navy > li.muted > span {
  position: relative;
  display: block;
  padding: 5px 7.5px;
  color: #666666;
}

.nav-thin li > a {
  padding: 5px 7.5px;
}

.icons > .nav.nav-pills.flex-column > li > a > span.nav-text, .icons > .nav.nav-pills.flex-column > li > span > span.nav-text {
  display: none;
}

.icons > .nav.nav-pills.flex-column > li.has-children > a + ul {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1200;
  background-color: white;
  border-radius: var(--bs-nav-pills-border-radius);
  border-width: 1px;
  border-style: solid;
  display: none;
  margin: 0 0 0 34.28px;
}

.icons > .nav.nav-pills.flex-column > li.has-children > a:focus + ul, .icons > .nav.nav-pills.flex-column > li.has-children > a:hover + ul, .icons > .nav.nav-pills.flex-column > li.has-children > a:active + ul, .icons > .nav.nav-pills.flex-column > li.has-children > a + ul:focus, .icons > .nav.nav-pills.flex-column > li.has-children > a + ul:hover, .icons > .nav.nav-pills.flex-column > li.has-children > a + ul:active {
  display: block;
}

.nav.nav-pills.flex-column.nav-navy.icons > li.active.has-children, .nav.nav-pills.flex-column.nav-navy.icons > li.active.has-children > ul > li.active.has-children {
  padding: 0;
}

.nav.nav-pills.flex-column.nav-navy.icons > li.active.has-children > ul, .nav.nav-pills.flex-column.nav-navy.icons > li.active.has-children > ul > li.active.has-children > ul {
  margin-top: 0;
  margin-right: 0;
}

@media (max-width: 767px) {
  .nav.nav-pills.flex-column > li > a > span.nav-text, .nav.nav-pills.flex-column > li > span > span.nav-text {
    display: none;
  }
  
  .nav.nav-pills.flex-column > li.has-children > a + ul {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: white;
    border-radius: var(--bs-nav-pills-border-radius);
    border-width: 1px;
    border-style: solid;
    display: none;
    margin: 0 0 0 34.28px;
  }
  
  .nav.nav-pills.flex-column > li.has-children > a:focus + ul, .nav.nav-pills.flex-column > li.has-children > a:hover + ul, .nav.nav-pills.flex-column > li.has-children > a:active + ul, .nav.nav-pills.flex-column > li.has-children > a + ul:focus, .nav.nav-pills.flex-column > li.has-children > a + ul:hover, .nav.nav-pills.flex-column > li.has-children > a + ul:active {
    display: block;
  }
  
  .nav.nav-pills.flex-column.nav-navy > li.active.has-children, .nav.nav-pills.flex-column.nav-navy > li.active.has-children > ul > li.active.has-children {
    padding: 0;
  }
  
  .nav.nav-pills.flex-column.nav-navy > li.active.has-children > ul, .nav.nav-pills.flex-column.nav-navy > li.active.has-children > ul > li.active.has-children > ul {
    margin-top: 0;
    margin-right: 0;
  }

  #sidebar .nav li.separator, #sidebar .nav li.muted {
    display: none;
  }
}

/************************* /PILLS *******************************/

/************************* SORTABLE *****************************/
body.dragging, body.dragging * {
  cursor: n-resize !important;
}

.dragged {
  position: absolute;
  opacity: 1;
  z-index: 2000;
  background-color: #ffffff;
}

.filler {

}

.filler > * {
  opacity: 0.5;
}

[data-role=sort] {
  cursor: n-resize;
}

[data-role=sort][disabled] {
  cursor: not-allowed;
}
/************************* /SORTABLE ****************************/

/************************* KBD LABELS ***************************/
kbd.kbd-as-label {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  color: #333333;
  padding: 2px 0;
  box-shadow: none;
  display: inline-block;
}

kbd.kbd-as-label > span {
  font-weight: bold;
  padding: 2px 4px;
  background-color: #ffffff;
}

kbd.kbd-as-label > span:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

kbd.kbd-as-label > span:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

kbd.kbd-as-label > span:not(:first-child) {
  border-left: 1px solid #dddddd;
}

kbd.kbd-as-label.striped > span:nth-child(odd){
  background-color: #f9f9f9;
}

kbd.kbd-as-label > span.alpha {
  color: red;
}

kbd.kbd-as-label > span.numeric {
  color: blue;
}

kbd.kbd-as-label.text-strike > span.alpha, kbd.kbd-as-label.text-strike > span.numeric {
  color: #dddddd;
}
/************************* /KBD LABELS **************************/

.row-cols-8>* {
    flex: 0 0 auto;
    width: 12.5%;
}

.row-cols-10>* {
  flex: 0 0 auto;
  width: 10%;
}

@media (min-width: 576px) {
  .row-cols-sm-8>* {
      flex: 0 0 auto;
      width: 12.5%;
  }

  .row-cols-sm-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}

@media (min-width: 768px) {
  .row-cols-md-8>* {
      flex: 0 0 auto;
      width: 12.5%;
  }

  .row-cols-md-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}

@media (min-width: 992px) {
  .row-cols-lg-8>* {
      flex: 0 0 auto;
      width: 12.5%;
  }

  .row-cols-lg-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}

@media (min-width: 1200px) {
  .row-cols-xl-8>* {
      flex: 0 0 auto;
      width: 12.5%;
  }

  .row-cols-xl-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}

@media (min-width: 1400px) {
  .row-cols-xxl-8>* {
      flex: 0 0 auto;
      width: 12.5%;
  }

  .row-cols-xxl-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}
@media (min-width: 2000px) {
  .row-cols-xxxl-1>* {
    flex: 0 0 auto;
    width: 100%;
  }

  .row-cols-xxxl-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  .row-cols-xxxl-3>* {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }

  .row-cols-xxxl-4>* {
    flex: 0 0 auto;
    width: 25%;
  }

  .row-cols-xxxl-5>* {
      flex: 0 0 auto;
      width: 20%;
  }

  .row-cols-xxxl-6>* {
      flex: 0 0 auto;
      width: 16.6666666667%;
  }

  .row-cols-xxxl-8>* {
      flex: 0 0 auto;
      width: 12.5%;
  }

  .row-cols-xxxl-10 > * {
    flex: 0 0 auto;
    width: 10%;
  }
}

.nh-1 {
  min-height: 1rem;
}

.nh-2 {
  min-height: 2rem;
}

.nh-3 {
  min-height: 3rem;
}

.nh-4 {
  min-height: 4rem;
}

.nh-5 {
  min-height: 5rem;
}

.nh-6 {
  min-height: 6rem;
}

.nh-7 {
  min-height: 7rem;
}

.input-group .btn-outline-secondary {
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-border-color: var(--bs-border-color);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}

label {
  cursor: pointer;
}

.input-group .form-control > .input-overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: var(--bs-border-radius);
}

.input-group .form-control > .input-overlay label {
  display: block;
  height: 100%;
  overflow-y: hidden;
  padding: 0.625rem 0.75rem;
}

.input-group .form-floating .form-control > .input-overlay label {
  padding: 1.625rem 0.75rem 0.625rem 0.75rem;
}

.input-group .form-control > .input-overlay label:after {
  content: 'Browse';
  float: right;
  border-style: solid;
  border-width: var(--bs-border-width) 0 var(--bs-border-width) var(--bs-border-width);
  border-color: #ffffff var(--bs-border-color);
  margin: -0.625rem -0.75rem -0.625rem 0;
  padding: 0.625rem 0.75rem;
  background-color: var(--bs-btn-bg);

  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108,117,125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

}

.input-group .form-floating .form-control > .input-overlay label:after {
  margin: -1.625rem -0.75rem -0.625rem 0;
  padding: 1.125rem 0.75rem;
}

.input-group .form-control.is-valid > .input-overlay label:after {
  border-color: #ffffff var(--bs-form-valid-border-color);
}

.input-group .form-control > .input-overlay label:hover:after {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

form[data-editable=false] .form-check-input:checked {
  background-color: #c6c7c8;
  border-color: #c6c7c8;
}

.accordion.accordion-default {
  --bs-accordion-bg: var(--bs-button-bg);
  --bs-accordion-color: var(--bs-button-color);
  --bs-accordion-active-bg: var(--bs-btn-active-bg);
  --bs-accordion-active-color: var(--bs-btn-active-color);
}

.was-validated .form-floating textarea.form-control.autosize:invalid, .form-floating textarea.form-control.autosize.is-invalid {
  background-position: right calc(0.375em + 0.1875rem) center;
}

div.form-control.focus {
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);  
}

div.form-control.is-valid.focus, .was-validated div.form-control.focus:valid {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb),.25);
}

div.form-control.is-invalid.focus, .was-validated div.form-control.focus:invalid {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb),.25);
}

.btn-group > input.btn-check:not(:first-child) + label.btn.btn-light, .btn-group > input.btn-check:not(:first-child) + label.btn.btn-light:hover {
  border-left-color: var(--bs-border-color);
}

.btn-group > input.btn-check:not(:first-child):checked + label.btn.btn-light, .btn-group > input.btn-check:not(:first-child):checked + label.btn.btn-light:hover {
  border-left-color: var(--bs-btn-active-border-color);
}

table.table tbody tr td input.form-control, table.table tbody tr td select.form-select {
  min-width: 6rem;
}

table.table-sticky {
  border-collapse: separate;
  border-spacing: 0;
}

.vh-75 {
  height: 75vh !important;
}

.mh-75vh {
  max-height: 75vh !important;
}

iframe {
  border-radius: border-radius: var(--bs-border-radius);
}

.form-control-dropzone {
  
}

.input-group-line-numbers {
  overflow: hidden;
}

table > tbody > tr[class^="text-bg-"] > td {
  background-color: transparent;
}