/**
 * Campaign Styles for campaign #111651
 */

/** Style Dashboard + Imports + variables#752 */
/* Font Imports, as these *have* to be on top*/
@import url("https://fonts.googleapis.com/css2?family=Acme&family=Bangers&family=Special+Elite&family=McLaren&family=Luckiest+Guy&family=Road+Rage&family=Exo+2:wght@300&family=Orbitron:wght@800&display=swap");

/* Variables for fonts in case I want to change them later*/
:root {
  	--convo-background: url('https://kanka-user-assets.s3.eu-central-1.amazonaws.com/campaigns/111651/be8ff7bd-2935-402c-b866-07374b476738.png');
	--header-font: "Bangers";
	--body-font: "Mclaren";
    --stub-text: "Holy stub, Orothos! This entity is incomplete! We don't have enough information to engage with it, yet!";
}

/*Giving the header a background, and removing the ugly margin replacing it with padding*/
.campaign-header.no-header {
    background-color:white;
    margin-bottom:0px;
    padding-bottom:30px;
}

/*Messing with the entity grid real quick, making the pinned sections a bit wider as they were too small and made the page REALLY tall just for them.*/
.entity-grid {
    grid-template-columns: 200px minmax(auto,calc(100% - 450px)) 250px!important;
}

/*This changes the header/titles of the dashboard to be slanted with the comic burst image*/
.widget-header-text {
    /*NOTE: this background has a pngtree watermark on it... shouldn't be used for anything else. Should be replaced buuuut I'm lazy and it looks good as is*/
    background-image:url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/hCEeuKdZ6StKL0rPeSIa4BFeWyiFebFq7MLi2X62.jpg");
    background-size: 100% 300%;
    color: #222222;
    width:98%;
    height:94%;
    margin:auto;
    padding:0.4ch;
    display: table;
    vertical-align: center;
    text-align: center;
    transform: rotate(-0.3deg);
    clip-path: polygon(3.99% 2.75%, 98.25% 2.75%, 93.76% 100%, 0% 100%);
}
/* Adds an exclamation point after all titles for extra comic book snazziness*/
.widget-header-text:after {
    content: "!";
}
/*Change header defaults*/
.widget-header {
    background-color:#222222;
    width: 33%;
    min-width: 40ch;
    padding: 0.5ch;
    margin:auto;
    margin-bottom:1%;
    transform: rotate(0.3deg);
    clip-path: polygon(3.99% 2.75%, 98.25% 2.75%, 93.76% 100%, 0% 100%);
}

/*Increases the size of the first letter by a bit*/
.widget-header:first-letter {
    font-size: 3ch;
    top: 2ch;
}

/*This adds the tilts to 1/3 and 1/4-width entities*/
.dashboard-widgets .col-md-3:nth-child(odd), .dashboard-widgets .col-md-4:nth-child(odd) {
    transform:rotate(0.5deg);
}
.dashboard-widgets .col-md-3:nth-child(even), .dashboard-widgets .col-md-4:nth-child(even) {
    transform:rotate(-0.5deg);
}

/*Changes the preview widget to have the funky borders*/
/*NOTE: moving the title to the bottom and increasing image size is in the DASHBOARD ENTITY HEADER section. It was like that before I edited the CSS*/
div.panel.panel-default.widget-preview {
    border: solid;
    border-color: #222222;
    border-width: 4px 5px 3px 4px;
    border-radius: 3ch 0.3ch 3ch 0.6ch / 0.5ch 3ch 0.1ch 5ch;
    box-shadow: 1px 1px 5px #222222;
}

/*Changes the titles of widgets to have the fancy comic book title font*/
h3.panel-title a:link, h3.panel-title a:hover, h3.panel-title a:visited, h3.panel-title a:active{
    color: white!important;
    text-shadow: 2px 2px 1px #6B2D22!important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #6B2D22;
    font-size:4ch!important;
}
/** Style No Uppercase Sidebar#856 */
.main-sidebar .sidebar-menu li a, .main-sidebar .sidebar-menu li span {
  text-transform: none;
}
/** Style Phone Convo Default (WhatSnap)#909 */
.entity-submenu li:hover {
    background-color: white !important;
    color: black !important;
}

.kanka-entity-conversation .entity-story-block .box.box-solid:not(.entity-note):not(.entity-mentions-box){
    width: 500px;
    aspect-ratio: 0.6!important;
    margin: auto;
    margin-bottom:10px;
    font-family: 'Roboto';
}

/* Fixing the size for screens*/
@media only screen and (max-width: 910px) {
	.kanka-entity-conversation .entity-story-block .box.box-solid:not(.entity-note):not(.entity-mentions-box){
    width: 100%;
}
}


.kanka-entity-conversation .entity-story-block .box-solid:not(.entity-note):not(.entity-mentions-box)  {
    background: var(--convo-background);
    background-repeat: repeat;
    background-size: 800px auto;
    color: black;
}

/* Changing the background colours to dark mode */
.kanka-entity-conversation .box-solid:not(.entity-note):not(.entity-mentions-box),.kanka-entity-conversation .box-solid:not(.entity-note):not(.entity-mentions-box) .box-header {
    background-color: #3a3b3d !important;
    color: white !important;
}
.kanka-entity-conversation .box-solid .box-tools * {
    color: white !important;
}

.kanka-entity-conversation .box-footer {
    background:none;
    border:none;
}

/* Moving the date down a bit */
.box-comment .pull-right {
    margin-left: 5px!important;
    transform: translateY(5px);
}
.kanka-entity-conversation .content .entity-story-block .box-body {
    padding-top: 0px;
    margin-bottom: 0px;
}

.box-comments::before {
    content: "🔒 Messages and calls are end-to-end encrypted. No one outside of this chat, not even WhatSnap can read or listen to them. Tap to learn more.";
    text-align:center;
    min-width:120px;
    width:85%;
    margin-top:10px!important;
    padding: 15px 25px 15px 25px;
    border-radius:10px;
    margin:auto;
    color:#e5b029;
    background-color: rgba(58, 59, 61, 0.95);
    display:block;
    margin-bottom:10px;
}

/* Changing the character/text input */
.kanka-entity-conversation .entity-story-block input,
.kanka-entity-conversation .entity-story-block select {
    background-color: #3a3b3d !important;
    border: none;
    border-radius: 10px;
}

.kanka-entity-conversation .entity-story-block select {
    padding:2px!important;
}

/* Changing padding and width of text input */
.kanka-entity-conversation .entity-story-block .col-md-9 {
    padding-right:10px!important;
    padding-left:0px!important;
    width: calc(75% - 42px);
}
/* Adding call button*/
.kanka-entity-conversation .box-body .box-footer .row::after {
    width:32px;
    height:32px;
    content: "\f130";
    font-family: FontAwesome;
    background-color: #71BAE6;
    text-align:center;
    line-height: 32px;
    border-radius:100%;
    top:3px;
    font-size: 1.2em;
    font-weight: 400;
    position:relative;
    display:inline-block;
}
.box-conversation .box-comments{
    min-height: 720px;
    max-height: 82vh;
}
/* General changes for the message blocks*/
.box-comment {
	margin-left: 15px!important;
    clear: both;
    max-width: 80%;
    /* Old
	border-radius: 15px 15px 15px 0px !important;
	*/
	border-radius: 0px 15px 15px 15px!important;
    background-color: rgba(173, 173, 173, 0.95) !important;
	border-color: rgba(173, 173, 173, 0.95) !important;
    padding: 10px !important;
    display:block!important;
    float: left;
}

/*No linebreaks on names */
.box-comment .message-author {
    white-space:nowrap;
    margin-right:15px;
}

/*MESSAGE TAILS*/
.box-comment.message-first::before {
    content: '';
	position: relative;
	left: 0;
	top: 6px;
	width: 0;
	height: 0;
	border: 15px solid transparent;
	border-right-color: inherit;
	border-left: 0;
	border-top: 0;
	margin-top: -1em;
	margin-left: -25px;
    }
    
/*Followups are round with no tails*/
.message-followup {
    margin-top:2px;
    border-radius: 15px 15px 15px 15px!important;
}

.box-comment * {
    color: black !important;
}

/** Specific users **/
/* Alex */
.message-author-701448 {
    background-color: rgba(143, 183, 143, 0.95) !important;
	border-color: rgba(143, 183, 143, 0.95) !important;
}

/* Sophie */
.message-author-701704 {
    background-color: rgba(179, 147, 193, 0.95) !important;
	border-color: rgba(179, 147, 193, 0.95) !important;
}

/* Adam */
.message-author-703145 {
    background-color: rgba(142, 225, 255, 0.95) !important;
	border-color: rgba(142, 225, 255, 0.95) !important;
}

/* Blind Viper */
.message-author-702971 {
    background-color: rgba(5, 5, 5, 0.95) !important;
	border-color: rgba(5, 5, 5, 0.95) !important;
}

/* Changes text colour to white*/
.message-author-702971 * {
	color: white !important;
}

/* Caleb */
.message-author-703935 {
    background-color: rgba(4, 146, 194, 0.95) !important;
	border-color: rgba(4, 146, 194, 0.95)!important;
}
/* Amber */
.message-author-703329 {
    background-color: rgba(255, 149, 63, 0.95) !important;
	border-color: rgba(255, 149, 63, 0.95) !important;
}
/* Evan */
.message-author-703327 {
    background-color: rgba(205, 255, 114, 0.95) !important;
	border-color: rgba(205, 255, 114, 0.95) !important;

}
/* Rose */
.message-author-702207 {
    background-color: rgba(255, 130, 161, 0.95) !important;
	border-color: rgba(255, 130, 161, 0.95) !important;

}
/* Dana */
.message-author-703957 {
    background-color: rgba(255, 204, 203, 0.95) !important;
	border-color: rgba(255, 204, 203, 0.95) !important;
}
/* Hayley (JUST FOR TESTING) */
.message-author-704041 {}

/*Annette */
.message-author-729726 {
background-color: rgba(6, 230, 145, 0.95) !important;
border-color: rgba(6, 230, 145, 0.95) !important;

}
 
/* Jacob */
.message-author-705806 {
 background-color: rgba(221, 155, 0, 0.95) !important; 
 border-color: rgba(221, 155, 0, 0.95) !important; 

}

/*Phoenix Punch */
.message-author-700983 {
  background-color: rgba(255, 48, 0, 0.95) !important;
  border-color: rgba(255, 48, 0, 0.95) !important;
  background-image: url("https://kanka-user-assets.s3.eu-central-1.amazonaws.com/campaigns/111651/f368fd33-f92a-48dd-9aa4-bae8e7a97435.png");
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-origin: border-box;
  background-position-x: center;
  background-position-y: bottom;
  text-shadow: burlywood 2px -1px;
}

/*Inflammable */
.message-author-702995 {
   background-color: rgba(255, 195, 14, 0.95) !important; 
   border-color: rgba(255, 195, 14, 0.95) !important; 
}


/*** RIGHT HAND BUBBLES***/
/* These are bubblers from the 'sender', or the user of the phone. They appear on the right side instead of the left.
It's reserved for whose phone you're technically looking at the conversation through. Because there's no designated 'speaker' let alone a class
for it, this is basically a manual override by entity ID and author ID. Finnicky, but makes for a neat effect.*/

/* Listed in order. Format: User (userID) in X convo (entityID)
1. Blind Viper (702971) in the test convo (2963131) 
2. Alex (701448) in her Evan convo (2967265)
3. Alex in her Rose convo (2974626)
4. Caleb (703935) in her Annette convo (2976092) 
5. Sophie (701704) in her Ella convo (2976539)
6. Adam (703145 ) in his Jacob convo (2976059)*/

.kanka-entity-2963131 .message-author-702971,
.kanka-entity-2967265 .message-author-701448,
.kanka-entity-2974626 .message-author-701448,
.kanka-entity-2976092 .message-author-703935,
.kanka-entity-2976539 .message-author-701704,
.kanka-entity-2976059 .message-author-703145 {
    border-radius: 15px 0px 15px 15px !important;
    float:right!important;
	margin-right:15px;
	margin-left:0px;
}

.kanka-entity-2963131 .message-author-702971.box-comment.message-followup,
.kanka-entity-2967265 .message-author-701448.box-comment.message-followup,
.kanka-entity-2974626 .message-author-701448.box-comment.message-followup,
.kanka-entity-2976092 .message-author-703935.box-comment.message-followup,
.kanka-entity-2976539 .message-author-701704.box-comment.message-followup,
.kanka-entity-2976059 .message-author-703145.box-comment.message-followup {
	 border-radius: 15px !important;
 }


/*RIGHT HAND AUTHORS TAILS*/
.kanka-entity-2963131 .message-author-702971.box-comment.message-first::before,
.kanka-entity-2967265 .message-author-701448.box-comment.message-first::before,
.kanka-entity-2974626 .message-author-701448.box-comment.message-first::before,
.kanka-entity-2976092 .message-author-703935.box-comment.message-first::before,
.kanka-entity-2976539 .message-author-701704.box-comment.message-first::before,
.kanka-entity-2976059 .message-author-703145.box-comment.message-first::before {
    content: '';
	position: relative;
	float:right;
	border: 15px solid transparent;
	border-left-color: inherit;
	border-right: 0;
	border-top: 0;
	margin-top: -1em;
	margin-right: -25px;
}

.kanka-entity-2963131 .message-author-702971 .text-muted::after,
.kanka-entity-2967265 .message-author-701448 .text-muted::after,
.kanka-entity-2974626 .message-author-701448 .text-muted::after,
.kanka-entity-2976092 .message-author-703935 .text-muted::after,
.kanka-entity-2976539 .message-author-701704 .text-muted::after,
.kanka-entity-2976059 .message-author-703145 .text-muted::after {
    content: "\f560";
    font-family: FontAwesome;
    font-weight: 400;
}

/*** END OF RIGHT-HAND BUBBLES ***/
.kanka-entity-conversation .box-solid:not(.entity-note):not(.entity-mentions-box) .box-header::before {
    content: "< Chats";
    color:lightblue!important;
    display:inline;
    font-size: 1.2em;
}

.kanka-entity-conversation .box-solid:not(.entity-note):not(.entity-mentions-box)  .box-header .box-tools::before {
    content: "Members:";
    margin:auto;
    margin-right: -10px;
    overflow: hidden;
    font-size: 0.8em;
}

/* Scrollbar */

.box-comments::-webkit-scrollbar {
  width: 10px;
}

 
/* Handle */
.box-comments::-webkit-scrollbar-thumb {
  background: #616368;
  border-radius: 2px;
  margin:2px;
}

/* Handle on hover */
.box-comments::-webkit-scrollbar-thumb:hover {
  background: grey; 
}

/* SYSTEM MESSAGE (at bottom for higher priority)*/
.message-author-759752 {
    background: none!important;
    width: 60%;
    margin-right: 20%!important;
    margin-left: 20%!important;
    float:none;
    display:inline-block;
    text-align: center;
}
.message-author-759752 *{
    font-family: "Roboto";
    color:lightgrey!important;
}
.message-author-759752 .character{
    display: none;    
}
.message-author-759752 .pull-right.text-muted {
    display:none;
}

.message-author-759752 .dropdown-menu *{
    color:black!important;
}
.box-comment.message-author-759752.message-first::before{
    display:none!important;
}


/* Popup corners */

/** GALLERY **/
.uploader {
    color:white;
}

/* Load more button */
.load-more {
    color: white !important;
    background: black;
    border-radius: 5px;
}
/** Style Phone Convo (Secure)#910 */
/* COMMUNICATORS */

/*Background changes */
.kanka-entity-2969810 .entity-story-block .box-solid:not(.entity-note):not(.entity-mentions-box) {
    font-family: "Exo 2" !important;
    background: linear-gradient(#8de4e1, #3a8ec6, #55ceaf), url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/campaigns/111651/42a66065-376a-4176-a9df-9e5c3df1b42c.jpg);
    background-size: 600% 600%, auto 110%;
    background-blend-mode: hue, normal;
    -webkit-animation: GradientGo 41s ease infinite;
    -moz-animation: GradientGo 41s ease infinite;
    animation: GradientGo 41s ease infinite;
}

@-webkit-keyframes GradientGo {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@-moz-keyframes GradientGo {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}
@keyframes GradientGo {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

/* General message changes */
.kanka-entity-2969810 .box-comment {
    background: rgba(0, 104, 162, 0.9) !important;
    max-width: 97%;
    font-size: 1.2em;
    margin-left:auto!important;
    margin-right:auto!important;
    width: 100%;
    border: white 1px solid !important;
    border-radius: 1px 10px 0px 10px !important;
}

.kanka-entity-2969810 .box-comment.message-first::before {
    display:none;
}

.kanka-entity-2969810 .box-comment  * {
    color: white !important;
    display: inline;
}

.kanka-entity-2969810 .drowndown {
    float:right;
}

.kanka-entity-2969810 .dropdown a{
    color:black!important;
}

.kanka-entity-2969810 .box-comment .pull-right.text-muted {
    display: none;
}

/* Pre-message */
.kanka-entity-2969810 .box-comments::before {
    color: lightblue;
    content: "Communications are end-to-end encrypted with a rotating AES-512 key.";
}

/* Specific users */
/*COMMUNICATOR*/
.kanka-entity-2969810 .character {
    display: none;
}

.kanka-entity-2969810 .comment-text::before {
    visibility: visible;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Orbitron";
    font-size: 0.8em;
}

.kanka-entity-2969810 .message-author-701448 .comment-text::before {
    content: "Mantid\00a0\00a0";
}

.kanka-entity-2969810 .message-author-701704 .comment-text::before {
    content: "Calico\00a0\00a0";
}

.kanka-entity-2969810 .message-author-703145 .comment-text::before {
    content: "Rigel\00a0\00a0";
}

.kanka-entity-2969810 .message-author-703935 .comment-text::before {
    content: "Makeshift\00a0\00a0";
}

.kanka-entity-2969810 .message-author-759796 .comment-text::before {
    display:block;
    text-align:center;
    content: "GREGORY\00a0\00a0";
}

/* Gregory */
.kanka-entity-2969810 .message-author-759796 {
    clear: both;
    border-radius: 10px!important;
    background: rgba(255, 255, 255, 0.9)!important;
    margin-right: 15%!important;
    width:70%!important;
    float: right;
    border-color: lightblue!important;
    height:auto;
    display:block;
    text-align:center;
}
.kanka-entity-2969810 .message-author-759796 * {
    color: #007789!important;
}

/* Other */
.kanka-entity-2969810 .box-solid:not(.entity-note) .box-header::before {
    content: "SECURE MESSENGER";
    font-family: "Orbitron";
    margin-left: 25%;
}