#ubitto-requests-controls {margin-top: 10px; flex-basis: 100%;}
#ubitto-requests-controls > * {display: inline-block;}
#ubitto-requests-controls > *[rtype] {cursor: pointer; padding: 5px 8px;}
#ubitto-requests-controls > *[rtype]:hover {background: #f0f0f0;}
#ubitto-requests-controls > *[rtype][current] {background: #eee;}

#ubitto-requests {display: flex; flex-wrap: wrap;}
#ubitto-requests .request {width: 280px; display: inline-block; border: 1px solid #bbb; padding: 10px; margin: 5px 10px 5px 0; position: relative; height: 110px;}
#ubitto-requests .request:hover {box-shadow: 3px 3px 5px #bbb;}
#ubitto-requests .request img.avatar {float: left; margin-right: 5px;} 
#ubitto-requests .request #title {display: block; width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
#ubitto-requests .request #type {position: absolute; top: 14px; right: 50px; font-size: 12px; padding: 3px 10px; line-height: initial; border-radius: 5px;}
#ubitto-requests .request #type[type = "text"] {background: #dda;}
#ubitto-requests .request #type[type = "audio"] {background: #ada;}
#ubitto-requests .request #type[type = "video"] {background: #fbb;}
#ubitto-requests .request #coins {position: absolute; font-size: 12px; right: 10px; top: 10px;}
#ubitto-requests .request #coins::before {display: inline-block; width: 16px; height: 16px; background-image: url(/wp-content/plugins/ubitto/assets/images/coin16.png); content: ' '; background-size: cover; margin-right: 2px; position: relative; top: 4px;}
#ubitto-requests .request #has-coupon {position: absolute; top: 30px; right: 11px; line-height: 20px; font-size: 10px; color: #bbb;} 
#ubitto-requests .request #date {font-size: 10px; color: #bbb; line-height: 20px;}
#ubitto-requests .request #url {color: var(--bb-primary-color); font-size: 12px; line-height: initial; position: absolute; left: 20px; bottom: 15px; width: 160px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
#ubitto-requests .request #action {position: absolute; font-size: 12px; padding: 5px 20px; right: 10px; bottom: 10px;}

#ubitto-requests .request[done] {animation: hideRequest 1.1s linear;}
@keyframes hideRequest {from {opacity: 1;} to {opacity: 0;}}

.ubitto-request-answer {padding: 10px; border: 1px solid #bbb;}
.ubitto-request-answer > * + * {margin-top: 30px;}
.ubitto-request-answer #correction-block {position: relative;}
.ubitto-request-answer #correction-block #correction {padding: 20px; border: 1px solid #bbb;}
.ubitto-request-answer #correction-block #correction .insert {background: #dfd;}
.ubitto-request-answer #correction-block #correction .delete {background: #fdd; text-decoration: line-through;}
.ubitto-request-answer #correction-block label {float: right; font-size: 12px; margin-top: 5px;}
.ubitto-request-answer #correction-block label #correction-mode {position: relative; top: -2px; margin-right: 3px;}
.ubitto-request-answer #ubitto-request-player {margin-bottom: 20px;}
.ubitto-request-answer #ubitto-request-player .remark {position: absolute; bottom: -20px; width: 20px; height: 20px; text-align: center; cursor: pointer;}
.ubitto-request-answer #ubitto-request-player .remark[current] {color: cornflowerblue;}
.ubitto-request-answer #ubitto-request-player .remark::before {content: '\ef68'; font-family: "bb-icons"; display: inline-block; text-align: center; font-size: 20px; line-height: 20px; position: relative; left: 0; top: 0;}
.ubitto-request-answer #comment {padding: 20px; background: #f0f0f0;}

.ubitto-request-dialog[busy] {pointer-events: none;}
.ubitto-request-dialog[busy] #submit {opacity: 0.6; transition: opacity 0.5s;}
.ubitto-request-dialog .modal__container {width: 400px;}
.ubitto-request-dialog header h2 {margin: 0; margin-bottom: 10px;}
.ubitto-request-dialog #caption {}
.ubitto-request-dialog #close {position: absolute; top: 10px; right: 10px; line-height: 10px; cursor: pointer; font-size: 24px;}
.ubitto-request-dialog .modal__content {padding: 10px 20px;}
.ubitto-request-dialog #error-message {background: #faa;}
.ubitto-request-dialog #error-message:not(:empty) {padding: 10px; margin-top: 10px;}
.ubitto-request-dialog #buttons {display: flex; justify-content: space-between; margin-top: 10px; align-items: center;}
.ubitto-request-dialog #buttons #submit {}

#ubitto-request-dialog #request-type-block {margin-top: 10px; display: flex; align-items: center;}
#ubitto-request-dialog #request-type-block > label {flex: auto; white-space: nowrap; padding-right: 10px;}
#ubitto-request-dialog #request-type-block > select {flex: auto; flex-basis: 100%;}
#ubitto-request-dialog #options {margin-top: 10px; margin-bottom: 10px;}
#ubitto-request-dialog #options > label {display: block;}
#ubitto-request-dialog #options > label[hidden] {visibility: hidden;}
#ubitto-request-dialog #options > label input {position: relative; top: -2px; margin-right: 5px;}
#ubitto-request-dialog #comment {width: 100%;}
#ubitto-request-dialog #coupon-block {display: flex; justify-content: end; margin-top: 10px; align-items: baseline;}
#ubitto-request-dialog #coupon-block #coupon {padding: 5px; margin: 0 0 0 10px; height: 30px; border-radius: 0; width: 120px; text-align: center;}
#ubitto-request-dialog #cost {position: absolute; font-size: 20px; right: 25px; bottom: 20px;}
#ubitto-request-dialog #cost::before {display: inline-block; width: 24px; height: 24px; background-image: url(/wp-content/plugins/ubitto/assets/images/coin24.png); content: ' '; background-size: cover; margin-right: 5px; position: relative; top: 5px;}
#ubitto-request-dialog #overdraft {line-height: 42px; font-size: 20px; margin-top: 5px;}
#ubitto-request-dialog #overdraft:not(:empty) ~ #submit {display: none;}

#ubitto-reply-dialog {flex: 0;}
#ubitto-reply-dialog[has-lock = "false"] #submit {display: none;} 
#ubitto-reply-dialog[has-lock = "false"] #add-remark {pointer-events: none; background: #bbb !important;} 
#ubitto-reply-dialog[has-lock = "false"] #comment {pointer-events: none;}
#ubitto-reply-dialog #request {max-width: 600px; border: 1px solid #bbb;margin-bottom: 10px;}
#ubitto-reply-dialog #text-editable {color: #f66; font-size: 12px;}
#ubitto-reply-dialog #request[type = "text"] {padding: 10px; max-height: 200px; overflow: auto;}
#ubitto-reply-dialog #request[type = "audio"] {margin-bottom: 30px;}
#ubitto-reply-dialog #request[type = "video"] {margin-bottom: 30px;}
#ubitto-reply-dialog #request-comment {background: #eee; font-size: 12px; color: #999; padding: 5px 10px; margin-bottom: 10px;}
#ubitto-reply-dialog #request-comment:empty {display: none;}
#ubitto-reply-dialog #label {font-size: 12px;}
#ubitto-reply-dialog #options {margin-bottom: 10px;}
#ubitto-reply-dialog #options:empty {display: none;}
#ubitto-reply-dialog .option {font-size: 12px; line-height: 12px;}
#ubitto-reply-dialog .option::before {content: '\e876'; font-family: "bb-icons"; display: inline-block; text-align: center; font-size: 20px; line-height: 20px; position: relative; left: 0; top: 1px;}

#ubitto-reply-dialog #tabs {font-size: 0; margin-left: auto; margin-right: auto;}
#ubitto-reply-dialog #tabs > input[type="radio"] {display: none;}
#ubitto-reply-dialog #tabs > div {display: none; border: 1px solid #e0e0e0; padding: 10px 15px;}
#ubitto-reply-dialog #tabs #tab-comment:checked ~ #comment,
#ubitto-reply-dialog #tabs #tab-remarks:checked ~ #remarks {display: block; font-size: initial; height: 150px; overflow: auto;}
#ubitto-reply-dialog #tabs > label {display: inline-block; text-align: center; vertical-align: middle; user-select: none; background-color: #f5f5f5; border: 1px solid #e0e0e0; padding: 2px 8px; font-size: 12px; line-height: 12px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; cursor: pointer; position: relative; top: 1px;}
#ubitto-reply-dialog #tabs > label:not(:first-of-type) {border-left: none;}
#ubitto-reply-dialog #tabs > input[type="radio"]:checked + label { background-color: #fff; border-bottom: 1px solid #fff;}
#ubitto-reply-dialog #tabs #comment {}
#ubitto-reply-dialog #tabs #remarks:empty::before {content: 'There are no remarks yet. Choose a position in the player and press "Add remark".'; color: #bbb; font-size: 12px;}
#ubitto-reply-dialog #tabs #remarks .remark {display: flex; margin: 2px 0; line-height: 12px; font-size: 12px;}
#ubitto-reply-dialog #tabs #remarks .remark:hover {background: #eee;}
#ubitto-reply-dialog #tabs #remarks .remark > div {flex: auto; padding: 10px 0; text-align: center;}
#ubitto-reply-dialog #tabs #remarks #time {flex-grow: 0; padding-left: 10px;}
#ubitto-reply-dialog #tabs #remarks #playback {cursor: pointer;}
#ubitto-reply-dialog #tabs #remarks #remove {flex-grow: 0; cursor: pointer; width: 30px;}
#ubitto-reply-dialog #request[type = "text"] ~ #tabs label[for = "tab-comment"] {pointer-events: none; border: none;}
#ubitto-reply-dialog #request[type = "text"] ~ #tabs label[for = "tab-remarks"] {display: none;}

#ubitto-request-player {display: flex; flex-wrap: wrap; width: 100%; position: relative;}
#ubitto-request-player * {height: 30px;}
#ubitto-request-player > div {flex: auto;}
#ubitto-request-player video {flex-basis: 100%; min-height: 200px; margin-top: 10px;}
#ubitto-request-player video[hidden] ~ #seekbar {margin-top: 200px;}
#ubitto-request-player #playback {width: 30px; flex-grow: 0; cursor: pointer; padding-left: 5px;}
#ubitto-request-player #playback::before {font-family: "bb-icons"; display: inline-block; text-align: center; font-size: 30px; line-height: 30px;}
#ubitto-request-player #playback[state = "play"]::before {content: '\eeea';}
#ubitto-request-player #playback[state = "pause"]::before {content: '\eef7';}
#ubitto-request-player #seekbar {background: #eee; flex-grow: 1; cursor: pointer; height: 20px; margin: 5px; position: relative;}
#ubitto-request-player #progress {background: cornflowerblue; width: 0; height: 20px; z-index: 1; pointer-events: none;}
#ubitto-request-player #mark {width: 0; height: 20px; border-right: 2px solid red; pointer-events: none; z-index: 10; position: absolute; top: 0; left: 0; display: none;}
#ubitto-request-player #current-time {width: 40px; line-height: 30px; font-size: 12px; text-align: center; flex-grow: 0; padding-right: 5px;}
#ubitto-request-player #add-remark {background: var(--bb-primary-button-background-regular); color: var(--bb-primary-button-text-regular); position: absolute; bottom: -27px; right: 0; padding: 5px 20px; font-size: 12px; border-radius: 5px; line-height: 12px; height: initial; cursor: pointer;}
#ubitto-request-player #add-remark ~ #audio-selector {position: absolute; bottom: -30px; right: 0; padding: 5px; padding-right: 0; font-size: 20px; line-height: 20px; height: initial; cursor: pointer;}
#ubitto-request-player #add-remark[device-count = "0"] ~ #audio-selector {display: none;}
#ubitto-request-player #add-remark[device-count = "1"] ~ #audio-selector {display: none;}
#ubitto-request-player #add-remark[device-count = "0"] {background: #bbb; pointer-events: none;}
#ubitto-request-player #add-remark:not([device-count = "0"]):not([device-count = "1"]) {right: 25px}

@media (max-width: 420px) {
	#ubitto-requests .request {min-width: 100%; margin: 0; margin-top: 10px;} 

	.ubitto-request-dialog .modal__container {width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

}