@font-face
{
    font-family: "Zekton"; 
    src: url("/fonts/zekton rg.ttf");
}

:root
{
    --clear-sw : #b9f2ff;
    --sw-txt-shadow : #51dbffa1;
    --txt-color : #c9e8ff;
    --border-color : #9bedff;
    --bg : #00597185;
    --error : #c72e00;
    --valid : #00ff89;
}

::-webkit-scrollbar
{
    width : 8px;
    height : 6px;
}

::-webkit-scrollbar-track {
    background: #2a5b66; 
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    background: var(--sw-txt-shadow); 
    border-radius: 0px;
}

/* for Firefox... */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sw-txt-shadow) rgb(30, 30, 30);
}


:focus
{
    outline : none;
}

input, *[contenteditable="true"]
{
    cursor : url("images/cursors/text.png") 8 8, auto;
}

select
{
    font-family: 'Zekton';
}


div.settings label
{
    display: block;
}

input[type="checkbox"],
.sw input[type="checkbox"]
{
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    -webkit-appearance: none;
    appearance: none;
    margin: auto;
    background-color: var(--bg);
    padding: 0.6em;
    border: 1px solid var(--border-color);
    width: initial;
    position: absolute;
    right: 0;
    margin-right: 3em;
    margin-top: -1.8em;
}

input[type="checkbox"]:checked
{
    background-color: var(--border-color);
}

div.window.install-creator p
{
    width: 500px;
    line-height: 1.5em;
}

.ls
{
    max-height: 500px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.ls .shortcut
{
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.shortcut .keys
{
    text-transform: capitalize;
    font-weight: bold;
    margin-left: 0;
    margin-right: auto;
}

.shortcut .description
{
    margin-right: 1em;
    font-size: 0.85em;
    font-style: italic;
}

.resources-list-container
{
    min-width: 500px;
}

div.window.install-creator p img
{
    width: 128px;
    border: solid 1px var(--border-color);
    border-radius: 2px;
    float: left;
    margin-right: 1em;
}

img
{
    display : block;
}

label
{
    cursor : url("images/cursors/default.png") 8 8, auto;
}

div.sw-widget.window.esc-menu
{
    display: flex;
    z-index: 1000;
    position: fixed;
    margin-left: 15%;
    min-width: 450px;
}

div.sw-widget.esc-menu button
{
    text-transform: initial;
    padding: 0.7em 0.9em;
    padding-bottom: 0.5em;
    width: 70%;
}

div.sw-widget.esc-menu button div
{
    display: flex;
    align-items: center;
    margin: auto;
    margin-left: 0;
}

div.sw-widget.esc-menu button img.icon
{
    margin-left: auto;
    margin-right: 1em;
}

div.sw-mask
{
    height : 100%;
    width : 100%;
    background: linear-gradient(
    20deg
    , black, #0000003d);
    z-index: -1;
    top : 0;
    left : 0;
    position : fixed;
}

img.background
{
    position : fixed;
    top :0;
    left :0;
    width : 100%;
    z-index : -2;
}

html
{
    overflow-x : clip;
}

textarea
{
    background: rgb(1, 40, 50);
    border: solid 1px var(--border-color);
    padding: 1em;
    height: 89px;
    font-family: 'Zekton';
    font-size: 0.9em;
    color: var(--txt-color);
    font-style: italic;
}



body
{
    text-align : center;
    padding : 0;
    margin : 0;
    font-size : 19px;
    line-height: 2em;
    font-family : "Zekton", sans-serif;
    overflow-x : clip;
    background : black;
    position : relative;
    color : var(--txt-color);
    cursor : url("images/cursors/default.png") 8 8, auto;
}

.sw div.window
{
    color : var(--txt-color);
    cursor : url("images/cursors/default.png") 8 8, auto;
}

div.sw-widget
{
    background: linear-gradient(
    17deg
    ,var(--bg) , transparent);
    border: solid 1px var(--border-color);
    margin: 2em auto;
    width: calc(50% - 2em);
    padding: 1em;
    display: flex;
    flex-direction: column;
    overflow : hidden;
    animation : swWidget-show 3s cubic-bezier(0.44, 0.45, 0.47, 1.01);
}

div.sw-widget.valid
{
    border-color : var(--valid);
    animation : swWidget-valid 1s cubic-bezier(0.44, 0.45, 0.47, 1.01);
}

div.sw-widget.error
{
    border-color : var(--error);
    animation : swWidget-error 1s cubic-bezier(0.44, 0.45, 0.47, 1.01);
}

div.sw-widget.alert
{
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 15%;
    margin-left: 30%;
    width: calc(40% - 2em);
    background: linear-gradient( 
    17deg
    ,#001a21 , #004458f2);
    z-index : 1000;
}

div.settings button
{
    min-width: 100px;
}

div.label-container
{
    display : flex;
    width: 100%;
}

div.label-container *:last-child,
div.sw-widget.window div.label-container label:last-child
{
    margin-left: auto;
    margin-right: 0;
}

div.sw-widget.alert.error,
div.label-container.error
{
    color : var(--error);
}

div.label-container.error
{
    animation: alert 3375ms cubic-bezier(0.44, 0.45, 0.47, 1.01) ;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
}

div.fuel-error
{
    z-index: 1000;
    position: fixed;
    font-size: 0.8em;
    line-height: 1.3em;
    width: 240px;
    background: linear-gradient( 17deg ,var(--bg) , transparent);
    border: 1px solid var(--border-color);
    padding: 0 0.7em;
    left: 352px;
    margin: 1em;
    padding-bottom : 1em;
}

div.fuel-error button
{
    padding: 0.5em;
    text-transform: initial;
    margin: auto;
    width: 100%;
}

div.sw-widget.alert.error button
{
    color : var(--error);
    font-size: 0.8em;
    min-width: 25%;
}

div.sw-widget.hide
{
    max-height : 0px;
    border-color : transparent;
    opacity : 0;
    animation : swWidget-hide 3s cubic-bezier(0.44, 0.45, 0.47, 1.01);
}

.create-org textarea
{
    width : calc(100% - 2.12em);
    min-height: 150px;
}

.create-org div.add
{
    display: flex;
    align-items: center;
}

.progressBar.back
{
    background: #004f65d1;
}

.progressBar.front
{
    background: var(--border-color);
}

.create-org div.add button:first-child
{
    width: 75%;
}

.create-org div.add button:last-child
{
    width : auto;
}

.create-org img.org-logo
{
    width: 250px;
    margin: auto;
    margin-top: 1.5em;
    border: solid 1px var(--border-color);
    border-radius: 0.1em;
}

.create-org div.my-org img.org-logo
{
    width: 128px;
    float: left;
    margin-bottom: 1em;
    margin-top: .5em;
    margin-right: 1em;
}

.create-org div.my-org input.name
{
    width: 55%;
    margin-top: 0.5em;
    margin-left: 0;
}

.create-org div.my-org button.logo
{
    margin-left: 0;
}

div.sw-widget.window div.tabs
{
    display : block;
}

div.sw-widget.window label
{
    display: block;
    margin : initial;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 10px;
}

div.sw-widget.window.cellest label
{
    display: inline;
}

div.sw-widget.window .org label.members
{
    margin: auto;
    margin-right: 0.6em;
}

div.sw-widget.window div.tabs button
{
    padding : 0.6em;
    margin : auto;
    line-height: inherit;
}

div.sw-widget.window div.tabs button.logo
{
    padding: 0.3em;
    margin-bottom: 1em;
}

div.sw-widget.window div.tabs button:hover
{
    background-color: initial ;
    background: linear-gradient( 0deg , var(--bg), transparent);
}

.create-org div.tabs div.bts button
{
    height: 3.7em;
}

.flex
{
    display: flex;
    align-items: center;
}

.money div.create
{
    display: flex;
}

.money .more .btns
{
    display: flex;
    padding-top: 1em;
}

.money .print
{
    padding: .5em;
    border-top: 1px solid var(--border-color);
    margin: 0.5em;
}

.money .print label
{
    display: flex;
    align-items: center;
}
.money .print label input
{
    margin-right: 0;
}

div.sw-widget.window div.tabs .moneys .list .money .print button
{
    background: #0c3946;
}

div.sw-widget.window div.tabs .gestion button
{
    margin-top : 1em;
}

div.sw-widget.window div.tabs .moneys .list .money .more .btns button
{
    margin : auto;
    background: linear-gradient(
    0deg
    , var(--bg), transparent);
    border-bottom: 1px solid var(--border-color);
    padding: 0em 0.6em;
}

.add-law textarea
{
    width: calc(100% - 2em);
    height: 200px;
}

.list .elmts textarea
{
    height: 24px;
    min-height: inherit;
    margin: auto auto auto 0.65em;
    width: calc(100% - 4em);
    padding: 0.5em;
    border-radius: 2px;
}

div.window .laws.list .elmts button.close
{
    position: absolute;
    margin-top: -7em;
    right: 0.5em;
}

.laws.list .elmts input
{
    margin-right: 2em;
}

.org-form
{
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 0.9em;
}

div.window .org-form button
{
    padding: 0.2em 0;
}

div.window .org-form .elmts input
{
    width: 50%;
    margin-left: 0;
}

div.window .org-form .elmts button.close
{
    padding: 0;
    margin: 0;
    margin-right: 0.9em;
}

.org-form .list
{
    margin-top : 0;
}

.sw div.window .org-form .list button
{
    margin: auto;
}

.org-form .list:first-child
{
    margin-top : 1em;
}

.moneys .list
{
    max-height: 400px;
    overflow-y: auto;
}

.moneys .list .money
{
    display: flex;
    flex-direction: column;
    background: #03222a;
}

.moneys .list .money header
{
    display: flex;
    align-items: center;
}

.moneys .list .money div.more
{
    display: flex;
    flex-direction: column;
    padding: 1em;
}

.moneys .list .money img
{
    width: 80px;
    padding: 1em;
    margin: 0;
    margin-left: 0;
}

.moneys .list .money div.name
{
    font-size: 1.5em;
    font-weight: bold;
    margin-left: 0;
    padding-left: 1em;
    border-left: 1px solid var(--border-color);
}

div.sw-widget.window div.tabs .moneys .list .money button
{
    margin: auto;
    margin-right: 0;
    border: none;
    background: none;
    padding: 0;
}

div.sw-widget.window.sector-pilots
{
    width : 700px;
}

div.window div.list-container header
{
    display: flex;
    align-items: center;
}

div.window div.list-container header input
{
    margin : auto;
    margin-left : 0;
    width : 100%;
}

div.window div.list-container header button
{
    margin : auto;
    margin-right: 0;
    margin-left: 1em;
}

div.list-container div.list .player
{
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    font-size: 0.8em;
    padding: 0.4em;
}

div.window div.list-container .player button,
div.list-container .player button
{
    margin : auto;
    margin-right: 0;
    margin-left : 1em;
}

div.list-container div.list .player:hover
{
    background: #167999;
}

div.list-container div.list .player.selected
{
    background: #074052;
}

div.list-container div.list .player *:last-child,
d.sw div.window iv.list-container div.list .player button:last-child
{
    margin-right: 0;
}

div.inventory .moneys
{
    overflow-y: auto;
    max-height: 300px;
}

div.inventory .moneys .money
{
    padding: 0.5em;
    background: #02232c;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    user-select: none;
}

div.inventory .moneys .money img
{
    width: 35px;
    padding-right: 0.5em;
    border-right: 1px solid var(--border-color);
    margin-right: 0.5em;
    padding:0;
    user-select: none;
}

div.resource-win img.org
{
    object-fit: cover;
    width: 88px;
    height: 88px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 0;
}

div.inventory .moneys .money div.quantity
{
    margin: auto;
    margin-right: 0.5em;
    font-weight: bold;
}

div.inventory .moneys .money div.name
{
    font-style: italic;
}

.sw div.sw-widget.window div.tabs .moneys div.list-container div.list .player button
{
    min-width:initial;
    margin : 0 1em;
}

div.list .player div.separator
{
    width: 1px;
    background: var(--border-color);
    height: 2em;
    margin: 0 0.8em;
    border-top: initial;
}

div.list .player img.profil
{
    margin: 0 1em;
    padding: 0;
    margin-left: 0;
    width: 32px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
}
div.list .player label.name
{
    margin: auto;
    margin-left: 0;
}
.moneys .list .money img
{
    padding: 0.3em;
}

.profil div.img-container
{
    width: 128px;
    border: 1px solid var(--border-color);
    float: left;
    margin-right: 2em;
}

.profil div.img-container *
{
    width: 100%;
    position: relative;
    margin : auto;
    padding: 0;
    display: block;
}

.profil .orgs
{
    margin-top : 3em;
}

.orgs .list
{
    max-height: 200px;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

.org
{
    display: flex;
    padding: 0.5em;
    background: #0b3a46;
    margin-top: 3px;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
}

.org:hover
{
    background: #146276;
}

.org img
{
    margin-left: 0;
    margin-right: 1em;
    width: 38px;
    border: 1px solid var(--border-color);
    object-fit: cover;
}

.org label 
{
    margin-left : 1em;
    margin-right : auto;
}

.org label.members
{
    margin-left : auto;
    margin-right : 0;
    font-style : italic;
    color: #74828e;
}

.sw .profil.window div.img-container button
{
    width: 34px;
    background: none;
    border: none;
    position: absolute;
    z-index: 2;
    left: 105px;
    margin-top: 4px;
}

.org-infos img
{
    width: 128px;
    margin-left: 0;
    margin-right: 1em;
    border: 1px var(--border-color) solid;
    float : left;
}

.org-infos h3
{
    margin-bottom : 0;
}

h4
{
    margin-bottom: 0.3em;
}

.org-infos div.members-list,
div.create-org div.members-list
{
    max-height:250px;
    overflow-x: none;
    overflow-y : auto;
    margin-bottom:2.5em;
}

.org-infos div.member,
div.create-org div.member,
div.create-org div.recruit 
{
    display: flex;
    padding: 0.5em;
    background: #0b3a46;
    margin-top: 3px;
    align-items: center;
}

.org-infos div.member img,
div.create-org div.member img,
div.create-org div.recruit img
{
    width: 48px;
    float : none;
    margin-left : 0;
    margin-right : 1em;
}

.org-infos div.member label,
div.create-org div.member label,
div.create-org div.recruit label
{
    display : block;
    margin-left: auto;
    margin-right : 0;
    font-weight: bold;
}

div.create-org div.member label,
div.create-org div.recruit label
{
    margin-right: 1em;
}

div.create-org div.member select,
div.create-org div.recruit select
{
    display : block;
    margin-right : 0;
    border: 1px solid var(--border-color);
    background: #09242d;
    color: var(--txt-color);
    padding: 0.5em 0.9em;
    border-radius: 2px;
    cursor: url(images/cursors/pointer.png) 8 8, pointer;
}
div.create-org div.recruit button
{
    margin: auto;
    margin-right: 0;
    margin-left: 0;
}

div.candidature .head
{
    display: flex;
    align-items: center;
}

div.candidature .head img
{
    border:1px solid var(--border-color);
    width:48px;
}

div.candidature .head label
{
    display: block;
    margin-left : 1em;
}

div.candidature footer
{
    display : flex;
}

div.window.create-org .tabs h2
{
    margin: auto;
    margin-bottom: .5em;
}

div.create-org div.recruits
{
    margin-top : 1.5em;
}

.org-infos p.description
{
    position: relative;
    line-height: 1.2em;
}


.org-infos div.join
{
    margin-top : 2em;
}

.org-infos div.join p
{
    line-height: 1.5em;
}

.send-org-candidature textarea
{
    width : calc(100% - 2.2em);
}

.profil div.img-container div.icon-container
{
    width: 32px;
}

.list .elmts
{
    padding: 0.5em;
    border: 1px solid var(--border-color);
    background: #0a232e;
    overflow-y: auto;
    max-height: 140px;
    position: relative;
    width: calc(100% - 2em);
    margin-bottom: 1em;
}

.add-role .img-btns
{
    display : flex;
}

.pictos-selector div.colors
{
    display: flex;
    margin-bottom: 1.5em;
}

.pictos-selector div.colors button
{
    padding: 1em;
    min-width: initial;
    border: 1px solid transparent;
    margin: auto;
}

.pictos-selector div.colors button.active
{
    border: 1px solid var(--border-color);
}

.pictos-selector div.colors button.blue
{
    background: #4cc7ff;
}

.pictos-selector div.colors button.green
{
    background: #49fc8e;
}

.pictos-selector div.colors button.purple
{
    background: #ff88f1;
}

.pictos-selector div.colors button.red
{
    background: #ff421d;
}

.pictos-selector div.colors button.yellow
{
    background: #feff1d;
}

.pictos-list
{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    overflow-y : auto;
    position: relative;
}

.pictos-list div.img-container img
{
    width : 128px;
}

.pictos-list div.img-container img.add
{
    opacity : 0.25;
}

.add-role .img-btns button
{
    padding: 0.5em;
    font-size: 0.9em;
    margin-top: 0.3em;
    margin-bottom: 0.4em;
    width: 45%;
}

.pictos-selector .img-container
{
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
}

.pictos-selector .img-container:hover
{
    background: #2b8095
}

.add-role .img-container p
{
    margin-bottom : 0;
}

.add-role .role,
.elmts .role
{
    display : flex;
    align-items: center;
}

.elmts .role,
.elmts .law
{
    margin-top: 0.5em;
    padding-top: 0.5em;
    border-top: 1px solid var(--border-color);
}

.elmts .role:first-child,
.elmts .law:first-child
{
    padding-top: 0;
    margin-top: initial;
    border : none;
}

.add-role .role .img-container,
.elmts .role .img-container
{
    margin-right: 1em;
    border: solid 1px #89ffff;
    border-radius: 3px;
}

.add-role .role .img-container img,
.elmts .role .img-container img
{
    width : 50px;
}

.add-role .role .img-container img.add,
.elmts .role .img-container img.add
{
    opacity: 0.5;
}

.add-role button.valid
{
    width : 100%
}

.connect div.container
{
    display: flex;
    align-items: baseline;
}

.connect div.container div.connect,
.connect div.container div.create
{
    width : 100%;
}

.connect button.swap
{
    text-transform: initial;
    border: none;
    font-size: 0.7em;
    padding: 0;
    background: initial;
    border-top: 1px solid var(--border-color);
    padding-top: 1em;
}

h2
{
    padding : 1em 0;
    border-bottom : solid 1px var(--border-color);
    margin-top : 0;
}

p
{
    text-align : left;
}

input,
.sw input
{
    font-size: 1em;
    border: none;
    font-family: 'Zekton';
    background: #00000038;
    color: var(--error);
    padding: 0.5em;
    margin: 0.4em auto;
    border-bottom: 1px solid var(--error);
    transition: border-color 0.3s, color 0.3s;
    display : block;
    width: calc(90% - 1em);
}

.sw .bug-report input
{
    width: calc(100% - 1em);
}

.bug-report textarea
{
    margin-top : 0.7em;
}

.sw div.window.bug-report button.send
{
    margin-bottom: 0;
    margin-right: 0;
}

input:focus,
input.ok
{
    border-color : var(--border-color);
    color: var(--txt-color);
}

button,
.sw button,
.sw div.window button
{
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    font-size: 1em;
    background: linear-gradient(
    0deg
    , var(--bg), transparent);
    border : none;
    border-bottom: 1px solid var(--border-color);
    color: var(--txt-color);
    font-family: 'Zekton';
    text-transform: uppercase;
    padding: 1em;
    max-width: 95%;
    margin: 1em auto;
    transition: text-shadow 0.3s;
    display : block;
    border-radius : 0;
    font-weight: initial;
}

button:disabled,
button.menuButtons:disabled,
.sw div.menus button.menuButtons:disabled,
.sw button:disabled, 
.sw div.window button:disabled
{
    border-bottom-color: grey;
    color: grey;
    cursor: url("images/cursors/not-allowed.png") 8 8, not-allowed;
    background: linear-gradient( 
    0deg
    , #3e3e3e85, transparent)
}

button:disabled:hover
{
    text-shadow : none;
}

div.sw-widget.window.trading
{
    min-width: 900px;
    min-height: 400px;
}

div.window.trading h3
{
    margin : auto;
    font-size : 1em;
}

.trading .lists
{
    display : flex;
    align-content : center;
    flex-grow : 1;
}

.trading .player-list
{
    display : flex;
    flex-direction: column;
    margin : 0 auto;
    width : 48%;
}

.trading .player-list.valid
{
    border: solid 1px #6fff9c;
    color: #00ffae;
}

.trading div.resources-list-container
{
    flex-grow : 1;
}

.trading .player-list:first-child
{
    border-right: 1px solid var(--border-color);
}

.trading .player-list:last-child h3
{
    text-align: right;
}

.trading footer
{
    display : flex;
}

.trading .player-list footer
{
    padding : 0.7em;
}

.trading footer div.label-container
{
    text-align: right;
    width: 100%;
}

.trading footer button
{
    margin : 0.3em auto;
}

p.note
{
    font-size : 0.8em;
    font-style: italic;
    margin : auto;
    padding : 0.4em;
    text-align: right;
}

button.forget-mdp
{
    font-size: 0.8em;
    text-transform: inherit;
    border-bottom: none;
}

button:focus,
button:hover
{
    text-shadow: 0 0 11px var(--txt-color);
}

button:active
{

}

div.sw-loader
{
    width : 85%;
    display : block;
    padding : 0;
    margin : 1em auto;
    background : linear-gradient(90deg, transparent, #9bedff12);
    background-repeat: no-repeat;
    animation : swWidget-load-container 3s infinite cubic-bezier(0.5, 0, 0.5, 1);

}

div.sw-loader div.box
{
    width : 5px;
    height : 5px;
    background : var(--border-color);
    box-shadow: 
    0 0 3px var(--border-color),
    0 0 6px var(--border-color),
    0 0 12px var(--border-color),
    0 0 24px var(--border-color),
    0 0 48px var(--border-color);

    animation : swWidget-load 3s infinite cubic-bezier(0.5, 0, 0.5, 1);
}

div.map
{
    position : fixed;
    padding : 0;
    margin : 0;
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    z-index : 1;
}

div.sector
{
    position : absolute;
    width : 1px;
    height : 1px;
    background: #46464680;
    z-index : 1;
    box-shadow : none;
    transition : background 0.3s, box-shadow 0.3s;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    animation : sector-show 1s;
}

div.sector.known
{
    background : yellow;
    box-shadow: 0 0 0.5px #ffbc00;
}

div.sector:hover
{
    background: #6ebce2;
    box-shadow: 
    0 0 0.3px #6ebce2,
    0 0 0.6px #6ebce2,
    0 0 0.8px #6ebce2;
}

div.sector.ship,
div.sector.ship:hover
{
    background: #adffc2;
    box-shadow: 0 0 0.3px #91f9ac, 0 0 0.6px #6ee287, 0 0 0.8px #6dfbd4;
}

canvas
{
    position: absolute;
}

div.infos
{
    position: fixed;
    text-align: right;
    font-size: 0.8em;
    line-height: 1.6em;
    width: auto;
    margin: 1em;
}

div.main-menu button
{
    border: none;
    background: none;
    padding: 0;
    margin: auto 0.5em;
    width: auto;
}

div.main-menu button:first-child
{
    margin-left : 0em;
}

div.main-menu button:last-child
{
    margin-right : 0em;
}

div.main-menu
{
    padding: 0.3em;
    width : auto;
}

.sw div.menus
{
    background: var(--bg);
    border: solid 1px var(--border-color);
}

.sw div.menus button.menuButtons
{
    color: var(--txt-color);
    font-size: 0.8em;
    padding: 0.3em 0.8em;
    margin: auto;
    max-width: 100%;
}

.sw div.menus button.menuButtons:hover
{
    background-color: transparent;
}

img.icon,
.sw div.window img.icon,
div.infos.cellest img.icon
{
    width : 32px;
    margin : auto;
}

div.infos.cellest button.resources
{
    margin-right: 1em;
    margin-left: auto;
    background: linear-gradient( 0deg , #043340, #0c495c96);
    min-width: 150px;
}

button.extract
{
    margin-right: 0;
    min-width: 100px;
}

button div.sw-loader
{
    margin: 0.4em auto;
}

.sw div.window button.modify-name
{
    margin: 0;
    background: none;
    border: none;
    width: 0;
    position: absolute;
    padding: 0;
    margin-top: 0em;
    min-width: initial;
    right: 0;
    margin-right: 3em;
}

div.time-infos
{
    position: fixed;
    top: 50%;
    z-index: 10000;
    background: black;
    padding: 0.5em;
    opacity: 0.9;
    font-size: 0.65em;
    line-height: 1.4em;
    text-align: left;
    max-height: 400px;
    overflow: auto;
}

.extract-tool div.resource,
.transform-to-fuel .tool div.resource,
.transform-to-fuel .tool div.fuel
{
    width: inherit;
}

.transform-to-fuel .tool div.fuel
{
    margin: auto;
    margin-right: 0;
    margin-left: 1em;
}

.transform-to-fuel .tool div.progressBar-parent,
.extract-tool div.progressBar-parent
{
    width : 350px;
}

div.resource.draggable,
div.draggable
{
    position : absolute;
    margin : 0;
    width : auto;
    z-index : 1000;
}

div.sector-inventory.draggable,
div.money.draggable,
div.sector-ship.draggable
{
    width : 128px;
}

div.money.draggable img
{
    width : 64px;
}

div.resource.draggable:hover,
div.draggable:hover
{
    background : initial;
}

div.sector-inventory div.coords
{
    font-size: 0.8em;
}

img
{
    -webkit-user-drag: none;
}

.extract-tool div.resource img,
.transform-to-fuel .tool div.resource img,
.transform-to-fuel .tool div.fuel img
{
    width : 64px;
}

.extract-tool div.recource .label-container,
.transform-to-fuel .tool div.resource .label-container,
.transform-to-fuel .tool div.fuel .label-container
{
    font-size: 1em;
}

div.sw-widget.window.extract button
{
    margin-right: 0;
    margin-bottom: 0;
    min-width : 50px;
}

div.sw-widget.window.extract
{
    min-width : 540px;
}

div.slider
{
    cursor: url(images/cursors/pointer.png) 8 8, pointer;
    margin: 0;
}

img.icon.hover,
div.infos.cellest img.icon.hover
{
    position : absolute;
    transition : opacity 0.15s;
    opacity : 0;
    z-index : 10;
}

.extract-tool,
.transform-to-fuel .tool
{
    display: flex;
    align-items: center;
}

div.infos.cellest,
div.infos.pilot
{
    transition : opacity 0.2s;
    animation : cellest-show 0.2s;
    text-align : left;
    margin : 0;
    background: linear-gradient( 
    17deg
    ,#005971db , #000000ad);
    font-size : 0.8em;
    display : block;
}

div.infos.pilot
{
    animation: none;
    padding: 0.2em 0.7em;
    display: flex;
    flex-direction: row;
    padding-left: 0.2em;
    align-items: center;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
}

div.infos.pilot img
{
    width: 32px;
    border: solid 1px var(--border-color);
    margin-left : 0;
    margin-right: 1em;
}

div.infos.cellest.hide
{
    display : none;
    pointer-events : none;
}

div.window button.close,
.sw div.window button.close
{
    margin : 0;
    padding : 1em;
    margin-left : auto;
    border : none;
    background : none;
    background-color: none;
    width : initial;
    min-width: initial;
    position : relative;
}

div.window button.close:before,
div.window button.close:after,
.sw div.window button.close:before,
.sw div.window button.close:after
{
    position: absolute;
    content: ' ';
    height: 24px;
    top: 12px;
    width: 2px;
    background-color : var(--border-color);
}

.inventory footer
{
    display : flex;
}

div.window button.close:before
{
    transform : rotate(45deg);
}

div.window button.close:after
{
    transform : rotate(-45deg);
}

div.sw-widget.window.bug-report
{
    min-width: 500px;
}

div.sw-widget.window
{
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    animation : cellest-show 0.2s;
    padding-top : 0;
    background: linear-gradient( 
    17deg ,#003340 , #000000e0);
    width : auto;
    min-width : 380px;
    text-align : left;
    font-size : 0.9em;
    max-width: 80%;
}

div.sw-widget.window.step-tuto
{
    line-height: 1.3em;
    font-size: 0.7em;
    max-width: 350px;
}

div.score
{
    background: #012b3691;
    display: flex;
    align-items: center;
    padding: 0 0.5em;
    border-top: 1px solid var(--border-color);
    height : 2em;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
}

div.score.me
{
    background: #144b6c;
}

div.score:last-child
{
    border-bottom : 1px solid var(--border-color);
}

div.score div
{
    width : 20%;
    margin: auto;
    position : relative;
}

div.score button,
.sw div.window div.score button,
div.window div.list-container .player button
{
    background: transparent;
    border: none;
    padding: 0;
    width : auto;
}

.score-list
{
    max-height : 500px;
    overflow : auto;
}

div.score .separator,
.sw div.window div.score .separator
{
    width: 1px;
    background: var(--border-color);
    height: 2em;
    margin: 0 0.8em;
    border-top : initial;
}

div.score div.name
{
    margin-left : 0;
    margin-right : auto;
    width : 50%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

div.score div.scores
{
    font-weight : bold;
    width : 30%;
}

div.score div.id
{
    font-style: italic;
    color: #597878;
    width : 10em;
}

div.window.focus,
.sw div.window.focus
{
    box-shadow: initial;
    z-index : 100;
}

div.window.scores
{
    min-width : 650px;
}

div.tabs
{
    background: #17374063;
    padding: 0em;
}

.sw div.tabs div.bts
{
    display: flex;
    align-items: center;
}

div.tabs-content
{
    padding : 1em;
}

.sw div.tabs div.bts button
{
    margin : 0;
    border : none;
    width : 100%;
}

.sw div.tabs div.bts button.active
{
    background: linear-gradient( 
    0deg , #005971, transparent);
}

div.window h2
{
    user-select: none;
    cursor: url(images/cursors/movable.png) 8 8, grabbing;
    font-size: 1.2em;
    text-align: left;
    padding: 0;
    margin-bottom: 0.5em;
    padding-left: .5em;
    padding-bottom: 0.3em;
    margin-top: -1.3em;
    text-shadow: 0 0 11px #9bedffb0;
    max-width: calc(100% - 2.4em);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

div.window.step-tuto h2
{
    margin-top: 0.7em;
}

div.objectives div.mission
{
    background: #113a4461;
    padding: 1em;
    max-height: 500px;
    overflow-y: auto;
}

div.objectives div.task,
div.mission-doned div.task
{
    padding : 1em;
}

div.infos h3,
div.objectives h3,
div.mission-doned h3
{
    font-size: 1em;
    border-bottom: 1px solid;
    padding-bottom: 0.4em;
    margin: auto;
    width: 100%;
    margin-top: 0.5em;
}

div.objectives h3,
div.mission-doned h3
{
    padding-left : 1em;
    width : initial;
    margin : auto;
}

div.objectives h4,
div.mission-doned h4
{
    padding-left : 2em;
    margin : auto;
}

div.objectives div.task.doned,
div.mission-doned div.task.doned
{
    background: #01763270;
}

div.task div.statut
{
    line-height: 0.5em;
}

div.task.doned div.statut
{
    color: #00ffae;
}

div.objectives p.description,
div.mission-doned p.description
{
    width : calc(75% - 3em);
    margin : auto;
    padding-left : 3em;
    font-size : 0.8em;
    font-style : italic;
    line-height: 1.4em;
    color: #73a1b3;
}

div.objectives div.score-value,
div.mission-doned div.score-value
{
    text-align: right;
    font-size: 0.9em;
    margin-top: -1.5em;
}

div.sw-widget.window.mission-doned
{
    min-width : 70%;
}

div.mission-doned footer
{
    display : flex;
}

.sw div.window button,
.sw div.infos button
{
    padding: 0.6em;
    font-size: 1em;
    text-transform: none;
    min-width: 12%;
}

div.infos.cellest h3 b[contenteditable="true"]
{
    padding-left : 1em;
    padding-right : 1em;
    padding-bottom : 0.5em;
    border-bottom : 1px solid;
    animation : cellest-show 0.2s;
}

div.ship.infos
{
    text-align : left;
    max-width:305px;
}

div.ship.infos video.ship-turn
{
    width : 100%;
}

div.sector.target
{
    background: #75b6c5;
}

.no-infos
{
    color: grey;
    font-style: italic;
}

div.ship.infos div.model label.value
{
    text-transform : uppercase;
}

div.Sector.infos
{
    right: 0;
    top: 0;
}

div.trip.infos
{
    bottom: 0;
    right : 0;
}

div.infos h2
{
    font-size: 1em;
    text-align: left;
    padding: 0.5em;
    text-shadow: 0 0 10px var(--border-color);
}

.inventory div.search
{
    display: flex;
    align-items: center;
}

.inventory div.search input
{
    width: 50%;
    margin-right: 0;
}

select
{
    background: #133a43;
    color: var(--txt-color);
    padding: 0.4em 0.9em;
    margin-left: 1em;
    border: 1px solid var(--border-color);
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
}

div.infos
{
    z-index : 2;
}

div.line
{
    height : 2px;
    background : var(--border-color);
    top : 0;
    left : 0;
    margin : 0;
    padding : 0;
    position : fixed;
    box-shadow: 0 0 2px var(--border-color), 
    0 0 4px var(--border-color),
    0 0 8px var(--border-color);
    z-index : 2;
    pointer-events: none;
}

div.infos.cellest img 
{
    width: 320px;
    margin: 1em;
    border-radius: 0.1em;
    box-shadow: 0 0 20px 0px #00000021;
}

div.sw-widget.main-menu
{
    z-index: 2;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 1em;
    display: flex;
    flex-direction: row;
}

div.sw-widget.main-menu button div.notifs-nb
{
    background: #f70000;
    line-height: 0;
    position: absolute;
    margin-left: 23px;
    padding: 0.7em 0.5em;
    margin-top: -0.2em;
    font-size: .8em;
    font-weight: bold;
    border-radius: 50px;
    animation: cellest-show 0.2s;
}

div.separator
{
    width : 100%;
    padding : 0;
    margin : 0.5em auto;
    height : 1px;
    background : var(--border-color);
}

div.separator.vertical
{
    width: 1px;
    height: 1.5em;
    margin: 0.3em auto;
}

.timed-notif .message div.separator.vertical,
.timed-notif .sondage div.separator
{
    width: 5px;
    margin: 0;
    height: initial;
    display: block;
    box-shadow: 0 0 3px #c5e6ff, 0 0 6px #79c5fb, 0 0 20px #51b6ff, 0 0 60px #129cff;
    animation: 1s infinite alternate loading;
}

.timed-notif .sondage div.separator
{
    width: 100%;
    height: 5px;
}

div.sw-widget.onlines
{
    z-index: 2;
    position: fixed;
    font-size: 0.8em;
    padding: 1.4em;
    bottom: 0;
    left: 257px;
    text-align: left;
    line-height: 0em;
    margin: 1.25em;
    width: inherit;
}

div.sw-widget.date
{
    z-index: 2;
    position: fixed;
    font-size: 0.8em;
    padding: 1.4em;
    bottom: 3.5em;
    left: 0;
    text-align: left;
    line-height: 0em;
    margin: 1.25em;
    width: inherit;
}

button.find-ship
{
    z-index: 2;
    position: fixed;
    bottom: 3.5em;
    left: 200px;
    text-align: left;
    line-height: 0em;
    margin: 0.3em;
    width: inherit;
    height: 45px;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 0;
}

button.find-ship img
{
    height: calc(100% - 0.5em);
    margin: 0 0.25em;
}

video.players-update
{
    position : fixed;
    z-index : 1;
    mix-blend-mode: lighten;
    top : 0;
    left : 0;
    margin : 0;
    pointer-events: none;
}

div.resources-list
{
    overflow: auto;
    display: grid;
    background: #03121861;
    padding: 1em;
    grid-template-columns : 25% 25% 25% 25%;
}

div.resource,
div.resources-list div.money
{
    font-size: 0.8em;
    width: calc(100% - 2em);
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    user-select: none;
    -webkit-user-drag: none;
    padding : 1em;
    transition: background 0.1s;
    line-height:1.2em;
    text-align: center;
}

div.resources-list div.money img
{
    width: 85px;
}

div.resource .name
{
    text-align: center;
}

div.window.inventory
{
    width : 540px;
}

div.resource .label-container
{
    margin: auto;
    text-align: center;
    font-size: 0.8em;
}

div.resource:hover,
div.resources-list div.money:hover
{
    background: #5f99a9;
}

div.resource-win
{
    font-size: 0.85em;
    line-height: 1.7em;
}

div.resource-win .infos
{
    font-style: italic;
    color: grey;
}

div.resource-win img
{
    max-width: 256px;
    float: left;
    margin-right:1em;
}


div.resource img
{
    width: 95%;
    max-width: 128px;
    margin: auto;
}

div.resource .quantity
{
    text-align: center;
}

div.help .content
{
    display: flex;
}

div.help .content .tutos
{
    width: 25%;
}

div.help .content .tutos .list,
div.help .content .tutos .ia
{
    height: 50%;
}

div.help .content .tutos .list
{
    overflow-y: auto;
}

div.help .content .tutos .list .tuto
{
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    border-bottom: 1px solid var(--border-color);
    padding: 0.1em 0.5em;
}

div.help .content .tutos .list .tuto:last-child
{
    border-bottom: none;
}

div.help .content .tutos .list .tuto:hover,
div.help .content .tutos .list .tuto.active
{
    background: var(--sw-txt-shadow);
    color: white;
}

div.help .content .tuto-video
{
    width: 75%;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

div.help .content .tuto-video video
{
    background: black;
    margin: 1em;
    border: 1px solid var(--border-color);
    height: 100%;
}

div.help .content .tuto-video footer
{
    margin-top: auto;
    margin-bottom: 0;
}

div.help div.ia-container
{
    width: calc(100% - 1em);
    height: 50%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    padding: 0;
}

div.help div.ia-container video.beauty
{
    width:100%;
    display: block;
}
div.help div.ia-container video.add
{
    position : absolute;
    display: block;
    blend-mode: lighten;
    opacity: 0;
}

div.inventory div.sectors
{
    display: grid;
    grid-template-columns: auto auto auto;
    max-height: 400px;
    overflow-y: auto;
}

div.sector-ship
{
    width: 256px;
    background: #06131757;
    position: relative;
}

div.resources-list div.sector-ship
{
    width: auto;
    display: flex;
    flex-direction: column;
}

div.resources-list div.sector-ship div
{
    position : relative;
}

div.sector-ship div
{
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.5em 1.1em;
    position: absolute;
}

div.sector-ship img
{
    width : 100%;
}

div.sector-inventory
{
    width: auto;
    margin: 0.5em;
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    position : relative;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    transition : background 0.3s;
}

div.sector-inventory:hover
{
    background: #5f99a9;
}

div.sector-inventory div.name
{
    position: absolute;
    margin: 0.4em 1em;
    left: 0;
    top: 0;
    font-weight: bold;
}

div.sector-inventory img
{
    width:100%;
}

div.sector-inventory div.coords
{
    margin : auto;
}

div.sw-widget.window.msgs
{
    min-width : 680px;
}

.messages
{
    display: flex;
    align-content: start;
    flex-wrap: wrap;
}

.messages div.msgs
{
    width: 33%;
    border-right: 1px solid var(--border-color);
    margin-right: 1em;
    max-height: 580px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.messages div.msgs div.msg-label
{
    font-size: 0.8em;
    border-bottom: 1px solid var(--border-color);
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
    transition: background 0.2s;
    padding: 0.4em 0;
    line-height: 1.1em;
}

.messages div.msgs div.msg-label.non-readed
{
    background: #0d57b3a1;
}

.messages div.msgs div.msg-label:hover
{
    background: #9bedff33;
}

.messages div.msgs div.msg-label.active
{
    background: #77def56e;
}

.messages div.msgs div.msg-label img
{
    float: left;
    margin: 2px;
    margin-right: 0.5em;
    margin-bottom: 0.2em;
    width: 38px;
    height: 38px;
    object-fit: cover;
    border: solid 1px var(--border-color);
}

.messages div.msg img
{
    display: block;
    float: left;
    width: 150px;
    border: 1px solid var(--border-color);
    margin: 1em;
    margin-left: 0;
    margin-top: 0;
}

.messages div.msg h3
{
    padding-bottom: 0.5em;
    margin-top: 0;
    border-bottom: 1px solid var(--border-color);
}

.messages div.msg div.msg-html
{
    line-height: 1.4em;
    font-size: 0.9em;
}

.messages div.msg button
{
    margin: auto;
    clear: left;
    margin-right: 0;
}

.messages div.msg footer
{
    font-size: 0.8em;
    text-align: right;
    font-style: italic;
    color: #c9e8ff99;
}

.messages div.msgs div.msg-label .from
{
    text-align: right;
    display: block;
    margin-right: 1em;
    line-height: 1.9em;
    font-size: 0.8em;
    font-style: italic;
}

.messages div.msg
{
    max-height: 580px;
    overflow-y: auto;
    width: calc(66% - 1em);
}

.sw button.tchat-button
{
    display : none;
}

.sw div.tchat
{
    margin-bottom : 11em;
}

.sw .sw-widget.votes
{
    width : calc(70% - 2em);
}

.sw .sw-widget.votes div.header div.power
{
    display: flex;
    align-items: center;
    border: solid 1px var(--border-color);
    padding: 1em;
    background: #041d25;
}

.sw .sw-widget.votes div.header p
{
    line-height: 1.4em;
    font-size: 0.9em;
}

.sw .sw-widget.votes div.header  div.power button.infos,
.sw .sw-widget.vote-power button.infos
{
    background: #1a3f5f;
    border: none;
    margin: auto;
    margin-right: 0;
    padding: 0.65em 1.2em;
    font-weight: bold;
    border-radius: 2em;
    min-width: initial;
    border: 1px solid var(--border-color);
}

.sw .sw-widget.vote-power button.infos
{
    padding: 0.35em 0.83em;
}

.sw .sw-widget.votes div.votes
{
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 1em;
    border-top: 1px solid var(--border-color);
    padding: 0.5em;
}
.sw .sw-widget.votes div.task
{
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    padding: 1em;
    margin: 0.5em auto;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: #103943;
    position: relative;
}

.sw .sw-widget.votes div.task div.id,
.sw .sw-widget.votes div.task div.date
{
    font-size: 0.6em;
    font-style: italic;
    color: #637b8d;
    padding: 0;
    margin: 0;
    line-height: 1em;
}

.sw .sw-widget.votes div.task div.id
{
    padding-bottom: 1em;
    text-align: left;
    border-bottom: 1px solid;
}

.sw .sw-widget.votes div.task h3
{
    margin: auto;
    width: calc(100% - 2em);
    padding: 0.5em 1em;
    padding-bottom: 0.2em;
}

.sw .sw-widget.votes div.task div.progress
{
    padding: 1em;
    background: #01212b;
    margin-top: 0.5em;
}

.sw .sw-widget.votes div.task div.date
{
    text-align: right;
}

.sw .sw-widget.votes div.task div.want
{
    display: flex;
    align-items: center;
    margin-top: 0.5em;
    border-top: 1px solid var(--border-color);
}

.sw .sw-widget.votes div.task div.want div.hype
{
    padding-left : 1px solid var(--border-color);
}

.sw .sw-widget.votes div.task div.want button.vote
{
    margin: auto;
    margin-right: 1em;
    border: none;
    border-right: 1px solid var(--border-color);
    padding-right: 1.2em;
}

.sw .sw-widget.votes div.task div.want div.hype button
{
    background: transparent;
    border-radius: 50em;
    border-width: 2px;
    padding: 0;
    width: 55px;
    height: 55px;
    border: none;
    margin: 0;
}

.hype button img
{
    width: 42px;
    height: 42px;
    object-fit: cover;
}

div.sw-widget.window.votes .hype label.number
{
    font-weight: bold;
    position: absolute;
    margin-left: 40px;
}

.sw .sw-widget.votes div.task div.description img
{
    width: 25%;
    margin-left: 0;
    padding-right: 0.5em;
    margin-right: 0.5em;
}

.sw .sw-widget.votes div.task div.description
{
    display: flex;
    align-items: center;
}

.sw .sw-widget.votes div.task div.description p
{
    font-size: 0.9em;
    line-height: 1.3em;
    margin-left: 0;
    padding-left: 0.5em;
    border-left: 1px solid var(--border-color);
}

div.sw-widget.window.vote-power div.power
{
    padding: 0.5em 1em;
    border: 1px solid var(--border-color);
    background: #022f3b;
    border-radius: 2px;
}

div.sw-widget.window.vote-power h4
{
    margin: auto;
    padding: 0;
}

div.sw-widget.window.vote-power div.status
{
    border: 1px solid var(--border-color);
    border-radius: 2px;
    padding: 0.8em;
    background: #022f3b69;
    display: flex;
    flex-direction: column;
    font-size: 0.8em;
    line-height: 1.5em;
    margin-top: 5px;
}

div.sw-widget.window.vote-power div.status div.header
{
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    font-weight: bold;
    font-style: italic;
    padding-bottom: 0.3em;
    margin-bottom: 0.5em;
}

div.sw-widget.window.vote-power div.status div.booster
{
    margin : auto;
    margin-right: 0;
}

div.sw-widget.window.vote-power div.status div.header label
{
    margin-left: 1em;
}

div.sw-widget.window.vote-power p
{
    line-height: 1.4em;
    font-size: 0.8em;
}

div.sw-widget.window.vote-power .rule
{
    font-style: italic;
    color: #adaaaa;
    text-align: right;
    font-size: 0.8em;
}

div.sw-widget.window.vote-power .power-score,
div.sw-widget.window.vote-power .power-status
{
    padding: 0.5em 1em;
    border: 1px solid var(--border-color);
    background: #00151a;
}

div.sw-widget.window.vote-power .power-status
{
    margin-top: 1em;
}

div.sw-widget.window.vote-power .power-status .ls
{
    max-height: 150px;
    overflow-y: auto;
}

div.sw-widget.window.vote-power div.result
{
    margin-top: 1em;
    border: 1px solid var(--border-color);
    padding: 0.5em 1em;
    padding-bottom: 1em;
    background: #041a21;
    border-radius: 2px;
}

div.sw-widget.window.vote-power div.result .result
{
    text-align: right;
    margin: auto;
    margin-right: 0;
    font-weight: bold;
    border: 1px solid var(--border-color);
    width: fit-content;
    padding: 0.1em 1em;
    border-radius: 2px;
    background: #004355;
}

div.sw-widget.window.vote-power div.calcul
{
    max-height: 300px;
    overflow-y: auto;
    padding: 1em;
}

div.sw-widget.timed-notif div.head
{
    display: flex;
    background: #01252f;
    padding: 0.7em;
    font-size: 0.7em;
    font-style: italic;
    line-height: 1em;
}

div.sw-widget.timed-notif div.head *:last-child
{
    margin-right: 0;
    margin-left: auto;
    font-weight: bold;
}

div.sw-widget.timed-notif div.body
{
    padding: 0.5em;
}

div.sw-widget.timed-notif div.body div.title
{
    font-weight: bold;
}

div.sw-widget.timed-notif div.body div.message
{
    display: flex;
    padding: 0.5em;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--bg);
}

div.sw-widget.timed-notif div.body div.message img
{
    max-width: 256px;
    margin-right: 1em;
    object-fit: cover;
}

div.sw-widget.timed-notif div.body div.message .html
{
    line-height: 1.6em;
    margin: auto;
    margin-left: 1em;
}

div.sw-widget.timed-notif div.body div.sondage
{
    margin-top: 1em;
    border: 1px solid var(--border-color);
    border-radius: 2px;
    background: var(--bg);
    padding: 1em;
}

div.sw-widget.timed-notif div.body div.sondage .body button
{
    width: 100%;
    background: var(--bg);
}

div.sw-widget.timed-notif div.body div.sondage .body button:last-child
{
    margin-bottom: 0;
}

div.sw-widget .lecteur div.progress-bar.current
{
    background-color: var(--border-color);
}
div.sw-widget .lecteur 
{
    width: initial;
}

.sw div.window div.video button.play
{
    padding: 5px;
    border-radius: 100px;
    border: 1px solid var(--border-color);
}

div.sw-widget.window.video-player
{
    max-width: 60%;
}

.messages div.msg button.back
{
    margin-right: auto;
}

.player-label
{
    display: flex;
    font-size: 0.7em;
    background: #002e3b;
    border-radius: 2px;
    border: 1px solid var(--border-color);
    padding: 0.3em;
    width: fit-content;
    position: fixed;
    align-items: center;
    cursor: url("images/cursors/pointer.png") 8 8, pointer;
}

.player-label.haloween
{
    color: #ff0000;
    border-color: #df3812;
    background: #3d0707;
}

.player-label.noel
{
    color: #ffffff;
    border-color: #12df76;
    background: #3cacc996;
    border-radius: 14px;
    padding: 5px 8px;
}

.player-label img.profil
{
    width: 32px;
    height: 32px;
    object-fit: cover;
    margin-right: 6px;
}

.player-label .name
{
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-label .badges
{
    display: flex;
}

.profil .status
{

}

.profil .one-status
{
    display: flex;
    align-items: center;
    background: #001f27;
    padding: 0.5em;
    border-radius: 2px;
    margin-bottom: 2px;
}

.profil .one-status img
{
    width: 100px;
    margin-right: 0.5em;
    padding-right: 0.5em;
    border-right: 1px solid var(--border-color);
}

.sw div.window.profil .one-status button
{
    width: fit-content;
    margin: auto;
    margin-right: 0;
    border-radius: 200px;
    border: 1px solid var(--border-color);
    line-height: 0;
    padding: 0;
    padding: 1.2em 1em;
    min-width: initial;
}

.player-label .badges img
{
    margin-left: -14px;
    width: 32px;
}

.player-label .badges img:first-child
{
    margin-left: 0;
}

.player-label div.score,
.player-label div.score:last-child
{
    border: none;
    border-left: 1px solid var(--border-color);
    margin-left: 0.5em;
    padding-left: 0.5em;
    font-weight: bold;
    background: initial;
}

.player-label.haloween div.score
{
    border-color: #df3812;
}

.player-label.noel div.score
{
    border-color: #12df76;
}

div.help
{
    font-size: 0.7em;
    line-height: 1.2em;
    background: #002e3b;
    padding: 0 1em;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    max-width: 350px;
}

div.help p
{
    max-height: 150px;
    overflow-y: auto;
    font-style: italic;
}

.global-loading
{
    position: fixed;
    z-index: 1000;
    bottom: 0;
    right: 0;
    padding: 0.3em 0.7em;
    font-size: 0.8em;
    margin-bottom: 141px;
    margin-right: 1em;
    padding-right: 0.2em ;

    text-shadow: 0 0 3px #c5e6ff, 0 0 6px #79c5fb, 0 0 20px #51b6ff;
    animation: 1s infinite alternate text-loading;
}

.power div.label-container *:last-child, div.sw-widget.window .power div.label-container label:last-child
{
    margin-right: 0.5em;
}

/* tablet */
@media (max-width : 840px)
{
    button,
    a,
    :active
    {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    div.sw-widget
    {
        width : calc(75% - 2em);
    }

    div.sw-widget.main-menu
    {
        width: calc(100% - 12px);
        padding: 6px;
        margin: 0;
        border: none;
        border-top: solid 1px var(--border-color);
    }

    div.main-menu button
    {
        margin: auto;
    }

    div.main-menu button:first-child,
    div.main-menu button:last-child
    {
        margin-left: auto;
        margin-right: auto;
    }
}

/* phone */
@media (max-width : 480px)
{
    ::-webkit-scrollbar {
        width: 3px;
        height: 6px;
    }

    .global-loading
    {
        padding: 0.3em 0.7em;
        font-size: 0.8em;
        margin-bottom: 44px;
    }

    div.sw-widget
    {
        width: calc(95% - 2em);
        margin: auto;
        margin-left: calc(0.5em - 4px);
        margin-top: calc(0.5em - 2px);
    }

    div.sw-widget.window
    {
        border: none;
        width: calc(100%);
        min-width: initial;
        max-width: initial;
        font-size: 0.75em;
        max-height: 92vh;
        padding: 0;
    }

    div.sw-widget main
    {
        max-height: 82.9vh;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 1em;
        padding-bottom: 1em;
    }

    div.window h2
    {
        margin-left : 1em;
    }

    div.window button.close, .sw div.window button.close
    {
        padding-right: 1.7em;
    }

    .profil div-img-container
    {
        width: calc(100% - 1em);
        margin: auto;
        float: initial;
        position: relative;
    }

    .sw .profil.window div.img-container button
    {
        right: 0;
        left: auto;
        margin: auto;
        margin-right: 13px;
    }

    button, .sw button, .sw div.window button
    {
        width: calc(100% - 2em);
        max-width: initial;
    }

    .sw div.window button, .sw div.infos button
    {
        width: calc(100% - 1.2em);
    }

    div.infos.cellest img
    {
        width: calc(100% - 2em);
    }

    div.sw-widget.alert.error, div.label-container.error
    {
        width: calc(100% - 2em);
        margin-left: 0.5em;
        padding: 0.5em;
        font-size: 0.9em;
    }

    div.sw-widget.alert.error, div.label-container.error p
    {
        line-height: 1.5em;
        margin-top: 0.2em;
    }

    div.window h2
    {
        max-width: calc(100% - 4.6em);
    }

    .resources-list-container
    {
        min-width : initial;
    }

    div.resources-list
    {
        grid-template-columns: 50% 50%;
        max-height: 31vh;
    }

    .extract-tool, .transform-to-fuel .tool
    {
        flex-direction: column;
    }

    div.sw-widget.window.extract
    {
        min-width: initial;
    }

    .transform-to-fuel .tool div.progressBar-parent, .extract-tool div.progressBar-parent
    {
        width: 100%;
    }

    .extract-tool .cargo
    {
        display: flex;
        text-align: left;
        width: 100%;
    }

    .extract-tool div.resource
    {
        display: flex;
        width: 100%;
    }

    div.resource .label-container
    {
        font-size: 1.1em;
    }

    div.sector-ship
    {
        width: initial;
    }

    .profil div.img-container
    {
        width: initial;
        float: none;
        margin: auto;
    }

    .sw div.tabs div.bts
    {
        flex-direction: column;
    }

    body
    {
        line-height: 1.5em;
    }

    div.inventory div.sectors
    {
        grid-template-columns : auto auto;
    }

    div.sector-inventory div.name
    {
        position: absolute;
        margin: 0.4em 1em;
        left: 0;
        top: 0;
        font-weight: bold;
        line-height: 1.2em;
        font-size: 0.8em;
    }

    div.sector-inventory
    {
        padding : 0;
    }

    .sw div.tabs div.bts button
    {
        line-height: 1.2em;
        font-size: 0.9em;
    }

    .inventory div.search
    {
        flex-direction: column;
    }

    .inventory div.search input
    {
        width: calc(100% - 1em);
        margin: auto;
        margin-top: 0.5em;
    }

    .inventory footer
    {
        flex-direction: column;
    }

    .sw div.window.inventory footer button
    {
        margin: 0 auto;
    }

    .all-resources div.resources-list
    {
        max-height: 67vh;
    }

    div.objectives div.mission
    {
        padding : 0;
        max-height: initial;
    }

    div.objectives div.task, div.mission-doned div.task
    {
        padding : 0.5em;
    }

    div.objectives h4, div.mission-doned h4
    {
        padding-left: 0.5em;
    }

    div.objectives p.description, div.mission-doned p.description
    {
        padding-left : 1.5em;
        width: calc(100% - 1.5em);
    }

    div.objectives div.score-value, div.mission-doned div.score-value
    {
        margin-top: -0.3em;
    }

    div.score
    {
        padding : 0 0.2em;
    }

    div.score div.name
    {
        max-width: 100px;
    }

    .pictos-list
    {
        grid-template-columns: auto auto;
        max-height: 74vh;
    }

    .pictos-list div.img-container img
    {
        width: 124px;
        margin: auto;
    }

    .list .elmts
    {
        border: none;
        padding: 0;
        width: auto;
        overflow: hidden;
    }
    .add-role .role .img-container, .elmts .role .img-container
    {
        border : none;
    }
    .add-role .role .img-container img, .elmts .role .img-container img
    {
        width: 32px;
    }
    .sw div.window .org-form .list button.close
    {
        margin-top: -0.2em;
    }

    .org-infos .intro img
    {
        width: 90%;
        margin: auto;
    }

    .org-infos p.error
    {
        line-height: 1.2em;
        font-style: italic;
        color: #bb0000;
    }

    div.window .org-infos h2
    {
        margin: auto;
        border-bottom: none;
    }

    send-org-candidature textarea
    {
        height: 53vh;
    }

    .create-org div.tabs div.bts button
    {
        height: initial;
    }

    div.window.create-org .tabs h2
    {
        max-width: calc(100% - 1em);
    }

    div.sw-widget.window.msgs
    {
        min-width: initial;
    }

    .messages
    {
        flex-direction: column;
    }

    .messages div.msgs
    {
        width: 100%;
        border: none;
        margin: auto;
    }

    .messages div.msg
    {
        width: 100%;
    }

    div.msg .content
    {
        padding: 0.5em;
        max-height: 72vh;
        max-width: calc(100% - 1em);
        overflow: auto;
    }

    button.esc
    {
        position: fixed;
        width: initial;
        padding: 0.3em;
        border: 1px solid var(--border-color);
        border-radius: 2px;
        top: 0;
        left: 0;
        margin: 0;
        margin-top: 0.5em;
        margin-left: 0.5em;
    }

    div.sw-widget.window.esc-menu
    {
        position: fixed;
        margin: 0;
        min-width: initial;
    }

    div.sw-widget.window.bug-report
    {
        min-width: initial;
    }

    .bug-retport textarea
    {
        margin-top: 0.7em;
        height: 50vh;
    }
    .sw div.window.bug-report button.send
    {
        margin-right: auto;
    }
    .sw .sw-widget.votes div.header  div.power button.infos, .sw .sw-widget.vote-power button.infos
    {width: initial;}
    .sw .sw-widget.votes
    {width: 100%;}

    .sw .sw-widget.votes div.header  div.power button.infos, .sw .sw-widget.vote-power button.infos
    {

        margin-left: 1em;
    }
    .sw .sw-widget.votes div.header div.power
    {
        padding : 0.4em;
    }
    .sw .sw-widget.votes div.votes
    {
        max-height: initial;
        overflow-x: initial;
        overflow-y: initial;
    }
    .sw .sw-widget.votes div.task div.want button.vote
    {
        border:none
    }

    div.resource-win img
    {
        float : none;
        margin-right: auto;
        widows: 100%;
    }
    div.help .content
    {
        flex-direction: column;
    }
    div.help .content .tutos
    {
        width : initial;
    }
    div.help .content .tutos .list
    {
        display: flex;
        height: initial;
        overflow-x: auto;
        overflow-y: hidden;
    }
    div.help .content .tutos .list .tuto
    {
        border-bottom: none;
        padding: 0.1em 0.5em;
        white-space: nowrap;
        border-right: 1px solid var(--border-color);
    }
    div.help .content .tutos .list .tuto:last-child
    {
        border-right: none;
    }
    div.help div.ia-container
    {
        border: none;
        width: calc(55% - 1em);
        margin: auto;
    }
    div.help .content .tuto-video
    {
        border: none;
        width: initial;
    }
    div.help .content .tuto-video video
    {
        margin:0.5em
    }

    div.sw-widget.timed-notif div.body div.message
    {
        flex-direction: column;
    }

    div.sw-widget.timed-notif div.body div.message img
    {
        max-width: initial;
        margin-right: 0;
        object-fit: cover;
        width: 100%;
        height: fit-content;
    }

    div.sw-widget.window.video-player
    {
        width: 100%;
    }

    button.install
    {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
        margin: 0;
        text-transform: initial;
        border: 1px solid var(--border-color);
        border-radius: 3px;
        padding: 0.5em;
        font-size: 0.8em;
        width: initial;
        margin-top: 0.5em;
        margin-right: 0.5em;
    }

    button.install div
    {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }

    button.install img.icon
    {
        margin: 0;
        margin-left: 1em;
        width: 29px;
    }

    input, .sw input
    {
        font-size: 0.9em;
    }

    .label-container.map-fuel
    {
        position: fixed;
        bottom: 0;
        width: auto;
        font-size: 0.75em;
        margin-bottom: 44px;
        border: 1px solid var(--border-color);
        border-left: none;
        border-bottom: none;
        border-radius: 0 3px 0 0;
        padding: 0.3em;
        background: var(--bg);
    }

    div.sw-widget.date
    {
        position: fixed;
        bottom: 0;
        width: auto;
        font-size: 0.75em;
        margin: 0;
        margin-bottom: 45px;
        border: 1px solid var(--border-color);
        border-right: none;
        border-bottom: none;
        border-radius: 3px 0 0 0;
        padding: 1.3em;
        background: var(--bg);
        left: initial;
        right: 0;
    }

    .label-container.map-fuel label.value
    {
        margin-left: 0.3em;
    }

    div.sw-widget.step-tuto main
    { 
        max-height: 20vh;
    }

    div.time-infos
    {
        top : 70%;
        max-height: 200px;
    }

    .map-arrow
    {
        position: fixed;
        z-index: 100;
        background: #005971d6;
        border: 1px solid var(--border-color);
        border-radius: 2px;
        margin: 2px;
    }

    .map-arrow.left, .map-arrow.right
    {
        top: calc(50% - 45px);
    }

    .map-arrow.left
    {
        transform: translateY(-20%) rotate(180deg);
    }

    .map-arrow.right
    {
        right : 0;
        transform: translateY(-20%);
    }

    .map-arrow.down
    {
        bottom: 75px;
        margin-left: 50%;
        transform: translate(-50%) rotate(90deg);
    }

    .map-arrow.up
    {
        margin-left: 50%;
        top: 50px;
        transform: translate(-50%) rotate(-90deg);
    }

    .map-arrow img
    {
        height: 32px;
    }

    button.find-ship
    {
        left: 0;
        bottom: 85px;
        width: inherit;
    }

    button.find-ship img
    {
        height: calc(100% - 0.5em);
        margin: 0 0.25em;
    }

    div.sw-widget.alert
    {
        display: flex;
        margin: 0;
        top: 46%;
        transform: translateY(-50%);
        margin-left: 2%;
        width: calc(96% - 2em);
        font-size: 0.8em;
        animation: cellest-show 0.1s;
    }

    div.sw-widget.alert p
    {
        margin-top:0;
    }
}

@media (max-width : 300px)
{
    div.sw-widget.date
    {
        font-size: 0.55em;
    }
}