/**
* All of the CSS for your admin-specific functionality should be
* included in this file.
*/
/**
*
* Media Queries 
* @media (min-width: $iphone-4-min) and ( max-width: $iphone-4-max) and ( -webkit-device-pixel-ratio: 2 )
* @media (min-width: $screen-sm-min)
* @media (min-width: $screen-md-min)
* @media (min-width: $screen-lg-min)
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/
// Defining values
$screen-sm-min: 768px;
$screen-xs-max: ($screen-sm-min - 1);
$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);
$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);
// For iphone 4
$iphone-4-min: 320px;
$iphone-4-max: 480px;

button.jam-btn,
input.jam-btn,
div.setting-area,
#message,
span.glyphicon,
span.glyphicon-refresh-animate {
  transition: all 0.3s ease-in-out;
}

/* fix for admin side using bootstrap */
#adv-settings legend {
  border-bottom: none !important;
}

span.glyphicon-refresh-animate {
    -webkit-animation: spin2 .7s infinite linear;
    -animation: spin .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

img.jam-logo {
  width: 100%;
  max-width: 180px;
}

div.row {
  margin-top: 15px;
}

#settings-wrapper ul.nav-tabs {
  padding-left: 8px;
}

#settings-wrapper div.ads-area{
  border-top: 2px solid #ddd;
  @media (min-width: $screen-md-min) {
    border-top: none;
    border-left: 2px solid #ddd;
  }
}

#settings-wrapper div.ads-area div.donate-btn {
  margin-top: 15px;
}

#settings-tab {
  margin: 15px;
}

div.setting-area {
  margin-top: 0;
}

#settings-wrapper div.setting-area div.form-area {
  margin-top: 30px;
}

span.help-badge {
  display: inline-block;
  line-height: 1.7;
  text-align: center;
  background: #ddd;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

#settings-form input#term-time {
  width: 60px;
}

#settings-wrapper .modal {
  top: 20%;
}

.wp-admin select {
  height: 34px
}

button.jam-btn,
input.jam-btn {
  color: #fff;
  font-size: 15pt;
  padding: 8px 45px;
  background: -webkit-linear-gradient(-214deg, rgba(#63fcff, 0.8) 0%, rgba(#0086aa, 1) 100%);
  background: linear-gradient(-214deg, rgba(#63fcff, 0.8) 0%, rgba(#0086aa, 1) 100%);
  box-shadow: 0 2px 3px 1px rgba(0,0,0,0.5);
}

button.jam-btn:hover, button.jam-btn:active, button.jam-btn:focus,
input.jam-btn:hover, input.jam-btn:active, input.jam-btn:focus {
  color: #18375d;
  outline: none;
  background: -webkit-linear-gradient(-214deg, rgba(#0086aa, 0.8) 0%, rgba(#63fcff, 1) 100%);
  background: linear-gradient(-214deg, rgba(#0086aa, 0.8) 0%, rgba(#63fcff, 1) 100%);
  box-shadow: 0 2px 3px 1.5px rgba(0,0,0,0.5);
}

.removal-btn {
  top: 0;
  cursor: pointer;
  position: relative;
  z-index: 50;
}

#accepted-values > li {
 margin: 0;
}

input.list-group-item {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
  background-color: #ffffff;
}

input.list-group-item:first-child {
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}

#accepted-values span.input-group-addon {
  top: 0;
  padding: 13px 12px;
}

.copy-btn-div button {
  font-size: 20px
}

div.value-containers {
  max-width: 100%;
}

#created-url {
  cursor: pointer;
}

#message {
  margin: 15px;
  overflow: hidden;
  height: 45px;
}

#faq-tab p {
  font-size: 14pt;
}

#first-ad > img, #second-ad > img {
  box-shadow: 0 2px 3px 1px rgba(0,0,0,0.5);
}