ngx-spinner .black-overlay.ng-star-inserted {
  position: fixed;
}

ngx-spinner .loading-text.ng-star-inserted {
  position: fixed;
  width: 100%;
}

ngx-spinner .loading-text.ng-star-inserted {
  font-size: 20px;
  color: white;
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.modal.modal-position-sticky {
  position: sticky !important;
  top: 300px;
}

.modal .modal-dialog.modal-full {
  width: 95% !important;
}

.form-btn-footer {
  display: flex;
  padding: 13px 14px 15px;
  border-top: 1px solid rgba(0,0,0,.1);
  background: rgba(249,249,249,.9);
  margin-top: 25px;
}

button.btn-transparent,
button.btn-icon {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

button.btn-transparent:hover,
button.btn-icon:hover {
  color: #344A53;
}

.hoverable:hover {
  cursor: pointer !important;
}

span.text-link:hover {
  cursor: pointer;
}

.w-100 {
  width: 100%;
}

.m-t-b-5 {
  margin: 5px 0 !important;
}
.m-t-b-10 {
  margin: 10px 0 !important;
}
.m-t-b-15 {
  margin: 15px 0 !important;
}
.m-t-b-20 {
  margin: 20px 0 !important;
}
.m-t-b-30 {
  margin: 30px 0 !important;
}
.m-t-b-40 {
  margin: 40px 0 !important;
}
.m-t-b-50 {
  margin: 50px 0 !important;
}

.m-r-l-5 {
  margin: 0 5px !important;
}
.m-r-l-10 {
  margin: 0 10px !important;
}
.m-r-l-15 {
  margin: 0 15px !important;
}
.m-r-l-20 {
  margin: 0 20px !important;
}

.m-0 {
  margin: 0px;
}
.m-5 {
  margin: 5px !important;
}
.m-10 {
  margin: 10px !important;
}
.m-15 {
  margin: 15px !important;
}
.m-20 {
  margin: 20px !important;
}

.m-r-5 {
  margin-right: 5px !important;
}
.m-r-10 {
  margin-right: 10px !important;
}
.m-r-15 {
  margin-right: 15px !important;
}
.m-r-20 {
  margin-right: 20px !important;
}

.m-l-5 {
  margin-left: 5px !important;
}
.m-l-10 {
  margin-left: 10px !important;
}
.m-l-15 {
  margin-left: 15px !important;
}
.m-l-20 {
  margin-left: 20px !important;
}

.m-b-0 {
  margin-bottom: 0px !important;
}
.m-b-5 {
  margin-bottom: 5px !important;
}
.m-b-10 {
  margin-bottom: 10px !important;
}
.m-b-15 {
  margin-bottom: 15px !important;
}
.m-b-20 {
  margin-bottom: 20px !important;
}
.m-b-30 {
  margin-bottom: 30px !important;
}
.m-b-40 {
  margin-bottom: 40px !important;
}
.m-b-50 {
  margin-bottom: 50px !important;
}
.m-b-75 {
  margin-bottom: 75px !important;
}
.m-b-100 {
  margin-bottom: 100px !important;
}

.m-t-0 {
  margin-top: 0px !important;
}
.m-t-5 {
  margin-top: 5px !important;
}
.m-t-10 {
  margin-top: 10px !important;
}
.m-t-15 {
  margin-top: 15px !important;
}
.m-t-20 {
  margin-top: 20px !important;
}
.m-t-30 {
  margin-top: 30px !important;
}
.m-t-40 {
  margin-top: 40px !important;
}
.m-t-50 {
  margin-top: 50px !important;
}
.m-t-75 {
  margin-top: 75px !important;
}

.p-b-0 {
  margin-bottom: 0px !important;
}
.p-b-5 {
  margin-bottom: 5px !important;
}
.p-b-10 {
  margin-bottom: 10px !important;
}
.p-b-15 {
  margin-bottom: 15px !important;
}
.p-b-20 {
  margin-bottom: 20px !important;
}
.p-b-30 {
  margin-bottom: 30px !important;
}
.p-b-40 {
  margin-bottom: 40px !important;
}
.p-b-50 {
  margin-bottom: 50px !important;
}
.p-b-75 {
  margin-bottom: 75px !important;
}
.p-b-200 {
  margin-bottom: 200px;
}

.p-t-b-0 {
  padding: 0px 0 !important;
}
.p-t-b-5 {
  padding: 5px 0 !important;
}
.p-t-b-10 {
  padding: 10px 0 !important;
}
.p-t-b-15 {
  padding: 15px 0 !important;
}
.p-t-b-20 {
  padding: 20px 0 !important;
}

.p-r-l-5 {
  padding: 0 5px !important;
}
.p-r-l-10 {
  padding: 0 10px !important;
}
.p-r-l-15 {
  padding: 0 15px !important;
}
.p-r-l-20 {
  padding: 0 20px !important;
}
.p-r-l-30 {
  padding: 0 30px !important;
}
.p-r-l-40 {
  padding: 0 40px !important;
}

.p-l-0 {
  padding-left: 0px !important;
}
.p-l-5 {
  padding-left: 5px !important;
}
.p-l-10 {
  padding-left: 10px !important;
}
.p-l-15 {
  padding-left: 15px !important;
}
.p-l-20 {
  padding-left: 20px !important;
}

.p-r-0 {
  padding-right: 0px !important;
}
.p-r-5 {
  padding-right: 5px !important;
}
.p-r-10 {
  padding-right: 10px !important;
}
.p-r-15 {
  padding-right: 15px !important;
}
.p-r-20 {
  padding-right: 20px !important;
}

.p-0 {
  padding: 0px !important;
}
.p-5 {
  padding: 5px !important;
}
.p-10 {
  padding: 10px !important;
}
.p-15 {
  padding: 15px !important;
}
.p-20 {
  padding: 20px !important;
}

.p-l-10 {
  padding-left: 10px !important;
}

span#logo {
  margin: 0 0 0 10px !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../img/logo.png');
 }

 .hover-plus-blue:hover {
    background-color: #344A53 !important;
  }

 .fa.fa-pencil.ng2-st-delete {
    color: red !important;
  }

.fa.ng2-st-btn {
  font-size: 15px;
  margin: 3px;
}

.icon-btn-wrapper,
i.icon-link:hover {
  cursor: pointer !important;
}

i.icon-hoverable:hover { 
  cursor: pointer !important;
}

.flex {
  display: flex !important;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-auto {
  flex: 1 1 auto !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-jcsa {
  justify-content: space-around !important;
}

.flex-jcfe {
  justify-content: flex-end;
}

.flex-jcfs {
  justify-content: flex-start !important;
}

.flex-jcc {
  justify-content: center !important;
}

.flex-acc {
  align-content: center !important;
}

.flex-aic {
  align-items: center !important;
}

.fill-height {
  min-height: -webkit-fill-available !important;
}

.flex-jac {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.flex-jasb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-jase {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-jasa {
  display: flex !important;
  justify-content: space-around;
  align-items: center;
}

.flex-a-baseline {
  display: flex;
  align-items: baseline;
}

.flex-align-items-center {
  display: flex;
  align-items: center;
}

.flex-jcfs {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.flex-jcfs-baseline {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
}

.vertical-btn-container {
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
}

.btn-w-10 {
  width: 10% !important;
}

.btn-w-20 {
  width: 20% !important;
}

.btn-w-30 {
  width: 30% !important;
}

.btn-w-40 {
  width: 40% !important;
}

.btn-w-50 {
  width: 50% !important;
}

.btn-w-60 {
  width: 60% !important;
}

.btn-w-70 {
  width: 70% !important;
}

.btn-w-80 {
  width: 80% !important;
}

.btn-w-90 {
  width: 90% !important;
}

.btn-w-100 {
  width: 100% !important;
}

.btn.btn-blue {
  background-color: #00bcd4 !important;
  color: white !important;
}

.btn.btn-blue:hover {
  background-color: #344A53 !important;
}

.btn-magneto {
  background: rgba(141, 96, 160, 1) !important;
  border: rgba(133, 71, 160, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.btn-magneto:hover {
  background: rgba(133, 71, 160, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.btn-coal {
  background: rgba(64, 64, 64, .8) !important;
  border: rgba(56, 56, 56, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.btn-coal:hover {
  background: rgba(64, 64, 64, 1) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.icon-btn-with-text {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.icon-btn-with-text .icon-btn-child {
  display: flex !important;
}

.flex-basis-10 {
  flex-basis: 10% !important;
}

.flex-basis-20 {
  flex-basis: 20% !important;
}

.flex-basis-25 {
  flex-basis: 25% !important;
}

.flex-basis-30 {
  flex-basis: 30% !important;
}

.flex-basis-40 {
  flex-basis: 40% !important;
}

.flex-basis-50 {
  flex-basis: 50% !important;
}

.flex-basis-60 {
  flex-basis: 60% !important;
}

.flex-basis-70 {
  flex-basis: 70% !important;
}

.flex-basis-75 {
  flex-basis: 75% !important;
}

.flex-basis-80 {
  flex-basis: 80% !important;
}

.flex-basis-90 {
  flex-basis: 90% !important;
}

.flex-basis-100 {
  flex-basis: 100% !important;
}

.ai-c {
  align-items: center;
}

.flex-col {
  flex-direction: column;
}

.flex-col-r {
  flex-direction: column-reverse;
}

.flex-row {
  flex-direction: row;
}

.flex-row-r {
  flex-direction: row-reverse;
}

.font-sz-10 {
  font-size: 10px !important;
}

.font-sz-12 {
  font-size: 12px !important;
}

.font-sz-14 {
  font-size: 14px !important;
}

.font-sz-16 {
  font-size: 16px !important;
}

.font-sz-18 {
  font-size: 18px !important;
}

.font-sz-20 {
  font-size: 20px !important;
}

.font-sz-24 {
  font-size: 24px !important;
}

.font-sz-28 {
  font-size: 28px !important;
}

.font-sz-32 {
  font-size: 32px !important;
}

.font-sz-36 {
  font-size: 36px !important;
}

.font-sz-40 {
  font-size: 40px !important;
}

.font-blue {
  color: #2196f3 !important;
}

.font-green {
  color: #659265 !important;
}

.font-light-green {
  color: #8bc34a !important;
}

.font-light-green:hover {
  color: #5b835b !important;
}

.font-red {
  color: #c26565 !important;
}

.font-white {
  color: #ffffff !important;
}

.font-orange {
  color: #ffc107 !important;
}

.font-danger {
  color: red !important;
}

.txt-color-red {
  color: #c26565;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-spacing-0 {
  letter-spacing: 0px !important;
}

.text-spacing-1 {
  letter-spacing: 1px !important;
}

.text-spacing-2 {
  letter-spacing: 2px !important;
}

.text-spacing-3 {
  letter-spacing: 3px !important;
}

.text-spacing-4 {
  letter-spacing: 4px !important;
}

.text-spacing-5 {
  letter-spacing: 5px !important;
}

.font-weight-1 {
  font-weight: 100 !important;
}

.font-weight-2 {
  font-weight: 200 !important;
}

.font-weight-3 {
  font-weight: 300 !important;
}

.font-weight-4 {
  font-weight: 400 !important;
}

.font-weight-5 {
  font-weight: 500 !important;
}

.font-weight-6 {
  font-weight: 600 !important;
}

.font-weight-7 {
  font-weight: 700 !important;
}

.font-weight-8 {
  font-weight: 800 !important;
}

.font-weight-9 {
  font-weight: 900 !important;
}

.text-overflow-ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


.overflow-wrap {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto !important;
}

.wrap-text {
  word-wrap: break-word !important;
}

.hr-grey {
  border-top: 1px solid #474544 !important;
}

.hr-grey-0 {
  border: none !important;
}

.hr-grey-10 {
  border-top: 1px solid rgba(71, 69, 68, 0.1) !important;
}

.hr-grey-20 {
  border-top: 1px solid rgba(71, 69, 68, 0.2) !important;
}

.hr-grey-30 {
  border-top: 1px solid rgba(71, 69, 68, 0.3) !important;
}

.hr-grey-40 {
  border-top: 1px solid rgba(71, 69, 68, 0.4) !important;
}

.hr-grey-50 {
  border-top: 1px solid rgba(71, 69, 68, 0.5) !important;
}

.hr-grey-60 {
  border-top: 1px solid rgba(71, 69, 68, 0.6) !important;
}

.hr-grey-70 {
  border-top: 1px solid rgba(71, 69, 68, 0.7) !important;
}

.hr-grey-80 {
  border-top: 1px solid rgba(71, 69, 68, 0.8) !important;
}

.hr-grey-90 {
  border-top: 1px solid rgba(71, 69, 68, 0.9) !important;
}

.hr-grey {
  border-top: 1px solid #474544 !important;
}

.hr-white-90 {
  border-top: 1px solid rgba(255, 255, 255, .9) !important;
}

.smart-form.add-form header {
  margin: 0;
  padding-left: 15px;
  padding-right: 30px;
  display: flex;
}

.header-with-actions {
  padding-left: 15px;
  padding-right: 30px;
  display: flex;
  align-items: center;
}

.header-with-actions .header-link-btn{
  margin: 0 15px 0 0;
}

div.form-check {
  display: inline-block !important;
}

div.form-check > label.form-check-label {
    padding-left: 5px;
}

input.bottom-border-only {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

input[type="text"]:not(.mat-input-element).ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
  border: 1px solid rgba(194,101,101,1) !important;
}
input[type="password"]:not(.mat-input-element).ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
  border: 1px solid rgba(194,101,101,1) !important;
}
input[type="select"]:not(.mat-input-element).ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
  border: 1px solid rgba(194,101,101,1) !important;
}
input[type="email"]:not(.mat-input-element).ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
  border: 1px solid rgba(194,101,101,1) !important;
}
input[type="number"]:not(.mat-input-element).ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
  border: 1px solid rgba(194,101,101,1) !important;
}

.error-messages span,
.error-message {
  color: rgba(194,101,101,1) !important;
}

.width-5-percent {
  width: 5% !important;
}
.width-10-percent {
  width: 10% !important;
}
.width-15-percent {
  width: 15% !important;
}
.width-20-percent {
  width: 20% !important;
}
.width-25-percent {
  width: 25% !important;
}
.width-30-percent {
  width: 30% !important;
}
.width-35-percent {
  width: 35% !important;
}
.width-40-percent {
  width: 40% !important;
}
.width-45-percent {
  width: 45% !important;
}
.width-50-percent {
  width: 50% !important;
}
.width-55-percent {
  width: 55% !important;
}
.width-60-percent {
  width: 60% !important;
}
.width-65-percent {
  width: 65% !important;
}
.width-70-percent {
  width: 70% !important;
}
.width-75-percent {
  width: 75% !important;
}
.width-80-percent {
  width: 80% !important;
}
.width-85-percent {
  width: 85% !important;
}
.width-90-percent {
  width: 90% !important;
}
.width-95-percent {
  width: 95% !important;
}
.width-100-percent {
  width: 100% !important;
}

.org-name {
  padding: 0 5px;
}

.opac-10 {
  opacity: 0.1;
}

.opac-20 {
  opacity: 0.2;
}

.opac-30 {
  opacity: 0.3;
}

.opac-40 {
  opacity: 0.4;
}

.opac-50 {
  opacity: 0.5;
}

.opac-60 {
  opacity: 0.6;
}

.opac-70 {
  opacity: 0.7;
}

.opac-80 {
  opacity: 0.8;
}

.opac-90 {
  opacity: 0.9;
}

.opac-100 {
  opacity: 1;
}

.letter-spacing-0 {
  letter-spacing: 0px;
}

.letter-spacing-1 {
  letter-spacing: 1px;
}

.letter-spacing-2 {
  letter-spacing: 2px;
}

.letter-spacing-3 {
  letter-spacing: 3px;
}

.letter-spacing-4 {
  letter-spacing: 4px;
}

.letter-spacing-5 {
  letter-spacing: 5px;
}

.letter-spacing-6 {
  letter-spacing: 6px;
}

.letter-spacing-7 {
  letter-spacing: 7px;
}

.letter-spacing-8 {
  letter-spacing: 8px;
}

.letter-spacing-9 {
  letter-spacing: 9px;
}

.letter-spacing-0 {
  letter-spacing: 0px;
}

.letter-spacing-10 {
  letter-spacing: 10px;
}

.letter-spacing-20 {
  letter-spacing: 20px;
}

.letter-spacing-30 {
  letter-spacing: 30px;
}

.letter-spacing-40 {
  letter-spacing: 40px;
}

.letter-spacing-50 {
  letter-spacing: 50px;
}

.letter-spacing-60 {
  letter-spacing: 60px;
}

.letter-spacing-70 {
  letter-spacing: 70px;
}

.letter-spacing-80 {
  letter-spacing: 80px;
}

.letter-spacing-90 {
  letter-spacing: 90px;
}

.letter-spacing-100 {
  letter-spacing: 100px;
}


img.responsive {
  max-width: 100%;
  height: auto;
}

bext-color-picker {
  height: 25px;
  width: 25px;
}

.pac-container {
  z-index: 1040 !important;
}

@media (min-width:0) and (max-width:679px) {
  span#logo {
    margin: 0 0 0 10px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../img/bext_logo_white.png') !important;
  }

  .org-name {
    color: #f3f3f3;
  }

  .desktop-header-align {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

@media only screen and (min-width:400px) {
  .desktop-header-align {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

.nav-icon-fa {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  font-size: 24px;
  box-sizing: content-box;
  border-radius: 50%;
  padding: 4px;
}




/* -------- GLOBAL MEDIA QUERIES -------- */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
.video-header {
    padding-top: 20px;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
.video-header {
    padding-top: 20px;
    padding-left: 70px;
    padding-right: 70px;
  }
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
  
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
.video-header {
    padding-top: 20px;
    padding-left: 100px;
    padding-right: 100px;
  }
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
  .video-header {
    padding-top: 20px;
    padding-left: 300px;
    padding-right: 300px;
  }
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* iPhone 6, 7, 8 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* iPhone 6+, 7+, 8+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* iPhone X ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* iPhone XS Max, XR ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 896px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
  .auth-container {
    width: 90% !important;
  }
}