/*  ANIMATION CSS */
.animated {
  animation-duration: .5s;
  animation-fill-mode: both;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.fadeOut {
  animation-name: fadeOut;
}
/*  END ANIMATION CSS */


.brand-adv-custom-tweet-button {
    position: relative;
    margin-bottom: 20px;
    text-align: center;
}
/* Case 1 */
.brand-adv-custom-tweet-button .twitter {
    display: block;
    width: 283px;
    height: 265px;
    background: url("/brand-advocacy-webapp/img/banner.jpg") no-repeat 0 0 transparent;
}



/* Case 2 */
.brand-adv-custom-tweet-button .btn {
    background: #ffc20e;
    border: none;
    color: #fff;
    font-family: helvetica;
    font-weight: bold;
    font-size: 16px;
    padding: 10px 45px 8px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
    text-transform: uppercase;
    max-width: 100%;
    margin-top: -45%;
}
.brand-adv-custom-tweet-button .img-responsive {
    margin: auto;
}
.brand-adv-custom-tweet-button .btn > span {
    display: block;
    max-height: 36px;
    overflow: hidden;
}
/* Fix z-index */
.UIWorkingWorkspace {
    z-index: 1!important;
}
/* Fix z-index for Top-Bar*/
.UIToolbarContainerDark .NormalContainerBlock .ToolbarContainer {
    z-index: 4;
    position: relative;
}
/* Tweet Popup */
.brand-adv-LightBoxContainer.tweetPopup {
    font-size: 14px;
    background-color: #4f76b5;
    text-align: center;
    position: fixed;
    left: auto;
    right: 0;
    top: 0px;
    bottom: 0;
    color: #fff;
    width: 265px;
    padding: 60px 20px 20px;
    padding: 75px 20px 20px;
    z-index: 2;
    overflow-y: auto;
    overflow-x:hidden;
    -webkit-transition: padding 200ms ease-in;
    -moz-transition: padding 200ms ease-in;
    -o-transition: padding 200ms ease-in;
    transition: padding 200ms ease-in;
}
.brand-adv-LightBoxContainer.tweetPopup .closepopup {
    background-color: #474747;
    display: block;
    height: 27px;
    line-height: 27px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 75px;
    width: 27px;
}
.brand-adv-LightBoxContainer.tweetPopup .closepopup:hover .uiIconWhite,
.brand-adv-LightBoxContainer.tweetPopup .closepopup .uiIconWhite:hover {
    background-image: url("/brand-advocacy-webapp/img/uiIconsWhite.png") !important;
}
.brand-adv-LightBoxContainer.tweetPopup .BgContent {
    background: none;
    padding: 0;
    position: static;
}
.brand-adv-LightBoxContainer.tweetPopup .introBox > h5 {
    margin: 30px 0 45px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    line-height: 26px;
    overflow: hidden;
    max-height: 52px;
}
.brand-adv-LightBoxContainer.tweetPopup .introBox > h5.fix-step-3 {
    margin: 10px 0 25px;
}
.brand-adv-LightBoxContainer.tweetPopup .titleStep {
    position: relative;
    margin-left: -52px;
    padding-left: 63px;
    text-align: left;
    margin-bottom: 30px;
    color: #fff;
    line-height: 18px;
}
.brand-adv-LightBoxContainer.tweetPopup .titleStep .textStep {
    display: block;
    margin-right: -40px;
}
.brand-adv-LightBoxContainer.tweetPopup .titleStep .numb {
    display: block;
    width: 30px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background-color: #474747;
    position: absolute;
    left: 0;
    top: 50%;
    padding-left: 9px;
    margin-top: -14px;
}
.brand-adv-LightBoxContainer.tweetPopup .titleStep .numb:after,
.brand-adv-LightBoxContainer.tweetPopup .titleStep .numb:before {
    content: "";
    display: block;
    position: absolute;
}
.brand-adv-LightBoxContainer.tweetPopup .titleStep .numb:after {
    left: 100%;
    top: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #474747;
}
.brand-adv-LightBoxContainer.tweetPopup .titleStep .numb:before {
    border-bottom: 9px solid transparent;
    border-right: 9px solid #232323;
    top: 100%;
    left: 0;
}
.brand-adv-LightBoxContainer .iconCapterra {
    display: inline-block;
    content: "";
    width: 15px;
    height: 20px;
    background: url("/brand-advocacy-webapp/img/iconCapterra.png") no-repeat 0 0 transparent;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent .write-review {
    font-weight: bold;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent .write-review > i {
    vertical-align: middle;
    margin-right: 5px;
}
.brand-adv-LightBoxContainer.tweetPopup .quote-popup {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
    text-align: justify;
    color: #333;
    position: relative;
    box-shadow: 5px 5px 12px 0 rgba(36, 44, 48, 0.27);
    -moz-box-shadow: 5px 5px 12px 0 rgba(36, 44, 48, 0.27);
    -webkit-box-shadow: 5px 5px 12px 0 rgba(36, 44, 48, 0.27);
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -webkit-border-radius: 4px 4px 4px 4px;
}
.brand-adv-LightBoxContainer.tweetPopup .quote-popup .box-view-value {
    max-height: 140px;
    overflow: auto;
}
.brand-adv-LightBoxContainer.tweetPopup .quote-popup p {
    margin: 0;
}
.brand-adv-LightBoxContainer.tweetPopup .quote-popup textarea {
    border: medium none;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    padding: 0;
    overflow: auto;
    resize: none;
    cursor: pointer;
    background: #FFF;
    font-size: 14px;
    line-height: 1.5em;
}

.brand-adv-LightBoxContainer.tweetPopup .quote-popup:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -9px;
}
.brand-adv-LightBoxContainer.tweetPopup .quote-popup:before {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid #fff;
}
/*.brand-adv-LightBoxContainer.tweetPopup .quote-popup:after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0px;
    background: transparent linear-gradient(to right, rgba(255, 255, 255, 0), #FFF 50%) repeat scroll 0% 0%;
    width: 60%;
    height: 31px;
    text-align: right;
}*/
.brand-adv-LightBoxContainer.tweetPopup .button-flat-balck {
    display: inline-block;
    padding: 10px 15px;
    background: #474747;
    color: #fff;
    border: none;
    min-width: 90px;
    font-size: 14px;
    font-weight: bold;
}
.brand-adv-LightBoxContainer.tweetPopup  .tut-copy {
    text-align: center;
    line-height: 24px;
    margin-bottom: 20px;
    /*   word-break: break-all;*/
}
.brand-adv-LightBoxContainer.tweetPopup select,
.brand-adv-LightBoxContainer.tweetPopup textarea,
.brand-adv-LightBoxContainer.tweetPopup input[type="text"],
.brand-adv-LightBoxContainer.tweetPopup input[type="password"],
.brand-adv-LightBoxContainer.tweetPopup input[type="datetime"],
.brand-adv-LightBoxContainer.tweetPopup input[type="datetime-local"],
.brand-adv-LightBoxContainer.tweetPopup input[type="date"],
.brand-adv-LightBoxContainer.tweetPopup input[type="month"],
.brand-adv-LightBoxContainer.tweetPopup input[type="time"],
.brand-adv-LightBoxContainer.tweetPopup input[type="week"],
.brand-adv-LightBoxContainer.tweetPopup input[type="number"],
.brand-adv-LightBoxContainer.tweetPopup input[type="email"],
.brand-adv-LightBoxContainer.tweetPopup input[type="url"],
.brand-adv-LightBoxContainer.tweetPopup input[type="search"],
.brand-adv-LightBoxContainer.tweetPopup input[type="tel"],
.brand-adv-LightBoxContainer.tweetPopup input[type="color"],
.brand-adv-LightBoxContainer.tweetPopup .uneditable-input {
    width: 100%;
    margin-bottom: 0;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetAddrForm .control-label {
    text-align: left;
    color: #fff;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetAddrForm .help-block,
.brand-adv-LightBoxContainer.tweetPopup .tweetAddrForm .help-inline {
    text-align: left;
    margin: 5px 0 0;
    font-size: 13px;
    color: #fff;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent {
    padding: 0 23px;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent .action {
    margin: 30px 0;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent .action .btn {
    font-weight: bold;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.start-step {
    padding: 0;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.start-step .titleStep {
    margin-left: -29px;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.start-step .btn-start {
    font-size: 18px;
    min-width: 150px;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.start-step .btn-start:hover,
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.start-step .btn-start:focus {
    background-position: 0;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.start-step .action {
    margin: 40px 0;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-1 .write-review {
    text-align: left;
    color: #fff;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-1 .write-review a {
    color: #fff;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-1 .write-review a:hover {
    color: #fff;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-2 .action {
    margin: 15px 0;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-3 .thank-title {
    margin-bottom: 15px;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-3 .thank-content {
    text-align: justify;
    font-size: 14px;
    margin-bottom: 15px;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-3 .thank-form textarea {
    height: 123px;
    padding: 10px 8px;
    margin-bottom: 20px;
    max-width: 100%;
    min-width: 100%;
    min-height: 123px;
    resize: none;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-3 .thank-form .btn {
    position: relative;
}
.brand-adv-LightBoxContainer.tweetPopup .tweetStepContent.step-3 .thank-form .iconTweetBird {
    margin-right: 5px;
    display: inline-block;
    width: 17px;
    height: 15px;
    background: url("/brand-advocacy-webapp/img/bird.png") no-repeat 0 0 transparent;
    position: relative;
    top: 3px;
    left: -3px;
}
.brand-adv-LightBoxContainer.tweetPopup.scroll-down {
    padding-top: 80px;
}
