@import "~cosmoUiVariables";

.modalContent {
  width: 400px;
  padding: 40px 30px 30px 30px;
  display: flex;
  flex-wrap:wrap;

  .mainBlock {
    flex: 0 0 100%;
    padding-bottom: 10px;
    font-size: 10px;
  }
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;

  .iconColumn {
    flex: 0 0 15%;
  }

  .messageColumn {
    flex: 0 0 84%;
    font-size: 16px;

    .blueOr {
      color: $brand-primary;
      font-weight: bold;
      font-size: 12px;
    }
  }

  .inputBlock {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    height:20px;
    margin-top: 10px;

    input[type="text"] {
      width: 120px;
      background-color: transparent;
      border-width: 0 0 1px 0;
      border-bottom: $border-light;
    }

    .validTick {
      display: inline-block;
      width: 20px;
      height: 20px;
      padding-top:2px;
    }

    .invalidCross {
      display: inline-block;
      width: 20px;
      height: 20px;
      padding-top:2px;
    }
  }

  .notesBlock {
    padding-bottom: 20px;

    textarea {
      height: 80px;
      border: $border-light;
      background-color: $panel_background;
    }
  }
}