.shrink{
-webkit-transform:scale(0.75);
-moz-transform:scale(0.75);
-ms-transform:scale(0.75);
transform:scale(0.75);
}
    td.dice{
      height: 64px;
      width: 64px;
       background-image:url('img/d10.png');
    background-size:contain;
   background-repeat: no-repeat;
  }
  
  td.thick {
  font-weight: bold;
      color: black;
}
  td.thin {
 
      color: black;
}
   .subhead {
    font-weight:bold;
    color:black;
}
   .midhead {
    font-weight:bold;
    color:black;
}
   .mainheading {
    font-weight:bold;
    color:black;
}
   .subheading {
    font-weight:bold;
    color:black;
}
   .navsubhead {
    font-weight:bold;
    color:white;
}

  td.inventory{
      height: 64px;
      width: 64px;
  }
  
    td.active {
    background-image:url('img/frame_active.png');
    background-size:contain;
    background-repeat:no-repeat;
  }
  td.passive {
    background-image:url('img/frame.png');
    background-size:contain;
   background-repeat: no-repeat;
  }
  
       .tooltip-inner {
    max-width: 600px;
    /* If max-width does not work, try using width instead */
    width: 600px; 
}
   .FixedHeightContainer
{
  float:right;
  height: 350px;
  width:300px; 
  padding:3px; 

}
.Content
{
  height:324px;
   overflow:auto;
   color:black;
   
}
   .statsContainer
{
  float:right;
  height: 200px;
  width:300px; 
  padding:3px; 

}
.statsContent
{
  height:174px;
  width:300px; 
  
}
 .versupContainer
{
  float:right;
  height: 450px;
  width:300px; 
  padding:3px; 

}
.versupContent
{
  height:424px;
  width:300px; 

}
 .midContainer
{
  float:right;
  height: 250px;
  width:300px; 
  padding:3px; 

}
.midContent
{
  height:224px;
  width:300px; 
   
}
    #aDiv input {
        margin: 0;
        padding: 0;
        display:block;
        height:12px;

    } 
     .shortContainer
{

  height: 70px;
  width:300px; 
  padding:3px; 

}
.shortContent
{
  height:54px;
   
}

.bordered
{
    border-style: solid;
}
    #aDiv input {
        margin: 0;
        padding: 0;
        display:block;
        height:12px;

    } 
  #aDiv  .customcb {
  width: 17px;
  height: 17px;
  margin: 2px 0 2px 0;
  background: #ddd;
  border-radius: 100%;
  position: relative;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
#aDiv  .customcb label.inner {
  display: block;
  width: 12.75px;
  height: 12.75px;
  border-radius: 100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  -ms-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  position: absolute;
  top: 2.125px;
  left: 2.125px;
  z-index: 1;
  background: #eee;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5)
}
.tooltip {
  pointer-events: none;
}
 table.center {
    margin-left:auto; 
    margin-right:auto;
}
@font-face{
font-family: "Vtsmu";
src: url("fonts/VTSMU___.TTF");
}
@font-face{
font-family: "VTCGoblinHand";
src: url("fonts/VTCGoblinHand.ttf");
}
@font-face {
font-family: "Escalido";
src: url("fonts/EscalidoGothico.ttf");
}
@font-face {
font-family: "Goudy";
src: url("fonts/goudy.ttf");
}
@font-face {
font-family: "Plasticman";
src: url("fonts/PlasticMan.ttf");
}
@font-face {
font-family: "Arnova";
src: url("fonts/ArnovaITCTT.ttf");
}
@font-face {
font-family: "GarishMonde";
src: url("fonts/garish_monde.ttf");
}
@font-face {
font-family: "Pterra";
src: url("fonts/pterra.ttf");
}
@font-face {
font-family: "CreteRound";
src: url("fonts/CreteRound-Regular.otf");
}
@font-face {
font-family: "HMajorJackov";
src: url("fonts/HMajorJackov-Regular.ttf");
}
@font-face {
font-family: "DaelaBoo";
src: url("fonts/DaelaBoo.otf");
}
@font-face {
font-family: "Rackham";
src: url("fonts/Rackham.ttf");
}
@font-face {
font-family: "Magna";
src: url("fonts/mage/magnav.ttf");
}
@font-face {
font-family: "Trinigan";
src: url("fonts/geist/Trinigan.ttf");
}
@font-face {
font-family: "Conspira";
src: url("fonts/CONSPIRA.TTF");
}
@font-face {
font-family: "MERLINLL";
src: url("fonts/MERLINLL.TTF");
}
@font-face {
font-family: "Arnova";
src: url("fonts/ArnovaITCTT.ttf");
}
@font-face {
font-family: "MrsEaves";
src: url("fonts/MrsEavesRoman.otf");
}
@font-face {
font-family: "P22Cezanne";
src: url("fonts/P22 Cezanne Regular.ttf");
}
* {
    font-family: "CreteRound", Helvetica, sans-serif";
  }   
  .mummy {
    text-align: center;
    font-family: "HMajorJackov";
    font-size: 30px;
    text-align: center;
}
  .mage {
    text-align: center;
    font-family: "Magna";
    font-size: 30px;
    text-align: center;
}
.hunter {
    text-align: center;
    font-family: "Vtsmu";
    font-size: 30px;
    text-align: center;
}
.mortal {
    text-align: center;
    font-family: "Vtsmu";
    font-size: 30px;
    text-align: center;
}
  .changeling {
    text-align: center;
    font-family: "Rackham";
    font-size: 30px;
    text-align: center;
} 
.werewolf {
    text-align: center;
    font-family: "Arnova";
    font-size: 30px;
    text-align: center;
}
  .geist {
    text-align: center;
    font-family: "Trinigan";
    font-size: 30px;
    text-align: center;
}
  .promethean {
    text-align: center;
    font-family: "Pterra";
    font-size: 30px;
    text-align: center;
}
  .demon {
    text-align: center;
    font-family: "Conspira";
    font-size: 30px;
    text-align: center;
}
  .beast {
    text-align: center;
    font-family: "Conspira";
    font-size: 30px;
    text-align: center;
}
  .vampire {
    text-align: center;
    font-family: "MrsEaves";
    font-size: 30px;
    text-align: center;
}
  .ghost {
    text-align: center;
    font-family: "GarishMonde";
    font-size: 30px;
    text-align: center;
}
 .deviant {
    text-align: center;
    font-family: "GarishMonde";
    font-size: 30px;
    text-align: center;
}
  .mainheading {
    text-align: center;
    font-family: "GarishMonde";
    font-size: 80px;
    text-align: center;
}
      .subheading {
    text-align: center;
    font-family: "GarishMonde";
    font-size: 30px;
    text-align: center;
}
    .fullhead {
    text-align: center;
    font-family: "GarishMonde";
    font-size: 60px;
    text-align: center;
}
  .midhead {
    text-align: center;
    font-family: "Plasticman";
    font-size: 40px;
    text-align: center;
}
.microhead {
    text-align: center;
    font-family: "Escalido";
    font-size: 20px;
    text-align: center;
}
.subhead {
    text-align: center;
    font-family: "Escalido";
    font-size: 30px;
    text-align: center;
}
.campaign {
    text-align: center;
    font-family: "Escalido";
    font-size: 30px;
    text-align: center;
     background-image: url('img/Page-1-Image-5.png');
     background-repeat: no-repeat;
     background-size: cover;
     
}
.cypher {
        height: 521px;
        width: 481px;
     background-image: url('img/interlock.png');
     background-repeat: no-repeat;
     background-size: contain;
     
}
.key1 {
     transform: scale(0.7);
   position: relative;
    left: 110px;
    top: 30px;
     
}
.key4 {
     transform: scale(0.7);
   position: relative;
    left: -55px;
    top: -50px;
     
}
.key2 {
     transform: scale(0.7);
   position: relative;
    left: 270px;
    top: 45px;
     
}
.key3 {
     transform: scale(0.7);
   position: relative;
    left: 110px;
    top: 55px;
     
}
.truth {
     transform: scale(0.7);
   position: relative;
    left: 110px;
    top: -90px;
     
}

.campaignheader {
    text-align: center;
    font-family: "Escalido";
    font-size: 80px;
    text-align: center;
   
}


.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 600px;   
}
 .Pilgrimage{
       position: relative;
        height: 800px;
        width: 800px;
        background-color: white;
          background-image:url('img/pilgrimage.png');
    background-repeat:no-repeat;
     background-size: contain;
    }


.Pilgrimage .pilgrim {
     transform: scale(0.8);
 position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
   
}
#deg25 {
  position: absolute;
    bottom: -30px;
    right: 350px;
    width: 300px;
 
}
#deg45 {
  position: absolute;
    bottom: 50px;
    right: 690px;
    width: 300px;
 
}
#deg44 {
  position: absolute;
    bottom: 50px;
    right: -160px;
    width: 300px;
 
}

#deg29 {
  position: absolute;
    bottom: 210px;
    right: 720px;
    width: 300px;
 
}
#deg26 {
  position: absolute;
    bottom: 200px;
    right: -195px;
    width: 300px;
 
}
#deg46 {
  position: absolute;
    bottom: 360px;
    right: 730px;
    width: 300px;
 
}
#deg43 {
  position: absolute;
    bottom: 350px;
    right: -205px;
    width: 300px;
 
}
#deg28 {
  position: absolute;
    bottom: 515px;
    right: 660px;
    width: 300px;
 
}


#deg27 {
  position: absolute;
    bottom: 500px;
    right: -120px;
    width: 300px;
 
}
#deg42 {
  position: absolute;
    bottom: 640px;
    right: 125px;
    width: 300px;
 
}
#footer{
    position: fixed; 
    width:100%;
    bottom:0;
}

.pr-empty {
     background-image:url('img/roundunchecked.png');
}
.pr-full {
     background-image:url('img/roundchecked.png');
}
#hedgeoverlay {
   position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
     background-color: rgba(46,107,38,0.1);
    pointer-events: none;
}
#hedgeoverlay::after {
  content: "";
  background: url(assets/codstyle/img/hedge.jpg);
   background-size: cover;
    background-repeat: no-repeat;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
@media (prefers-color-scheme: dark) {
  /* Base dark surface colours */
  body,
  .card,
  .card-body,
  .card-header,
  .sidebar-light,
  .list-group-item,
  .modal-content {
    background-color: #1a1a1a;
  }

  /* Base text colour — cascades to div, td, th, and anything without an
     explicit colour set. Bootstrap sets body { color: #212529 } which
     would otherwise make all inherited text near-black on a dark surface. */
  body {
    color: #eee;
  }

  /* These classes have hardcoded color: black in cod.css base rules,
     or live inside SB Admin containers that reset color, so inheritance
     won't reach them — explicit overrides are required. */
  .subhead,
  .midhead,
  .mainheading,
  .subheading,
  .fullhead,
  .microhead,
  .campaign,
  .campaignheader,
  td.thick,
  td.thin,
  center {
    color: #eee;
  }

  /* SB Admin 2 sets color on .card and its children — add color alongside
     the background-color we already set, so text inside cards is light. */
  .card,
  .card-body,
  .card-header,
  .list-group-item,
  .modal-content,
  .modal-body,
  .modal-header,
  .modal-footer {
    color: #eee;
  }

  /* Explicit overrides for elements Bootstrap styles directly */
  p, h1, h2, h3, h4, h5, h6, span, ul, li, i, strong,
  td, th, div, a {
    color: inherit;
  }

  /* Labels need an explicit value — inherit can silently chain back to
     Bootstrap's #212529 body color when the parent stack doesn't pass
     through one of the containers we already override above. */
  label, .check_container {
    color: #eee;
  }

  /* Links — lighten Bootstrap's #007bff to stay readable on dark bg */
  a:not(.btn) {
    color: #6cb3ff;
  }

  /* Form controls — Bootstrap sets explicit bg:#fff and color:#495057 */
  .form-control,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    background-color: #2a2a2a;
    color: #eee;
    border-color: #555;
  }
  .form-control:disabled,
  .form-control[readonly],
  input[readonly] {
    background-color: #222;
    color: #ccc;
  }

  /* .Content scrollbox */
  .Content {
    color: #eee;
  }

  /* Select2 widget */
  .select2 {
    color: #fff;
    background-color: #1a1a1a;
  }

  /* Invert icons/dot images lightly — not full invert which wrecks colour art */
  img {
    filter: invert(70%);
  }

  /* Exemptions: portrait/art images shouldn't be inverted */
  img.no-invert,
  .card img[src*="codstyle/img/"],
  img[src$=".jpg"],
  img[src$=".jpeg"],
  img[src$=".png"][src*="avatar"],
  img[src*="portrait"] {
    filter: none;
  }

  /* Buttons — Bootstrap btn-primary/btn-success etc. set their own colours,
     so this only affects bare .btn and disabled states */
  .btn {
    color: #fff;
  }
  .btn:disabled,
  .btn[disabled] {
    background-color: #3a3a3a;
    border-color: #555;
    color: rgba(255, 255, 255, 0.45);
    opacity: 1; /* override Bootstrap's 0.65 so our bg colour shows */
  }

  /* html background ensures no white peek-through on pages without #wrapper */
  html {
    background-color: #111;
  }
}
#twilightoverlay {
   position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background-color: rgba(203,182,236,0.1);
    pointer-events: none;
}
#shadowoverlay {
   position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    pointer-events: none;
}
#shadowoverlay::after {
  content: "";
  background: url(assets/codstyle/img/hisil.jpg);
   background-size: cover;
    background-repeat: no-repeat;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}
#underworldoverlay {
   position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
     background-color: rgba(7,46,224,0.1);
    pointer-events: none;
}
#underworldoverlay::after {
  content: "";
  background: url(assets/codstyle/img/underworld.jpg);
   background-size: cover;
    background-repeat: no-repeat;
  opacity: 0.1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}


/* =====================================================================
   Mobile responsive overrides
   Bootstrap handles the grid (col-12 / col-lg-6), but the fixed-size
   custom containers in cod.css need their own breakpoints to avoid
   clipping content on narrow screens.
   ===================================================================== */

@media (max-width: 767px) {
  /* Release the fixed heights so content isn't clipped on mobile */
  .FixedHeightContainer,
  .statsContainer,
  .versupContainer,
  .midContainer,
  .shortContainer {
    float: none;
    height: auto;
    max-height: 400px;
    width: 100%;
  }

  .Content,
  .statsContent,
  .versupContent,
  .midContent,
  .shortContent {
    height: auto;
    max-height: 380px;
    width: 100%;
    overflow-x: hidden;
  }

  /* Dot-row images (roundchecked / deviant_skull etc.) wrap on small screens */
  td img[src*="roundchecked"],
  td img[src*="roundunchecked"],
  td img[src*="deviant_skull"] {
    display: inline-block;
  }

  /* Inventory grid: let the table scroll horizontally rather than overflow */
  .table-responsive-custom {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Shrink transform used on gear tables interferes on mobile; let it scale naturally */
  .card-body[style*="transform: scale(0.75)"] {
    transform: none !important;
    width: 100% !important;
    overflow-x: auto;
  }

  /* Keep modals from going full-bleed on small screens */
  .modal-dialog {
    margin: 0.5rem;
  }

  /* Sidebar toggler visibility on mobile */
  #sidebarToggle,
  #sidebarToggleTop {
    display: inline-block;
  }
}

/* ====================================================================
   Tablet range: allow two-column layout on 768px+, single below that
   (Bootstrap's col-lg-6 does col-12 below lg=992px; add col-md-6
   class in the PHP to enable two columns at 768-992px as well)
   ==================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  /* Widen containers slightly to use the extra space */
  .statsContainer,
  .midContainer,
  .versupContainer {
    width: 100%;
  }
}