/* main.css cartoonmoments */


/* This next line centers so many things, I left it in until I find what's not centered.*/
/** {margin: 0px auto; padding: 0px;}*/

html, body {
background: #F6D55C;
width: 100%;
margin: 0px auto;
padding: 0px; 
overflow-x: hidden; /* Prevents unwanted horizontal scrolling */
color:#F6D55C;
font-family:CCLegendaryLegerdemain-Reg; font-size:14px;
}


/* Adjust as needed (max-width ensures it doesn't get too wide) */
/* Centers everything horizontally */
/*#pageContainer {
    width: 100%;  
    max-width: 1200px;
    margin: 0px auto; 
}*/


#fixedHeader {
    position: fixed; /* Keeps it fixed at the top */
    top: 0; /* Stays at the very top */
    left: 0;
    width: 100%; /* Stretches across the entire page */
    background-color: #F6D55C; 
    z-index: 1001; /* Ensures it stays above other elements */
    margin: 0;
    border: none;
    box-shadow: none;
    /*box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);*/ /* Optional: adds a slight shadow */
    /*border: 2px solid blue;*/ 
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  user-select: none; /* Standard syntax */
}


#icon {vertical-align:middle; padding:0 3px 5px 0;}



  .cc-regular {
    font-family: CCLegendaryLegerdemain-Reg;
    font-size: 1.2em;
    margin-top: 20px;
    color: white;
    text-align: left;
  }

  .cc-bold {
    font-family: CCLegendaryLegerdemain-Bold;
    font-size: 1.4em;
    margin-top: 20px;
    color: white;
    text-decoration: underline;
  }

  .cc-italic {
    font-family: CCLegendaryLegerdemain-Ita;
  }

  .cc-bold-italic {
    font-family: CCLegendaryLegerdemain-BolIta;
    text-decoration: underline;
  }

/*
PSL logo definition
*/

/*used in strip header in View Strips.*/
.container-stripHeader-overlay {

float:right;
width:60px;
height:40px;
position: relative;
  }

.box-stripHeader {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/*opacity: 0.7;
background: #0057e3;*/
  }

#stripHeaderGold1-box {
    float:left;
    width:30px;
    height:20px;
    background-color:#F6D55C;
    display: inline-block;
    
    /*border-left:solid black;
    border-top:solid black;
    border-bottom:solid black;
    border-width:1px;*/
 }
        
#stripHeaderDkGray1-box {
    float:left;
    width:30px;
    height:20px;
    background-color:#555555;
    /*border-right:solid black;
    border-top:solid black;
    border-bottom:solid black;
    border-width:1px;*/
   }

#stripHeaderLtGray1-box {
    float:left;
    width:30px;
    height:20px;
    background-color:#A2A2A2;
    /*border-right:solid black;
    border-top:solid black;
    border-bottom:solid black;
    border-width:1px;*/
   }


/*used in View Cartoonists; artist and panel cards.*/
.container-ps-overlay-left {

float:left;
width:30px;
height:20px;
position: relative;
  }
   	
.container-ps-overlay {

float:right;
width:30px;
height:20px;
position: relative;
  }

.box-ps {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/*opacity: 0.7;
background: #0057e3;*/
  }

#psGold1-box {
    float:left;
    width:15px;
    height:10px;
    background-color:#F6D55C;
    display: inline-block;
    
    /*border-left:solid black;
    border-top:solid black;
    border-bottom:solid black;
    border-width:1px;*/
 }
        
#psDkGray1-box {
    float:left;
    width:15px;
    height:10px;
    background-color:#555555;
    /*border-right:solid black;
    border-top:solid black;
    border-bottom:solid black;
    border-width:1px;*/
   }

#psLtGray1-box {
    float:left;
    width:15px;
    height:10px;
    background-color:#A2A2A2;
    /*border-right:solid black;
    border-top:solid black;
    border-bottom:solid black;
    border-width:1px;*/
   }


/*Used for card title in Artists and panel cards.*/
#container{margin:0 auto; width:440px; padding:8px;}
#left{float:left;width:65px;text-align:left;}
#right{float:right;width:65px;text-align:right;}
#center{margin:0 auto;width:300px; text-align:center;}

/*used to center checkbox and profile upload in Edit Profile artist card.*/
#containerTwo{margin:0 auto; width:600px; padding:8px;}
#leftTwo{float:left;width:300px;text-align:right;}
#rightTwo{float:right;width:300px;text-align:left;}
#centerTwo{margin:0 auto;width:20px; text-align:center;}


/*
rectangles
*/
.greenRectangleRounded {
  height: 25px;
  width: 180px;
  border-radius:10px;
  background-color: green;
  line-height: 25px;
  vertical-align:middle;
}

.greenSubmitRectangleRounded {
  height: 30px;
  width: 300px;
  border-radius:10px;
  background-color: green;
  line-height: 30px;
  vertical-align:middle;
}

.blueRectangleRounded {
  height: 25px;
  width: 180px;
  border-radius:10px;
  background-color: #20639B;
  line-height: 25px;
  vertical-align:middle;
}

.blueRectangleRoundedSmall {
  height: 25px;
  width: 80px;
  border-radius:10px;
  background-color: #20639B;
  line-height: 25px;
  vertical-align:middle;
}

.grayRectangleRoundedsmall {
  height: 25px;
  width: 80px;
  border-radius:10px;
  background-color: #A2A2A2;
  line-height: 25px;
  vertical-align:middle;
}


.grayRectangleRounded {
  height: 30px;
  padding: 10px;
  /*width: 200px;*/
  border-radius: 10px;
  background-color: #555555;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.0em;
  cursor:pointer; 
}


.orangeRectangleRounded {
  height: 25px;
  width: 180px;
  border-radius:10px;
  /*background-color: #ffa500;*/
  background: linear-gradient(45deg, #ff6b35, #e55a2b);
  line-height: 25px;
  vertical-align:middle;
}




/*
circles
*/
.redCircle {
    background: red;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.orangeCircle {
    background: #ffa500;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.yellowCircle {
    background: yellow;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.greenCircle {
    background: green;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.blueCircle {
    background: blue;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}
	
.purpleCircle {
    background: purple;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.whiteCircle {
    background: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.whiteNoBackgroundCircle {
    /*background: white;*/
    border:2px solid white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.blackCircle {
    background: black;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.pinkCircle {
    background: pink;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.grayCircle {
    background: gray;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.brownCircle {
    background: #77431e;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}


.flex-container{
    font-size: 12px; 
    font-weight: bold;
    width: 100%;
    margin: 0 auto;
    display: -webkit-flex; /* Safari */     
    display: flex; /* Standard syntax */
}

.flex-container .column{
    background: #F6D55C;
    display: flex;
    align-items: flex-start; /* This aligns content */
    cursor: pointer;
}

.flex-container .column.left-align{
    justify-content: flex-start; /* This keeps content on the left */
    margin-top:16px;
    margin-left: 0px;
    width: 100px;
    background: #555555;
}

.flex-container .column.right-align{
    justify-content: flex-end; /* This pushes content to the right */
    margin-top:16px;
    margin-right: 0px;
    width: 100px;
    background: #555555;
}

.flex-container .column.center{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: CCSmash-Open;
    font-size: 2.0em;
    color: #F6D55C;
    background: #555555;   
}


/*
different tool tips
*/

/*Used on View Strips for before and after strips in stripStart. */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -30px;
  left: 10%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}


.tooltipLong {
  position: relative;
  display: inline-block;
}

.tooltipLong .tooltiptextLong {
  visibility: hidden;
  width: 400px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -30px;
  left: 10%;
}

.tooltipLong:hover .tooltiptextLong {
  visibility: visible;
}



/*Used in header. */
.tooltipHeader {
  position: relative;
  display: inline-block;
}

.tooltipHeader .tooltiptextHeader {
  visibility: hidden;
  width: 200px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 55%;
}

.tooltipHeader:hover .tooltiptextHeader {
  visibility: visible;
}


.tooltipTopLeftMinus {
  position: relative;
  display: inline-block;
}

.tooltipTopLeftMinus .tooltiptextTopLeftMinus {
  visibility: hidden;
  width: 200px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 25px;
  left: -100px;
}

.tooltipTopLeftMinus:hover .tooltiptextTopLeftMinus {
  visibility: visible;
}



/*Used in artist card. */
.tooltipArtistCard {
  position: relative;
  display: inline-block;
}

.tooltipArtistCard .tooltiptextArtistCard {
  visibility: hidden;
  width: 200px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 55%;
}

.tooltipArtistCard:hover .tooltiptextArtistCard {
  visibility: visible;
}




/*for submission panels*/

.content-submission {
    overflow: hidden;
    /*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
    /*border:4px solid green;*/
    height: 365px;
    width: 420px;
    /*background-color:white;*/
    color:#FFFFFF;
    font-size:1.25em;
}


#scene-submission {
   height: 365px;
   width: 420px;
   perspective: 100;

  /*margin-top:40px;*/

}

.card-submission {
   position: absolute;
   height: 365px;
   width: 420px;


   /*border-radius:10px;*/
   /*background-color:white;*/
  
    
   -webkit-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;

   -webkit-transition-property: transform;
   -webkit-transition-duration: 1.5s;
   transition-property: transform;
   transition-duration: 1.5s;
}

.card-submission.flipped {
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
}



/* Artist card */

.content-artistCard {
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border:4px solid #A2A2A2;
    height: 437px;
    width: 452px;
    color:#FFFFFF;
    font-size:1.25em;
  	margin: auto;
  	margin-bottom:50px; 
    cursor:pointer;
}

#scene-artistCard {
   height: 437px;
   width: 452px;
   perspective: 100;
   position: relative;
}

.card-artistCard {
   position: absolute;
   height: 437px;
   width: 452px;
   background-color:#444;
   -webkit-transform-style: preserve-3d;
   -webkit-transition-property: transform;
   -webkit-transition-duration: 1.5s;
   transition-property: transform;
   transition-duration: 1.5s;
   text-align:center;
}

.content-artistCard-title {
    width: 452px;
    height: 85px;
    line-height: 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background:gray;
    font-family:CCLegendaryLegerdemain-Bold;
    display:block;
    color:#FFFFFF;
    border:4px solid #A2A2A2;
    background-color: #A2A2A2;
    font-size:1.4em;   
    margin:0 auto;
}

.card-artistCard.flipped {
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
}

.back-content-card-artistCard {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: inherit;
  width: inherit;
  background: #444;
  color: white;
  padding: 8px;
  box-sizing: border-box;
}

.back {
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
   background-color:#A2A2A2;
}

.back-title {
  flex: 1;
  text-align: center;
  font-family: CCLegendaryLegerdemain-Reg, Arial, sans-serif;
  font-size: 18px;
  color: white;
}

/* Background variations for artist cards */
.side-artistCard1 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Blue-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard2 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Chroma-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard3 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Dawn-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard4 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Gold-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard5 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Ive-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard6 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Midnight-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard7 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Mint-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard8 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Silver-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard9 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Teal-460x395.jpg');
   background-size: cover;  
   background-position: center; 
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard10 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/AgedPaper-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard11 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/AppleWood-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard12 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Blueprint-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard13 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Chalkboard-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard14 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Cloth-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard15 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Concrete-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard16 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Corkboard-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard17 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Gingham-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard18 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/GraphPaper-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard19 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/PaintedMetal-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard20 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/WoodPlanks-460x395.jpg');
   background-size: cover;
   background-position: center;
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.side-artistCard21 {
   position: absolute;
   height: inherit;
   width: inherit;
   background-image: url('../images/Raisin-460x395.jpg');
   background-size: cover;  
   background-position: center;    
   -webkit-backface-visibility: hidden;   
   backface-visibility: hidden;   
}

.artist-credit {
    background: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    color:white; 
    font-family: CCLegendaryLegerdemain-Reg, Arial, sans-serif; 
    font-size:small;
    padding-top:8px;
    padding-bottom:8px;
}

.artist-credit .flip-icon-container {
    position: absolute;
    right: 10px;
    display: flex;
    justify-content: flex-end;
}

/*
View Cartoonists; panel card and panel card gallery definitions.
*/
.columns {
  display: grid;
  grid-template-columns: 50% 50%;

}

/*.columns {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 24px;
}*/
/* Equal fractions that automatically account for the gap */

.columns_one {
  display: grid;
  grid-template-columns: 100%;

}

.column {
  width:100%;
}


/*Reaction image modal dialog*/

.reaction-option:hover {
    background-color: #666;
    transform: scale(1.1);
}

.reaction-option img {
    pointer-events: none; /* Prevents image from being the click target */
}

/* Mobile responsive - 3 columns on small screens */
@media (max-width: 500px) {
    #reactionGrid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}


/*Reaction image details modal dialog*/


.reaction-tab {
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    background: #555;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.2s;
}

.reaction-tab:hover {
    background: #666;
    transform: scale(1.05);
}

.reaction-tab.active {
    background: #D4AF37;
}

.reaction-tab.active span {
    color: #444;
}

.reaction-tab img {
    width: 30px;
    height: 30px;
}

.reaction-tab span {
    font-family: CCLegendaryLegerdemain-Reg;
    font-size: 12px;
    color: white;
}

.reaction-user-row {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #555;
    gap: 12px;
}

.reaction-user-row:hover {
    background: #555;
}

.reaction-user-row img.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #ccc;
}

.reaction-user-row .user-name {
    flex: 1;
    font-family: CCLegendaryLegerdemain-Reg;
    font-size: 16px;
    color: white;
}

.reaction-user-row img.reaction-icon {
    width: 24px;
    height: 24px;
}




/*object-fit options:

cover = fills entire container (may crop image)
contain = shows entire image (may have empty space)
fill = stretches to exact container size (may distort)*/