@import "admin-license-key-fields";

/**
 * Modify the GFAddon App Settings page
 */
.gravityview_page_gravityview_settings, // Network Admin
.toplevel_page_gravityview_settings // Single site admin
{

  #gv-uninstall-wrapper {
    margin-top: 10px;
    clear: both;
    width: 100%;
    display: none;
  }

  .button-danger:active, .button-danger:hover {
    border: 1px solid #DD3D36;
    background: #DD3D36;
    color: #FFF;
    -webkit-box-shadow: inset 0 2px 5px -3px rgba(173, 12, 17, .5);
    box-shadow: inset 0 2px 5px -3px rgba(173, 12, 17, .5);
    text-shadow: none !important
  }

  #gaddon-setting-row-license_key th {
    position: relative;
  }

  #gaddon-setting-row-license_key td {
      vertical-align: top;
  }

  .gv-refresh-page {
    font-weight: bold;
    font-size: 1.1em;
  }

  .gv-license-details {

    display: block;
    clear: both;
    position: relative;
    font-size: 1.1em;

    li {
      margin: 0;
    }

    ul.ul-disc {
      margin-left: 0;
      padding-left: 1.3em;

      li {
        padding-left: .1em;
        list-style: disc outside;
        overflow: visible; // Required to show the bullet
      }
    }
    h3 {
      text-transform: uppercase;
      font-weight: 400;
      font-size: 1em;
      margin: .5em 0;
    }
    h4 {
      margin: 0 0 .5em 0;
    }
    .description {
      padding-top: .25em; // Overwrite GF .description
    }
  }

  .gform_tab_content > h3 {
    position: absolute;
    top: .5em;
    right:10px;
  }

  .version-info {
    position: absolute;
    right: 10px;
    top: .5em
  }

  .gv-edd-message {
    min-height: 20px;
    padding: 8px 19px;
    margin: 10px 0!important;
    border: 1px solid;
    border-radius: 4px;
    position: relative;

    display: block!important; // Overwrite .inline class declaration

    background-color: #eeeeee;
    border-color: #cccccc;
    color: #666666;

    &.valid {
      background-color: #c4ee91;
      border-color: #71af5d;
      color: #4d7615;
    }

    &.error,
    &.invalid,
    &.failed {
      background-color: #fba1a3;
      border-color: #b84f5b;
      color: #981225
    }

    &.site_inactive,
    &.deactivated {
      background-color: #fbeba4;
      border-color: #d7c281;
      color: #958234
    }

    &.pending {
      background-color: #d3e4f4;
      border-color: #a9b6c2;
      color: #5c80a1;
    }

    p:first-child {
      margin: 0;
      padding: 2px;
    }
  }

  .inline.hide:empty {
    display: none!important;
  }

  .hide {
    display: none;
  }

  // Add the stars to the top
  #gform_tab_group {
    padding: 0;
    background: url(../images/stars.jpg) left top repeat-x;

    // Add Floaty
    &:before {
      content: '';
      display: block;
      position: relative;
      margin-left: 0;
      background-color: #fff;

      min-height: 110px;
      background: url(../images/astronaut-200x263.png) -30px top no-repeat;
      margin: 0;
      padding: 10px 0 0 160px;
    }

  }

  .gform_tab_group {
    position: relative;

    // Don't change the position of the inputs when the .updated div slideUps
    #message {
      position: absolute;

      // As wide as it needs to be
      width: auto;
      white-space: nowrap;

      // Make it look like Floaty is saying it
      top: 35px;
      left: 150px;

      margin-bottom: 10px; // For when JS is off, make sure it has some space

      padding-top: 5px;
      padding-bottom: 5px;
      z-index: 1000;
      opacity: .95;

      p {
        margin: 0;
        padding: .25em 5px;
        font-size: 16px;
          strong {
            font-weight: 400;
          }
      }
    }
  }

  // Don't have tab margins
  #gform_tab_container {
    margin-left: 0;
    background-color: #fff;
    padding: 20px 20px 0 20px;
  }

  // Hide the tabs
  #gform_tabs {
    margin-top: 0;
    display: none;
  }


  #gform-settings {

    clear: both;

    tr {
      border-top:1px solid #E7E7E7;
    }

    tr:first-child {
      border-top: none;
      td, th {
        padding-top: 10px!important;
      }
    }

    .gaddon-section {
      padding-top: 0;
      & > h4 {
        color: #777;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
      }
    }

    table:last-child > tr:first-child,
    table:last-child > tr:last-child {

      td, th {
        padding-bottom: 10px!important;
      }
    }

    th, td {
      margin: 0;
      padding: 20px 10px 20px 0;
      width: auto;
    }

    td {
      width: 60%;

      &[colspan] {
        width: 100%;
      }

      div {
        //padding-left: 10px;
      }
    }

    th {
      font-weight: bold;
      display: block;
    }

    /**
     * On smaller screens, the radio inputs were displaying on different lines than the labels.
     * This keeps the <span>s and the <input>s together.
     */
    label {
      display: inline-block;
    }

    span.description {
      display: block;
      font-style: normal;
      font-weight: 400;
      color: #666;
    }

  }

}