/* $Id: $ */

/* Properties for very small mobile screen */
@media only screen and (min-width: 320px) and (max-width: 575px) {
  .errorBandText {
    max-width: 230px;
  }

  .form-header {
    max-height: 250px !important;
    border-radius: 0 !important;
  }

  .header-branding {
    width: 90%;
    font-size: 21px;
  }

  .header-logo {
    width: auto;
    height: auto;
    max-width: 80%;
    max-height: 100px;
  }

  .form-section {
    padding: 40px 30px;
  }

  .surveyQuestion {
    padding: 30px 0;
  }

 .surveyQuestion .qNos, 
 .surveyQuestion .questionText {
    font-size: 18px;
  }

  .btnHint {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }

  .hintPopover {
    max-width: 100%;
  }

  .closePopover {
    top: 12px;
    right: 12px;
    width: 12px;
    height: 15px;
  }

  .messageContainer {
    min-width: 280px;
    max-width: 90%;
  }

  .previewEndActions .btnPreviewAct {
    width: 90%;
    font-size: 15px;
  }

  .remotelyModified, 
  .savingFailure {
    padding: 30px 25px;
    width: 320px;
  }

  .savingSucceed,
  .timerRequestDialog {
    width: 98vw;
    padding: 0 30px 40px;
  }

  .btnFormAction, .btnFormAction.submit, .btnFormAction.unlockForm {
    padding: 12px 15px;
  }

  .passwordFieldSect, .btnFormAction, .btnFormAction.submit, .btnFormAction.unlockForm {
    width: 100%;
    max-width: 100%;
  }

  .captchaIO {
    max-width: 100%;
  }

  .maxTimer {
    padding: 15px 30px 15px;
  }

  .maxTimer .timerContentContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
  }

  .maxTimer.withRequestLink .timerContentContainer {
    max-width: 100%;
    margin-bottom: 25px;
  }

  .maxTimer .timerContent {
    flex: 0 1 72%;
    text-align: left;
  }

  .maxTimer .digiClock {
    margin-top: 0;
    flex: 1 0 auto;
    text-align: right;
  }

  .maxTimer .requestLink {
    top: auto;
    bottom: 8px;
  }

  .timerRequestDialog .emailBlock,
  .timerRequestDialog .timeBlock {
    display: block;
    width: 100%;
  }

  .timerRequestDialog .timeBlock {
    margin-top: 20px;
    padding-left: 0;
  }

  .timerRequestDialog .descriptiveNote {
    margin-bottom: 30px;
  }

  .timerRequestDialog .buttonCTA {
    margin-top: 30px;
  }

  .minTimer,
  .securityNote {
    text-align: center;
  }  

  .minTimer .timerContent,
  .minTimer .digiClock {
    display: block;
  }

  .minTimer .timerContent {
    margin-right: initial;
  }

  .minTimer .digiClock {
    margin-top: 5px;
  }

  .surveyQuestion .choiceLabel,
  .surveyQuestion .postLabel,
  .surveyQuestion .matrixChoice .flex .flexItem,
  .surveyQuestion .nps .btn-rating,
  .surveyQuestion .zsSelector .btn .value,
  .zsSelector .dropItem .itemLink,
  .zsSelector .dropItem.selected .itemLink,
  .surveyQuestion .uploader .fileName,
  .surveyQuestion .slider .range,
  .surveyQuestion .slider .amountIndicator,
  .surveyQuestion .sliderSum .sliderValue,
  .surveyQuestion .ratingWeightage .weightage,
  .surveyQuestion .ratingLikert .ratingValue,
  .surveyQuestion .topLabel,
  .surveyQuestion .digiSign .padContainer .responderName .lbl,
  .matrixRowColCombo .rowLabel,
  .surveyQuestion .zsSelectorFaux {
    font-size: 14px;
  }
  /* Timeout Notification alert in mobile screen */
  .timeOutNotification{
  	width:calc(100% - 30px);
  	gap: 15px;
  }
}

@media only screen and (max-device-width: 640px) and (orientation: landscape) {
  .surveyQuestion .choiceLabel,
  .surveyQuestion .postLabel,
  .surveyQuestion .matrixChoice .flex .flexItem,
  .surveyQuestion .nps .btn-rating,
  .surveyQuestion .zsSelector .btn .value,
  .zsSelector .dropItem .itemLink,
  .zsSelector .dropItem.selected .itemLink,
  .surveyQuestion .uploader .fileName,
  .surveyQuestion .slider .range,
  .surveyQuestion .slider .amountIndicator,
  .surveyQuestion .sliderSum .sliderValue,
  .surveyQuestion .ratingWeightage .weightage,
  .surveyQuestion .ratingLikert .ratingValue,
  .surveyQuestion .topLabel,
  .surveyQuestion .digiSign .padContainer .responderName .lbl,
  .matrixRowColCombo .rowLabel,
  .surveyQuestion .zsSelectorFaux {
    font-size: 14px;
  }
}

/* Properties for ordinary mobile screen */
@media only screen and (max-width: 767px) {
  .languageList {
    display: none;
  }

  .deviceLangSelect {
    display: inline-block;
    border: none;
  }

  .deviceLangSelect option {
    color: #333333;
  }

  .hintBody img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }

  .container, .container-fluid {
    padding: 0;
  }

  .container.move-left {
    margin-left: auto;
  }

  .container.move-right {
    margin-right: auto;
  }

  .container>.row, .container>.row>.col-xs-12, .container-fluid>.row, .container-fluid>.row>.col-xs-12 {
    margin: 0;
    padding: 0;
  }

  .surveyQuestion .error-message {
    max-width: 100%;
  }

  .form-page {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .footer-branding,
  .footer-branding.move-left,
  .footer-branding.move-right {
    text-align: center;
  }

  .form-section {
    padding: 30px 8% 80px 30px;
  }

  .form-footer {
    padding: 20px 30px;
  }

  .previewEndActionFrame {
    margin-top: 0;
    padding: 40px 0;
    font-size: 25px;
  }

  .previewEndActionFrame .previewEndMessage {
    font-size: 28px;
  }

  .btnPreviewAct.replayPreview {
    margin-top: 15px;
    margin-left: 0;
  }

  .previewEndActions .btnPreviewAct {
    width: 80%;
  }

  .imageContainer {
	position: relative;
	width: 100%;
  }

  .imageViewer .imageContent {
    margin: 0 auto 15px;
  }

  .imgLblOuter {
    position: fixed;
    bottom: 115px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    color: white;
    text-align: center;
  }

  .imageViewer .closeImgViewer {
    top: 10px;
    right: 10px;
  }
}

/* Properties for tablet sized screen */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .container.move-left {
    margin-left: auto;
  }

  .container.move-right {
    margin-right: auto;
  }

  .header-branding {
    font-size: 28px;
  }

  .form-section {
    padding: 40px 30px 40px;
  }

  .form-footer {
    padding: 20px 30px;
  }

  .maxTimer.withRequestLink .timerContentContainer {
    max-width: 75%;
  }
}

@media only screen and (max-width: 991px) {
  .maxTimer.withRequestLink {
    padding: 15px 30px 20px;
  }

  .maxTimer.withRequestLink .timerContentContainer {
    margin-left: 0;
    text-align: left; 
  }
}

/* Properties for tablet and mobile screens */
@media only screen and (max-width:992px) {
  .pageTitleDesc .reviewLink,
  .formActions .reviewLink,
  .passwordProtection .reviewLink,
  .introTermsCondition .reviewLink{
    left: -25px;
  }
}

@media only screen and (max-width: 1024px) {
  .container.move-left {
    margin-left: auto;
  }

  .container.move-right {
    margin-right: auto;
  }

  .pageTitleDesc .pageTitle {
    font-size: 20px;
  }

  .pageTitleDesc .pageDesc {
    font-size: 16px;
  }
}

@media only screen and (max-width: 1200px) {
  .form-header.stretch-bg .header-bg {
    background-size: 100% 100% !important;
  }
}

/* RTL styling base-form-media starts */
/* Properties for very small mobile screen */
@media only screen and (min-width: 320px) and (max-width: 575px) {
  html[dir="rtl"] .closePopover {
    right: auto;
    left: 12px;
  }

  html[dir="rtl"] .maxTimer .timerContent {
    text-align: right;
  }

  html[dir="rtl"] .maxTimer .digiClock {
    text-align: left;
  }

  html[dir="rtl"] .maxTimer .requestLink {
    right: auto;
    left: 30px;
  }
}

/* Properties for ordinary mobile screen */
@media only screen and (max-width: 767px) {
  html[dir="rtl"] .btnPreviewAct.replayPreview {
    margin-left: auto;
    margin-right: 0;
  }

  html[dir="rtl"] .imageViewer .closeImgViewer {
    left: 10px;
    right: auto;
  }
}
@media only screen and (max-width:991px) {
  html[dir="rtl"] .pageTitleDesc .reviewLink,
  html[dir="rtl"] .formActions .reviewLink {
    right: -25px;
    left: auto;
  }
}

/* No directional properties found for tablet sized screen */
/* No directional properties found for tablet and mobile screens */
/* RTL styling base-form-media ends */