@import url('https://fonts.googleapis.com/css?family=Zeyada&display=swap');

      ::-moz-selection { /* Code for Firefox */
        color: rgb(255, 255, 255);
        background: rgb(45,45,45);
      }

      ::selection {
        color: rgb(255, 255, 255);
        background: rgb(45,45,45);
      }
      a {
        color: rgb(45,45,45);
      }
      a:hover, a:hover > .fab-d, a:hover > .fas-d {
        color: rgb(45,45,45,0.5);
      }


      .card-body {
        height: 445px;
      }



      .btn-secondary {
        background-color: rgb(45,45,45,0.8) !important;
        border-color: rgb(45,45,45) !important;
      }
      .btn-secondary:hover {
        background-color: rgb(45,45,45) !important;
        border-color: rgb(45,45,45) !important;
      }
      .form-check-input:checked {
        background-color: rgb(45,45,45) !important;;
        border-color: rgb(45,45,45) !important;;
      }
      .form-control:focus,  .form-check-input:focus, textarea:focus {
        box-shadow: 0 0 5px rgb(45,45,45, 0.1);
      }
      .form-control, .form-label {
        color: rgb(45,45,45) !important;
        border-color: rgb(45,45,45, 0.4) !important;
      }
      ::placeholder {
        color: rgb(45,45,45, 0.4) !important;
      }

      input:-webkit-autofill,
      input:-webkit-autofill:hover, 
      input:-webkit-autofill:focus,
      textarea:-webkit-autofill,
      textarea:-webkit-autofill:hover,
      textarea:-webkit-autofill:focus,
      select:-webkit-autofill,
      select:-webkit-autofill:hover,
      select:-webkit-autofill:focus {
        border: 1px solid rgb(45,45,45);
        -webkit-text-fill-color: rgb(45,45,45);
        -webkit-box-shadow: 0 0 0px 1000px rgb(45,45,45, 0.1) inset;
        transition: background-color 5000s ease-in-out 0s;
      }


      .btn-outline-secondary {
        color: rgb(45,45,45) !important;
        border-color: rgb(45,45,45) !important;
      }
      .btn-outline-secondary:hover {
        color: #FFFFFF !important;
        background-color: rgb(45,45,45,0.8) !important;
        border-color: rgb(153, 51, 15) !important;
      }

      .badge-secondary {
        color: #fff !important;
        background-color: rgb(45,45,45,0.8) !important;
        padding: 2px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
      }


      .fab-18, .fas-18{
        font-size:18px;
      }
      .fab-24, .fas-24{
        font-size:24px;
      }
      .fab-d, .fas-d{
        color: rgb(45,45,45);
      }
      .fab-l, .fas-l{
        color: rgb(45,45,45,0.3);
      }
      .btn:hover > .fab-l {
        color: #FFFFFF;
      }
      
      .album {
        background-color: rgb(45,45,45,0.1) !important;
      }
      .jumbotron, footer{
        background-color: rgb(45,45,45,0.2) !important;
      }
      .jumbotron {
        padding-top: 3rem !important;
        padding-bottom: 1rem !important;
      }
      .jumbotron-heading {
        letter-spacing: .4em;
        max-width: 100% !important;
      }


      .lead {
        font-family: 'Zeyada', cursive !important;
        font-size: 1.8rem !important;
      }
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

    .imgdiv{
      width: 100%;
      height:250px;
      border:none;
    }
    .imgthumbs{
      width: 100%;
      height:150px;
      border:none;
    }
    .currentimg{
      border:  5px solid rgb(45,45,45, 0.4) !important;
      object-fit: contain;
    }

    .displayimage{
      padding: 5px;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .imgGallery img {
      padding: 8px;
      max-width: 100px;
      max-height: 100px;
    }
    .papa {
      width: 25px;
    }

    /*   Callout   */
    .bd-callout-gray { border-left-color: rgb(108, 117, 125, 0.4) !important;}
    .bd-callout-gray-dark { border-left-color: rgb(52, 58, 64, 0.4) !important;}
    .bd-callout-primary { border-left-color: rgb(0, 123, 255, 0.4) !important;}
    .bd-callout-secondary { border-left-color: rgb(108, 117, 125, 0.4) !important;}
    .bd-callout-success { border-left-color: rgb(40, 167, 69, 0.4) !important;}
    .bd-callout-info { border-left-color: rgb(23, 162, 184, 0.4) !important;}
    .bd-callout-warning { border-left-color: rgb(255, 193, 7, 0.4) !important;}
    .bd-callout-danger { border-left-color: rgb(220, 53, 69, 0.4) !important;}
    .bd-callout-light { border-left-color: rgb(248, 249, 250, 1) !important;}
    .bd-callout-dark { border-left-color:  rgb(52, 58, 64, 0.4) !important;}
    
    .bd-callout {
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 5px;
    
        margin-top: .5rem;
        margin-bottom: .5rem;
    
        border: 1px solid rgb(45,45,45,0.2);
        border-left-width: .35rem;
        border-radius: .35rem;
    }

/* Taken */
/*.button.color4 {background: #FFA500;}
.button.color4 a {text-decoration: none; font-size: 1.4em; text-transform: uppercase; color: #000;}
*/
.taken {
position:absolute;
background-image:url('/img/taken.png');
height:100px;
width:100px;
top: -8px;
right:-8px;
background-repeat:no-repeat;
z-index: 1000;
}

/* sold */
/*.button.color5 {background: #FF3333;}
.button.color5 a {text-decoration: none; font-size: 1.4em; text-transform: uppercase; color: #000;}
*/
.sold {
position:absolute;
background-image:url('/img/sold.png');
height:100px;
width:100px;
top: -8px;
right:-8px;
background-repeat:no-repeat;
z-index: 1000;}




/*
 * jquery-filestyle
 * doc: http://markusslima.github.io/jquery-filestyle/
 * github: https://github.com/markusslima/jquery-filestyle
 *
 * Copyright (c) 2017 Markus Vinicius da Silva Lima
 * Version 2.1.0
 * Licensed under the MIT license.
 */
.jfilestyle {
  display: inline-block;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  position: relative;
  border-collapse: separate;
}

div.jfilestyle label, div.jfilestyle input {
  font-family: sans-serif;
}

div.jfilestyle input {
  border: 1px solid #c0c0c0;
  background: #d9d9d9;
  margin: 0px -5px 0px 0px;
  vertical-align: middle;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 0px;
  color: #8d8d8d;
  cursor: default;
    line-height: normal;
}

div.jfilestyle label {
  display: inline-block;
  border: 1px solid #c0c0c0;
  background: #ffffff;
  padding: 10px 15px;
  color: #0662ba;
  vertical-align: middle;
  line-height: normal;
  text-align: center;
  margin: 0px;
  font-size: 14px;
  width: auto;
  border-radius: 0px;
    font-weight: normal;
}

div.jfilestyle.jfilestyle-corner input:last-child,
div.jfilestyle.jfilestyle-corner label:last-child {
  margin-left: -1px;
}

div.jfilestyle label[disabled] {
  pointer-events: none;
  opacity: 0.6;
  filter: alpha(opacity=65);
  cursor: not-allowed;
}

div.jfilestyle label:hover {
  cursor: pointer;
  opacity: 0.9;
}

div.jfilestyle .count-jfilestyle {
  background: #303030;
  color: #fff;
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 12px;
  vertical-align: middle;
}

div.jfilestyle.jfilestyle-theme-red input {
  border-bottom-left-radius: 0.25rem;
  border-top-left-radius: 0.25rem;
  border-color: rgb(45,45,45, 0.4) !important;
}
div.jfilestyle.jfilestyle-theme-red label {
  border-bottom-right-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-color: #5c636a;
  background: #5c636a;
  color: #fff;
}