/* 
 *  This is a common file to include common stylings throughout all Pages in OA
 */

/* @todo(WR-2159): Move into relationships specific pages */
table.form {

    &.small-width {
        width: 25%;
    }

    &.big-width {
        width: 40%;
    }

}

//@TO-DO: Need to remove these styles once we redesign form elements
span.required {
   color: $gorilla;
   font-size: 20px;
   line-height: 10px;
   vertical-align: bottom;
}

//@TO-DO(PHYS-4109): Need to remove after radio buttons get redesigned 
span.radiotext {
    margin: 0 10px 0 4px;
    position: relative;
    top: -2px;
}

/* Quick Search
-----------------------------------------------------------------------------*/

#quickSearch {
    border: 1px solid $koala;
    border-radius: 4px;
    float: right;
    margin-bottom: 15px;
    padding: 10px;
    width: 100%;

    .quickSearchField {
        height: 40px;
        padding-left: 30px;
        width: 100%;
    }

    .btn-search-icon {
        border: 0 solid;
        background: url(../oa/images/search.png) no-repeat center;
        height: 40px;
        position: absolute;
        width: 30px;
    }

    .radio-multiselect {
        display: inline-block;
        margin-bottom: 10px;

        &:before,
        &:after {
          content: "";
          display: table;
          line-height: 0;
        }

        &:after {
            clear: both;
        }

        input[type="radio"] {
            display: none;
        }

        input[type="radio"] + label {
            font-weight: $font-weight-bold;
            line-height: 28px;
            padding: 0 8px;
        }

        .first-child-border-radius {
            //We have intentionally used this important, as the bootstrap override the border radius style for button group.
            border-top-left-radius: 3px !important; 
            border-bottom-left-radius: 3px !important;
        }

        input[type="radio"]:checked + label {
            background: $mouse;
            box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
            border-color: $timberwolf;
            color: $gorilla;
        }

    }

}

/* ---------CSRF Loader--------- */

.oa-page-loader {
    background: url('../oa/images/loader.gif') 50% 50% no-repeat rgb(249, 249, 249);
    height: 100%;
    left: 0px;
    opacity: .8;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 9999;
}

/* ---------participant identifier artists--------- */
.artist_uri .textField {
    margin-left: 2px;
    width: 115px;
}
.spotifyAppKey {
    margin-top: 7px;
}

.spotifyAppKeyTxt {
    margin-top: 7px;
    margin-left: 2px;
}

.spotify-appkey-img {
    margin-left: 0;
}


/* ---------Tooltip for Apple Artist ID--------- */
.help-tooltip {
  position: absolute;
  display: inline-block;
}

.help-tooltip .tooltiptext {
  bottom: 100%;
  left: 50%;
  visibility: hidden;
  background-color: #4a4a4a;
  font-size: 12px;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  z-index: 1;
}

.help-tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.help-tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

.help-tooltip.apple-artist .tooltiptext {
  width: 330px;
  margin-left: -165px;
}

.tooltiptext {
  a:link {
    color: #337ab7;
  }
}
/* ---------Tooltip for Spotify Artist ID--------- */
.help-tooltip-spotify {
  position: relative;
  display: inline-block;
}

.help-tooltip-spotify .tooltiptext {
  bottom: 100%;
  left: 50%;
  visibility: hidden;
  background-color: #4a4a4a;
  font-size: 12px;
  color: #fff;
  text-align: left;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  z-index: 1;
}

.help-tooltip-spotify .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.help-tooltip-spotify:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

.help-tooltip-spotify.spotify-artist .tooltiptext {
  width: 450px;
  margin-left: -225px;
}

/* ---------Tooltip for Spotify Artist ID--------- */
.help-tooltip.spotify-artist .tooltiptext {
  width: 450px;
  margin-left: -225px;
}

/* ---------Japanese physical distribution--------- */
#jp_distribution{
  display: inline-block;
}

#jp_tooltip{
  margin-top: 5px;
}

.help-tooltip#jp_tooltip .tooltiptext {
  width: 500px;
  margin-left: -250px;
}

.w8_lob_select {
  width: 100%;
}

/* ---------Tooltip for Active Terms Contract ID--------- */
.tooltip_active {
  position: relative;
  display: inline-block;
}

.tooltip_active .tooltiptext_active {
  visibility: hidden;
  width: 270px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip_active .tooltiptext_active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip_active:hover .tooltiptext_active {
  visibility: visible;
}

/* ---------Physical supply chain info section on edit pages--------- */
.supply-chain-info {
  h5 {
    background-color: transparent;
    font-weight: 500;
  }

  > .form {
    width: 80%;
    margin-left: 80px;
  }

  tbody tr th:first-child {
    text-align: left;
    width: 35%;
  }

  tbody tr td input {
    width: 150px;
  }

  table.form {
    th {
      width: 150px;
    }

    td {
      width: 50px;
    }
  }

  label,
  .form-label {
    color: black;
    text-transform: capitalize;
  }

  .supply-chain {
    margin-top: 0;
  }

  .headers {
    th {
      text-align: left;
    }
  }
}