/*  =============================================================================
 *  CUSTOM STYLES
 *  ============================================================================= */
.ng-cloak { display:none; }
.gold { outline: 1px solid gold; }

/*
 * Component Specific Styles
 * ====================================== */
.pbxx { padding-bottom: 20rem; }
.wi-500 { width: 500px; }
.mw-800 { max-width: 800px; }
.mw-950 { max-width: 950px; }
.mw-toolbar { max-width: 1600px; }
.ht-colorVariations { height: 150px; }
.bmn-colorVariations { margin-bottom: -4px; }
.ht-pinToolbar { height: 305px; }
.leftPanel { width: 330px; left: -330px; }
.color-filter{
    border-radius: 50%;
    width:60px;
    height:60px;
}
.fw-700 { font-weight: 700; }
.bg-all-filter { background-color: rgba(255, 255, 255, 0.95); }
.bg-green-filter { background-color: #2ECC71; }
.bg-blue-filter { background-color: #3498DB; }
.bg-purple-filter { background-color: #9B59B6; }
.bg-pink-filter { background-color: #D2527F; }
.bg-gray-filter { background-color: #6C7A89; }
.bg-yellow-filter { background-color: #F2CA27; }
.bg-orange-filter { background-color: #E67E22; }
.bg-red-filter { background-color: #E74C3C; }


.wi-20-s { width: 20%; }
.wi-40-s { width: 40%; }

#Container .mix { display: none; }
.ht-75 { height: 75px; }
.lht-75 { line-height: 75px; }

.pinToolbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(59,63,69,.95);
}



/*
 * Borders & Backgrounds
 * ====================================== */
.border-thin { border-width: 1px; border-style: solid;  }
.border-thick { border-width: 2px; border-style: solid; }
.border-white { border-color: $near-white; }
.border-bottom-gray { border-bottom: 1px solid $light-gray; }

.bg-white { background-color: white; }
.bg-light-gray { background-color: $light-gray; }
.bg-dark { background-color: $dark-gray; }
.bg-darker { background-color: $near-black;}
.bg-green { background-color: $green; }
.bg-panel { background-color: $navy; }
.bg-blur { background-color: $navy-blur; }
.bg-icon {
  width: 40px;
  height: 40px;
  background-size: 40px 40px;
}
.bg-github-icon { background: url('../assets/img/icons/Github.svg') no-repeat; }
.bg-twitter-icon { background: url('../assets/img/icons/Twitter.svg') no-repeat; }
.bg-dribble-icon { background: url('../assets/img/icons/Dribble.svg') no-repeat; }
.bg-medium-icon { background: url('../assets/img/icons/Medium.svg') no-repeat; }



/*
 * Global Styles (Anchor & Form Styles)
 * ====================================== */
button { cursor: pointer; }
.link { border-bottom: 2px solid rgba(255,255,255,.5); }
.link:hover { border-bottom: 2px solid rgba(255,255,255,1); }
.link-drk { border-bottom: 2px solid rgba(0,0,0,.3); }
.link-drk:hover { border-bottom: 2px solid rgba(0,0,0,1); }
.link-drkn:hover { font-weight: 700; }
.hover-icon:hover { background: darken($navy, 5%); }

.input { border: 1px solid white; border-radius: 3px; }
.inputColor,
.inputColor option { color: white; background-color: $dark-gray; }
.select {  border: 1px solid white; border-radius: 3px; -webkit-appearance: none; cursor: pointer; background: $dark-gray url("../assets/img/icon-select.png") no-repeat 95% 50%; background-size: 28px; }
.select-colorModel {  border: none; -webkit-appearance: none; cursor: pointer; background: url("../assets/img/icon-select-drk.png") no-repeat 95% 50%; background-size: 28px; }
.input:hover {  background: rgba(255,255,255,.2); }
.select:hover {  background: rgba(255,255,255,.2) url("../assets/img/icon-select.png") no-repeat 95% 50%; background-size: 28px; }

.btn-primary { border: none; color: white; border-radius: 3px; background: $blue; }
.btn-primary:hover { background: darken($blue, 10%); }
.btn-secondary { margin-top: 10px; padding-top: .7rem; padding-bottom: .7rem; border: 4px solid $darker-gray; border-radius: 5px; -webkit-appearance: none; cursor: pointer; }
.btn-secondary:hover { border: 4px solid darken($darker-gray, 10%); background: darken($darker-gray, 10%); }
.btn-outline { width: 250px; border-radius: 3px; background: none; }
.btn-white { border: 1px solid white; color: white; }
.btn-white:hover { background: rgba(255,255,255,.3); }


/*
 * Shapes & Positioning
 * ====================================== */
.circle { border-radius: 100%; }
.avatar { border: 2px solid $near-white; }


/*
 * Media Queries for Screen Size and Retina
 * ====================================== */
//Only phone
@media only screen and (max-width: 40em) {
  .wi-half-s { width: 50%; }
  .mbm-s { margin-bottom: 1rem; }
  .dn-s { display: none; }
  .border-white-s { border: 1px solid white; }
  .border-dark-s { border-bottom: 1px solid $dark-gray; }
}

//For slightly wider phones like iphone6 and samsung
@media (min-width: 22em) and (max-width: 40em) {
  .mrm-sm { margin-right: 1rem; }
}

// Larger than phone size screens
@media only screen and (min-width: 40em) {
  .pos-static-ns { position: static; }
  .di-ns { display: inline; }
  .db-ns { display: block; }
  .dt-ns { display: table; }
  .dtc-ns { display: table-cell; }
  .ht-full-ns { height: 100%; }
  .fr-ns { float: right; }
  .fl-ns { float: left; }
  .cf-ns { float: none; }
  .opacity-0-ns { opacity: 0; }

  .btn-outline-ns { width: 300px; cursor: pointer; border-radius: 3px; background: none; }
  .border-bottom-gray-ns { border-bottom: 1px solid $light-gray; }

  .bg-screenIcon-ns {
    width: 345px;
    height: 246px;
    background: url('../assets/img/accessible-artwork.png') no-repeat;
    background-size: 345px 246px;
  }
  .arrow-right-ns {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  .pos-arrow-right-ns {
    position: absolute;
    top: 30px;
    right: -7px;
  }
  .arrow-down-ns {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid white;
  }
  .pos-arrow-down-ns {
    position: absolute;
    bottom: -10px;
    left: 120px;
  }
  .pos-WCAGToolTip-ns {
    top: -210px;
    left: 13px;
    width: 250px;
  }
  .pos-WCAGselect-ns{
    top: 35px;
  }
  .fix-footer-ns {
    position: absolute;
    bottom: 0;
  }

  /* Tile Hover - border-fade */
  .border-fade-ns {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: inset 0 0 0 2px $near-white, 0 0 1px rgba(0, 0, 0, 0);
  }
  .border-fade-ns:hover, .border-fade-ns:active {
    box-shadow: inset -12px 0 0 $near-white, 0 0 1px rgba(0, 0, 0, 0),
                inset 0 -40px 0 $near-white, 0 0 1px rgba(0, 0, 0, 0),
                inset 0 12px 0 $near-white, 0 0 1px rgba(0, 0, 0, 0),
                inset 12px 0 0 $near-white, 0 0 1px rgba(0, 0, 0, 0);
  }
  .fadeInHover { position: absolute; left: 0; bottom: 8px; visibility: hidden; opacity: 0; transition: opacity 0.5s ease-in-out; }
  .border-fade-ns:hover .fadeInHover { visibility: visible; opacity: 1; }
  .border-selected-ns { box-shadow: inset 0 0 0 2px $near-white, 0 0 1px rgba(0, 0, 0, 0);}

  /* Color Filter Circles Hover - border-fade */
  .border-fade-circle-ns {
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: inset 0 0 0 2px transparent, 0 0 1px rgba(0, 0, 0, 0);
  }
  .active, .border-fade-circle-ns:hover, .border-fade-circle-ns:focus, .border-fade-circle-ns:active  {
    box-shadow: inset 0 0 0 9px $dark-gray, 0 0 1px rgba(0, 0, 0, 0);
  }
  .border-fade-circle-ns:hover.br-all-filter, .active.br-all-filter { border-color: rgba(255, 255, 255, 0.95); }
  .border-fade-circle-ns:hover.br-green-filter, .active.br-green-filter { border-color: #2ECC71; }
  .border-fade-circle-ns:hover.br-blue-filter, .active.br-blue-filter { border-color: #3498DB; }
  .border-fade-circle-ns:hover.br-purple-filter, .active.br-purple-filter { border-color: #9B59B6; }
  .border-fade-circle-ns:hover.br-pink-filter, .active.br-pink-filter { border-color: #D2527F; }
  .border-fade-circle-ns:hover.br-gray-filter,.active.br-gray-filter { border-color: #6C7A89; }
  .border-fade-circle-ns:hover.br-yellow-filter, .active.br-yellow-filter { border-color: #F2CA27; }
  .border-fade-circle-ns:hover.br-orange-filter , .active.br-orange-filter { border-color: #E67E22; }
  .border-fade-circle-ns:hover.br-red-filter, .active.br-red-filter { border-color: #E74C3C; }
}

// ipad and smaller laptop screens
@media only screen and (min-width: 70em) {
  .ht-colorVariations-ns { height: 200px; min-width: 236px; }
  .span_2_of_12-ns { width: 16.667%;}
  .span_3_of_12-ns { width: 25%; }
  .span_4_of_12-ns { width: 33.333%; }
  .span_5_of_12-ns { width: 41.666%; }
}

// Larger than 1440px Laptop size screens
@media only screen and (min-width: 106em) {
  .span_1_of_12-x { width: 8.333%; }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx){
  .bg-screenIcon-rs {
    width: 345px;
    height: 246px;
    background: url('../assets/img/accessible-artwork@2x.png') no-repeat;
    background-size: 345px 246px;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx), (max-width: 40em) {
  .bg-screenIcon {
    width: 241px;
    height: 172px;
    background: url('../assets/img/accessible-artwork@2x.png') no-repeat;
    background-size: 241px 172px;
  }
}

// Firefox styling for select
@-moz-document url-prefix() {
.select {  border: 1px solid white; border-radius: 3px; cursor: pointer; background: none; }
.select:hover {  background: rgba(255,255,255,.2); }
.select-colorModel {  margin-top: 25px; border: none; cursor: pointer; background: none;  }
}


//IE only styles
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.inputColor { color: black; background-color: white; }
.select {  border: 1px solid white; border-radius: 3px; -webkit-appearance: none; cursor: pointer; background: white url("../assets/img/icon-select-drk.png") no-repeat 95% 50%; background-size: 28px; }
.select::-ms-expand { display: none; }
.select-colorModel { margin-top: 25px; }
.select-colorModel::-ms-expand { display: none; }
.opacity-0-ns { opacity: 1; }
}
