/* GENERAL NOTE */
/*
  General note from ŁS to current and future developers:
  Every time when it comes to development of long-term web app,
  styles part should be developed as library of reusable UI components.
  This is very long-term project with a lot of legacy, both good and bad.

  So when I will find a component, which is well written, I'll be reusing it
  to build new, consistent parts of user interface.
  But when I won't find a well defined elements, I'll be developing
  new reusable library of components.

  I'll be doing it using BEM convention which uses blocks and modifiers strategy.
  If you're not familiar with BEM, please read about it and get to know its rules
  before start of development.

  Now we use pure CSS to write styles, in future probably it will come to SCSS.
  However, those rules described above are general and must be followed independently
  of used technology.
*/
/* GENERAL NOTE END */

/* basic overlay */
.basic-overlay {
  position: fixed;
  top: -50vh;
  left: 0;
  height: 200vh;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  margin-left: 101%;
  z-index: 1000000;
  opacity: 0;
  cursor: auto;
  -webkit-transition: opacity .3s ease;
  -moz-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.basic-overlay--show {
  margin-left: 0;
  opacity: 1;
}

/* basic modal */
.basic-modal {
  position: relative;
  margin: 0 auto;
  margin-top: -100vh;
  max-width: 92%;
  background: #fff;
  border-radius: 2px;
  padding: 25px;
  box-sizing: border-box;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.basic-modal--narrow {
  min-width: 340px;
  max-width: 450px;
  box-sizing: border-box;
}

.basic-modal--show {
  margin-top: 65vh;
  opacity: 1;
}

.basic-modal__title {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 15px;
  font-weight: normal;
  color: #000000;
}

.basic-modal__description {
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 20px;
  font-weight: normal;
  color: #000000;
}

.basic-modal .basic-modal-iframe {
  width: 100%;
  height: 600px;
  max-height: calc(100vh - 2vh - 160px);
  border: none;
}

@media(max-width: 450px) {
  .basic-modal .basic-modal-iframe {
    height: 375px;
  }
}

/* tooltip */
.custom-tooltip-wrapper:hover {
  position: relative;
}

.custom-tooltip {
  position: absolute;
  top: 0;
  padding: 6px;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  display: none;
}

.custom-tooltip-wrapper:hover .custom-tooltip {
  display: block;
  z-index: 11111;
}

/* buttons */
.unified-button-primary {
  background: #00946e;
  color: #fff;
  text-decoration: none;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  display: inline-block;
  border-radius: 2px;
  font-size: 16px;
}

.unified-button-primary:hover {
  background-color: #077858;
  color: #fff;
}

.unified-button-primary--lower-height {
  padding: 9px 12px;
}

.unified-button-secondary {
  background: #818284;
  color: #fff;
  text-decoration: none;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  display: inline-block;
  border-radius: 2px;
}

.unified-button-secondary:hover {
  opacity: .9;
}

/* pretty-radio */

.radio-row {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

.pretty-radio {
  position: relative;
  width: 32px;
  left: -10px;
  height: 37px;
  background: url(/_ui/em/images/pretty-checkable-black.png) top left no-repeat;
  display: inline-block;
  cursor: pointer;
  background-position: 1px -161px;
}

.pretty-radio--checked {
  background-position: 0 -240px;
}