/* Satchl Color Scheme */


/*
#19A263 Light Green
#199CA2 Light Blue
#1658A2 Blue
#1E19A2 Bold Blue
#6319A2 Purple
#A2199C Pink
*/

/*
    320px.
    480px.
    600px.
    768px.
    900px.
    1024px.
    1200px.
*/



/* LOGIN.html */
/*body {
    background-color: #ddd;
}
*/
:root {
  --main-border-radius: 0.3rem;
  --green-light2:     #97D6B6;
  --green-light1:     #45BB85;
  --satchl-green:     #008E58;
  --satchl-error:     #C62828;
  --satchl-error-disabled: #C628285C;
  --satchl-success:   #00a015;
  --satchl-warning:   #FFB300;
  --satchl-warning-disabled: #FFB3006B;
  --satchl-notification: #00A064;
  --green-dark1:    #005D37;
  --primary-green:  #00A064;
  --gray-light2:    #F2F2F2;
  --gray-light1:    #DADADA;
  --gray-dark2:     #6E6E6E;
  --gray-dark1:     #1C1C1C;
  --secondary-gray: #3C3C3C;
  --blue:           #00A064; /*--primary-green*/
  --satchl-button-blue1:    #00A064;
  --satchl-button-blue2:    #14B4D4;
  --satchl-button-blue3:    #003BA0;
  --satchl-button-blue4:    #001F80;
  --satchl-button-blue5:    #1C4CB6;

  --satchl-screen-xs: 575.98px;
  --satchl-screen-sm: 767.98px;
  --satchl-screen-md: 991.98px;
  --satchl-screen-lg: 767.98px;
  --satchl-screen-xl: 1199.98px;
}

#delete-form-group, 
#info-password-login,
#info-autoenroll,
#forgot-userid-link,
#forgot-password-link,
#web-delete-account,
#web-moreinfo-autoenroll, 
#web-newpassword-help,
#help-link, 
#info-forgot-password {
  cursor: pointer;
}


a {
    color: var(--satchl-green);
}


.satchl-border{
  border-radius: 10px;
  border: 1px solid var(--gray-light1);
}

.satchl-shadow{
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

/*Bootstrap overrides*/
.btn-primary {
  color: #fff;
  background-color: var(--satchl-green);
  border-color: var(--satchl-green);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--green-light1);
  border-color: var(--green-light2);
}

.btn-primary.disabled, .btn-primary:disabled {
  background-color: var(--green-light1);
  border-color: var(--green-light1);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--green-light1);
  border-color: var(--green-light2);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem var(--satchl-green);
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem var(--satchl-green);
}

.bg-light {
    background-color: #fff !important;
}
/*End bootstrap overrride*/

.navbar.navbar-light.bg-light.fixed-top.navbar-expand-md.ng-scope {
  display: unset !important;
}

.center-content {
  text-align: center;
}

.center-text {
  text-align: center;
}

.token-title {
  margin: 4px auto auto auto;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 24px;
  color: black;
  padding-bottom: 5px;
}

.token-title-device {
  margin: auto;
  text-align: center;
  color: rgba(0,0,0,.54);
  font-size: 1rem;
  line-height: 18px;
}

#login_result {
  padding: 16px;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label, 
.mdl-textfield--floating-label.is-dirty .mdl-textfield__label, 
.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
    color: #00a064;
}

#action-add-vendor.faux-button-disabled, 
#modal-forgot-userid-save.faux-button-disabled, 
#action-add-token.faux-button-disabled{
  background-color: var(--green-light2) !important;
  border: 0px;
}


#verify-password-name i.password-visibility,
#settings-forgot-password i.password-visibility,
#settings-forgot-repeat-password i.password-visibility{
  margin-left: calc(100vw - 130px) !important;
}

#settings-privacy-terms {
  width: 100%;
}

#settings-logout.mdl-color--primary, #settings-logout.mdl-button--raised.mdl-button--colored {
  background-color: white !important;
  font-family: Trebuchet MS !important;
  font-size: 17px;
  font-weight: bold;
  background-color: var(--satchl-warning) !important;
}

.mdl-button--raised.mdl-button--colored:hover {
    background-color: var(--green-light1);
}

.mdl-button--raised.mdl-button--colored:active {
    background-color: var(--satchl-green);
}

.mdl-button--raised.mdl-button--colored:focus:not(:active) {
    background-color: var(--satchl-green);
}

.dropdown-item > .satchl-link > i.material-icons {
    line-height: inherit;
    font-size: inherit;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

#settings-reg-passwords-match-status {
  margin-top: -16px;
}



/*#reg-email{
  margin: -16px 0 0 0;
}*/

#forgot-or {
  text-align: center;
}

#forgot-userid-link,
#forgot-password-link {
  position: relative;
  top: -20px;
}

#token-info {
  align-content: center;
  display: grid;
}

.app-token-info-close {
  float: left;
  font-size: 25pt;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: none;
  opacity: .5;
  position: ;
  text-align: left;
  align-content: left;
  display: block;
}

#modal-header-vendor-logo, #modal-header-add-vendor-logo, #modal-header-allvendors-logo {
  width: 60px;
  height: 60px;
  border: 4px solid white;
  border-radius: 30px;
  margin: 24px auto 10px auto;
}

#modal-header-vendor-info, #modal-header-add-vendor-info, #modal-header-token-info, #modal-header-token-edit, #modal-header-token-history, #modal-header-allvendors-info {
  width: 100%;
  height: 150px;
  background-color: var(--gray-dark2);
  border-radius: 10px;
  /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.09), 0px 3px 20px 0 rgba(0, 0, 0, 0.08); */
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

#modal-header-token-info, #modal-header-token-edit, #modal-header-token-history {
  border: 1px solid var(--gray-light1);
  background-color: var(--gray-light2);
  color: #000;
  height: 75px;
}

#history-title {
  padding: 20px;
  color: #777777 !important ;
}


#modal-token-vendor-edit {
  position: fixed;
  right: 20px;
  top: 145px;
  bottom: 15px;
  width: 360px;
  background-color: white;
}


#modal-token-vendor-edit div.modal-content.animate-bottom {
  background-color: unset;
  border: 0px;
}

#modal-token-vendor-edit-scroll{
  height: calc(100vh - 340px);
  overflow-y: auto;
}


#modal-token-history-table > .container > .row:nth-of-type(2n+1) {
  background-color: var(--gray-light2);
}

#history-table-header {
  padding-bottom: 10px;
  font-weight: bold;
}

#modal-verify-form {
  width: 30vw;
}

.modal{
  z-index: 1051;
}
.modal-title {
  font-size: 25px;
  margin: 7px auto auto auto;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 40px;
  padding-right: 40px;
  /* color: var(--gray-dark1); */
}

.modal-title-device {
  margin: auto;
  text-align: center;
  color: rgba(0,0,0,.54);
  font-size: 1rem;
  line-height: 18px;
}

.modal-title-vendor-card {
  color: white;
  margin: 0px;
}

#tokens-info .modal-dialog {
  margin-top: 0px;
  margin-bottom: 0px;
}

#token-edit-content{
  height: calc(100vh - 207px);
  overflow-y: auto;
  overflow-x: hidden !important;
}

#token-edit-form {
  padding-bottom: 0px;
}

#modal-token-edit .modal-content.animate-bottom {
  border: 0px;
}

h1, h2, h3, h4, h5, h6 .mdl-button, .mdl-card__title {
  font-family: Trebuchet MS !important;
  color: var(--gray-dark1);
}

.mdl-button {
    width: 80%;
}

#enabledisable-help, #autoenroll-help, #limited-help, #terms-conditions-privacy, #terms-conditions-terms, #terms-conditions-privacy-links, #terms-conditions-terms-links, 
#web-terms-conditions-privacy, #web-terms-conditions-terms, #web-terms-conditions-privacy-links, #web-terms-conditions-terms-links {
  padding-top: 16px;
}



#terms-conditions-terms {
  display: absolute;
  position: absolute;
  padding-top: 0px;
  padding-left: 81px;
}

#terms-conditions-privacy > a, #terms-conditions-terms > a, 
#web-terms-conditions-privacy > a, #web-terms-conditions-terms > a  {
  z-index: 20;
  position: relative;
}

#terms-conditions-verify {
  position: absolute;
  right: 0px;
}


small.form-text.text-muted {
  margin-top: -20px;
}

.green-label {
  color: #00a064 !important;
  font-size: 17px;
}

.no-relative-position {
  position: unset;
}
.faux-link {
  color: var(--satchl-button-blue3);
}

.faux-link:hover {
  color: var(--satchl-button-blue3);
  text-decoration: underline;

}

.faux-input-label {
  color: #00a064 !important;
  font-size: 17px;
}

.faux-input-text {
  width: 100%;
  text-align: left;
  padding: 4px 0;
  margin: 0;
  font-size: 16px;
  font-family: inherit;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.mdl-switch.is-checked .mdl-switch__track {
  background: var(--green-light2);
}

.mdl-switch.is-checked .mdl-switch__thumb {
  background: var(--satchl-green);
}

.mdl-switch__label {
  cursor: default;
}

#settings {
    padding: .75rem 1.25rem 0rem 1.25rem;
}

#settings-signup-button {
  text-align: center;
}

#settings-signup.mdl-color--primary, #settings-signup.mdl-button--raised.mdl-button--colored {
  background-color: white !important;
  font-family: Trebuchet MS !important;
  font-size: 17px;
  font-weight: bold;
  color: var(--satchl-green) !important;
  border: 1px solid var(--gray-light2);
}

#web-cancel-pin-phonenumber.mdl-color--primary, 
#web-cancel-pin-phonenumber.mdl-button--raised.mdl-button--colored,
#web-cancel-pin-email.mdl-color--primary, 
#web-cancel-pin-email.mdl-button--raised.mdl-button--colored,
#web-changepassword-cancel.mdl-color--primary, 
#web-changepassword-cancel.mdl-button--raised.mdl-button--colored,
#tokens-add-vendor-cancel.mdl-color--primary, 
#tokens-add-vendor-cancel.mdl-button--raised.mdl-button--colored,
#app-token-edit-cancel.mdl-color--primary, 
#app-token-edit-cancel.mdl-button--raised.mdl-button--colored,
#cancel-pin-email.mdl-color--primary, 
#cancel-pin-email.mdl-button--raised.mdl-button--colored,
#modal-forgot-userid-cancel.mdl-color--primary, 
#modal-forgot-userid-cancel.mdl-button--raised.mdl-button--colored,
#settings-signup-cancel.mdl-color--primary, 
#settings-signup-cancel.mdl-button--raised.mdl-button--colored,
#tokens-vendor-cancel.mdl-color--primary, 
#tokens-vendor-cancel.mdl-button--raised.mdl-button--colored,
#changepassword-cancel.mdl-color--primary, 
#changepassword-cancel.mdl-button--raised.mdl-button--colored,
#modal-verify-cancel.mdl-color--primary, 
#modal-verify-cancel.mdl-button--raised.mdl-button--colored,
#modal-verify-password-cancel.mdl-color--primary, 
#modal-verify-password-cancel.mdl-button--raised.mdl-button--colored,
#cancel-pin-phonenumber.mdl-color--primary, 
#cancel-pin-phonenumber.mdl-button--raised.mdl-button--colored,
#cancel-pin-email.mdl-color--primary, 
#cancel-pin-email.mdl-button--raised.mdl-button--colored,
#modal-forgot-password-cancel.mdl-color--primary, 
#modal-forgot-password-cancel.mdl-button--raised.mdl-button--colored  {
    background-color: white !important;
    font-family: Trebuchet MS !important;
    font-size: 17px;
    font-weight: bold;
    color: var(--satchl-error) !important;
    border: 1px solid var(--gray-light2);
}

.satchl-error {
  color: var(--satchl-error) !important;
}

.no-margin {
  margin: 0px;
}

.no-padding {
  padding: 0px;
}

small.form-text.text-muted {
    margin-top: -20px;
}

.password-visibility {
  position: relative;
  float: right;
  margin-top: -25px;
  margin-right: 0px;
}

#forgot-password-form {
  max-width: 450px;
}

#verify-password-form {
  width: 100%;
}

#verify-password-name i.password-visibility,
#settings-forgot-password i.password-visibility,
#settings-forgot-repeat-password i.password-visibility{
  margin-left: calc(100vw - 130px) !important;
}

#newpassword-help, #password-help, #forgot-password-input-help,
#web-newpassword-help, #web-password-help, #web-forgot-password-input-help  {
  margin-top: -20px;
  z-index: 1049;
  position: relative;
}

#web-settings-changepassword-button-faux {
  padding-top: 16px;
  cursor: pointer;
}

.form-group.nomargin {
  margin: 0px;
}

h1, h2, .mdl-button {
    font-family: Trebuchet MS !important;
}

.mdl-textfield{
  width: 100%;
}

.mdl-textfield__label::after {
    background-color: #00a064;
}

.mdl-textfield.is_focused{
   background-color: #00a064;
}
.mdl-color-text--primary{
    color: #00a064 !important;
    font-family: Trebuchet MS !important;
}

.mdl-color--primary, 
  .mdl-button--raised.mdl-button--colored  {
    background-color: #00a064;
    font-family: Trebuchet MS !important;
    font-size: 17px;
    font-weight: bold;
}

#login-page-container {
  margin: 10px auto 100px auto;
}
#satchl-partner-statement {
    text-align: center;
    font-family: Trebuchet MS !important;
}

#field-requirement-statment,
#forgot-field-requirement-statment {
  right: 40px;
  position: absolute;
}

#user-login {
/*  position: relative;
  width: 400px;*/
}

#satchl-info {
  height: 300px;
}


.mdl-card__title .mdl-button--icon {
    height: 28px;
    width: 28px;
    min-width: 28px;
}

.mdl-card__title.mdl-card--expand.vendor-card-logo {
  height: 58px;
  max-width: 155px;
  background-size: contain !important;
  margin-right: 15px;
  border-radius: var(--main-border-radius);
}

.mti-vendor-status {
  right: 40px;
  position: absolute;
}

.mdl-textfield__label {
  color: rgba(0, 0, 0, 0.5);
}

a:hover {
    cursor: pointer;
}






/* No scroll bars */
.mdl-js {
    overflow: hidden;
}

/* input bottom line fix */
.mdl-textfield__label{  
   margin-bottom:0px;
 }

/* MODALS */
/* Token history */

.modal-header .close {
  position: fixed;
}

.modal-header.noborder{
  border: 0px;
}

.modal-open{
  /*overflow: hidden;*/
}

.modal-dialog {
    /*max-width: 75vw;*/
}

.modal-small {
  max-width: 35vw;
}

.modal-scroll {
  overflow-y: auto;
}

#info-autoenroll {
  position: relative;
  z-index: 20;
}

.modal-body.atomic {
  /* border-bottom: 1px solid #e9ecef; */
  border-radius: var(--main-border-radius);
  margin: 5px;
  padding: 0px;
}

.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label {
  color: #00a064 !important;
  font-size: 17px;
}

.withnav.modal-footer.noborder {
  padding: 0 1.25rem 0 1.25rem;
  margin: 0px;
  border: 0px;
}

.app-footer {
  margin-top: auto;
  bottom: 0px;
  position: fixed;
  width: 100%;
  border-top: 0px;
  left: -2px;
}

.modal-action-save, .modal-action-verify-pin {
  width: 100%;
  text-align: center;
}

#web-email-verify-status, #web-phonenumber-verify-status {
  color: var(--satchl-green);
}

.modal-action-delete {
  text-align: center;
  padding-top: 20px;
}

.modal-action-login {
  /* align-content: center; */
  text-align: center;
}

.modal-action-save > button {
  width: 30%;
}

/* Bottom Modal*/
#modal-all-vendors div.modal-dialog{
  top: auto;
  right: auto;
  left: calc(50vw - 25vw);
  bottom: 0;
  position: fixed;
  padding-left: 30vw;
  padding: 0px;
  margin: 0px;
  max-width: unset;
  width: 50vw;
}

.animate-bottom {
  position: relative;
  animation: animatebottom 0.4s;
}

@keyframes animatebottom {
  from {
    bottom: -300px;
    opacity: 0;
  }

  to {
    bottom: 0;
    opacity: 1;
  }
}

#modal-vendor-edit-header{
  height: 100px;
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: cover;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -20px;
}

.token-card-layer {
  margin: 0 14px 14px 14px;
}

/*MDL Tokens Page */

.add-element {
  position: absolute;
  bottom: 14px;
  left: calc(50% - 55px);
  z-index: 100;
}

#add-element-token {
  bottom: 30px;
  z-index: 400;
  position: fixed;
  left: 115px;
}

.action-add {
  border-radius: 50px;
  font-size: 17px;
  font-weight: bold;
}

.action-add-button-text {
  font-family: Trebuchet MS !important;
  padding: 5px;
}

.action-add-button-text > i {
  padding-right: 10px;
}

.token-card-square.mdl-card {
  border-radius: 10px;
  min-height: 0px;
  /*min-width: 97%;*/
  width: 100%;
  margin: 0px auto 12px auto;
  border: 1px solid var(--gray-light1);
  background-color: var(--gray-light2);

}

.token-card-square.mdl-card.vendor {
  width: 170px;
  height: 50px;
  margin: 20px;
}

.vendor-not-added{
  content: "\f067";
  position: absolute;
  font-size: 48pt;
  width: 100%;
  text-align: center;
  opacity: .9;
  color: white;
  background: #575656e0;;
  padding-bottom: calc(100% - 168px);
}
.token-card-footer {
  color: var(--satchl-green);
  font-weight: bold;
  border-color: var(--gray-light1) !important;
  text-align: center;
  background-color: white !important;
}

/* Green line left on active token */
#tokens-token-container .active-token::before {
  background-color: #00a064b3;
  bottom: 0px;
  content: "";
  left: -15px;
  position: absolute;
  top: 0px;
  width: 8px;
  z-index: 1;
  border-radius: 0px 20px 20px 0px;
}

/* Token Edit Options Menu */
.token-card-square.mdl-card.mdl-shadow--2dp.active-token {
    overflow: visible;
}

#tokens-token-vendor-container .active-token-accept::before {
    background-color: #00a064b3;
    bottom: -23px;
    content: "";
    left: 0;
    position: absolute;
    top: 23px;
    width: 3px;
    z-index: 1;
}

/* selected token background and acceptable token drag */
.active-token, .active-token-accept{
  background: #00a06421;
}

.vendor-card-logo {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  content-align: center !important;
  text-align: center !important;
  background-color: black !important;
}



/*MDL testing */
.mdl-list__item {
  width: 297px;
  float: left;
}


.demo-avatar {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.demo-layout .mdl-layout__header .mdl-layout__drawer-button {
  color: rgba(0, 0, 0, 0.54);
}
.mdl-layout__drawer .avatar {
  margin-bottom: 16px;
}
.demo-drawer {
  border: none;
}
/* iOS Safari specific workaround */
.demo-drawer .mdl-menu__container {
  z-index: -1;
}
.demo-drawer .demo-navigation {
  z-index: -2;
}
/* END iOS Safari specific workaround */
.demo-drawer .mdl-menu .mdl-menu__item {
  display: flex;
  align-items: center;
}
.demo-drawer-header {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  height: 151px;
}
.demo-avatar-dropdown {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  width: 100%;
}

.demo-navigation {
  flex-grow: 1;
}
.demo-layout .demo-navigation .mdl-navigation__link {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  color: rgba(255, 255, 255, 0.56);
  font-weight: 500;
}
.demo-layout .demo-navigation .mdl-navigation__link:hover {
  background-color: #00BCD4;
  color: #37474F;
}
.demo-navigation .mdl-navigation__link .material-icons {
  font-size: 24px;
  color: rgba(255, 255, 255, 0.56);
  margin-right: 32px;
}

.demo-content {
  max-width: 1080px;
}

.demo-charts {
  align-items: center;
}
.demo-chart:nth-child(1) {
  color: #ACEC00;
}
.demo-chart:nth-child(2) {
  color: #00BBD6;
}
.demo-chart:nth-child(3) {
  color: #BA65C9;
}
.demo-chart:nth-child(4) {
  color: #EF3C79;
}
.demo-graphs {
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* TODO: Find a proper solution to have the graphs
 * not float around outside their container in IE10/11.
 * Using a browserhacks.com solution for now.
 */
_:-ms-input-placeholder, :root .demo-graphs {
  min-height: 664px;
}
_:-ms-input-placeholder, :root .demo-graph {
  max-height: 300px;
}
/* TODO end */
.demo-graph:nth-child(1) {
  color: #00b9d8;
}
.demo-graph:nth-child(2) {
  color: #d9006e;
}

.token-cards {
  align-items: flex-start;
  align-content: flex-start;
}
.token-cards .demo-separator {
  height: 32px;
}
.mdl-card__title-text {
    padding-top: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-right: 10px;
    display: unset;
}

.token-cards .mdl-card__title.mdl-card__title {
  color: white;
  font-size: 24px;
  font-weight: 400;
}
.token-cards ul {
  padding: 0;
}
.token-cards h3 {
  font-size: 1em;
}
.demo-updates .mdl-card__title {
  min-height: 200px;
  background-image: url('images/dog.png');
  background-position: 90% 100%;
  background-repeat: no-repeat;
}
.token-cards .mdl-card__actions a {
  color: #00BCD4;
  text-decoration: none;
}

.demo-options h3 {
  margin: 0;
}
.demo-options .mdl-checkbox__box-outline {
  border-color: rgba(255, 255, 255, 0.89);
}
.demo-options ul {
  margin: 0;
  list-style-type: none;
}
.demo-options li {
  margin: 4px 0;
}
.demo-options .material-icons {
  color: rgba(255, 255, 255, 0.89);
}
.demo-options .mdl-card__actions {
  height: 64px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
}



















/* Sidenavbar */








.wrapper {
    display: block;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    /* top layer */
    z-index: 9999;
}

.overlay {
    display: none;
    position: fixed;
    /* full screen */
    width: 100vw;
    height: 100vh;
    /* transparent black */
    background: rgba(0, 0, 0, 0.7);
    /* middle layer, i.e. appears below the sidebar */
    z-index: 998;
    opacity: 0;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
}
/* display .overlay when it has the .active class */
.overlay.active {
    display: block;
    opacity: 1;
}

#dismiss {
    width: 35px;
    height: 35px;
    position: absolute;
    /* top right corner of the sidebar */
    top: 10px;
    right: 10px;
}



html{
    margin-left: calc(100vw - 100%);    /*Fixes jumping scroll bar*/
}

/*
TOKEN PAGE START
*/

.zoom:hover{
    transform: scale(1.1);
}

.zoom{
    transition: transform .01s;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}

.token-card-square.vendor {
  width: 85%;
}

#tokens-token-vendor-container {
  background-color: white;
  left: 360px;
  overflow: visible;
  position: fixed;
  width: calc(100% - 760px);
  top: 145px;
  bottom: 15px;
}

/*All vendors - right side column*/
#tokens-vendor-container{
  background-color: #FFF;
  margin-right: 15px;
  overflow: visible;
  position: absolute;
  top: 80px;
  right: 0px;
  margin-left: calc(100vw - 100%);
  width: 450px;
  height: calc(100vh - 112px);
  margin-left: calc(100vw - 100%);   /*Fixes jumping scroll bar*/
}
#tokens-all-vendor-list{
    /*background-color: white;*/
    height: calc(100vh - 202px);
    min-width:  100%;
    list-style-type: none;
    padding: 10px;
    overflow:visible;
}

#satchl-vendors-list{
  height: calc(100vh - 205px);
  min-width: 100%;
  list-style-type: none;
  padding: 0px 10px 0px 10px;
  overflow-y: auto;
  /*text-align: center;*/
  /* FOR center aligning the tokens */
}

.vendor-short-name {
  text-align: center;
}

#token-vendors{
  height: 100%;
  /*margin-top: 23px;*/
  width: 100%;
}

.token-vendors-populated-click {
  width: 75%;
  position: absolute;
  height: 100%;
}

.tokens-vendor-OFF{
    width: 80px;
    height: 80px;
    margin: 10px;
    position: relative;
    color:#00a064;
    text-align: center;
    vertical-align: middle;
    font-size: 3.5em;
}

#token-container-header {
    margin-top: 20px;
}

.container-header{
  font-size: 18pt;
  border-bottom: 1px solid black;
  padding: 10px;
}

.vendor-container li {
    float: left;
    width:400px;
    position: relative;
    border-bottom: 1px solid var(--gray-light2);
    margin: 16px 16px 0px 16px;
    padding-bottom: 16px;
    /*display: inline-flex !important;*/
    /*For center aligning the vendors*/
}

.tokens-vendor p {
    font-size: 12px;
}

#tokens-token-info-container > div.container, 
#tokens-token-info-container > div.container > div.row {
  height: 100%;
}


#token-section-spacer{
  height: 18px;
}

#tokens-info-container {
  position: absolute;
  top: 70px;
  width: 312px;
  background-color: #eaeaea;
  height: 62px;
  margin: 0 40px 0 15px;
  align-content: center;
  display: grid;
}

#tokens-token-info-container {
  position: absolute;
  left: 360px;
  top: 70px;
  width: calc(100% - 380px);
  background-color: #eaeaea;
}

#tokens-info {
  position: fixed;
  right: 20px;
  top: 145px;
  bottom: 15px;
  width: 360px;
  background-color: white;
}

/* on a large pixle screen, expand the left token containter */
@media screen and (min-width: 1920px) {

  /* Large screens*/
/*  #tokens-token-container{
    background: #eaeaea;
    width: 30vw;
    position: absolute;
    bottom: 0px;
    top: 60px;
    overflow-y: auto;
  }*/
}


/* on a large pixle screen, expand the left token containter */
/*@media screen and (max-width: 1920px) {*/
  /* Large screens*/
  #tokens-token-container{
    background: white;
    width: 340px;
    position: absolute;
    bottom: 15px;
    top: 145px;
    overflow-y: auto;
  }
/*}*/




#tokens-token-info-container {
  height: 60px;
}



/*User tokens to select from*/
#tokens-token-container .token-card {
    max-width: 11rem !important;
    margin: auto;
    /*margin-bottom: auto;*/
    font-size: 12px;
}

span.disabled{
  color: red;
}

/* token card status */
.mdl-card__supporting-text.token-status-text {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 18px;
}

.token-unassigned, 
#token-status.token-unassigned > span, 
#token-status.token-unassigned > span > i {
    color: var(--satchl-warning) !important;
}

#token-status.token-disabled > span, 
#token-status.token-disabled > span > i {
    color: red !important;
}

.token-limited-status {
    position: absolute;
    color: var(--satchl-warning);
    width: 40%;
    float: right;
    display: block;
    text-align: right;
    margin-right: 0px;
    margin-left: 50%;
    width: 49%;
    padding-top: 6px;
}

.limited-status-text {
  border: 1px solid var(--gray-light1);
  border-radius: 5px;
  padding: 2px 4px 2px 4px;
  color: white;
  background-color: var(--satchl-warning);
}

.token-autoenroll-status {
    position: absolute;
    color: var(--satchl-warning);
    width: 40%;
    float: right;
    display: block;
    text-align: right;
    margin-right: 0px;
    margin-left: 50%;
    width: 49%;
    padding-top: 6px;
}

.autoenroll-status-text {
  border: 1px solid var(--gray-light1);
  border-radius: 5px;
  padding: 2px 4px 2px 4px;
  color: white;
  background-color: var(--satchl-green);
}

.warning{
  color: red;
}


#tokens-vendor-container-navigation{
  font-size: 40px;
  color:#cce1d9;
  top: 0px;
  position: absolute;
  top: calc(100vh - 170px);
  margin: auto;
  align-content: center;
  width: 100%;
}

#satchl-vendor-container-navigation{
  font-size: 40px;
  color:#cce1d9;
  top: 0px;
  position: absolute;
  top: calc(100vh - 146px);
  margin: auto;
  align-content: center;
  width: 100%;
}
.vendor-all-navigation.fas.fa-chevron-left{
  color:#3c3c3c;
  float:right;
}
.vendor-all-navigation.fas.fa-chevron-right{
  color:#3c3c3c;
  float:left;
}

#satchl-all-vendor-navigation-pagecount {
    line-height: 25pt;
    text-align: center;
}

#tokens-all-vendor-navigation-pagecount {
    line-height: 25pt;
    text-align: center;
}

.vendor-all-navigation.fa.fa-circle{
  font-size: 30px;
  color: #cce1d9;
  padding-left: 10px;
  padding-top: 5px;

}

/*
TOKEN PAGE END
*/


#token-vendor-info {
    padding-bottom: 40px;
}

#satchl-logo {

    background: url('../images/logo.png') center no-repeat;
    background-size: auto;
    width: 150px;
    height: 50px;
    background-size: contain;

}

.satchl-link{
  color: var(--satchl-button-blue1) !important;
}

/* Global Styles */
.qrimage{
    max-width: 250px;
    max-height: 250px;
    min-width: 250px;
    min-height: 250px;
    padding: 20px;
}


/*vendor enable/disable toggle*/
.vendor-enabledisable {
    float: right;
}

.aboutcard{
    padding-top: 10px !important;
}

html, body {
    height: 100%;
}

body {
    padding-top: 50px;
    padding-bottom: 20px;
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: Trebuchet MS;
    font-weight: 400;
}

.dropdown {
    cursor:pointer;
}


.img-home-portfolio,
.img-customer,
.portfolio-item {
    margin-bottom: 30px;
}

.tab-pane {
    margin-top: 15px;
}

/* Page Sections */
.section,
.section-colored {
    padding: 50px 0;
}

.section-colored {
    background-color: #e1e1e1;
    /* change this to change the background color of a colored section */
}

.sidebar {
    margin-top: 40px;
}

.sidebar ul {
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #cccccc;
}

/* Half Page Height Carousel Customization */
.carousel {
    height: 50%;
}

.item,
.active,
.carousel-inner {
    height: 100%;
}

.fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* Social Icons Styles */
.list-social-icons {
    margin-bottom: 45px;
}

.tooltip-social a {
    text-decoration: none;
    color: inherit;
}

.facebook-link a:hover {
    color: #3b5998;
}

.linkedin-link a:hover {
    color: #007fb1;
}

.twitter-link a:hover {
    color: #39a9e0;
}

.google-plus-link a:hover {
    color: #d14836;
}

/* Service Page Styles */
.service-icon {
    font-size: 50px;
}

/* 404 Page Styles */
.error-404 {
    font-size: 8em;
}

/* Pricing Page Styles */
.price {
    font-size: 4em;
}

.price-cents {
    vertical-align: super;
    font-size: 50%;
}

.price-month {
    font-size: 35%;
    font-style: italic;
}

/* Footer Styles */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    /*height: 60px;*/
    line-height: 60px;
    /*background-color: #343a40;*/
}

tokens {
    height: 50%;
}

/* Responsive Styles */
@media (max-width: 767px) {

    .carousel {
        height: 70%;
        /* increases the carousel height so it looks good on phones */
    }
}



/*Satchl*/
body{
    /*background-image: url("../images/satchl-background-1.jpg");*/
    color: #777777;
    background-color: #fff;
    background-attachment: fixed;
    padding-top:56px;
    /* Below to fade the background image - only on select browsers */
    /*background-color: rgba(0, 0, 0, 1);*/
    /*background-blend-mode: overlay;*/
}

.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand {
    color: #199CA2;
}

.navbar-brand {
    float: left;
}

.navbar-toggle {
    float: left;
    margin-left: 15px;
}

.navbar-inverse .navbar-toggle {
    border-color:transparent;
}

.glyphicon {
    color: #ffffff96;
}

.navbar-inverse {
    background-color: #2222225c;
    color: #ffffff96;
}

.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-text.bottom-nav-text {
    padding-left: 20%;
    color: #ffffff96;
}

/*nav links*/
.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

/*Collapsed navbar content - Shows in full page behind transparent top....*/
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    /*background-color: #000000c4;*/
}

nav.navbar.navbar-dark.bg-dark.fixed-top.navbar-expand-md.ng-scope {
    background-color: #00000000 !important;
    color: black;
}

.api-function{
    background-color: #ffffffe6;
    padding: 10px;
    margin: 10px;
    border-radius: .25rem;
}

.blockquote-footer {
    color: #19A263;
}

.card{
    /*color: #ffffff;*/
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.09), 0px 3px 20px 0 rgba(0, 0, 0, 0.08);
}
.card-title {
   color: #199CA2;
}

.card-click:hover{
  -webkit-box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
    box-shadow: 0 1px 3px 0 rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
    border-color: transparent;
    /*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
}

.text-block {
    padding: 20px;
}
/*navbar*/
/*.navbar.navbar-dark.bg-dark.fixed-top.navbar-expand-md.ng-scope {
    background-color: #199CA2 !important;

}*/

.button-disabled {
  background-color: rgba(0,0,0,.12) !important;
  box-shadow: none !important;
}


canvas{
    padding: 10px;
    float: left;
}




/* Tokens Page */