@import url('reset.css');
@import url('reset_for_render_zone.css');
@import url('fontawesome-all.css');
@import url('common_with_standalone.css');
@import url('login.css');
@import url('fonts.css');
@import url('../toxilibs/diff.css');



@keyframes bounce {
    0% {-webkit-transform: scale(1.1,.9);
        transform: scale(1.1,.9);}
   50% {
         -webkit-transform: scale(.9,1.1) translateY(-.5rem);}
   70% { -webkit-transform: scale(1);
         transform: scale(1);}
}

@keyframes pulse {
   50% { -webkit-transform: scale(1.3);
         transform: scale(1.3);}
   100% { -webkit-transform: scale(1);
         transform: scale(1);}
}


@keyframes grow {
   100% { -webkit-transform: scale(1.3);
         transform: scale(1.3);}
}


body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


html, body {
  background: #10131B;
  color: #9ea3a8;
  font-family: 'Sulphur Point', sans-serif;
}

html {
  color-scheme: dark;
  --scrollbar-color: #9ea3a8 rgb(15 19 27 / 20%);
  scrollbar-color: var(--scrollbar-color);
  scrollbar-width: thin;
}

.select2-search__field {
  color-scheme: light;
}


h1{
  font-size: 3em;
}



a{
  color: #00FFFF;
}



h1, h2, .menu{
    font-family: Nasalization, sans-serif;
}

h1, h2, h3{
    text-shadow: #AAAAFF 0 0 8px;
    color: #FFFFFF;
    text-transform: uppercase;
    clear: both;
}


thead tr, th{
  background: #1b2e41;
  font-weight: bold;
  padding: 0.5em;
}

tr:nth-child(even) {
  background: rgb(200 200 200 / 10%);
}


td{
  padding: 0.3em 0.5em;
}



strong {
  font-weight: bold;
}

.button {
  display: inline-block;
  border: 1px solid #111314;
  background: linear-gradient(#303337, #2b2e31);
  padding: 7px;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(#35393c, #303337);
}

.confirm {
  background: linear-gradient(#4e8fc5, #468ac2);
  color: white;
}

.confirm:hover {
  background: linear-gradient(#5997c8, #5291c6);
}

.errors {
    border: 1px solid #ff6666;
    color: #ff6666;
    padding: 6px;
    margin-bottom: 6px;
}


input[type="text"],
input[type="email"],
input[type="password"]  {
  background: #191a21;
  box-sizing: border-box;
  width: 100%;
  color: #d9dbde;
  border: 2px solid transparent;
  padding: 5px;
  font-size: 13px;
  font-weight: 700;
  color-scheme: dark;
}

.display-password{
  cursor: pointer;
  color: rgb(70 90 126);
  font-size: 0.9em;
  position: absolute;
  top:   0.25em;
  right: 0.5em;
  line-height: 1.5;
  opacity: 0.4
}

.display-password:hover{
  opacity: 1;
}


input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
  border: 2px solid #e6b15b;
}

input[type="text"].error,
input[type="email"].error,
input[type="password"].error {
  border: 2px solid #dc3545;;
}


.form-error-message {
  color: #dc3545;
  font-size: 0.8rem;
  position: relative;
  top: -0.5em;
  display: block;
  margin-bottom: 0.5em;
}



span.en,
span.fr,
p.en,
p.fr{
  display: none;
}

span.for_apple{
  display: none;
}

.enable-apple span.for_apple{
  display: initial;
}

.enable-apple span.for_non_apple{
  display: none;
}

.enable-en span.en,
.enable-en p.en,
.enable-fr span.fr,
.enable-fr p.fr{
  display: initial;
}




/******************* CONTEXT MENU ***************/

.context-menu-list {
    background: #b8babb;
    border: none;
}

.context-menu-item {
    padding: .2em 1.5em;
    background: none;
    font-size: 14px;
    color: black;
}






/******************* MODAL ***************/

.modal-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0 0 0 / 40%);
}

.modal {
  color: #9ea3a8;
  background: #0a0b10;
  position: relative;
  top: 60px;
  margin: auto;
  padding: 0;
  width: fit-content;
  min-width: 600px;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%),0 6px 20px 0 rgb(0 0 0 / 19%), 0 0 3px #8893a0;
  border: 1px solid #5d6671;
  font-size: 16px;
}



.modal .close {
  position: absolute;
  top: 2px;
  right: 12px;
  color: #9ea3a8;
  font-size: 28px;
  font-weight: bold;
}

.modal .close:hover,
.modal .close:focus {
  color: #9ea3a8;
  text-decoration: none;
  cursor: pointer;
}

.modal .header {
  padding: 12px;
  font-size: 16px;
}

.modal .body {
  padding: 12px;
  --max-height: 75vh;
  max-height: var(--max-height);
  overflow-y: auto;
}

.modal .body strong {
  color: white;
}

.modal .body p {
  margin-bottom: 6px;
}

.modal .footer {
  text-align: right;
  padding: 12px;
  clear: both;
}

.modal .button {
  margin: 0 0 0 10px;
}

.modal h2{
  padding: 0;
  font-size: 1.1em;
}

.modal textarea {
    background: #9e9e9e;
    width: 100%;
    color: #161719;
    outline: none;
    border: none;
    font-size: 12px;
    min-height: 200px;
}


.share-modal .modal{
  width: 600px;
}

.share-modal .share-cards{
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.share-modal .share-card{
  border: 2px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.share-modal .share-card.selected{
  border-color: #6584c0;
}


.share-modal .share-card-header{
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 0.8em;
  cursor: pointer;
  transition: background 0.15s;
}

.share-modal .share-card-header:hover{
  background: #f0f6fb;
}

.share-modal .share-card.selected .share-card-header{
  background: #e4eff8;
}

.share-modal .share-card-icon{
  font-size: 1.3em;
  color: #6584c0;
  width: 1.4em;
  text-align: center;
  flex-shrink: 0;
}

.share-modal .share-card-title{
  font-weight: bold;
  font-size: 0.95em;
}

.share-modal .share-card-subtitle{
  font-size: 0.8em;
  color: #777;
}

.share-modal .share-card-body{
  border-top: 1px solid #ddd;
  background: #1e283b;
  color: #e4eff8;
  overflow: hidden;
}

.share-modal .share-card-body-inner{
  padding: 0.5em 0.8em 0.8em;
}

.share-modal .choice-panel label{
  display: block;
  font-size: 0.95em;
  padding: 0 0 0.5em;
}

.share-modal .version-choice{
  margin-bottom: 0.8em;
}

.share-modal .version-choice .choice-label{
  font-weight: bold;
  margin-bottom: 0.3em;
}

.share-modal .version-choice label{
  display: block;
  font-size: 1em;
  padding: 0.15em 0;
}

.share-modal .links-panel{
  padding-top: 0.5em;
}


.share-modal .action-link{
  display: flex;
  gap: 0.4em;
  align-items: stretch;
  margin: 0.3em 0;
}

.share-modal .action-link .action-button{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.5em 0.8em;
  font-size: 1em;
  text-decoration: none;
  color: white;
  background: linear-gradient(#4e8fc5, #468ac2);
  border: none;
  cursor: pointer;
}

.share-modal .action-link .action-button:hover{
  background: linear-gradient(#5a9ad0, #4e8fc5);
  color: white;
}


.share-modal button,
.share-modal .button{
  background: #e4eff8;
  color: #6484c0;
}

.share-modal button:hover,
.share-modal .button:hover{
  background: white;
  color: #da9540;;
}


.share-modal .warning{
  color: #da9540;
  margin-bottom: 0.5em;
}

.share-modal .description{
  margin-bottom: 0.6em;
  font-size: 0.95em;
}


.share-modal .revoke-guest-link{
  padding: 0.3em 0.8em;
  font-size: 0.9em;
  cursor: pointer;
  background: linear-gradient(#d9534f, #c9302c);
  color: white;
  border: none;
  border-radius: 3px;
}

.share-modal .revoke-guest-link:disabled{
  opacity: 0.6;
  cursor: default;
}




/******************* NOTIFICATIONS **************/


/* Notification Container */
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual Notification */
.notification {
  background-color: #ffffff;
  color: #333333;
  border-radius: 4px;
  padding: 12px 16px;
  min-width: 280px;
  max-width: 350px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slide-in 0.3s ease-out forwards;
}

/* Notification Types */
.notification.success {
  border-left: 4px solid #4caf50;
}

.notification.error {
  border-left: 4px solid #f44336;
}

.notification.warning {
  border-left: 4px solid #ff9800;
}

.notification.info {
  border-left: 4px solid #2196f3;
}

.notification.review-request {
  border-left: 4px solid #ff9800;
}

.notification.help-request {
  border-left: 4px solid #2196f3;
}

/* Notification Title */
.notification-title {
  font-weight: 600;
  margin-bottom: 4px;
}

/* Notification Content */
.notification-content {
  flex-grow: 1;
}

.notification a {
  color: #0095c9;
}

/* Notification Actions */
.notification-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.notification-actions .notification-btn-accept {
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  background: #4caf50;
  border: 1px solid #4caf50;
  color: white;
}

.notification-actions .notification-btn-accept:hover {
  background: #43a047;
}

.notification.review-request .notification-btn-accept {
  background: #ff9800;
  border-color: #ff9800;
}

.notification.review-request .notification-btn-accept:hover {
  background: #f57c00;
}

.notification.help-request .notification-btn-accept {
  background: #2196f3;
  border-color: #2196f3;
}

.notification.help-request .notification-btn-accept:hover {
  background: #1976d2;
}

.notification-actions .notification-btn-decline {
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  background: transparent;
  border: 1px solid #999;
  color: #666;
}

.notification-actions .notification-btn-decline:hover {
  background: #f0f0f0;
  color: #333;
}

/* Close Button */
.notification-close {
  background: none;
  border: none;
  color: #999999;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  margin-left: 12px;
}

.notification-close:hover {
  color: #333333;
}

/* Animation */
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.notification.hide {
  animation: fade-out 0.3s ease-out forwards;
}



.browser-error{
  text-align: center;
  padding: 1em;
  background: red;
  color: white;
  margin-bottom: 5em;
}

.browser-error-fixed{
  position: fixed;
  top: 0;
  left: 0;
  margin-bottom: 0;
}
    




/******************* MISC ***************/



@keyframes appear {
  0%   { opacity: 0; }
  100% { opacity: 1.0; }
}


@keyframes glow {
    to {
        color: #aaaaaa;
        text-shadow: 0 0 6px #513605;
    }
}

#loading-in-progress{
  z-index: 1000;
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 1.3em;
  color: #707478;
  animation: appear 1s 1s ease-in both, glow 0.7s infinite ease-in alternate;
  font-family: Nasalization, sans-serif;
}

.quick-poll-button-yes {
  background: #4466AA;
  font-size: 1.5em;
  padding: 0.5em;
}

.quick-poll-button-no {
  font-size: 1.5em;
  padding: 0.5em;
}


.iloview_hidden{
  overflow: hidden;
  z-index: -10;
}




.copy-content {
  cursor: pointer;
}


#workspaces-diff-details{
  border-top: 1px solid #888888;
  margin-top: 1em;
  padding-top: 0.5em;
}

#workspaces-diff-details .diff-container{
  margin-top: 1em;
}

#diff{
  display: none;
  flex-shrink: 1;
  flex-grow: 1;
}

.diff{
  padding: 0.5em 0;
  font-family: 'Office Code Pro', monospace;
  font-size: 14px;
}

.diffLine{
  background: #292B36;
}

.diffLine .diffPreviousLineNumber,
.diffLine .diffNextLineNumber{
  background: #2c3e50;
  color: #888888;
}

.diffSection .remove{
  background: #993333;
}
.diffSection .insert{
  background: #048140;
  color: #FFFFFF;
}

.modification-diff-modal .body{
  max-width: 80vw;
  overflow: auto;
}





#challenge-box {
  display: none;
  padding: 10px;
  background: #FFAA44;
  color: #FFFFFF;
  margin-bottom: 1em;
}

#challenge-box[data-status="success"] {
  background: #4CAF50;
}

#challenge-box .player{
  font-size: 0.8em;
}

#challenge-box .title{
  font-size: 0.8em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid white;
  margin-bottom: 0.5em;
}

#challenge-box .action-container{
  display: block;
  font-size: 0.9em;
  margin: 0.3em 0;
}



.challenge-actions a {
  background: #983b29;
  color: white;
  padding: 0.5em;
  border-radius: 5px;
  text-decoration: none;
}


.qr-validate{
  cursor: pointer;
  font-size: 0.8em;
  opacity: 0.5;
  margin-left: 0.3em;
}

.qr-validate:hover{
  opacity: 1;
}

#challenge-box .command-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 0.5em;
}

#challenge-box .command-buttons .command{
  display: inline-block;
  background: #FFFFFF44;
  color: white;
  padding: 0.3em 0.6em;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.85em;
}

#challenge-box .command-buttons .command:hover{
  background: #FFFFFF66;
}

#challenge-box .command-buttons .validate{
  background: #FFFFFF77;
  font-weight: bold;
}

#challenge-box .challenge-actions a{
  font-size: 0.9em;
  padding: 0.1em 0.2em;
  background: #FFFFFF55;
}


.text-challenge .challenge-actions{
  text-align: right;
}


.text-challenge .challenge-actions a {
    font-size: 1.2em;
}

.challenge-actions .validate {
    background: #3b4f77;
}



.text-challenge .action-container {
    margin-left: 2em;
    padding-left: 2em;
    border-left: 1px solid grey;
}

.text-challenge .action-container:first-child {
    border-left: none;
}



.transfer-detail{
  margin-bottom: 1em;
}

.transfer-detail p{
  margin-left: 2em;
}

.transfer-choice{
  display: inline-block;
  margin-bottom: 1em;
  color: #da9540;
}

/* Diff tables (common styles) */

.diff-table .section-header th{
  padding: 0.8em;
  text-align: left;
}

.diff-table .section-header h3{
  margin: 0;
}

.diff-table tr:nth-child(even) {
  background: rgb(120 140 200 / 13%);
}

.diff-table tr.reset-to-odd td{
  height: 0;
  padding: 0;
}

.diff-table tr.section-gap:first-child{
  display: none;
}

.diff-table tr.section-gap{
  background: none;
}

.diff-table .section-gap th{
  background: none;
  height: 2em;
}

.diff-table .file-cell{
  vertical-align: top;
  padding: 0.3em 1em;
}

.diff-table .file-cell .file-path{
  color: #ccc;
}

.diff-table .file-cell .diff{
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.diff-table .choice-cell{
  vertical-align: top;
  padding: 0.3em 0.8em;
  white-space: nowrap;
}

.diff-table .choice-cell label{
  cursor: pointer;
  margin-left: 0.3em;
}

.diff-table .choice-cell input:checked + label {
  color: white;
}

.diff-table .choice-cell .fas{
  margin-right: 0.3em;
  opacity: 0.7;
}

.diff-table .master-row{
  background: rgb(80 100 140 / 20%);
  border-bottom: 1px solid #444;
}

.diff-table .master-row label{
  font-weight: bold;
}

/* Extended diff table (specific) */
.extended-diff-table .choice-cell{
  width: 140px;
}

/* Bidirectional sync table (specific) */
.bidirectional-sync-table .choice-cell{
  width: 120px;
}



.dataTables_filter{
  padding: 0.5em;
}

.dataTables_filter input{
  margin-left: 1em;
  background: #1a2e41;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  *cursor: hand;
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 1.5em;
}
table.dataTable thead .sorting {
  background-image: url("/app_assets/datatable_images/sort_both.png");
}
table.dataTable thead .sorting_asc {
  background-image: url("/app_assets/datatable_images/sort_asc.png");
}
table.dataTable thead .sorting_desc {
  background-image: url("/app_assets/datatable_images/sort_desc.png");
}
table.dataTable thead .sorting_asc_disabled {
  background-image: url("/app_assets/datatable_images/sort_asc_disabled.png");
}
table.dataTable thead .sorting_desc_disabled {
  background-image: url("/app_assets/datatable_images/sort_desc_disabled.png");
}





.image-preview .body img{
  margin: auto;
  display: block;
  max-height: var(--max-height);
  max-width:  100%;
  object-fit: contain;
  background: url("/app_assets/interface/checkers.png");
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: crisp-edges;
}

.image-preview .modal{
  width: fit-content;
  min-width: 600px;
  max-width: 90%;
}

.image-preview .nav_bar{
  text-align: center;
}

.image-preview .nav_bar a{
  margin: 0 1em;
  text-decoration: none;
  font-size: 1.2em;
  color: #9ea3a8;
}

.image-preview .nav_bar a:hover{
  color: #FFFFFF;
}



.smart-search-modal .modal,
.smart-search{
  background: #223344;
}

.smart-search{
  padding: 0.5em;
}

.smart-search form{
  margin-top: 0.5em;
}

.smart-search form input{
  border-radius: 5px;
}

.smart-search form button{
  display: none;
}

#search-results{
  font-family: 'Share Tech', sans-serif;
  font-size: 0.9em;
  line-height: 1.5;
}

#search-results .detail{
  margin-left: 2em;
  font-size: 0.8em;
}



/*********************** MENU ****************/


#general-toolbar{
  padding-left: 2px;
  opacity: 0.5;
  transition-property: opacity;
  transition-duration: 5s;
  z-index: 11;
}

#general-toolbar:hover{
  opacity: 1;
  transition-duration: 0.2s;
}



.menu-item {
  float: left;
  width:  36px;
  height: 40px;
  position: relative;
}


#home .menu-item{
  position: absolute;
  top:  30px;
  left: 30px;
  transform: scale(1.2);
}



.menu-icon{
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 15px;
  text-decoration: none;
  transition-property: color, box-shadow, background-color;
  transition-duration: 0.3s;
  font-size: 13px;
  color: #65696b;
  width:  22px;
  height: 22px;
  border: 1px solid #464956;
  line-height: 22px;
}

.menu-item .menu-icon{
  margin: 8px 0 0 6px;
}
.menu-item:hover .menu-icon,
.menu-icon:hover{
  color: white;
  opacity: 1;
  border-color: #bdbfc2;
  box-shadow: 0 0 4px #bdbfc2;
}


.dropdown {
  position: relative;
}



.dropdown-menu {
  display: flex;
  flex-flow: column;
  padding: 4px 4px 12px;
  background: #10131B;
  padding-top: 10px;
  position: absolute;
  top:  calc(100% - 10px);
  left: 0;
  box-shadow: 0 0 4px #10131B;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
}

#home .dropdown-menu{
  left: -5px;
  margin-top: 10px;
  background: rgb(30 40 59 / 60%);
  border-radius: 10px;
}

.dropdown-item{
  font-size: 1.1em;
  color: #9ea3a8;
  white-space: nowrap;
  text-decoration: none;
  padding: 4px 8px;
  cursor:  pointer;
  transition: all 0.2s ease;
}

.dropdown-item .fas{
  width: 1.3em;
  text-align: center;
}

.dropdown-item:hover{
  color: #ecedee;
  text-shadow: 0 0 4px #bdbfc2;
}


.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(5px);
}



.dropdown-menu::before{
  content: "";
  position: absolute;
  top:  -15px;
  left: 0;
  height: 15px;
  width: 100%;
  display: none;
}

.dropdown:hover .dropdown-menu::before{
  display: block;
}

.dropdown > div:first-child{
  position: relative;
  z-index: 2;
}


.home-access{
  padding-top: 0;
}

.home-access svg{
  width:  20px;
  height: 22px;
  margin-left: 2px;
}


#challenges-status .best-choice td{
  background: #e37a3c;
  color: white;
}

#challenges-status .best-choice td a{
  color: white;
}

#challenges-status .help-request.best-choice td{
  background: #3498db;
}

#challenges-status .help-request.urgency-high td{
  border-left: 3px solid #2980b9;
}

#challenges-status .help-request.urgency-medium td{
  border-left: 3px solid #5dade2;
}

#challenges-status .urgency-high td{
  border-left: 3px solid #e74c3c;
}

#challenges-status .urgency-medium td{
  border-left: 3px solid #f39c12;
}

#challenges-status .notification-chain{
  font-size: 0.85em;
  color: #888;
  margin-top: 4px;
}

#challenges-status .notification-chain .notified{
  color: #1a5276;
}

#challenges-status .notification-chain .declined{
  color: #7b241c;
}

#challenges-status .best-choice .notification-chain .notified{
  color: #1b4f72;
}

#challenges-status .best-choice .notification-chain .declined{
  color: #641e16;
}

#challenges-summary{
  display: flex;
  gap: 1.5em;
  margin-bottom: 1em;
  font-size: 1.1em;
}

#challenges-summary .count{
  font-weight: bold;
  font-size: 1.2em;
}

#challenges-summary .stat-waiting{
  color: #f39c12;
}

#challenges-summary .stat-ongoing{
  color: #3498db;
}

#challenges-summary .stat-done{
  color: #2ecc71;
}

#my-ongoing-reviews{
  margin-bottom: 1em;
}

#my-ongoing-reviews .my-ongoing-item{
  padding: 0.5em 0.8em;
  margin-bottom: 0.3em;
  border-radius: 4px;
  font-size: 1.05em;
}

#my-ongoing-reviews .my-ongoing-item.validation{
  background: #fdf2e9;
  border-left: 4px solid #e37a3c;
}

#my-ongoing-reviews .my-ongoing-item.help{
  background: #ebf5fb;
  border-left: 4px solid #3498db;
}