/*
@font-face {
    font-family: LandingPageFont;
    src: url(/font/Ruslan_Display/RuslanDisplay-Regular.ttf);
}

*/

/* Fonts */
@font-face {
    font-family: DashboardTitleFont;
    src: url(/font/Young_Serif/YoungSerif-Regular.ttf);
}


@font-face {
    font-family: DiscordFont;
    src: url('/font/discord/Ginto/ABC Ginto Nord Full Web/ABCGintoNord-Bold.woff2');
    /*src: url('/font/discord/Ginto/ABC Ginto Nord Full Web/ABCGintoNord-Ultra.woff2');*/
}

/*
 *  CSS RESET - https://chriscoyier.net/2023/10/03/being-picky-about-a-css-reset-for-fun-pleasure/
 */
/*
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    height:      100%;
    margin:      0;
    padding:     0;
}
*/

html {
	box-sizing: border-box;
}
*,
*::before,
*::after {
	box-sizing: inherit;
}


/* APP */

body div#app {
    height: 100vh;
}

[contenteditable] {
  outline: 0px solid transparent;
}

/* LOADING */

.booting {
    display:                grid;
    justify-content:        center;
    align-content:          center;
    height:                 100vh;
}

.booting .title {
    font-family:            Calligraffitti;
    font-size:              48px;
    color:                  rgba(0,0,0,0.6);
}

.booting .subtitle {
    display:                grid;
    justify-items:          center;
    grid-template-columns:  auto;
    margin-top:             -10px;
    gap:                    0.5em;
    font-size:              20px;
}

/* DOT LOADING ANIMATION */

/**
 * ==============================================
 * Dot Falling
 * ==============================================
 */
.dot-falling {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9999px 0 0 0 #9880ff;
  animation: dotFalling 1s infinite linear;
  animation-delay: .1s;
}

.dot-falling::before, .dot-falling::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
}

.dot-falling::before {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFallingBefore 1s infinite linear;
  animation-delay: 0s;
}

.dot-falling::after {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  animation: dotFallingAfter 1s infinite linear;
  animation-delay: .2s;
}

@keyframes dotFalling {
  0% {
    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 9999px 0 0 0 #9880ff;
  }
  100% {
    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

@keyframes dotFallingBefore {
  0% {
    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 9984px 0 0 0 #9880ff;
  }
  100% {
    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
  }
}

@keyframes dotFallingAfter {
  0% {
    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
  }
  25%,
  50%,
  75% {
    box-shadow: 10014px 0 0 0 #9880ff;
  }
  100% {
    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
  }
}


/*
 * Vong Pages
 *
 */

.standard-page {
     height:          100%;
     width:           100%;
     display:         grid;
/*     justify-content: center;*/
}


.vong-page {
    height:          100%;
    width:           100%;
    display:         grid;
}

.vong-page-padding {
    padding:        1em 2em;
}

.administrator-page {
    width:           100%;
    height:          100%;
/*    padding:         2em 2em; */
}

.welcome-page {
/*    font-family:   LandingPageFont; */
/*    background:  beige;*/
    width:           100%;
    height:          100%;
    display:         grid;
    justify-content: center;
/*
    height:        100vh;
    grid-template-rows: 200px auto;
    align-items:   center;*/
}

.welcome-page .card-option-layout {
    display:                grid;
    width:                  100%;
    justify-items:          center;
    align-items:            center;
    grid-column-gap:        4vw;
    grid-row-gap:           4vh;
    grid-template-columns:  auto auto auto;
}

/*
.landing-page {
    font-family: LandingPageFont;
    height:      100vh;
    background:  beige;
    display:     grid;
    align-items: center;
}

.play-page {
    height:      100vh;
    display:     grid;
    align-items: center;
}
*/

.capture-page {
    width:           100%;
    height:          100%;
    display:         grid;
/*
    justify-content: center;
    height:        100vh;
    grid-template-rows: 200px auto;
    align-items:   center;*/
}


/*
 * Standard Layouts
 */

.basic-card {
    display:        grid;
    justify-items:  center;
    text-align:     center;
}



/*
 * Vong Card Button
 */
.vong-card-button {
    width:       12vw;
    user-select: none;
    text-align:  center;
/*
    display: grid;
    justify-items: center;
    align-items: center;
    */
}

.vong-card-button .title {
    padding-top:  1rem;
    font-size:    1.2rem;
    transition:   all 0.2s;
    /*white-space:  nowrap;*/
}

.vong-card-button:hover .title {
    text-shadow:  2px 2px 18px rgba(146,217,249,0.9);

}

.vong-card-button .wombo-icon {
    padding:       1vw;
    display:       grid;
    justify-items: center;
    transition:    all 0.2s;
}

.vong-card-button:hover .wombo-icon {
    cursor:     pointer;
    background: rgba(146,217,249,0.1);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.3);
    scale:      1.04;
}

/*
 * Vong Gated Group Status
 */

.vong-gated-group-public {
    text-align:       center;
    padding:          0.5em;
    border:           1px solid #b7eb8f;
    color:            #389e0d;
    background-color: #f6ffed;
}

.vong-gated-group-gated {
    text-align:       center;
    padding:          0.5em 0em;
    border:           1px solid #91caff;
    color:            #0958d9;
    background-color: #e6f4ff;
}

.vong-gated-group-retired {
    text-align:       center;
    padding:          0.5em;
    border:           1px solid #ffa39e;
    color:            #cf1322;
    background-color: #fff1f0;
}

.vong-gated-group-muted {
    text-align:       center;
    padding:          0.5em;
    border:           1px solid #ffadd2;
    color:            #c41d7f;
    background-color: #fff0f6;
}

#reagent-app {
    height:      100%;
}

.card {
    transition: all 0.4s;

    display:       grid;
    justify-items: center;
    padding:       2em;
    border-radius: 16px;
    width:         220px;
    cursor:        pointer;

    border:        1px solid rgba(0,0,0,0.5);
    box-shadow:    1px 2px 4px rgba(0,0,0,0.3);
}

.card .title {
    font-size:        1.2rem;
    padding:          0.5rem 0;
    width:            100%;
    text-align:       center;
    margin-bottom:    0.3rem;
    color:            white;
    text-shadow:      1px 4px 8px rgba(0,0,0,0.8);
    background-color: rgba(155,172,122,0.95);
}


.card:hover {
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1);
    background: #0ae;
    cursor:     pointer;
    scale:      1.04;
}

/*
.card:hover img {
  transition: all 0.4s;
  scale: 0.8;
}
*/

.wombouserColumn {
    background: green;
}

/*
 * Login Badges
 * User
 */

.login-badge {
    margin:          -1em;
    padding:         1em 0.2em;
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             0.5em;
}

.login-badge img {
    width: 2em;
}

.discord-login-badge {
    font-family:        DiscordFont;
    color:              white;
    background-color:   #5865F2;
    font-size:          1.2em;
    /*border:             1px solid rgba(200,200,200,0.4);*/
}

.loginless-login-badge {
    gap: 0.8em;
}

/*
 * Edit State
 * User-group
 */

/*
 * Edit Mode: rows-selected
 */



/*
 * Edit Mode: None
 */
/* TODO: Retire this ? */
.edit-user-group-state-none {
    cursor:         pointer;
    display:        flex;
    gap:            0.5em;
    color:          rgba(50,50,50,0.8);
    align-items:    self-end;
    font-size:      22px;
}

.edit-user-group-state-none div {
    opacity: 0.25;
    transition:     all 0.4s;
}

.edit-user-group-state-none:hover div {
    opacity: 1;
}

.edit-user-group-state-none img {
    scale: 0.8;
    transition:     all 0.3s;
}

.edit-user-group-state-none:hover img {
    scale: 1.0;
}

/*
 * Edit Mode: Editing
 */
.edit-user-group-state-editing {
    display: flex;
    gap: 0.3em;
}

.edit-user-group-state-editing button svg {
    transition:     all 0.3s;
}

.edit-user-group-state-editing button:hover svg {
    fill: rgba(210,210,210,0.4);
    stroke-width: 2em;
    stroke: white;
    scale: 1.4;
}

/*
.edit-user-group-state-editing span {
    color: white;
    font-size: 0.8em;
    opacity: 0.1;
    border: 1px solid black;
    border-radius: 6px;
    padding: 0 1em;
    margin: 0;
}
*/


/*
.edit-user-group-state-none img {
    transition:     all 0.4s;
}

.edit-user-group-state-none:hover img {
    box-shadow: 2px 2px 12px rgba(0,0,0,0.5);
}
*/


/*
 * User Browser
 */

.user-browser-resync-feedback {
    position:         absolute;
/*    pointer-events:   none; */
    z-index:          1000;
    width:            calc(100% - 48px);
    height:           calc(100% - 48px);
    display:          grid;
    justify-content:  center;
    background-color: rgba(117,254,214,0.6);

    opacity:        0.2;
    transition:     all 0.2s;
}

.user-browser-resync-feedback .resync-in-progress {
    opacity:        1;
    pointer-events: none;
}



/*
 * Product Portfolio Edit-Control Pane
 *
 */


.table-control-pane {
    display:            flex;
    justify-content:    right;
    user-select:        none;
}

.table-control-pane > div {
    padding:            0.3em 0.6em;
    margin:             0.2em 0.2em;
    background-color:   rgba(210,210,210,0.4);
    border:             1px solid rgba(0,0,0,0.0);
    opacity:            0.2;
}

.table-control-pane > div.active-container {
    opacity:            1;
}

.table-control-pane > div.active {
    transition:         all 0.2s;
    opacity:            1;
}

.table-control-pane > div.active:hover {
    background-color:   rgba(210,210,210,0.9);
    cursor:             pointer;
    border-radius:      50%;
    border:             1px solid rgba(0,0,0,0.1);
}

/*
 * Component - Select Release Website
 */

.select-website {
    display:                grid;
    grid-template-columns:  auto auto auto;
}

.select-website .path {
    display:            flex;
    align-items:        center;
}

.select-website .path > div:first-child  {
    font-weight:        bold;
}

.select-website .fqdn {
    display:            flex;
    align-items:        center;
}

.select-website .fqdn > div:first-child  {
    font-weight:        bold;
}

.select-website .spec  {
    display:            flex;
    align-items:        center;
    margin-left:        0.5em;
    gap:                0.3em;
    padding:            0em 1em 0em 0em;
    border:             1px solid rgba(0,0,0,0.3);
    background: rgba(0,0,200,0.03);
}

.select-website .spec > div:first-child {
    padding-left:       0.5em;
}

.user-test-begin-end-statement {
    display:                grid;
    grid-template-columns:  50px auto;
}

.user-test-begin-end-statement div:nth-child(odd) {
    font-weight:            bold;
}

/*
 * Form
 */

.form-section-title {
    margin-bottom:      0.6em;
    width:              100%;
    font-size:          20px;
    border-bottom:      2px solid transparent;
    border-image:       linear-gradient(0.25turn, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.0) 100%);
    border-image-slice: 1;
/*    rgba(0,0,0,0.4);*/
}
/*
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(0.25turn, rgba(255,249,34), rgba(255,0,128), rgba(56,2,155,0));
    border-image-slice: 1;
*/
.form-esthetics {
    background:     rgba(205,222,237,0.43);
/*    background:     rgba(0,0,100,0.03);*/
}
/*linear-gradient(rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40% ,rgba(0,0,0,0.0) 100%)*/

/*
 * Generic
 */

.layout-flex-2-space-between {
    display:            flex;
    width:              100%;
    align-items:        end;
    justify-content:    space-between;
}

/*
 *
 */

 .ellipsis-animation:after {
   overflow: hidden;
   display: inline-block;
   vertical-align: bottom;
   -webkit-animation: ellipsis steps(8, end) 1100ms infinite;
   animation: ellipsis steps(8, end) 1100ms infinite;
   content: "\2026";
   /* ascii code for the ellipsis character */
   width: 0px;
 }

 @keyframes ellipsis {
   to {
     width: 40px;
   }
 }

 @-webkit-keyframes ellipsis {
   to {
     width: 40px;
   }
 }

 /*
  * Capture Bot Profile
  */

.capture-profile {
    transition:   all 0.2s;
    scale: 1.0;
}

.capture-profile:hover {
    box-shadow:  2px 2px 18px rgba(117,254,214,0.9);
    scale: 1.1;
}

 /*
  * Player Profile
  */

.player-profile {
    transition:   all 0.2s;
    scale: 1.0;
}

/*
.player-profile:hover {
    box-shadow:  2px 2px 18px rgba(117,254,214,0.9);
    scale: 1.1;
}
*/