@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

html, body {margin: 0; padding: 0;}

body{
    font-family: 'Roboto', sans-serif;
}

div.error-message {margin: 1em;}

body.normal::after {
  content: "";
  background: url("../img/irbis.jpg");
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
  background-size: 400px;
  background-repeat: no-repeat;
  background-position: center;
}

a {color: #4040ff; text-decoration: none; }
a:hover {text-decoration: underline;}

h1.event-name {text-align: center;}

h2.vote-name{
	background-color: #333;
	padding: 20px;
	margin: 0;
	text-align: center;
	color: #fff;
	border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	box-shadow: 3px 3px 6px #ececec;
}

div.vote.box{
	font-size: 1rem;
	background-color: rgba(255,255,255, 0.6);
	color: #000;
	overflow-wrap: break-word;
	border-radius: 8px;
}

div.vote-infobox{
	padding: 3rem;
}

div.vote-info{ padding: 10px; margin: 0 auto 1em auto; border: 1px solid #ececec; background-color: #fff;}

a.logout{color: #fff;}

div.header {background-color: #303030; padding: .5em; box-shadow: 2px 2px 5px #808080; margin-bottom: 1em; text-align: right; color: #fff}

div.users {display: inline-block;}

span.user {font-weight: bold; }
span.user.admin {color: red; }

.button {
    display: inline-block; padding: .3em .5em; color: #fff; text-decoration: none; margin: 0 .5em; cursor: pointer; line-height: 25px;
    background-color: #a0a0a0; border-radius: 2px; border: none;
}
.button:hover { box-shadow: 2px 2px 5px #000; text-decoration: none; }
div.header .button:hover {box-shadow: 2px 2px 5px #909090;}
.button:active {box-shadow: none;}
.button.disabled {box-shadow: none; cursor: default;}
.button.disabled:hover, div.header .button.disabled:hover {box-shadow: none;}

div.buttons {display: inline-block;}
div.buttons a.login { background-color: #16aa65; }
div.buttons a.admin { background-color: #ed422c; }
div.buttons a.user-section { background-color: #4040ff; }
div.buttons span.almost-admin { background-color: #b46d64; color: #e0e0e0;}

div.box { border: 1px solid #e0e0e0; margin: 1em; border-radius: .3rem; box-shadow: 2px 2px 5px #c0c0c0; margin: 1em auto;}
div.loginbox { margin: 2em auto; max-width: 30em;}
div.loginbox div.error {background-color: #ff8080; border: 1px solid #ff0000; border-radius: .3rem; padding: .5em; margin-top: .5em; margin-bottom: .5em; box-sizing: border-box;}

div.box.vote { max-width: 70rem; padding: 1em;}
div.box.vote textarea {width: 100%; height: 15em; resize: none;}
div.box.vote div.vote_not_available {text-align: center;}
div.box.vote div.vote_not_available img {display: block; margin: auto; width: 3rem;}

div.box.vote_result {max-width: 30rem; padding: 1em; background-color: white;}

div.box.vote_result div.error {background-color: #ff8080; border: 1px solid #ff0000; border-radius: .3rem; padding: .5em; margin-top: .5em; margin-bottom: .5em; }
div.box.vote_result div.message {background-color: #80ff80; border: 1px solid #00ff00; border-radius: .3rem; padding: .5em; margin-top: .5em; margin-bottom: .5em; }
div.box.vote_result div.warning {background-color: #ffff80; border: 1px solid #ffff00; border-radius: .3rem; padding: .5em; margin-top: .5em; margin-bottom: .5em; }
div.box.vote_result div.vote-result-buttons{margin-top: 1em; text-align: center;}
div.box.vote_result a.button.continue-vote{background-color: #16aa65;}
div.box.vote_result div.audit-token-text {margin-top: 1em;}
div.box.vote_result div.audit-token {margin-top: 1em; margin-bottom: 1em; font-size: 1.5em; text-align: center;}
div.box.vote_result div.audit-token-help {font-size: 0.8em; text-align: justify;}
div.box.vote_result div.audit-token-copy-to-clipboard {text-align: center; margin-top: 1em; margin-bottom: 1em;}

div.current_voter_info {margin-bottom: 2em; text-align: center; }
div.current_voter_info span.current_voter {font-size: 1.1em; display: block;}
div.current_voter_info span.current_voter_on_vote {font-size: 1.2em; font-weight: bold; display: block;}

div.thevote {margin-top: 1em;}
div.thevote label {display: block; padding: .5em;}
div.thevote div.voting-options {margin-top: 1em; margin-left: 2em;}

.button.do-vote {background-color: #ed422c; font-size: 1.2em; margin: 2em auto 1em auto; display: block;}

div.admin.box {margin: 0em 1em 1em 1em; padding: 3rem;}

ul.menu {margin: 0 0 0 2em; padding: 0; position: relative; top: 1px;}
ul.menu li {display: inline-block; margin: 1em .5em 0em .5em;}
ul.menu li.actual {background-color: white; border-top: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; }
ul.menu li a, ul.menu li span {color: #333; display: block; padding: .5em; text-decoration: none;}


div.admin-current-vote {max-width: 70rem; margin: 1em auto; background-color: #fff; border-radius: .3rem; border: 1px solid #333;}
div.actions {text-align: center;}
div.admin-current-vote > div, div.user-current-vote > div, div.export-votes > div {margin: .5em; padding: 1em;}

span.admin-heading {display: inline-block; padding: .1em .5em; position: relative; text-align: center; border-radius: .3em; line-height: 35px;}
.full-text>span.admin-heading {box-shadow: 0px 0px 0px; display: inline-block; padding: .1em .5em; position: relative; text-align: center; line-height: 35px; border: 1px solid #333; border-radius: 0px;}
div.vote-type-preview {background-color: #ececec; padding: 1em; margin-top: 1em; border-radius: 3px; }
div.vote-type-preview dt, div.vote-type-preview dd {display: inline; margin: 0;}
div.vote-type-preview dd:after {content: "\A"; white-space: pre;}
div.vote-type-preview dd {font-weight: bold;}

div.vote-status-bar {
    background-color: white; border: 1px solid #a0a0a0; max-width: 50rem; padding: .5em; text-align: center; margin: auto; position: relative;
    box-shadow: 2px 2px 5px #c0c0c0;
}
div.vote-status-bar>div {background-color: #c3f7d6; position: absolute; left: 0; top: 0; bottom: 0;}
div.vote-status-bar>div.not-accepted {background-color: #f7c3c3;}
div.vote-status-bar>span {display: block; z-index: 1; position: relative; font-weight: bold;}

div.display-non-voters {text-align: center; margin-top: 1em; visibility: hidden;}
div.display-non-voters.active {visibility: visible;}


div.item-record span{white-space: nowrap; margin-right: 20px;}
span.quorumname, span.username, span.code, span.eventname {margin-top: 10px;}
span.user-status { width: 1em; height: 1em; margin-top: 10px; border-radius: .5em; box-shadow: 2px 2px 2px #aaa;}
span.user-status.logged-in { background-color: #16aa65; }
span.user-status.logged-out { background-color: #ed422c; }

div.item-record span.event-status {margin-top: 10px;}
span.event-status { display: inline-block; width: 1em; height: 1em; border-radius: .5em; box-shadow: 2px 2px 2px #aaa;}
span.event-status.valid { background-color: #16aa65; }
span.event-status.expired { background-color: #ed422c; }
span.code {width: 8em;}

span.user-right {cursor: default;}
.user-right {background-color: #fff; border: 2px solid #b0b0b0; color: #b0b0b0; text-decoration: line-through; height: 1.6em;}
.user-right:hover {text-decoration: line-through; box-shadow: none;}
.user-right.granted {border: 2px solid black; color: black; text-decoration: none;}
.user-right.granted:hover {text-decoration: none;}

a.user-right.user-can-vote.granted {border: 2px solid #16aa65;}
span.user-right.user-is-admin {border: 2px solid #ed422c;}
span.user-right.user-is-admin-user {border: 2px solid #3e82f7;}

p.vote-state-text{white-space: nowrap; margin-right: 10px;}

select.vote-states{
  background-color: #fff;
  appearance: none;
  margin-top: 10px;
  height: 35px;
  padding: .5em 2em .5em .5em;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%, 0 0;
  background-size: .65em auto, 100%;
  border: 1px solid #333;
}

a.button.pause-vote {background-color: #a0a0a0;}
a.button.end-vote {background-color: #ed422c;}
a.button.select-vote {background-color: #4040ff;}
a.button.vote-detail {background-color: #4040ff;}
a.button.edit-vote {background-color: #16aa65;}
a.button.create-vote {background-color: #16aa65;}
a.button.edit-user {background-color: #16aa65;}
a.button.edit-quorum {background-color: #16aa65;}
a.button.create-user {background-color: #16aa65;}
a.button.create-quorum {background-color: #16aa65;}
a.button.import-users {background-color: #ed422c;}
a.button.user-actions {background-color: #4040ff;}
a.button.export-users {background-color: #4040ff;}
a.button.vote-export {background-color: #4040ff;}
a.button.activate-vote {background-color: #ed422c;}
a.button.ready-vote {background-color: #ed422c;}
a.button.show-to-users {background-color: #ed422c;}
a.button.disable-show-to-users {background-color: #ed422c;}
a.button.delete-user {background-color: transparent; color: black;}
a.button.delete-user.hidden {visibility: hidden;}
a.button.delete-vote {background-color: transparent; color: black;}
a.button.delete-vote.hidden {visibility: hidden;}
a.button.undelete-vote {background-color: #4040ff;}
a.button.copy-to-clipboard {background-color: #4040ff;}
a.button.logout-all-users {background-color: #ed422c;}
a.button.reset-vote-right {background-color: #ed422c;}
a.button.edit-event {background-color: #16aa65;}
a.button.switch-event {background-color: #16aa65;}
a.button.edit-event-presets {background-color: #ed422c;}
a.button.export-votes {background-color: #ed422c;}
a.button.print {background-color: #ed422c;}
a.button.close {background-color: #4040ff;}
a.button.create-event {background-color: #16aa65;}

.items-filter{margin: 0 auto; width: 75%; padding: 10px; background-color: #303030; box-shadow: 1px 1px 2px #000; height: auto;}
div.items-filter>form{color: #fff;display: flex;}
.search-container {width: 100%; display: flex; justify-content: flex-end; margin-top: 7px;}
.search-container button {padding: 3px; border: 1px solid #ddd; float: right; width: 30px; background-color: #ececec; color: #000; cursor: pointer; height: 35px;}
.search-container button:hover {background-color: #8d8d8d;}
.search-container input[type=text] {text-align: center; border: 1px solid #ddd; height: 30px;}

.items-list {
    box-shadow: 1px 1px 2px #000; width: 75%; margin: 0 auto; padding: 10px; background-color: #fff; height: auto; border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.item-record {padding: 8px; width: auto; height: auto; background-color: #ececec; display: flex; border: 1px solid #ececec;}
.item-record:nth-child(even) {background-color: white;}

.item-record-buttons{display: flex; justify-content: flex-end; width: 100%;}
.items-list-buttons{display: flex; justify-content: flex-end; width: 100%; margin-top: .5em;}
.item-record-buttons a, .item-record-buttons span { height: 1.6em; align-self: center}

.item-record p{display: flex; margin-left: 10px;}


div.admin-current-vote span.state {padding: .5em .8em; float: right;}
span.state{ margin-left: .8em; background-color: #fff; border: 2px solid black; color: black; cursor: default; height: 1.6em;}
span.state:hover {box-shadow: none;}
span.state.state-draft {border: 2px solid #16aa65;}
span.state.state-ready {border: 2px solid #4040ff;}
span.state.state-paused {border: 2px solid #4040ff;}
span.state.state-active {border: 2px solid #ed422c;}
span.state.state-closed {border: 2px solid #808080;}


.pagination {margin-top: 20px; display: flex; justify-content: center;}
.pagination a, .pagination span {color: black; float: left; padding: 8px 16px; text-decoration: none;}
.pagination a.current, .pagination span.current {font-weight: bold;}
.pagination a:hover {background-color: #ececec;}

div.edit-form {margin: 0 auto; max-width: 30em; padding: 2em; border: 1px solid #333; background: rgba(255,255,255, 0.8);}
div.edit-form.noborder {border: none;}

div.edit-form input[type=text], div.edit-form input[type=number], div.edit-form input[type=password], div.edit-form input[type=datetime-local], div.edit-form select, div.edit-form textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: .5em; padding: .5em; border: 1px solid #333; background-color: white; outline: none;
}
div.edit-form input[type=file] {
    display: block; width: 100%; box-sizing: border-box; margin-top: .5em; padding: .1em .5em; border: 1px solid #333; background-color: white;
}

div.edit-form textarea { height: 10em; resize: none;}

div.edit-form div.multitype {margin-left: 1em; margin-top: .5em;}
div.edit-form div.multitype.js-enabled {margin-left: 0; margin-top: 0;}

div.edit-form select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: .5em 2em .5em .5em; 
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
div.edit-form label {display: block; margin-top: 1em;}
div.edit-form p {margin-top: .2em; margin-bottom: .2em;}
div.edit-form p.help-text, div.form p.help-text {font-size: .8em; text-align: justify; }
div.edit-form p.help-text a, div.form p.help-text a {font-weight: bold; color: #4040ff; }
div.edit-form input[type=submit], div.edit-form button[type=submit] {
    display: block; padding: .3em .5em; color: #fff; text-decoration: none; margin: 0; cursor: pointer; line-height: 25px;
    background-color: #ed422c; border-radius: 2px; border: none; width: 100%; margin-top: 3em;
}
div.edit-form.user-import-form input[type=submit], div.edit-form.user-import-form button[type=submit] {margin-top: 1em;}

div.edit-form input[type=submit]:hover, div.edit-form button[type=submit]:hover {box-shadow: 2px 2px 5px #000;}
div.edit-form input[type=submit]:active, div.edit-form button[type=submit]:active {box-shadow: none;}

div.edit-form>h1{text-align: center;}
div.edit-form>form, div.edit-form>div.form, div.edit-form>div.form-warning {display: block; margin: 0 auto; max-width: 25em; padding: 0;}
div.edit-form>div.form .button {display: block; text-align: center; margin: 1em 0 0 0;}
div.edit-form.user-import-form div.form.cancel {margin-top: 3em;}
div.edit-form p.help-text tt {background-color: #d0d0d0; padding: .2em; }

div.form dt, div.form dd { margin: .5em 0; }
div.form dd { margin: .5em 0; font-family: monospace;}

div.edit-form>div.form-warning {background-color: #fcce00; border: 1px solid #a38500; text-align: justify; padding: .5em; box-sizing: border-box; border-radius: .3rem;}

div.edit-form form ul {background-color: #ff8080; border: 1px solid #ff0000; border-radius: .3rem; padding: .5em; margin: .5em 0; box-sizing: border-box;}
div.edit-form form ul>li {list-style-type: none;}

div.edit-form button.login-button {background-color: #16aa65;}

@media only screen and (max-width: 600px){
    .items-list {width: 100%;}
    .search-container {margin-left: 10%;}
    .items-list {width: 100%;}
}

@media only screen and (max-width: 640px) {
  ul.menu{
    overflow: auto;
    white-space: nowrap;
  }
}

div.change-vote div.prev {float: left;}
div.change-vote div.next {float: right;}
div.change-vote div.clear {clear: both;}

table.vote-result-table { margin: 0 auto; box-shadow: 2px 2px 5px #c0c0c0; background-color: #ececec; }
table.vote-result-table.not-accepted { background-color: #f7c3c3; }

table.vote-result-table td { padding: .2em .5em; background-color: white; }
table.vote-result-table td.not-accepted { background-color: transparent; font-weight: bold;}
table.vote-result-table tr.majority td { background-color: #4040ff; color: white;}
table.vote-result-table td.special {font-style: italic;}
table.vote-result-table td.percentage {text-align: center; position: relative;}
table.vote-result-table td.percentage span.number {position: relative; z-index: 1;}
table.vote-result-table td.percentage span.bar {display: block; position: absolute; background-color: #c3f7d6; left: 0; top: 0; bottom: 0;}
table.vote-result-table tr.majority td.percentage span.bar {background-color: #1a94ff;}
table.vote-result-table td.value {text-align: right;}
table.vote-result-table td.name {text-align: left;}

div.quorum-actions {text-align: center; margin-top: .5em;}

div.notvoted-box{background-color: rgba(255,255,255, 0.7);color: #333; width: 70%; margin: 0 auto; padding: 2em; border: 1px solid #333;}
.notvoted-box>h2{text-align: center;}
table#not-voted {border-collapse: collapse; width: 40%; margin: 0 auto; margin-bottom: 1em;}
table#not-voted td, #not-voted th {border: 1px solid #ddd; padding: 8px;}

#not-voted tr:nth-child(even){background-color: #f2f2f2;}
#not-voted tr:nth-child(odd){background-color: #fff;}

table#not-voted th { text-align: center; padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #333; color: white;}

div.logged-in-users, div.inactive-event-warning {text-align: right; margin: 0 1em;}
div.logged-in-users span.logged-in-count {font-weight: bold; }
div.inactive-event-warning {font-weight: bold; color: #ff0000;}

body.nopiecharts div.pie-chart {display: none;}


/* export votes styles */

@media print {
    div.header {display: none;}
    div.admin.box {box-shadow: none; border: none; margin: 0;}
    html, body {width: 100%;}
    div.vote-type-preview {border: 1px solid #a0a0a0; box-shadow: 2px 2px 5px #c0c0c0; page-break-inside: avoid;}
    table.vote-result-table {page-break-inside: avoid}
    table.vote-result-table td, table.vote-result-table th {border: 1px solid #a0a0a0;}
    table.vote-result-table tr.majority td, table.vote-result-table tr.majority th {font-weight: bold;}
    table.vote-result-table tr.majority td.name::before {content: "* ";}
}

div.export-votes div.vote-status-bar { box-shadow: none; border: none; }
div.export-votes div.vote-status-bar>div {background-color: transparent;}