i.mms-icon-ellipsis:before                                      { content: "\E224" }

$transitionSpeed: 300ms;

$wrapperPaddingTop: 40px;

.csv-item:after {
  content: ', ';
}
.csv-item:last-of-type:after {
  content: '';
}

.with-new-layer {
  transform : translateZ(0);
}

html, body {
  height: 100%;
}

.default-margins {
  margin: 15px;
}

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  justify-content: space-between;

  height: 100%;
  transition: all $transitionSpeed ease;
  padding-top: $wrapperPaddingTop;
  padding-left: 260px;

  &.no-sub-nav {
    padding-left: 80px;

    .page {
      background: $pw;
    }
    .container {
      padding: 0;
      background: $pw;
      margin: 0;
    }
    .side-sub-nav {
      display: none!important;
    }
  }
}

i[class^="fa-"] {
  -moz-osx-font-smoothing: grayscale;
}

i[class^="mms-icon-"],
i[class^="mms-icon-"] i {
  font-family: "MMS Icons";
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  font-weight: normal !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTJBQkFGRUZFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTJBQkFGRjBFOTIyMTFFMEJDRDNEQzkxOTVGOTNBODAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5MkFCQUZFREU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5MkFCQUZFRUU5MjIxMUUwQkNEM0RDOTE5NUY5M0E4MCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtrV+I8AAAAQSURBVHjaYvj//z8DQIABAAj8Av7bok0WAAAAAElFTkSuQmCC',sizingMethod=crop);
  zoom: 1;
  -webkit-transition: all 200ms ease;
     -moz-transition: all 200ms ease;
       -o-transition: all 200ms ease;
          transition: all 200ms ease;
}

.register h2 {
  i[class^="mms-icon-"] {
    font-size: 32px;
    margin-right: 15px;
  }
}

i.mms-icon-rocketbot,
i.mms-icon-snowbot,
i.mms-icon-medium-cloud {
  font-size: 64px;
}

i[class^="mms-icon-deployment-location-"],
i.mms-icon-bigplay,
i.mms-icon-bookshelf,
i.mms-icon-desktop,
i[class^="mms-icon-import-existing-"],
i[class^="mms-icon-build-new-"],
i.mms-icon-big-check,
i[class^="mms-icon-big-"] {
  font-size: 128px;
}

i[class^="mms-icon-"] {
  position: relative;
  &:after, i {
    position: absolute;
    top: 0;
    left: 0;
  }
  &[class$="-add"] i          { color: $green2;       &:before        { content: "\E085" } }
  &[class$="-remove"] i       { color: $errorText;    &:before        { content: "\E086" } }
  &[class$="-edit"] i         { color: $warningText;  &:before        { content: "\E087" } }
  &[class$="-exclamation"] i  { color: $warningText;  &:before        { content: "\E098" } }
  &[class$="-restart"] i      { color: $alertBlue;    &:before        { content: "\E089" } }
  &[class$="-selected"]       { color: $gray1; }

  &[class*="-down"],
  &[class*="-fatal"],
  &[class*="-shunned"],
  &[class*="-unknown"] {
    color: $errorText;
    &[class$="-selected"] { color: $errorText; }
  }

  /* color for startup states */
  &[class*="-startup"],
  &[class*="-startup2"],
  &[class*="-rollback"],
  &[class*="-recovering"] {
   color: $warningText;
   &[class$="-selected"] { color: $warningText; }
  }
}
i[class^="mms-icon-group-"] {
  &[class$="-add"] i:before                                     { content: "\E090" }
  &[class$="-remove"] i:before                                  { content: "\E091" }
  &[class$="-edit"] i:before                                    { content: "\E092" }
  &[class$="-restart"] i:before                                 { content: "\E094" }
}
i[class^="mms-icon-mongos-"],
i[class^="mms-icon-configsvr-"] {
  &[class$="-add"] i:before                                     { content: "\E095" }
  &[class$="-remove"] i:before                                  { content: "\E096" }
  &[class$="-edit"] i:before                                    { content: "\E097" }
  &[class$="-exclamation"] i:before                             { content: "\E098" }
  &[class$="-restart"] i:before                                 { content: "\E099" }
}
i[class^="mms-icon-wrench-"] {
  &[class$="-add"] i:before                                     { content: "\E078" }
  &[class$="-remove"] i:before                                  { content: "\E079" }
  &[class$="-edit"] i:before                                    { content: "\E080" }
  &[class$="-exclamation"] i:before                             { content: "\E081" }
  &[class$="-restart"] i:before                                 { content: "\E082" }
}
i[class^="mms-icon-configsvr-primary"],
i[class^="mms-icon-configsvr-secondary"],
i[class^="mms-icon-configsvr-nostate"],
i[class^="mms-icon-configsvr-down"],
i[class^="mms-icon-configsvr-shunned"],
i[class^="mms-icon-configsvr-hidden"],
i[class^="mms-icon-configsvr-recovering"],
i[class^="mms-icon-configsvr-delayed"],
i[class^="mms-icon-configsvr-arbiter"],
i[class^="mms-icon-configsvr-rollback"],
i[class^="mms-icon-configsvr-startup"],
i[class^="mms-icon-configsvr-fatal"],
i[class^="mms-icon-configsvr-unknown"] {
  &[class$="-add"] i:before                                     { content: "\E085" }
  &[class$="-remove"] i:before                                  { content: "\E086" }
  &[class$="-edit"] i:before                                    { content: "\E087" }
  &[class$="-exclamation"] i:before                             { content: "\E088" }
  &[class$="-restart"] i:before                                 { content: "\E089" }
}
i[class^="mms-icon-configsvr-"] {
  &[class$="-primary"]:before                                   { content: "\E040" }
  &[class$="-secondary"]:before                                 { content: "\E042" }
  &[class$="-nostate"]:before                                   { content: "\E038" }

  &[class*="-primary"]:after,
  &[class*="-secondary"]:after,
  &[class*="-nostate"]:after,
  &[class*="-down"]:after,
  &[class*="-shunned"]:after,
  &[class*="-hidden"]:after,
  &[class*="-recovering"]:after,
  &[class*="-delayed"]:after,
  &[class*="-arbiter"]:after,
  &[class*="-startup"]:after,
  &[class*="-startup2"]:after,
  &[class*="-rollback"]:after,
  &[class*="-fatal"]:after,
  &[class*="-unknown"]:after                                    { content: "\E084" }

  &[class*="-primary-"]:before                                  { content: "\E041" }
  &[class*="-secondary-"]:before                                { content: "\E043" }
  &[class*="-nostate-"]:before                                  { content: "\E039" }
  &[class*="-down-"]:before                                     { content: "\E046" }
  &[class*="-shunned-"]:before                                  { content: "\E049" }
  &[class*="-hidden-"]:before                                   { content: "\E052" }
  &[class*="-recovering-"]:before                               { content: "\E055" }
  &[class*="-delayed-"]:before                                  { content: "\E058" }
  &[class*="-arbiter-"]:before                                  { content: "\E061" }
  &[class*="-startup-"]:before                                  { content: "\E064" }
  &[class*="-startup2-"]:before                                 { content: "\E064" }
  &[class*="-rollback-"]:before                                 { content: "\E067" }
  &[class*="-fatal-"]:before                                    { content: "\E070" }
  &[class*="-unknown-"]:before                                  { content: "\E073" }

  &[class$="-secondary-selected"]:before                        { content: "\E044" }
  &[class$="-down-selected"]:before                             { content: "\E047" }
  &[class$="-shunned-selected"]:before                          { content: "\E050" }
  &[class$="-hidden-selected"]:before                           { content: "\E053" }
  &[class$="-recovering-selected"]:before                       { content: "\E056" }
  &[class$="-delayed-selected"]:before                          { content: "\E059" }
  &[class$="-arbiter-selected"]:before                          { content: "\E062" }
  &[class$="-startup-selected"]:before                          { content: "\E065" }
  &[class$="-startup2-selected"]:before                         { content: "\E065" }
  &[class$="-rollback-selected"]:before                         { content: "\E068" }
  &[class$="-fatal-selected"]:before                            { content: "\E071" }
  &[class$="-unknown-selected"]:before                          { content: "\E074" }

}
i[class^="mms-icon-nostate-"]:before                            { content: "\E100" }
i[class^="mms-icon-startup-"]:before                            { content: "\E101" }
i[class^="mms-icon-primary-"]:before                            { content: "\E102" }
i[class^="mms-icon-secondary-"]:before                          { content: "\E103" }
i[class^="mms-icon-arbiter-"]:before                            { content: "\E104" }
i[class^="mms-icon-hidden-s-"]:before                           { content: "\E105" }
i[class^="mms-icon-delayed-"]:before                            { content: "\E106" }
i[class^="mms-icon-recovering-"]:before                         { content: "\E107" }
i[class^="mms-icon-down-"]:before                               { content: "\E108" }
i[class^="mms-icon-fatal-"]:before                              { content: "\E109" }
i[class^="mms-icon-shunned-"]:before                            { content: "\E110" }
i[class^="mms-icon-rollback-"]:before                           { content: "\E111" }
i[class^="mms-icon-unknown-"]:before                            { content: "\E112" }
i[class^="mms-icon-standalone-"]:before                         { content: "\E130" }
i[class^="mms-icon-replica-set-"]:before                        { content: "\E131" }
i[class^="mms-icon-replica-set-configsvr"]:before               { content: "\E144" }
i[class^="mms-icon-cluster-"]:before                            { content: "\E132" }
i[class^="mms-icon-mongos-"]:before                             { content: "\E133" }
i[class^="mms-icon-configsvr-"]:before                          { content: "\E134" }
i[class^="mms-icon-automation-"]:before                         { content: "\E135" }
i[class^="mms-icon-backup-"]:before                             { content: "\E136" }
i[class^="mms-icon-monitoring-"]:before                         { content: "\E137" }
i[class^="mms-icon-group-"]:before                              { content: "\E138" }
i[class^="mms-icon-user-"]:before                               { content: "\E139" }
i[class^="mms-icon-role-"]:before                               { content: "\E140" }
i[class^="mms-icon-leaf-"]:before                               { content: "\E141" }
i[class^="mms-icon-server-"]:before                             { content: "\E142" }
i[class^="mms-icon-wrench-"]:before                             { content: "\E231" }

i.mms-icon-nostate:before                                       { content: "\E000" }
i.mms-icon-startup:before                                       { content: "\E001" }
i.mms-icon-startup-selected:before                              { content: "\E002" }
i.mms-icon-startup2:before                                      { content: "\E001" }
i.mms-icon-startup2-selected:before                             { content: "\E002" }

i.mms-icon-primary:before                                       { content: "\E004" }
i.mms-icon-primary-selected:before                              { content: "\E004" }
i.mms-icon-secondary:before                                     { content: "\E005" }
i.mms-icon-secondary-selected:before                            { content: "\E006" }
i.mms-icon-arbiter:before                                       { content: "\E007" }
i.mms-icon-arbiter-selected:before                              { content: "\E008" }
i.mms-icon-hidden-s:before                                      { content: "\E009" }
i.mms-icon-hidden-s-selected:before                             { content: "\E010" }
i.mms-icon-delayed:before                                       { content: "\E011" }
i.mms-icon-delayed-selected:before                              { content: "\E012" }
i.mms-icon-recovering:before                                    { content: "\E013" }
i.mms-icon-recovering-selected:before                           { content: "\E014" }
i.mms-icon-down:before                                          { content: "\E015" }
i.mms-icon-down-selected:before                                 { content: "\E016" }
i.mms-icon-fatal:before                                         { content: "\E017" }
i.mms-icon-fatal-selected:before                                { content: "\E018" }
i.mms-icon-shunned:before                                       { content: "\E019" }
i.mms-icon-shunned-selected:before                              { content: "\E020" }
i.mms-icon-rollback:before                                      { content: "\E021" }
i.mms-icon-rollback-selected:before                             { content: "\E022" }
i.mms-icon-unknown:before                                       { content: "\E023" }
i.mms-icon-unknown-selected:before                              { content: "\E024" }
i.mms-icon-standalone:before                                    { content: "\E030" }
i.mms-icon-replica-set:before                                   { content: "\E031" }
i.mms-icon-replica-set-configsvr:before                         { content: "\E143" }
i.mms-icon-replica-set-configsvr:after                          { content: "\E084" }
i.mms-icon-cluster:before                                       { content: "\E032" }
i.mms-icon-mongos:before                                        { content: "\E033" }
i.mms-icon-configsvr:before                                     { content: "\E034" }

i.mms-icon-configsvr-down:before                                { content: "\E045" }
i.mms-icon-configsvr-shunned:before                             { content: "\E048" }
i.mms-icon-configsvr-hidden:before                              { content: "\E051" }
i.mms-icon-configsvr-recovering:before                          { content: "\E054" }
i.mms-icon-configsvr-delayed:before                             { content: "\E057" }
i.mms-icon-configsvr-arbiter:before                             { content: "\E060" }
i.mms-icon-configsvr-startup:before                             { content: "\E063" }
i.mms-icon-configsvr-startup2:before                            { content: "\E063" }
i.mms-icon-configsvr-rollback:before                            { content: "\E066" }
i.mms-icon-configsvr-fatal:before                               { content: "\E069" }
i.mms-icon-configsvr-unknown:before                             { content: "\E072" }

i.mms-icon-addcenter:before                                     { content: "\E083" }
i.mms-icon-addtopright:before                                   { content: "\E085" }
i.mms-icon-removetopright:before                                { content: "\E086" }
i.mms-icon-edittopright:before                                  { content: "\E087" }
i.mms-icon-exclamationtopright:before                           { content: "\E088" }
i.mms-icon-restarttopright:before                               { content: "\E089" }

i.mms-icon-addbottomleft:before                                 { content: "\E090" }
i.mms-icon-removebottomleft:before                              { content: "\E091" }
i.mms-icon-editbottomleft:before                                { content: "\E092" }
i.mms-icon-exclamationbottomleft:before                         { content: "\E093" }
i.mms-icon-restartbottomleft:before                             { content: "\E094" }

i.mms-icon-addtopleft:before                                    { content: "\E095" }
i.mms-icon-removetopleft:before                                 { content: "\E096" }
i.mms-icon-edittopleft:before                                   { content: "\E097" }
i.mms-icon-exclamationtopleft:before                            { content: "\E098" }
i.mms-icon-restarttopleft:before                                { content: "\E099" }

i.mms-icon-dragtopleft:before                                   { content: "\E200" }
i.mms-icon-bell:before                                          { content: "\E201" }
i.mms-icon-list:before                                          { content: "\E202" }
i.mms-icon-topology:before                                      { content: "\E203" }
i.mms-icon-cloud:before                                         { content: "\E204" }
i.mms-icon-lock:before                                          { content: "\E205" }
i.mms-icon-laptop:before                                        { content: "\E206" }
i.mms-icon-office:before                                        { content: "\E207" }
i.mms-icon-floppy:before                                        { content: "\E208" }
i.mms-icon-support1:before                                      { content: "\E209" }
i.mms-icon-support2:before                                      { content: "\E210" }
i.mms-icon-add:before                                           { content: "\E211" }
i.mms-icon-remove:before                                        { content: "\E212" }
i.mms-icon-check:before                                         { content: "\E213" }
i.mms-icon-creditcard:before                                    { content: "\E214" }
i.mms-icon-graph:before                                         { content: "\E215" }
i.mms-icon-api:before                                           { content: "\E216" }
i.mms-icon-2fa:before                                           { content: "\E217" }
i.mms-icon-smartphone:before                                    { content: "\E218" }
i.mms-icon-continuous:before                                    { content: "\E219" }
i.mms-icon-pointintime:before                                   { content: "\E220" }
i.mms-icon-hammer:before                                        { content: "\E221" }
i.mms-icon-edit:before                                          { content: "\E222" }
i.mms-icon-umbrella:before                                      { content: "\E223" }
i.mms-icon-ellipsis:before                                      { content: "\E224" }
i.mms-icon-dragleft:before                                      { content: "\E225" }
i.mms-icon-list-skinny:before                                   { content: "\E226" }
i.mms-icon-wrench:before                                        { content: "\E227" }
i.mms-icon-grid:before                                          { content: "\E228" }
i.mms-icon-ssl:before                                           { content: "\E229" }
i.mms-icon-auth:before                                          { content: "\E230" }
i.mms-icon-modify:before                                        { content: "\E227" }
i.mms-icon-metrics:before                                       { content: "\E232" }
i.mms-icon-back:before                                          { content: "\E233" }
i.mms-icon-surprisedface:before                                 { content: "\E234" }
i.mms-icon-sadface:before                                       { content: "\E235" }
i.mms-icon-deadface:before                                      { content: "\E236" }
i.mms-icon-automation:before                                    { content: "\E300" }
i.mms-icon-backup:before                                        { content: "\E301" }
i.mms-icon-monitoring:before                                    { content: "\E302" }
i.mms-icon-group:before                                         { content: "\E303" }
i.mms-icon-user:before                                          { content: "\E304" }
i.mms-icon-role:before                                          { content: "\E305" }
i.mms-icon-leaf:before                                          { content: "\E306" }
i.mms-icon-databases:before                                     { content: "\E307" }
i.mms-icon-database:before                                      { content: "\E308" }
i.mms-icon-servers:before                                       { content: "\E309" }
i.mms-icon-server:before                                        { content: "\E310" }
i.mms-icon-dashboard:before                                     { content: "\E311" }
i.mms-icon-setup:before                                         { content: "\E312" }
i.mms-icon-settings:before                                      { content: "\E313" }
i.mms-icon-activity:before                                      { content: "\E314" }
i.mms-icon-ops-manager:before                                   { content: "\E315" }
i.mms-icon-desktop:before                                       { content: "\E400" }
i.mms-icon-deployment-location-laptop:before                    { content: "\E401" }
i.mms-icon-deployment-location-servers:before                   { content: "\E402" }
i.mms-icon-deployment-location-aws:before                       { content: "\E403" }
i.mms-icon-bigplay:before                                       { content: "\E404" }
i.mms-icon-bookshelf:before                                     { content: "\E405" }
i.mms-icon-build-new-01:before                                  { content: "\E406" }
i.mms-icon-import-existing-01:before                            { content: "\E407" }
i.mms-icon-build-new-02:before                                  { content: "\E408" }
i.mms-icon-import-existing-02:before                            { content: "\E409" }
i.mms-icon-big-check:before                                     { content: "\E410" }

i.mms-icon-big-refresh:before                                   { content: "\E411" }
i.mms-icon-big-error:before                                     { content: "\E412" }
i.mms-icon-big-warning:before                                   { content: "\E413" }
i.mms-icon-big-cloud:before                                     { content: "\E414" }

i.mms-icon-logo-amazon:before                                   { content: "\E500" }
i.mms-icon-logo-ubuntu:before                                   { content: "\E501" }
i.mms-icon-logo-apple:before                                    { content: "\E502" }
i.mms-icon-logo-linux:before                                    { content: "\E503" }
i.mms-icon-logo-windows:before                                  { content: "\E504" }
i.mms-icon-logo-redhat:before                                   { content: "\E505" }
i.mms-icon-rocketbot:before                                     { content: "\F006" }
i.mms-icon-snowbot:before                                       { content: "\F007" }
i.mms-icon-medium-cloud:before                                  { content: "\F010" }

.mongod,
.mongos {
  display: inline-block;
}
/* color for error states */

i.mms-icon-surprisedface {
  color: $warningText;
}

i.mms-icon-sadface {
  color: $alertRedDark;
}

i.mms-icon-deadface {
  color: $errorText;
}

.down,
.fatal,
.shunned,
.unknown {
  i.mms-icon-mongod {
    color: $errorText;
  }
}

i.mms-icon-wrench-exclamation {
  color: $gray5;
}

.startup,
.startup2,
.rollback,
.recovering {
  i.mms-icon-mongod {
    color: $warningText;
  }
}

i.mms-icon-addcenter {
  color: $green2;
}

.aws-logo {
  display: inline-block;
  width: 115px;
  height: 58px;
  background: url('/static/images/aws-logo.gif') center center no-repeat;
  background-size: 115px 45px;
  text-indent: -9999em;
  overflow: hidden;
}

.has-shadow {
  border: 1px solid $gray7;
}

.highlight {
  color: $green2;
}

.mms-icon-stack {
  i[class^="mms-icon-"] {
    font-family: "MMS Icons";
    font-style: normal;
    font-weight: normal;
    -webkit-transition: color 0.2s ease-out;
       -moz-transition: color 0.2s ease-out;
         -o-transition: color 0.2s ease-out;
            transition: color 0.2s ease-out;
    position: absolute;
    margin: auto;
    top:0;right:0;bottom:0;left:0;
    font-size: 136px;
  }
  height: 108px;
  width: 100%;
  display: inline-block;
  position: relative;
  font-size: 136px;
  line-height: 1;
  display: inline-block;
  text-align: center;
  i {
    color: $purple1;
  }
  i:first-child {
    color: $purple3;
  }
  i.mms-icon-backup0:before          { content: "\F000" }
  i.mms-icon-backup1:before          { content: "\F001" }
  i.mms-icon-monitoring0:before      { content: "\F002" }
  i.mms-icon-monitoring1:before      { content: "\F003" }
  i.mms-icon-automation0:before      { content: "\F004" }
  i.mms-icon-automation1:before      { content: "\F005" }

}

.from-automation h3#notifyMessage {
  color: $green2;
}

.status-text {
  color: $gray4;
  font-style: italic;
  font-size: 12px;
  margin-top: -10px;
  padding-left: 11px;
  &.verified {
    color: $green2;
  }
}

.normal-height {
  line-height:normal;
}

/* ************************************************************* */
/* ONLY FOR MOBILE PHONES SIMULATING SMALL DESKTOP WIDTHS!!!!!!! */
/* ************************************************************* */
body.mobile-phone {
  padding-top: 0;

  #wrapper { min-width: 1024px; }
  main { padding-top: 0; }
  .side-sub-nav {
    position: absolute;
    min-height: 600px;
    box-shadow: 0 0 3px 0 transparent; // hack for strange black border that mobile safari renders for no reason
  }
  header #fixedHostHeader { display: none!important; }
}
/* ************************************************************* */

.group-select-holder {
  margin: 8px 15px 0;
  float: left;
  border-right: 1px solid $gray7;

  .group-select-label {
    display: inline-block;
    color: $gray4;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
  }

  #changeCustomerLabel, label.group-select-label {
    cursor: default;
  }

  #changeCustomer, a.change-customer:not([hidden]) {
    color: $green2;
    position: relative;
    display: inline-block;
    z-index: 100;
    white-space: nowrap;
    cursor: pointer;
    line-height: 1;
    padding: 5px 10px;
    margin-right: 14px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;

    &:hover, &.open {
      background: $gray8;
      text-decoration: none;
    }

    &.open {
      background: $gray7;
    }
  }

  #changeCustomerFew, select[name=changeCustomerFew] {
    height: 22px;
    width: 150px;
    margin: 5px 0 1px 5px;
    padding: 0 2px 0 2px;
  }

  #currentGroup, span.current-group {
    display: inline-block;
    color: $gray1;
    padding: 5px 10px;
  }

  #customerNameInput {
    display: none;
    position: relative;
    width: 130px;
    margin: 2px 0 0 0;
    padding: 2px 5px;
    text-align: left;
    box-shadow: inset 0 1px 0 1px rgba(0,0,0,0.08);
    border: 1px solid $gray6;
  }
}

.btn.tabButton {
  background: transparent;
  padding: 3px;
  line-height: 10px;
  margin-right: -4px;
  margin-bottom: -1px;
  border: none;

  &:hover {
    background: darken($gray7, 5%);
  }
}

.btn-is-inline-link {
  padding: 0px;
}

.dropdown i.fa-cog {
  margin-right: 0;
  margin-left: 1px;
  color: $subNavText;
}
.dropdown :not(.btn-primary) i.fa-caret-down {
  font-size: 12px;
  color: $mutedText;
}

.nav-tabs {
  margin: 0 0 -2px;
}

.nav-tabs li a {
  display: inline-block;
}

.admin .nav-tabs {
  margin-bottom: 10px;
}

/* ***************************** */
/* ****** Settings Styles ****** */
/* ***************************** */

.application-layout {
  .register {
    .container {
      max-width: 960px;
      margin: 0;
      padding-right: 260px;
      padding-left: 0;
      margin-top: 30px;
      h4 {
        font-size: 24px;
        margin-top: 0;
        line-height: 1;
        i {
          display: none;
        }
      }
    }
  }
}

table.dashboardServer label.checkbox {
  display: block;
}

.backgrid>tbody>tr.danger {
  background-color: #f2dede;
}

// new styles
//////////////////////
/*Credit Card Form*/
.billing-method,
.register form {
  label {
    margin-top: 12px;
  }
  .checkbox-inline label {
    margin-top: 0;
  }
}
.address-info,
.cc-info {
  margin-bottom: 24px;
}
label[for="addressOne"] {
  display: block;
  span {
    font-weight: normal;
    height: 20px;
  }
}
.cc-icons {
  img {
    height: 24px;
    margin-right: 5px;
  }
}
h4.cc-form {
  margin: 17px 0 13px 0;
}
form .expiration input {
  width: 60px;
  margin-right: 6px;
  display: inline-block;
}
form .expiration label {
  display: block;
}
/*END Credit Card Form*/
h3.settings-sub-head,
h3.sub-head {
  font-size: 12px;
  font-weight: bold;
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 8px 0;
  border-top: 2px solid $gray7;
  border-bottom: 2px solid $gray7;
}
.register h3.sub-head {
  margin-top: 18px;
}

// settings row components
.settings-row {
  margin-bottom: 20px;

  .settings-key {
    font-size: 18px;
    font-weight: 200;
    margin-bottom: 20px;
  }
  .settings-status-group {
    text-align: right;

    &.uneditable {
      margin-right: 26px;
    }
  }
  .settings-value {
    display: inline-block;
    font-size: 14px;
    vertical-align: top;

    .has-switch {
      margin-bottom: -10px;
    }
  }
  .settings-enable-mfa {
      appearance: none;
      background: none;
      border: none;
      color: $linkText;

      &:hover {
          text-decoration: underline;
      }
  }
  .settings-edit-button {
    display: inline-block;
    margin-top: -3px;
  }
  .settings-save-status {
    display: inline-block;
    width: 20px;
    text-align: center;
  }
  .settings-description {
    font-size: 13px;
    color: $mutedText;
    margin-bottom: 20px;

    &:first-of-type {
      margin-top: -15px;
    }
  }

  // TODO: remove legacy class and use of mixin once Settings V1 is decommissioned.
  @mixin settings-editor-layout-mixin {
    margin-top: -10px;

    label {
      font-size: 13px;
    }
  }

  // legacy class
  .edit-settings {
    @include settings-editor-layout-mixin();
    .form-control {
      width: 33%;
    }
  }

  // v2
  .settings-editor {
    @include settings-editor-layout-mixin();

    &-editable-text input[type=text],
    &-password-change input[type=password] {
      width: 33%;
    }
  }

  &:after {
    content: "";
    display: block;
    margin: 0 15px;
    border-bottom: 1px solid $gray8;
  }

  .mfa-edit-settings {
    .well {
      padding-bottom: 50px;
    }

    .form-control {
      width: 100%;
    }
  }

  .addAutomationProvider,
  .addSSHPublicKey,
  .addApiWhitelistBtn {
    margin-top: -35px;
  }

  .addAutomationProvider {
    i {
      color: white;
    }
  }
}

.instruction-modal-graphic {
  width: 100%;
}

.instruction-modal-text {
  padding-top: 30px;
}

.uploadInstructions {
  padding: 0;
}

.role-in-progress {
  color: $mutedText;
  font-style: italic;
}

.well-footer {
  border-top: 1px solid $gray7;
  padding: 18px 0 0 0;
  text-align: right;
}

.well-sm .well-footer {
  padding: 9px 0 0 0;
}

.legacy-agent-logs-table {
  margin-top: -37px;

  .well {
    margin-top: 50px;
  }

  .active-filters {
    display: inline-block;
    margin: 0 0 0 195px;
  }
}

/* ************************************/
/* TOS */
/* ************************************/

#tosDiv {
    h2 {
        font-size: 20px;
        font-weight: bold;
        font-family: "Akzidenz", "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 20px 0 10px 0;
    }
}

/* ************************************/
/* Billing and Subscriptions settings */
/* ************************************/

.free-tier-upgrade,
.new-group-info,
.upgrade-success,
.upgrade-body {

  i.mms-icon-big-warning,
  i.mms-icon-big-error,
  i.mms-icon-big-check {
    float: left;
    margin: 0 24px 24px 24px;
  }

  ul {
    list-style: none;
    font-size: 18px;
    margin-left: 0;
    padding-left: 0;
  }

  p:not(.muted),
  .upgrade-title {
    font-size: 16px;
  }

  .upgrade-title {
    padding-top: 12px;
  }

  .plans {
    margin: 24px 0 36px 0;
    h1.upgrade-price {
      font-size: 48px;
      line-height: 1;
      margin-top: 14px;
    }
    p {
      line-height: 1;
      margin-bottom: 14px;
    }
  }
}

.upgrade-success {
  overflow: auto;
}

.upgrade-icon {
    margin: 24px;
  }

.upgrade-close i.mms-icon-remove {
  font-size: 32px;
}

.classic-new {
  p.upgrade-title {
    margin-bottom: 0;
  }
  h1 {
    line-height: 1;
    margin: 6px 0;
  }
}

.credits {
  .settings-sub-head {
    margin-top: 10px;
    font-size: 14px;
  }
}

/* Usage Summary Styles */

#usageSummaryDiv, .usage-summary {
  margin-top: 40px;

  .row {
    .label {
      margin-right: 10px;
    }
  }

  .settings-sub-head {
    margin-top: 20px;
  }

  h4 {
    margin-bottom: 20px;
  }
}

/* Invoice Styles */

.invoice-summary-shard-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}


/* ***************************** */
/* ******* Header Styles ******* */
/* ***************************** */
header {
  margin: 15px 0 20px;

  h1 {
    display: inline-block;
    margin: 0;
    font-weight: 200;
    font-size: 24px;
  }

  .btn-sm.pull-right {
    margin-top: 2px;
  }

  .align-with-title { // replace with btn-small.pull-right
    padding: 2px 8px 0;
    margin: -12px 0 0 10px;
    font-size: 13px;
  }

  .align-with-title.btn-icon-only { // replace with btn-small.pull-right
    font-size: 14px;
    padding: 4px 6px;
  }

  .for {
    display: inline-block;
    margin: 0 5px;
    color: $mutedText;
    font-style: italic;
  }

  #fixedHostHeader {
    position: fixed;
    display: none;
    z-index: 100;
    top: 40px;
    left: 260px;
    right: 0;
    background-color: $pw;
    box-shadow: 0 3px 0 0 rgba(0,0,0,0.1);
    border-bottom: 1px solid #ccc;
    padding: 10px 15px;
    transition: left $transitionSpeed ease;
    -webkit-transition: left $transitionSpeed ease;
    @extend .with-new-layer;
  }
}

#wrapper.nav-collapsed header #fixedHostHeader { // account for collapsed sub-nav
  left: 80px;
}

.admin header{
  margin: 15px 0;
  h1 {
    font-size: 28px;
  }
}

.alert.alert-header {
  padding: 5px 10px;
  margin-bottom: 0;
  margin-top: -3px;
  color: $gray0;
  background-color: $gray8;
  border: none;
}

/* ***************************** */
/* ******* Dialog Styles ******* */
/* ***************************** */

#chartDetailDialog > .modal-dialog {
  width: 90%;
}

#chartDetailDialog .container {
  height: 360px;
}

#chartDetail {
  z-index : 10002;
  width: 100%;
}

#chartDetailLabel {
  height: 20px;
  background-color: $pw;
  font-size: 9px;
  text-align: center;
}

#addAlertModal .modal-body {
  max-height: 450px;
}

.roleDescriptions {
  border: 1px solid $gray6;
  padding: 15px;
}

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

// Break long lines for Trace Modal for AgentLogs
.modal.trace {
  .modal-dialog {
    width: 880px;
    p {
      word-break: break-word;
    }
  }
}

#tutorialModal {
  ol {
    padding-left: 24px;
    li {
      margin-bottom: 6px;
    }
  }
}

.backup.modal-download,
.monitoring.modal-download,
.automation.modal-download {
  .btn-group {
    margin-top: 12px;
  }
}

.modal-body {
  .processing-page {
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
  }
}

.no-password-reveal::-ms-reveal, .no-password-reveal::-ms-clear {
  display: none
}

/* ***************************** */
/* ****** Datatable Styles ***** */
/* ***************************** */
table.table thead .sorting,
table.table thead .sorting_asc,
table.table thead .sorting_desc,
table.table thead .sorting_asc_disabled,
table.table thead .sorting_desc_disabled {
    cursor: pointer;
}

table.table thead .sorting_asc {
  background: $gray7 url('/static/images/sort-asc.png') no-repeat center right;
  background-size: 14px 5px;
}
table.table thead .sorting_desc {
  background: $gray7 url('/static/images/sort-desc.png') no-repeat center right;
  background-size: 14px 5px;
}

table caption {
  padding-top: 0px;
  caption-side: bottom;
}

.table {
  font-size: 12px;
}

.table {
  font-size: 12px;

  thead {
    tr {
      background: $gray8;

      th {
        padding: 0 8px;
        color: $mutedText;
        font-size: 10px;
        line-height: 20px;
        font-weight: bold;
        text-transform: uppercase;
        border-right: 2px solid $pw;

        &:last-child {
          border: none;
        }
      }
    }
  }

  tbody {
    tr.host-down > td {
      background: $lightRed;
    }
    tr.host-down:hover > td {
      background: saturate(darken($lightRed, 5%), 5%);
    }
  }
}

@media (max-width: 1024px) {
  .table {
    thead {
      tr {
        th {
          font-size: 9px;
        }
      }
    }
    .label {
      font-size: 9px;
    }
    .host-link {
      font-size: 13px;
    }
    .tableHostName,
    .tableHostPort {
      font-size: 13px;
    }
  }
}

.row.table-top {
  height: 30px;
  margin-bottom: 2px;
  padding: 0 15px;

  .col-md-6 {
    background: $gray7;
    min-height: 30px;
    padding: 0;
  }

  .col-md-12 {
    background: $gray7;
    min-height: 30px;
    padding: 0;
  }
}

.tableNoWrap {
  white-space: nowrap;
  text-align: left;
}

.hostStatusColumn {
  position: relative;
  width: 115px;
  overflow: hidden;
}

.host-link:hover {
  text-decoration: underline;
}

.hostNameColumn {
  width: 200px;
  overflow:hidden;
  vertical-align: bottom;

  .host-icon {
    float: left;
    margin-right: 4px;
  }
  .deploymentItemWarnings {
    margin-left: 20px;
    font-size: 12px;
    font-weight: bold;

    i {
      color: $mutedText;
      cursor: pointer;
    }
  }
}

a.showDeploymentItemWarning {
  cursor: pointer;
}

.hostTypeColumn {
  width: 70px;
  overflow:hidden;
}

.clusterNameColumn {
  width: 50px;
  overflow:hidden;
}

.replSetNameColumn {
  width: 80px;
  overflow:hidden;
}

.dateColumn {
  width: 100px;
  overflow:hidden;
}

.versionColumn {
  width: 60px;
  overflow:hidden;
}

.table tbody > tr > td.actionsColumn {
  width: 40px;
  padding-right: 5px;
  padding-left: 3px;
}

.hostsTable .host-warning-indicator,
.deployment-topology-view .host-warning-indicator {
  border-color: $warningText;
  color: $warningText;
}

.hostsTable .host-warning-label,
.deployment-topology-view .host-warning-label {
  display: inline-block;
  margin: 4px 0 0 5px;
  color: $yellow;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
}

.tableHostName {
  display: inline-block;
  float: left;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  text-decoration: inherit;
}

/**
 * Handle host list hostname spacing calculations
 *  #wrapper.sidebar-open causes us to lose 360px
 *  #wrapper.nav-collapsed gains us 220px
 */
@media(min-width:768px) {
  .tableHostName { max-width: 60px; }
}
@media(min-width:1024px) {
  .tableHostName { max-width: 60px; }
  #wrapper.nav-collapsed .tableHostName { max-width: 160px; }
}
@media(min-width:1150px) {
  .tableHostName { max-width: 110px; }
  #wrapper.nav-collapsed .tableHostName { max-width: 220px; }
}
@media(min-width:1250px) {
  .tableHostName { max-width: 160px; }
  #wrapper.nav-collapsed .tableHostName { max-width: 260px; }
}
@media(min-width:1350px) {
  .tableHostName { max-width: 210px; }
  #wrapper.nav-collapsed .tableHostName { max-width: 280px; }
}
@media(min-width:1450px) {
  .tableHostName { max-width: 250px; }
  #wrapper.nav-collapsed .tableHostName { max-width: 320px; }
}
@media(min-width:1550px) {
  .tableHostName { max-width: 265px; }
  #wrapper.nav-collapsed .tableHostName { max-width: 370px; }
}
@media(min-width:1650px) {
  .tableHostName { max-width: 290px; }
  #wrapper.nav-collapsed .tableHostName { max-width: 430px; }
}

.tableHostPort {
  display: inline-block;
  float: left;
  vertical-align: bottom;
  font-size: 14px;
  text-decoration: inherit;
}

#showActualHostnamesButton {
  cursor: pointer;
}

.tooltip {
  font-weight: normal;
  text-transform: none;
}

/**
* Styles for host replica state badges.
*/
span.hostReplicaSetStatus {
  display: inline-block;
  padding-right: 3px;
  padding-bottom: 3px;
  border-right:1px solid white;
  i {
    position: relative;
    top: 1px;
  }
}

div.hostReplicaStatusTooltip {
  line-height: 12px;

  h5 {
    font-weight: bold;
    font-size: 12px;
    padding-bottom: 5px;
    margin-top: 0;
    text-align: center;
    text-transform: capitalize;
    border-bottom: 1px solid $gray1;

    &:last-child {
      border-bottom: none;
    }
  }
  table {
    width: 150px;
    padding: 0;

    td {
      font-size: 11px;
      border: none;
      padding: 0 0 5px 0;
    }
    td.key {
      text-transform: uppercase;
      font-weight: bold;
    }
    td.value {
      text-align: right;
    }
  }
}

/**
* A bit of tweaking of the above for the individual host page
*/

#hostHeader span.hostReplicaSetStatus {
  position: relative;
  top: -1px;
  min-height: 100%;
  margin-right: 3px;
}

.backgrid.break-word td,
td.break-word {
  word-break: break-all;
  text-overflow: initial;
}


/**
* Translate style elements from old dataTable styles to backgrid for hosts page
*/

.backgrid.hostsTable {
  font-size: 12px;

  th {
    border-top: 0px;
  }

  th.checkColumn, td.checkColumn {
      width: 30px;
  }

  th.ping {
    width: 100px;
  }
  th.type {
    width: 100px;
  }
  th.cluster {
    width: 80px;
  }
  th.shard {
    width: 80px;
  }
  th.replset {
    width: 100px;
  }
  th.upsince {
    width: 100px;
  }
  th.version {
    width: 60px;
  }
  th.action {
    width: 185px;
  }

  .host-row:not(:hover) {
    .button {
      border-color: transparent;
      background: transparent;
      color: $mutedText;
    }
  }

  tbody {
    tr.host-down > td {
      background: $lightRed;
    }
    tr.host-down:hover > td {
      background: saturate(darken($lightRed, 5%), 5%);
    }
  }

  [class="normal-text"] {
    font-size: 14px;
  }

  .tooltip {
    line-height: 1.0;
    table {
      min-width: 100%;
      margin: 0; padding: 0;
      td {
        font-size: 11px;
        border: none;
        display: table-cell; // override display:none inherited from backgrid > td
        padding: 0.3em 0 0 0;
      }
      td.key {
        text-transform: uppercase;
        font-weight: bold;
        min-width: 70px;
      }
      td.value {
        text-align: left;
      }
    }
  }
  .actionsColumn {
    position: relative;

    // TODO: revise this to more BEM style
    .button-is-primary {
      position: absolute;
      left: 0px;
      top: 7px;
    }

    .edit-item {
      position: absolute;
      left: 90px;
      top: 7px;
    }

    .host-actions {
      position: absolute;
      left: 174px;
      top: 7px;
    }
  }
}

.backgrid-filter.form-search {
    margin: 0px
}

/* ***************************** */
/* ******* Input Styles ******** */
/* ***************************** */

// override clear x in IE
input[type=text]::-ms-clear {
  display: none;
}

// style input with tag in top-right
.tagged-input {
    position: relative;
    .tagged-input-tag {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px;
        font-size: 8px;
        opacity: 0.5;
    }
}
.tagged-input:not(:last-child) {
    margin-bottom: 15px;
}

/* Used to hide form fields which,
   if filled in will cause the form to be rejected
   hp = honeypot */
.hp-form-field {
  display: none;
}

.popover.agent-status {
  max-width: 400px;
  width: 400px;
  .popover-title a {
    margin-left: 12px;
  }
}

.agent-status-link {
  color: $gray0;

  &:hover {
    text-decoration: none;
    color: $linkText;
  }
}

a.agent-status-icon-stack .badge {
  background: $gray4;
}

table.agent-status-widget-tooltip {
  min-width: 372px;
  width: 372px;
  td {
    padding: 6px 0;
  }
  tr {
    border-bottom: 1px solid $gray7;
    &:last-child {
      border: none;
    }
  }
  .key {
    max-width: 272px;
    overflow: hidden;
    width: 272px;
    padding-right: 10px;
    text-overflow: ellipsis;
  }
  .val {
    text-align: right;
    width: 100px;
  }
}

/* REGISTRATION and NEW GROUP */

.steps-nav {
  padding-top: 24px;
  margin: 24px 0;
  border-top: 1px solid $gray7;
  .btn {
    min-width: 120px;
    &.continue {
      float: right;
      margin-left: 20px;
    }
  }

  .right-buttons {
    margin-top: -33px;
    text-align: right;
  }

  .footer-message {
    text-align: right;
    margin-top: 12px;
  }
}

/* END REGISTRATION and NEW GROUP*/

#authContainer {
  line-height: normal;

  .form-group {
    margin-left: 0;
    margin-right: 0;
  }
}

.gray-auth-type {
  color: $gray5;
}

.cur-auth-type {
  color: $green2;
}

.auth-expired-modal .modal-dialog {
  width: 750px;
}

.edit-host-modal-dialog {
  width: 760px;
}

#editPaymentMethodModal .modal-dialog, #upgradePaymentMethodModal .modal-dialog {
  width: 760px;
}

#authAndSslModal .modal-dialog {
  width: 760px;
}

#welcomeAddHostForm,
#chooseExistingBackupContent,
.modal.modal720 .modal-dialog {
  width: 720px;
}

#mobileNumber {
  width: 250px
}

#phoneExtension {
  width: 63px;
}

#phoneExtensionGrp {
  display: none;
}

.phone-input {
  input {
    max-width: 300px;
  }
}

#authCodeContainer {
  .checkbox {
    display: block;
    margin-top: 12px;
  }
}

#authCode {
  width: 100%
}

.btn-primary + .loading-spinner {
  top: 4px;
  left: -10px;
}

/* Bootstrap 3 Responsive Override */
#wrapper {
  min-width: 768px !important;
}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11 {
  float: left;
}
.navbar-nav {
  float: left;
  margin: 0;
}
// prevent float wrapping into main container
.navbar-nav.navbar-right.secondary {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
.navbar-header {
  float: left;

  &-alerts-container {
    padding-top: 7px;
  }
}

.modal.modal-download{

  .modal-dialog{
    width: 925px;
  }

  ul,
  ol {
    margin: 0;
    padding: 0 15px;
    li{
      list-style: decimal;
      margin: 0 0 15px 0;
      padding: 0;
    }
  }
}

pre {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 15px 0;
  width: 100%;
  &.small {
    max-width: 250px;
  }
  &.medium {
    max-width: 500px;
  }
}

code {
  align-self: center;
}

pre > code {
  @include monospace();
  font-size: 12px;
  border: 1px solid $gray6;
  background: $gray8;
  border-radius: 2px;
  padding: 10px;
  width: 100%;
  &.hljs {
    font-size: 12px;
    border: 1px solid $gray6;
    background: $gray8;
    border-radius: 2px;
    padding: 10px;
    width: 100%;
  }
}

.toggle-collapsed-all {
  position: absolute;
  margin: -1px 0 0 2px;
  font-size: 16px;
  color: $gray1;

  &:hover {
    text-decoration: none;
    color: $gray1;
  }
}

// use for table filters, use with bootstrap .form-inline
// don't add .form-control to <select> elements
.view-controls {
  padding: 15px 5px;

  label {
    text-transform: uppercase;
    color: $veryMutedText;
    font-size: 10px;
    font-weight: bold;

    &.group-label {
      display: block;
    }
    &.for-checkbox {
      font-size: 13px;
      margin-right: 10px;
      font-weight: normal;
      text-transform: none;
      color: $gray1;
    }
  }
  .for-select2 {
    display: inline-block;
    padding-top: 6px;
    margin-right: 5px;
  }
  .dropdown {
    display: inline-block;
  }
  .ui-divider {
    display: inline-block;
    width: 1px;
    background: $gray6;
    height: 20px;
    margin: 0 7px -5px 7px;
  }
  .ui-spacer {
    display: inline-block;
    width: 20px;
    height: 1px;
  }

  .search-filter {
    float: right;
    margin-right: -5px;

    .backgrid-filter {
      span.search {
        left: 5px;
        top: 40%;
        z-index: 1;
      }

      input[type="search"] {
        border: none;
        border-bottom: 1px solid $gray7;
        padding-left: 25px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        -webkit-transition: all 250ms ease;
        transition: all 250ms ease;

        &:focus {
          background: $gray8;
          border-bottom: 1px solid $green4;
        }
      }
    }
  }

  .calendar-picker {
    display: inline-block;
    text-align: right;

    .btn-default:first-child {
      width: 90px;
      text-align: left;
    }
  }

  .select2-wrapper {
        margin-top: -1px;
        line-height: 17px;
        display: inline-block;
        vertical-align: middle;
        width: calc(100% - 48px);
    }
}

.spacer-pipe-right {
  border-right: 1px solid $gray6;
  padding-right: 10px;
  margin-right: 10px;
}

.form-group {
  line-height: normal;
}

.caution {
  background-color: $cautionOrange;
}

input.adminLogContext {
  display:inline-block;
  margin-left: 10px;
}

.adminLogContext label {
  $offset: 5px;
  padding-left: $offset;
  padding-right: $offset;
}

.adminLogsTable {
  table-layout: fixed;
}

.adminLogsTable td {
  overflow: hidden;
  word-wrap: break-word;
}

.logsTable{
  table-layout: fixed;
}
.logsTable td {
  overflow: hidden;
  word-wrap: break-word;
}

.ace_search_form {
  .ace_search_field {
    color: black;
  }
}

.progress-bar-info-1 {
    background-color: $purple4;
}
.progress-bar-info-2 {
    background-color: $blue4;
}

// Component styles moved over from 10strap.less
////////////////////////////////////////////////

/* make the autocomplete rise above the navbar and any modal */
.ui-autocomplete {
  z-index: 1060;
}

/* make the datepicker rise above other panels */
.ui-datepicker {
  z-index: 2060 !important;
}
// From variable.less
$brand-primary:  #6CA439;
$brand-secondary: #FFFFFF;
$gray-light: #bdc3c7;
$line-height-base: 1.72222; // 31/18
$inverse: white;
$font-size-base: 18px;
$component-font-size-base: ceil($font-size-base * 0.833);
// From mixin.less
@mixin mask($arguments) {
  -webkit-mask: $arguments;
          mask: $arguments;
}

@mixin user-select($select) {
  -webkit-user-select: $select;
     -moz-user-select: $select;
      -ms-user-select: $select; // IE10+
       -o-user-select: $select;
          user-select: $select;
}

@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: alpha(opacity=$opacity-ie);
}

@mixin transition($transition) {
  -webkit-transition: $transition;
          transition: $transition;
}

@mixin box-shadow($shadow) {
  -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
          box-shadow: $shadow;
}

@mixin rotate($degrees) {
  -webkit-transform: rotate($degrees);
      -ms-transform: rotate($degrees); // IE9 only
          transform: rotate($degrees);
}

// Backgrid Styles
.backgrid thead th {
  background: transparent;
  text-align: left;
  font-size: 12px;
  border-width: 1px;
  -webkit-border-image: -webkit-linear-gradient(bottom, $gray6, $pw) 1 100%;
  border-left-width: 0;
  border-bottom: 2px solid $gray7;
  border-top: 2px solid $gray7;
}

.backgrid thead th a,
.backgrid thead th span {
  display: block;
  position: relative;
  padding-right: 14px;
  color: $gray1;
  border-right: 1px solid $gray7;

  &.text-danger {
    color: $errorText;
  }
}

.backgrid thead th span a {
  display: inline;
  border-right: none;
}

.backgrid th:last-child a,
.backgrid th:last-child span {
  border-right: none;
}

.backgrid td {
  border-bottom: 1px solid $gray8;
  overflow: visible;
  white-space: normal;
}

.backgrid tbody td {
  padding: 10px 20px 10px 5px;

  &:last-child {
    padding-right: 0;
  }
}

.backgrid .sort-caret {
  display: block;
  position: absolute;
  right: 5px;
  top: 8px;
  border-top: 0;
  border-bottom: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.backgrid-paginator {
  margin-top: 10px;
  text-align: right;

  .page-numbers {
    display: inline-block;
    position: relative;
    margin-right: 10px;
    top: -10px;
  }
  ul {
    display: inline-block;
    padding: 0;
    margin: 0;

    a {
      font-size: 18px;
      position: relative;

      &:hover {
        z-index: 2;
      }
    }
    li {
      display: inline-block;
      a {
        float: left;
        width: 30px;
        height: 30px;
        padding: 0;
        line-height: 30px;
        text-decoration: none;
      }
    }
    li:first-child a {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      margin-right: -1px;
    }
    li:last-child a {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
// END Backgrid Styles

// Select2 Styles
.select2-container-multi .select2-choices {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.05);
  border-radius: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.select2-container-multi .select2-choices .select2-search-choice {
  border-radius: 0;
  background: $purple2;
  box-shadow: none;
  border: none;
  padding: 0 0 0 20px;
  filter: none;

  div {
    padding: 6px 10px;
    color: $pw
  }
}

.select2-search-choice-close {
  border-right: 1px solid $purple3;
  padding-right: 16px;
  padding-left: 3px;
  left: 6px;
  top: 1px;
  height: 23px;
  background: none !important;
  color: $purple5;

  &:hover {
    color: $purple0;
  }
}
.select2-search-choice-close:after {
  content: '\00D7';
  font-size: 19px;
  top: 4px;
  position: absolute;
}

.has-error {
  .select2-container {
    border: 1px solid $errorText;
  }
}

.select2-container-multi.select2-container-disabled .select2-choices {
  cursor: not-allowed;
}

// END Select2 Styles

// D3 Chart Styles
svg.generic-chart {
    .line-chart-axis path,
    .line-chart-axis line,
    .bar-chart-axis path,
    .bar-chart-axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }

    .line-chart-axis, .bar-chart-axis {
        font: 11px;
    }

    .x-year.line-chart-axis path {
        display: none;
    }

    .hover line {
        fill: black;
        stroke-width: 1px;
    }
}

.generic-legend {
    dl, dt, dd, dl > article {
        display: inline;
    }
    dt.line::before {
        content: '\2014';
    }
    dt.bar::before {
        content: '\25A0';
        font-size: 150%;
    }
    dd {
        margin-left: 5px;
        margin-right: 10px;
    }
}
// END D3 Chart Styles

// Admin Analytics Styles
.changeAdminReportDate {
    color: $gray1;
    position: relative;
    z-index: 100;
    white-space: nowrap;
    cursor: pointer;
    padding: 5px 10px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;

    &:hover {
      background: $gray8;
      text-decoration: none;
      color: $gray0;
    }
}

.adminReportDatepicker {
  visibility: hidden;
}

.adminButtonDatepicker {
    color: $gray1;
    text-decoration: none;
    position: relative;
    z-index: 100;
    cursor: pointer;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    background: $gray8;
    border-color: transparent;

    &:active {
        background: $gray5;
    }
}

.adminControlSelect {
    color: $gray1;
    position: relative;
    z-index: 100;
    white-space: nowrap;
    cursor: pointer;
    padding: 5px 10px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;

    &:hover {
      background: $gray8;
      text-decoration: none;
      color: $gray0;
    }
}

.adminCohortDatepickers {
    .ui-datepicker-trigger {
        visibility: hidden;
        width: 1px;
        height: 0;
        padding: 0;
        border: 0;
    }
}

// END Admin Analytics Styles

// Admin Alerts
.alert-config .select2-container-multi .select2-choices .select2-search-choice {
  background-color: #535d77;
  font-size: 14px;
  font-weight: normal;
}

.alert-groups {
  span {
    background: none repeat scroll 0 0 #f5f6f7;
    border-bottom: 1px solid #f5f6f7;
    display: block;
    padding: 4px 10px;
  }

  ul {
    padding-left: 10px;
  }

  li {
    list-style-type: none;
    display: inline;
  }

  li + li {
    padding-left: 4px;
  }
}
// END Admin Alerts

.popover-backdrop {
  position: fixed;
  z-index: 1035;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: transparent;
}

$upgrade-icon-width: 128px;
$upgrade-icon-right-margin: 36px;

.upgrade-alert {
  font-size: 0px; // Prevent whitespace from throwing off spacing
}

.upgrade-icon {
  display: inline-block;
  width: $upgrade-icon-width;
  margin: 24px $upgrade-icon-right-margin 24px 0;
}

.upgrade-body {
  display: inline-block;
  width: 15%;
  width: calc(100% - ($upgrade-icon-width + $upgrade-icon-right-margin));
  .btn-primary,
  .btn-link {
    margin-top: 8px;
  }
  .btn-link {
    text-transform: capitalize;
  }
}

.upgrade-title {
  font-weight: bold;
  text-transform: uppercase;
}

.upgrade-features {
  padding-left: 25px;
}

.upgrade-price {
  margin-top: 0px;
  margin-bottom: 0px;
}

//pikaday style overrides

.is-today .pika-button {
  color: $green2;
  background-color: lighten($green5, 15%);
}

.is-selected .pika-button {
  background-color: $gray2;
  color: #ffffff;
  box-shadow: none;
  border-radius: 0;
}

.pika-button:hover {
    background: $green2 !important;
    border-radius: 0 !important;
}

/*
    This rule prevents other CSS styles with `display` to override the hidden attribute.
    Use with caution, as a CSS rule may still trump the hidden attribute via the specificity rule
*/
.page *[hidden] {
    display: none;
}

.strike-through {
    text-decoration: line-through;
}