
body.default {
    --black:#000;
    --blue-border:#99c;
    --blue-button-background:#eef;
    --blue-button-text:#009;
    --blue-hover:#00f;
    --blue-shadow:#66c;
    --green-button-background:#dfd;
    --green-bright:#0f0;
    --green-button-text:#060;
    --grey-dark:#222;
    --grey-medium:#666;
    --orange-background:#fdb;
    --orange-text:#930;
    --pink-background:#fee;
    --pink:#fdd;
    --pink-hover:#fcc;
    --red-bright:#f00;
    --red-primary:#c00;
    --red-text:#900;
    --white:#fff;
    --yellow-border:#990;
    --yellow-bright:#ffc;
    --yellow-dark:#440;
    --yellow-primary:#ee0;
    --yellow-text:#770;

    --background:#eee;
    --background-dark:#ddd;
    --border:#666;
    --cut-hover:#ddb;
    --cut-selected:#cfc;
    --cut-selected-hover:#ada;
    --cut-selected-outline:#3f3;
    --delay:#cdf;
    --dragBox-background:#9cf;
    --dragBox-border:#69c;
    --focus:#39f;
    --icon-fileNavigate:#;
    --offline:#f66;
    --outline:#c00;
    --parent-background:#fdf;
    --parent-text:#606;
    --selected-hover:#cde;
    --shadow:#999;
    --shadow-bright:#ccc;
    --shadow-scroll:#bbb;
}

/* cspell:words readonly */

.default #spaces a[href]{color:var(--blue-hover)}
.default #spaces{background-color:var(--delay);background-image:url("../media/background-desert.jpg")}
.default #spaces *:focus{outline-color:var(--focus)}
.default #spaces input::placeholder{color:var(--red-text)}
.default #spaces select{background:var(--background);border-color:var(--shadow)}
.default #spaces p strong,
.default #spaces .warning{color:var(--red-primary)}

/* Login prompt */
.login #spaces #login{background:var(--background);border-color:var(--border);box-shadow:0.2em 0.2em 0.5em var(--shadow)}
.default #spaces #login a,
.default #spaces #login button{background:var(--green-button-background);border-color:var(--green-button-text);box-shadow:0.1em 0.1em 0.25em var(--shadow-bright);color:var(--green-button-text)}
.default #spaces #login p{border-color:var(--border)}
.default #spaces #login li{border-color:var(--border)}
.default #spaces #login li::after{background:var(--background)}
.default #spaces #login input{border-color:var(--border)}
.default #spaces #login input[readonly]{background:var(--background-dark);border-color:var(--grey-medium)}

/* Context menu, right click */
.default #spaces #contextMenu{border-color:var(--border)}
.default #spaces #contextMenu button{background:var(--background-dark);border-color:var(--border);color:var(--grey-dark)}
.default #spaces #contextMenu button:hover{background:var(--background);color:var(--blue-hover)}
.default #spaces #contextMenu .destroy{background:var(--pink);color:var(--red-primary)}
.default #spaces #contextMenu .destroy:hover{background:var(--pink-hover);color:var(--red-bright)}
.default #spaces #contextMenu .destroy[disabled],
.default #spaces #contextMenu button[disabled]{background:var(--background);color:var(--shadow)}

/* file system details modal content, accessed from context menu */
.default #spaces .fileDetailOutput h3{color:var(--blue-button-text)}
.default #spaces .fileDetailOutput button{border-color:var(--border)}

/* configuration modal */
.default #spaces .configuration button{background:var(--background-dark);border-color:var(--border)}
.default #spaces .configuration .swatch{border-color:var(--border)}

/* Title bar and main menu */
.default #spaces .title{background:var(--background-dark);border-color:var(--grey-medium);box-shadow:0 0.05em 0.5em var(--blue-shadow)}
.default #spaces .title.offline{background:var(--yellow-primary)}
.default #spaces #minimize-all,
.default #spaces #fullscreen,
.default #spaces #menuToggle{background:var(--background);border-color:var(--shadow)}
.default #spaces #minimize-all:hover,
.default #spaces #fullscreen:hover,
.default #spaces #menuToggle:hover{background:var(--white)}
.default #spaces .icon-fileNavigator{color:var(--green-button-text)}
.default #spaces .icon-systemLog{color:var(--focus)}
.default #spaces .icon-textPad{color:var(--orange-text)}
.default #spaces .icon-export{color:var(--grey-dark)}
.default #spaces .icon-invite{color:var(--parent-text)}
.default #spaces .icon-delete{color:var(--red-bright)}
.default #spaces .icon-configuration{color:var(--grey-medium)}
.default #spaces #menu{border-color:var(--border);box-shadow:0.1em 0.1em 0.25em var(--shadow)}
.default #spaces #menu button{background:var(--background-dark);border-color:var(--border)}
.default #spaces #menu button:hover{background:var(--background);box-shadow:0.1em 0.1em 0.5em var(--shadow)}

/* agent management */
.default #spaces .modify-agent-list li:hover{background:var(--background)}
.default #spaces .box .inviteAgent .error{color:var(--red-primary)}
.default #spaces .box .inviteAgent .accepted{color:var(--green-button-text)}

/* device/user list */
.default #spaces #agentList{border-color:var(--border)}
.default #spaces #agentList h2{background:var(--background-dark);border-color:var(--border);box-shadow:0em 0.25em 0.25em var(--shadow)}
.default #spaces #agentList button{background:var(--background);border-color:var(--border)}
.default #spaces #agentList button:hover{background:var(--white)}
.default #spaces #agentList .status-active{color:var(--green-bright);text-shadow:0 0 0.5em var(--green-button-text)}
.default #spaces #agentList .status-idle{color:var(--yellow-primary);text-shadow:0 0 0.5em var(--yellow-text)}
.default #spaces #agentList .status-offline{color:var(--offline);text-shadow:0 0 0.5em var(--red-text)}
.default #spaces #agentList span{background:var(--black)}
.default #spaces #agentList .all-shares button,
.default #spaces #agentList .device-all-shares,
.default #spaces #agentList .user-all-shares{background:var(--blue-button-background);color:var(--blue-button-text)}
.default #spaces #agentList .all-shares button:hover,
.default #spaces #agentList .device-all-shares:hover,
.default #spaces #agentList .user-all-shares:hover{background:var(--white)}

/* minimize tray at bottom */
.default #spaces #tray{background:var(--background-dark);border-color:var(--grey-medium)}
.default #spaces #tray li{box-shadow:0.15em 0.15em 0.5em var(--shadow-bright)}

/* modal */
.default #spaces .box{box-shadow:0.1em 0.1em 1em var(--shadow)}
.default #spaces .box p.error{color:var(--red-primary)}
.default #spaces .box .buttons button,
.default #spaces .box .header button,
.default #spaces .box .expansion,
.default #spaces .box .footer button{box-shadow:0.1em 0.1em 0.25em var(--shadow-bright)}
.default #spaces .box .buttons button.minimize{background:var(--orange-background);border-color:var(--orange-text);color:var(--orange-text)}
.default #spaces .box .buttons button.maximize{background:var(--blue-button-background);border-color:var(--blue-button-text);color:var(--blue-button-text)}
.default #spaces .box .buttons button.close{background:var(--pink);border-color:var(--red-text);color:var(--red-text)}
.default #spaces .box h2.heading{background:var(--background);border-color:var(--border)}
.default #spaces .box .body{background:var(--white);border-color:var(--border)}
.default #spaces .box .border{background:var(--shadow-bright);border-color:var(--border)}
.default #spaces .box .corner-tl,
.default #spaces .box .corner-tr,
.default #spaces .box .corner-bl,
.default #spaces .box .corner-br{border-color:var(--border)}
.default #spaces .box .footer{background:var(--background);border-color:var(--border)}
.default #spaces .box .status-bar{border-color:var(--border);background:var(--background)}
.default #spaces .box .header{background:var(--white);border-color:var(--border)}
.default #spaces .box .header .backDirectory{background:var(--yellow-bright);border-color:var(--yellow-dark);color:var(--yellow-dark)}
.default #spaces .box .header .parentDirectory{background:var(--parent-background);border-color:var(--parent-text);color:var(--parent-text)}
.default #spaces .box .header .reloadDirectory{background:var(--green-button-background);border-color:var(--green-button-text);color:var(--green-button-text)}
.default #spaces .box .header .fileSearch input{border-color:var(--border)}
.default #spaces .fileList li input.error,
.default #spaces .box .header .error{background:var(--pink);color:var(--red-text)}
.default #spaces .agentList .share button.grant-full-access,
.default #spaces .box button.cancel{background:var(--pink);border-color:var(--red-text);color:var(--red-text)}
.default #spaces .box button.send-button,
.default #spaces .box button.confirm{background:var(--green-button-background);border-color:var(--green-button-text);color:var(--green-button-text)}
.default #spaces .box button.save{background:var(--yellow-bright);border-color:var(--yellow-border);color:var(--yellow-text)}
.default #spaces .box .delay svg{stroke:var(--delay)}
.default #spaces .box .body > textarea{background:var(--white);color:var(--black)}
.default #spaces .box .delete{background:var(--pink);border-color:var(--red-text);box-shadow:0.075em 0.075em 0.25em var(--shadow-bright);color:var(--red-text)}
.default #spaces #dragBox{background:var(--dragBox-background);border-color:var(--dragBox-border)}

/* share list */
.default #spaces .agentList li.full-access{background:var(--blue-button-background);border-color:var(--blue-border)}
.default #spaces .agentList button{color:var(--blue-hover)}
.default #spaces .agentList .full-access button.make-read-only{background:var(--yellow-bright);border-color:var(--yellow-border);color:var(--yellow-text)}
.default #spaces .agentList .read-only-status{color:var(--grey-medium)}
.default #spaces .agentList .full-access .read-only-status{color:var(--grey-medium)}
.default #spaces .agentList li{border-color:var(--shadow-bright)}
.default #spaces .agentList li.share-agent-details{opacity:1}
.default #spaces .agentList .text-button-agent,
.default #spaces .agentList .video-button-agent,
.default #spaces .text-button-device,
.default #spaces .text-button-user{background:var(--blue-button-background);border-color:var(--blue-button-text);color:var(--blue-button-text)}
.default #spaces .agentList .file-system-root{background:var(--yellow-bright);border-color:var(--yellow-border);color:var(--yellow-dark)}
.default #spaces .agentList h4{background:white}
.default #spaces .agentList .device,
.default #spaces .agentList .user{border-color:var(--shadow)}

/* share delete */
.default #spaces .delete-agents label{background:var(--background)}
.default #spaces .delete-agents .checked{background:var(--pink-background);border-color:var(--red-text);color:var(--red-text)}

/* file navigator modal content */
.default #spaces .fileList li p{border-color:var(--background-dark)}
.default #spaces .fileList li p.cut:hover{background:var(--cut-hover)}
.default #spaces .fileList li p.selected:hover{background:var(--selected-hover)}
.default #spaces .fileList li p.selected.cut:hover{background:var(--cut-selected-hover)}
.default #spaces .fileList li p:hover{background:var(--background)}
.default #spaces .fileList li p.lastType{border-color:var(--border)}
.default #spaces .fileList li p.selected{background:var(--blue-button-background);outline-color:var(--dragBox-background)}
.default #spaces .fileList li p.selected.cut{background:var(--cut-selected);outline-color:var(--cut-selected-outline)}
.default #spaces .fileList li p.cut{background:var(--yellow-bright);opacity:0.5;outline-color:var(--yellow-primary)}
.default #spaces .fileList .expansion{background:var(--background);border-color:var(--grey-medium);box-shadow:0.05em 0.05em 0.125em var(--shadow-bright)}
.default #spaces #file-list-drag{background:var(--white)}

/* text messaging */
.default #spaces .message-content .message-input{background:var(--background)}
.default #spaces .message-content .message-self th{border-color:var(--shadow-bright)}
.default #spaces .message-content tr,
.default #spaces .message-content th{border-color:var(--background-dark)}
.default #spaces .message-content .message-self{background:var(--blue-button-background)}
.default #spaces .message-content th strong{color:var(--red-primary)}
.default #spaces .message-content .base{border-color:var(--shadow)}
.default #spaces .footer textarea{border-color:var(--shadow)}
.default #spaces .box .video-self{background:var(--shadow-bright);border-color:var(--border)}

/* tutorial */
.default #tutorial-screen{background:var(--black)}

/* scrollbars */
.default *::-webkit-scrollbar{background-color:var(--background-dark);border-color:var(--background-dark)}
.default *::-webkit-scrollbar-thumb{background-color:var(--shadow-scroll);border-color:var(--background-dark)}
.default *::-webkit-scrollbar-thumb:hover{background-color:var(--shadow)}
.default *::-webkit-scrollbar-corner{background-color:var(--background-dark)}