/* Body Styles */
body {
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
}

/* End Body Styles */

/* Font Styles */

h1 {
  font-size: 28px;
}


/* End Font Styles */
@media screen and (min-width: 1305px) {
  #top-navbar {
    height: 50px; 
  }
}

@media screen and (max-width: 1304px) {
  #top-navbar {
    height: 100%; 
  }
}

/* Navbar Styles */
#logo span{
  color: #00ACE9;
}

#logo:hover{
  opacity: 0.5;
  transition: 0.5s;
}

a.login {
  color: white;
  transition: 0.5s;
  text-decoration: none;
}
a.login:hover {
  opacity: 0.6;
  color: white;
  transition: 0.5s;
  text-decoration: none;
}

/* End Navbar Styles */

/* Button Styles */

.btn-primary {
  background-color: #2c6aa0;
  border-color: #2c6aa0;
  color: white;
  transition: 0.5s;
}

.btn-primary:hover {
  background-color: #2c6aa0;
  border-color: #2c6aa0;
  color: white;
  opacity: 0.8;
  transition: 0.5s;
}


.btn-default {
  background-color: #f3f3f3;
  color: black;
  border: none;
  transition: 0.5s;
}

.btn-default:hover {
  background-color: #e2e2e2 !important;
  color: black;
  border: none;
  transition: 0.5s;
}

.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

/* End Button Styles */

/* Badges  */

 .bg-default {
  background-color: #777777;
 }
 

/* End Badges */

/* Status Styles */
.status-card .card-header {
  background-color: #80cee9;
  color: #31708f;
  border-bottom: none;
}

/* End Status Styles */

/* Link Styles */
a {
  color: #337ab7;
  transition: 0.5s;
  text-decoration: none;
}

.tab-link a,
button.nav-link,
button.btn-link {
  color: #337ab7 !important;
}

.sub-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

#loggedin {
  margin-right: 20px;
}

.main h1 {
  font-size: 28px;
}

.main h2 {
  font-size: 24px;
}

button .bi {
  margin-right: 7px;
}

.main h3 {
  font-size: 20px;
}

.navbar-fixed-top {
  border: 0;
  background: #444;
        z-index: 1000;
}
    .modal-body {
        max-height: calc(100vh - 210px);
        overflow-y: auto;
    }
    
/* #header-tabs {
  margin-top: 15px;
} */

#header-tabs-mobile {
  display: none;
}

#header-tabs.nav > li > a:focus, .nav > li > a:hover {
  background-color: transparent;
}

/* @media screen and (min-width: 1550px) { */
  #header-tabs li{
    font-size: 13px;
    background-color: #366382;
    margin-left: 5px;
    border-radius: 10px 10px 0 0;
    min-width: 5%;
    text-align: center;
  }
/* } */
/* @media screen and (max-width: 1549px) {
  #header-tabs li{
    font-size: 13px;
    background-color: #366382;
    margin-left: 2px;
    border-radius: 10px 10px 0 0;
    text-align: center;
  }
   */

  /* #header-tabs {
    color: white;
    margin-top: 15px;
  } */
/* } */

#header-tabs-mobile a.dropdown-toggle {
  color: white;
}

#header-tabs a {  
  color: white !important;
}

#header-tabs-mobile a:hover {
  opacity: 0.4;
}

#header-tabs-mobile a:focus {
  background-color: transparent !important;
}

#header-tabs li a:hover{
  opacity: 0.8;
  border-radius: 10px 10px 0 0;
  background-color: #389DE3;
  transition: 0.5s;
}

#header-tabs .nav-item.active{
  background-color: #389DE3 !important;
}

#header-tabs li a{
  transition: 0.5s;
  border-radius: 10px 10px 0 0;
  color: white;
}

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

.subtabs {
  font-size: 15px;
  /* animation: fadeIn 1.0s; */
}

#submenu {
  margin-top: 10px;
  margin-bottom: 20px;
  height: 30px;
  /* animation: fadeIn 1.5s; */
}

@media screen and (max-width: 1600px) {
  #submenu {
    margin-top: 10px;
    margin-bottom: 60px;
  }
}


#formula {
  margin-top: 10px;
  animation: fadeIn 2s;
}

#formula_tabs {
  margin-left: 9px;
}

#formula a {
  padding: 10px 5px;
  color: #000;
}

#formula a i.bi-youtube {
  font-size: 16px;
  color: red;
}

.dropdown-item {
  color: white;
  font-size: 14px;
}

@media screen and (max-width: 1286px) {
  #submenu {
    margin-top: -10px;
    margin-bottom: 70px;
    height: 30px;
    animation: fadeIn 2s;
  }
}


@media (max-width: 1304px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-right {
    margin-left: 8px;
  }

  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}


#submenu a {
  color: black;
}

#submenu li a {
  position: relative;

}

#submenu li a:before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #337ab7;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

#submenu li a:hover:before {
  visibility: visible;
  width: 100%;
}

.navbar-brand {
  text-transform: uppercase;
  font-weight: 700;
  transition: 0.5s;
  line-height: 32px;
  font-weight: 19px;
}

.navbar-brand:hover {
  transition: 0.5s;
  color: white !important;  
}

.sidebar {
  position: fixed;
  top: 58px;
  bottom: -7px;
  left: 0;
  z-index: 1000;
  display: block;
  padding: 20px;
  padding-top: 8px;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
  background-color: #f5f5f5;
  border-right: 1px solid #eee;
        width: 200px;

}
.nav-sidebar {
  margin-right: -21px; /* 20px padding + 1px border */
  margin-bottom: 0;
  margin-left: -20px;
}
.nav-sidebar > li > a {
  padding: 1px 20px;
  font-size: 13px;
}
.nav-sidebar > li > h5 {
  padding: 3px 20px;
  
  color: #555;
  margin: 0;
  margin-bottom: 3px;
  padding-bottom: 1px;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  font-weight: 400;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}
.nav-sidebar > li > a:before {
  content: '» ';
}

.navbar-collapse .btn-primary {
  background-color: #366382;
}

.main {
  padding: 20px;
  margin-top: 20px;
}
.main h1:first-of-type {
  margin-top: 0;
}
.progress {
  margin-bottom: 0;
}
.rotate45 {
  position: relative;
  width: 75px;
}
.rotate45 a {
  transform: rotate(315deg);
  transform-origin: 0 100% ;
  position: absolute;
  display: inline-block;
  text-align: left;
  width: 80px;
  border-bottom: 2px solid #ccc;
  left: 70px;
  bottom: 0;
  white-space: nowrap;
}

/* */
.panel-info > .panel-heading {
  background: #80cee9 !important;
}

.panel-info {
  border-color: #80cee9 !important;
}


/* callouts */
.bs-callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}
.bs-callout .close {
  margin-top: -8px;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}
.bs-callout code {
  border-radius: 3px;
}
.bs-callout+.bs-callout {
  margin-top: -5px;
}
.bs-callout-default {
  border-left-color: #777;
}
.bs-callout-default h4 {
  color: #777;
}
.bs-callout-primary {
  border-left-color: #428bca;
}
.bs-callout-primary h4 {
  color: #428bca;
}
.bs-callout-success {
  border-left-color: #5cb85c;
}
.bs-callout-success h4 {
  color: #5cb85c;
}
.bs-callout-danger {
  border-left-color: #d9534f;
}
.bs-callout-danger h4 {
  color: #d9534f;
}
.bs-callout-warning {
  border-left-color: #f0ad4e;
}
.bs-callout-warning h4 {
  color: #f0ad4e;
}
.bs-callout-info {
  border-left-color: #5bc0de;
}
.bs-callout-info h4 {
  color: #5bc0de;
}

.overflow-ellipsis {
  max-width: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.no-wrap-give-way {
  white-space: nowrap;
  width: 1px;
}

    .alert{
        border: none;
        border-left: 3px solid;
        border-radius: 0px;
    }

    .max-width{
        max-width: 800px;
    }

    .form-group .control-label{
        font-weight: normal;
    }

    .form-group.required .control-label {
        font-weight: bold;
    }

    .select2-container--bootstrap .select2-results > .select2-results__options {
        max-height: 210px;
    }

    .tooltip-inner{
        max-width: 600px;
        text-align: left;
        background-color: #f3eeee;
        color: #000;
        font-size: 14px;
    }

    .ck.ck-editor__editable_inline{
        padding: 0px !important;
    }

    .ck-content{
        background-color: rgba(0, 241, 255, 0.11);
    }

    .text-block h2{
        margin-top: 0px;
        font-size: 20px;
    }

    .numbered-form-head {
border-bottom: 1px solid #ccc;
border-radius: 0 0 0 16px;
    }

    .numbered-form-head .badge {
        display: inline-block;
        background-color: #000;
        line-height: 14px;
        font-size: 22px;
        border-radius: 30px;
        width: 30px;
        padding: 10px;
    }

    .dash-label {
        font-size: 1.2em;
        display: block;
        line-height: 1em;
        font-weight: bold;
    }

    .dash-value {
        font-size: 3em;
        display: block;
        font-weight: bold;
        line-height: 1em;
        padding-bottom: 4px;
    }

    .form-filter .control-label {
        text-align: left;
        padding-left: 0px;
    }
    .form-filter .form-group{
        margin-left: 0px;
        margin-right: 0px;
    }
    .form-filter{
        margin-bottom: 20px;
        border-bottom: 1px solid #cecece;
        padding-bottom: 10px;
    }
    .form-filter .form-inline{
        margin-bottom: 5px;
    }
    .floatThead-table thead{
        background-color: white;
    }

    .read_only_field {
        opacity : .80;
        background-color: light-gray;
        filter  : alpha(opacity=50); /* IE<9 */
        cursor  : default;
    }
    textarea { vertical-align: top; }​

    .font-weight-bold{
        font-weight: bold;
    }

    .table-fixed{
        table-layout: fixed;
    }

    .diff-plus{
        font-size: 0.8em;
        color: rgba(0,205,0,0.4);

    }
    .diff-minus{
        font-size: 0.8em;
        color: rgba(205, 0, 25, 0.4);

    }
    .negative{
        color: rgb(255, 0, 0);
    }

.float-green{
  position:fixed;
  height:56px;
  top:320px;
  right:0px;
  background-color:green;
  color:#FFF;
  text-align:center;
  box-shadow: 2px 2px 3px #999;
    display: inline-flex;
    align-items: center;
    overflow:hidden;
    width: auto;
    max-width: 56px; /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
    -webkit-transition: max-width 0.5s;
    transition: max-width 0.5s;
    z-index: 999;
}

.float-yellow{
  position:fixed;
  height:56px;
  top:250px;
  right:0px;
  background-color:orange;
  color:#FFF;
  text-align:center;
  box-shadow: 2px 2px 3px #999;
    display: inline-flex;
    align-items: center;
    overflow:hidden;
    width: auto;
    max-width: 56px; /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
    -webkit-transition: max-width 0.5s;
    transition: max-width 0.5s;
    z-index: 999;
}

.float-red{
  position:fixed;
  height:56px;
  top:390px;
  right:0px;
  background-color:red;
  color:#FFF;
  text-align:center;
  box-shadow: 2px 2px 3px #999;
    display: inline-flex;
    align-items: center;
    overflow:hidden;
    width: auto;
    max-width: 56px; /** I'm animating max-width because width needs to be auto, and auto can't be animated **/
    -webkit-transition: max-width 0.5s;
    transition: max-width 0.5s;
    z-index: 999;
}

.float-green:hover {
    max-width: 300px;
}
.float-yellow:hover {
    max-width: 300px;
}
.float-red:hover {
    max-width: 300px;
}

.float-icon {
    font-size: 26px;
    margin-right: 7px;
    padding: 0px 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    color:#FFF;
}

.float-text {
    white-space: nowrap;
    font-size: 15px;
    padding-right: 25px;
    color:#FFF;
}

.list-group-item {
    padding: 10px 15px 1px 20px;
}

label[for="id_user_address"], #id_user_address {
  display: none;
}

.sm-trial-notice {
  margin-top: 1rem;
}
.sm-trial-notice .btn {
  margin-right: .5rem;
}
.explain-panel {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f9f9f9;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.explain-heading {
  font-weight: 700;
  color: #c0392b;
  border-bottom: 2px solid #c0392b;
  padding-bottom: 8px;
  margin-bottom: 16px;
  font-size: 18px;
}
.explain-panel p {
  margin-bottom: 12px;
  line-height: 1.6;
}
.explain-panel ul {
  margin-left: 20px;
  margin-bottom: 12px;
}
.explain-panel strong {
  font-weight: 600;
}



/* Sticky header for modal tables */
.modal-table-sticky thead th {
    position: sticky;
    top: -16px;
    background-color: #f8f9fa;
    z-index: 1;
    white-space: normal;
    word-wrap: break-word;
    max-width: 120px;
    font-size: 0.85em;
}