/* General modal styles */

.modal .stitch {
  background : url('../images/stitch.png') no-repeat center 20px;
  width      : 120px;
  height     : 50px;
  display    : block;
  margin     : 0 auto 20px auto;
}

.modal .returnHome {
  float    : right;
  position : relative;
  right    : 40px;
  top      : 20px;
}

.modal .returnHome a {
  color                 : #fff;
  font-weight           : 400;
  background            : #ccc;
  padding               : 3px 10px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
  display               : block;
}

.modal .returnHome a:hover {
  background : #1099de;
}

#loginModal {
  max-width: 490px;
}

#loginModal .returnHome {
  right: 20px;
}

#loginModal .returnHome a {
  background: none;
  color: #000;
  font-size: 28px;
  font-weight: bold;
}

#loginModal .title {
  font-weight: bold;
}

#loginModal form {
  width: auto;
  text-align: center;
}

#loginModal .loginForm .email, #loginModal .loginForm .password {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

#loginModal .loginForm li {
  height: auto;
}

#loginModal .loginForm li input {
  border-radius: 8px;
  border: solid 1px #b8b8b8;
  box-shadow: none;
  margin: 10px auto;
}

#loginModal .loginForm li label {
  float: none;
  width: auto;
  position: initial;
  font-weight: bold;
  font-size: 20px;
}

#loginModal .loginForm li label {
  margin: 0 auto;
}

#loginModal .loginForm .submit button {
  box-shadow: none;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 15px;
  border-radius: 8px;
  text-shadow: none;
  background: linear-gradient(180deg, #1cf074 0%, #3dc476 100%);
}

#loginModal .loginForm .lostPassword a {
  color: #000;
  font-weight: 500;
  border-bottom: 1px solid #62C733;
  font-size: 18px;
}

.modal .logoBlue {
  width      : 360px;
  height     : 70px;
  margin     : auto;
  background : url('../images/logo_blue.png') no-repeat left top;
}

.modal .title {
  font-size   : 42px;
  padding     : 40px 0;
  font-weight : 300;
}

.modal form label {
  width : 200px;
}

.modal, .modal-body {
  max-height : 100%;
}

/* Sign Up */

#signupModal {
  width       : 850px;
  height      : 100%;
  margin-left : -425px;
  margin-top  : 0;
  top         : 0;
}

#signupModal .modal-body {
  min-height : 100%;
  padding    : 0;
}

/* Login */

#loginModal {
  width       : 700px;
  margin-top  : -225px;
}

#loginModal .modal-body {
  padding : 0 0 20px 0;
}

/* Contact */

#contactModal {
  width       : 800px;
  top         : 0;
  margin-left : -400px;
  margin-top  : 0;
}

#contactModal .modal-body {
  padding : 0;
}

/* Revert properties overridden by bootstrap.css */

button, input, select, textarea {
  margin : 2px;
}

label, input, button, select, textarea {
  font-size : inherit;
}

li {
  line-height : 19px;
}

/* Password Change */

#passwordChangeModal {
  background-clip  : padding-box;
  background-color : #fff;
  border           : 1px solid rgba(0, 0, 0, 0.3);
  border-radius    : 6px;
  box-shadow       : 0 3px 7px rgba(0, 0, 0, 0.3);
  left             : 50%;
  margin           : -350px 0 0 -300px;
  overflow         : auto;
  position         : fixed;
  top              : 50%;
  z-index          : 1050;
  width            : 600px;
  font-family      : "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  font-size        : 14px;
  font-weight      : 400;
  line-height      : 19px;
  text-align       : center;
}

#passwordChangeModal.hide {
  display : none;
}

#passwordChangeModal .hide {
  display : none;
}

#passwordChangeModal .title {
  padding : 0;
  color   : #242424;
  margin  : 20px 0 40px;
}

#passwordChangeModal .modal-body {
  overflow-y : auto;
  padding    : 15px;
}

#passwordChangeModal .stitch {
  margin-bottom : 10px;
}

.modal-backdrop {
  position         : fixed;
  top              : 0;
  right            : 0;
  bottom           : 0;
  left             : 0;
  z-index          : 1040;
  background-color : #000;
}

.modal-backdrop, .modal-backdrop.fade.in {
  opacity : .8;
  filter  : alpha(opacity=80);
}

#passwordChangeModal form {
  width : auto;
}

#passwordChangeModal form ul {
  list-style-type : none;
}

#passwordChangeModal form ul li {
  height     : 48px;
  text-align : left;
}

#passwordChangeModal form ul li label {
  float          : left;
  position       : relative;
  top            : 14px;
  color          : #242424;
  text-align     : left;
  font-size      : 16px;
  text-transform : none;
}

#passwordChangeModal form li .required {
  background-clip  : padding-box;
  background-color : #0f99dd;
  border-radius    : 3px;
  display          : inline-block;
  height           : 6px;
  margin           : 1em 0 0 10px;
  width            : 6px;
}

#passwordChangeModal .alert {
  font-size             : 14px;
  padding               : 8px 35px 8px 14px;
  margin-bottom         : 18px;
  color                 : #c09853;
  text-shadow           : 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color      : #fcf8e3;
  border                : 1px solid #fbeed5;
  -webkit-border-radius : 4px;
  -moz-border-radius    : 4px;
  border-radius         : 4px;
  text-transform        : none;
  text-align            : left;
}

#passwordChangeModal .alert.alert-info {
  background-color : #d9edf7;
  border-color     : #bce8f1;
  color            : #3a87ad;
}

#passwordChangeModal .alert.alert-error {
  color            : #b94a48;
  background-color : #f2dede;
  border-color     : #eed3d7;
}

#passwordChangeModal form ul li.submit button {
  background-clip  : padding-box;
  background-color : #18d11b;
  background-image : linear-gradient(#18d11b, #16bd18);
  border           : medium none;
  border-radius    : 3px;
  color            : #fff;
  cursor           : pointer;
  display          : inline-block;
  font-size        : 14px;
  font-weight      : 700;
  line-height      : 22px;
  margin-bottom    : 9px;
  padding          : 11px 35px;
  text-transform   : uppercase;
}

#passwordChangeModal form ul li.submit button:hover {
  background-color : #16bd18;
  background-image : linear-gradient(#16bd18, #0ca40e);
  color            : #fff;
}

#passwordChangeModal .requiredText {
  clear          : both;
  color          : #a8a8a8;
  margin         : 20px auto;
  text-transform : uppercase;
}

#passwordChangeModal .requiredText span {
  background-clip  : padding-box;
  background-color : #0f99dd;
  border-radius    : 3px;
  display          : inline-block;
  height           : 6px;
  margin           : 0 0 0 10px;
  position         : relative;
  right            : 7px;
  top              : -2px;
  width            : 6px;
}

#passwordChangeModal input[type="text"], #passwordChangeModal input[type="password"] {
  box-sizing            : border-box;
  background-color      : #fff;
  border                : 1px solid #b8b8b8;
  -webkit-border-radius : 4px;
  -moz-border-radius    : 4px;
  border-radius         : 4px;
  box-shadow            : 0 1px 3px rgba(0, 0, 0, 0.25) inset;
  font-size             : 16px;
  font-weight           : 300;
  height                : 42px;
  padding               : 0 10px;
  line-height           : 42px !important;
  width                 : 340px !important;
  margin                : 2px;
}

#deletePplCampaignsModal {
  display          : none;
  position         : fixed;
  z-index          : 1;
  padding-top      : 100px;
  left             : 0;
  top              : 0;
  width            : 100%;
  height           : 100%;
  overflow         : auto;
  background-color : rgb(0, 0, 0);
  background-color : rgba(0, 0, 0, 0.4);
}

#deletePplCampaignsModal .modalErrorContent {
  background-color : #fefefe;
  padding          : 50px 20px 40px 20px;
  border           : 1px solid #888;
  width            : 30%;
  position         : initial;
  margin           : 30vh auto;
  text-align       : center;
}

#deletePplCampaignsModal #closeDeletePPLModal {
  text-align  : right;
  font-size   : 28px;
  font-weight : bold;
  margin-top  : -40px;
  display     : inline-block;
  width       : 100%;
}

#deletePplCampaignsModal #closeDeletePPLModal:hover {
  cursor : pointer;
}