@import url(//fonts.googleapis.com/css?family=Slabo+27px|Dancing+Script|Kalam|Architects+Daughter|Indie+Flower|Shadows+Into+Light|Pacifico|Gloria+Hallelujah|Covered+By+Your+Grace|Kaushan+Script|Coming+Soon|Courgette|Satisfy|Cookie|Permanent+Marker|Rock+Salt|Shadows+Into+Light+Two|Tangerine|Handlee|Great+Vibes&subset=latin,latin-ext);

/*============================================================================
  GENERAL
==============================================================================*/

.notes-widget-wrapper--title-icon {
  background-image: url(../images/notes-widget-wrapper-thumbnail.png);
  background-repeat: no-repeat;
  padding-left:22px;
}

.notes-widget-wrapper-admin-container .font-style-selection-container {
  label {
    line-height: 1.3;
    transform: translateY(-.4rem);
    -webkit-transform: translateY(-.4rem); 
  }  
}

.font-style-selection-container {

  .font-style-item {
    margin-top:10px;
    font-size:1.2rem;
  }

  label#font-selection-indie-flower-label {
    font-family: 'Indie Flower';
  }
  label#font-selection-shadows-into-light-label {
    font-family: 'Shadows Into Light';
  }
  label#font-selection-pacifico-label {
    font-family: 'Pacifico';
  }
  label#font-selection-kalam-label {
    font-family: 'Kalam';
  }
  label#font-selection-dancing-script-label {
    font-family: 'Dancing Script';
    font-style: 110%;
  }
  label#font-selection-kaushan-script-label {
    font-family: 'Kaushan Script';
  }
  label#font-selection-gloria-hallelujah-label {
    font-family: 'Gloria Hallelujah';
  }
  label#font-selection-covered-by-your-grace-label {
    font-family: 'Covered By Your Grace';
    font-size:115%;
  }
  label#font-selection-courgette-label {
    font-family: 'Courgette';
  }
  label#font-selection-coming-soon-label {
    font-family: 'Coming Soon';
  }
  label#font-selection-permanent-marker-label {
    font-family: 'Permanent Marker';
  }
  label#font-selection-shadows-into-light-two-label {
    font-family: 'Shadows Into Light Two';
  }
  label#font-selection-rock-salt-label {
    font-family: 'Rock Salt';
    font-size:90%;
  }
  label#font-selection-cookie-label {
    font-family: 'Cookie';
    font-size:140%;
  }
  label#font-selection-handlee-label {
    font-family: 'Handlee';
  }
  label#font-selection-tangerine-label {
    font-family: 'Tangerine';
    font-size:160%;
  }
  label#font-selection-great-vibes-label {
    font-family: 'Great Vibes';
    font-size:120%;
  }
}

ul.notes-widget-wrapper-font-list {
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  align-content: flex-start;

  li {
    
    display:flex;
    width:33%;
  }
}

.notes-widget-wrapper--tab-content-container {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #ddd;
}

.tab-pane {
  padding:10px;
  background-color: #fff;
  & > h2 {
    margin-top:0;
    font-size:24px; 
  }  
  header {
    margin-bottom: 1rem;
  }
}

.notes-widget-wrapper-bootstrap {

  .fa {
    font-size:1rem;
  }
}

.notes-widget-wrapper-bootstrap .radio, 
.notes-widget-wrapper-bootstrap .checkbox {
  margin-bottom: 0;
  margin-top: 0;
}


.notes-widget-wrapper-bootstrap .radio label, .notes-widget-wrapper-bootstrap .checkbox label {
  margin-bottom: 5px;
}


.notes-widget-wrapper-admin-container {
	padding:10px;
	background-color: #eee;
	margin-bottom: 10px;
	
  h3 {
    margin: 0 0 5px 0;
    font-size: .9rem;
    padding-left: 28px;
    background-image: url(../images/notes-widget-wrapper-thumbnail.png);
    background-size: 25px;
    background-position: left center;
    line-height: 25px;
    background-repeat: no-repeat;
  }

  p#use-notes-widget-wrapper-toggle-container {
    margin:0;
  }

  h4 {
		margin-top:0;
	}

	input[type=text].notes-widget-wrapper-narrow {
		width:50px;
	}

	input[type=text].notes-widget-wrapper-wide {
		width:100%;
		max-width: 500px;
	}

	.notes-widget-wrapper-wrapper-set-label-width {
		width:145px;
		display:inline-block;
	}

	.notes-widget-wrapper-iframe-value-container {
		display: inline-block;
	}

	.notes-widget-wrapper-iframe-option-container,
	.notes-widget-wrapper-wrapper-css-container {
		margin-bottom:20px;
	}

	p.notes-widget-wrapper-greyed-out {
		margin-top: 0;
		font-style: italic;
		color:#555;
	}

	.font-style-item {
    margin-top:10px;
    font-size:1.2rem;
    &:first-child {
      margin-top:0;
    }
  }

  p#webrockstar-credits {
    margin-bottom: 0;
    border-top: 1px solid #ccc;
    padding-top: 4px;
  }
  
}

#notes-widget-wrapper-controls .inner {
	position:absolute;
	left:-9999px;
	&.notes-widget-wrapper-active {
		position: static;
	}

}


/*============================================================================
  SETTINGS PAGE
==============================================================================*/

.notes-widget-wrapper__sidebar-callout .panel-heading {

  h4 i {
    font-size: 1.4rem;
  }
}

input.notes-widget-wrapper-long {
  max-width: 500px;
  width:100%;
}

.notes-widget-wrapper-limit-width {
  max-width: 600px;
}

ul.notes-widget-wrapper-callout-list {
  list-style: disc;
  margin-left:1rem;
  list-style-type: none;
  li {
    position: relative;

    &:before {
      content: "\f005";
      font-family: FontAwesome;
      left: -15px;
      position: absolute;
      top: 0;
    }
  }
}

.notes-widget-wrapper__plugin-promo-item {
  margin-bottom:2rem;

}

iframe.notes-widget-wrapper__plugin-preview {
  width:100%;
  min-height: 600px;
}

.notes-widget-wrapper-bootstrap label {
  display:block;
}

table.form-table {
  border-spacing:0 1rem;
  border-collapse:separate;

  .form-group {
    margin-bottom: 0;
  }
  tr {

    th {
      font-weight: normal;
    }
  }
}

.notes-widget-wrapper__submit-button-container {

  input[type=submit] {
    color:#fff;
    font-family: inherit;
  }
}

.notes-widget-wrapper-bootstrap .radio-inline, 
.notes-widget-wrapper-bootstrap .checkbox-inline {
  line-height: 1.7;
}

.notes-widget-wrapper-bootstrap .radio label, 
.notes-widget-wrapper-bootstrap .checkbox label {
  line-height: 1.7;
}

/*============================================================================
  SHORTCODE EDITOR MODAL
==============================================================================*/

#insert-notes-widget-wrapper-shortcode {

  span {
    padding-left:22px;
    background-image:url(../images/notes-widget-wrapper-thumbnail.png);
    background-repeat: no-repeat;
    background-size:18px;
  }
  
}

#notes-widget-wrapper__shortcode-editor-modal {

  .modal-header {

    h4.modal-title {
      padding-left:32px;
      background-image:url(../images/notes-widget-wrapper-thumbnail.png);
      background-repeat: no-repeat;
      background-size:26px;
    }
  }

  .modal-dialog {
    overflow: initial;
  }

  .modal-body {
    overflow-y: auto;
  }

  .well {
    margin-bottom:0;
  }
}

.modal-open {

  #adminmenuwrap,
  #wpadminbar {
    z-index: 10;
  }
}

a.notes-widget-wrapper__scroll-to-bottom {
  display: none;
}
@media only screen and (max-width:1400px){
  .notes-widget-wrapper-bootstrap .modal-body .tab-content > .tab-pane {
    overflow-y: scroll;
    max-height: 24vh; 
    position: relative;

    a.notes-widget-wrapper__scroll-to-bottom {
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-size: 40px;
      display: block;
      .fa {
        font-size: 30px;
      }
    }
  }
}

.notes-widget-wrapper__plugin-promo-item__banner {
  width:100%;
  height: 100px;
  background-size: cover;

  &#promo-banner--wp-notes-widget {
    background-image: url(../images/wp-notes-widget-promo.jpg);
  }
  
  &#promo-banner--admin-code-editor {
    background-image: url(../images/admin-code-editor-promo.jpg);
  }
  
  &#promo-banner--custom-ratings {
    background-image: url(../images/custom-ratings-promo.jpg);
  }

}

#notes-widget-wrapper__settings__title {
  width:100%;
  max-width: 240px;
}

.notes-widget-wrapper__settings__adjustment-options {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
  label:first-child {
    margin-right: 1rem;
  }
}

.notes-widget-wrapper__settings__show-notes-container {
  padding:0 5px;
  .notes-widget-wrapper__settings__radio-checkbox-input-item label {
    //margin-left:0;
  }
}

ul.notes-widget-wrapper__settings__show-notes-list {
  max-height: 300px;
  overflow-y: scroll;
  /*
  &::-webkit-scrollbar:vertical {
    width: 11px;
  }
  &::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid white; 
      background-color: rgba(0, 0, 0, .5);
  }

  &::-webkit-scrollbar-track { 
      background-color: #fff; 
      border-radius: 8px; 
  }
  */   
}

.notes-widget-wrapper__settings__select-container {
  margin-bottom: 1rem;
  label {
    display:block;
  }
  select {
    display:block;
  }
}

li.notes-widget-wrapper__settings__radio-checkbox-input-item {
  display:flex;
  //margin-bottom: 1rem;
  label {
    margin-left: 5px;
    margin-bottom: 0;
    &.normal-font-weight {
      font-weight: normal;
    }
    
  }
  input[type=radio],
  input[type=checkbox] {
    margin:0;
  }
}

.notes-widget-wrapper__flex-container {
  display:flex;
  display:-webkit-flex;
  align-items: center;

  & > *:first-child {
    margin-right: 1rem;
  }
}

.notes-widget-wrapper__settings--small {
  width:100%;
  max-width:120px;
}

@keyframes settings_change {
  0%   {background-color:green; }
  100% {background-color:transparent;}
}

/* The element to apply the animation to */
.notes-widget-wrapper__shortcode__display--settings-change {
    animation-name: settings_change;
    animation-duration: 1s;
}