.node .control input, .node .input-control input {
  width: 140px;
}
select, input {
  width: 100%;
  border-radius: 30px;
  background-color: white;
  padding: 2px 6px;
  border: 1px solid #999;
  font-size: 110%;
  width: 170px;
}


.bg-dark {
    background-color: #dddddd!important;
}

.navbar-dark {
    color: #494949;
}


.icon {
     --size : 20px;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    margin-right: 10px;
    margin-left: 10px;
    -webkit-mask-size: cover;
    mask-size: cover;
    transition: .12s;
    background: black;
}

.network-icon {
    -webkit-mask-image: url(/static/main/svg/009-network.svg);
    mask-image: url(/static/main/svg/009-network.svg);
}

.status-icon {
    -webkit-mask-image: url(/static/main/svg/005-share.svg);
    mask-image: url(/static/main/svg/005-share.svg);
}

.phones-icon {
    -webkit-mask-image: url(/static/main/svg/003-phone-call.svg);
    mask-image: url(/static/main/svg/003-phone-call.svg);
}

.people-icon {
    -webkit-mask-image: url(/static/main/svg/007-users.svg);
    mask-image: url(/static/main/svg/007-users.svg);
}

.cdr-icon {
    -webkit-mask-image: url(/static/main/svg/012-list-1.svg);
    mask-image: url(/static/main/svg/012-list-1.svg);
}

.record-icon {
    -webkit-mask-image: url(/static/main/svg/karaoke.svg);
    mask-image: url(/static/main/svg/karaoke.svg);
}

.delete-icon {
    -webkit-mask-image: url(/static/main/svg/delete-button.svg);
    mask-image: url(/static/main/svg/delete-button.svg);
}

.background-icon {
    -webkit-mask-image: url(/static/main/svg/photo.svg);
    mask-image: url(/static/main/svg/photo.svg);
}

.edit-icon {
    -webkit-mask-image: url(/static/main/svg/edit.svg);
    mask-image: url(/static/main/svg/edit.svg);
}

.reboot-icon {
    -webkit-mask-image: url(/static/main/svg/power-button.svg);
    mask-image: url(/static/main/svg/power-button.svg);
}

.reconfig-icon {
    -webkit-mask-image: url(/static/main/svg/cogwheel.svg);
    mask-image: url(/static/main/svg/cogwheel.svg);
}

.screen-icon {
    -webkit-mask-image: url(/static/main/svg/monitor.svg);
    mask-image: url(/static/main/svg/monitor.svg);
}

.queue-icon {
    -webkit-mask-image: url(/static/main/svg/tube-queue.svg);
    mask-image: url(/static/main/svg/tube-queue.svg);
}


.ball {
     --size : 20px;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    margin-right: 10px;
    margin-left: 10px;
    transition: .12s;
    background-size: 20px 20px;
}

.greenball {
    background-image: url(/static/main/svg/greenball.svg);
}

.redball {
    background-image: url(/static/main/svg/redball.svg);
}

.yellowball {
    background-image: url(/static/main/svg/yellowball.svg);
}


.record-button {
     --size : 30px;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    margin-right: 10px;
    margin-left: 10px;
    -webkit-mask-size: cover;
    mask-size: cover;
    transition: .12s;
    background: black;
        -webkit-mask-image: url(/static/main/svg/microphone.svg);
    mask-image: url(/static/main/svg/microphone.svg);
}

audio {
    display: block;
    height:30px;
    width: 100%;
    margin-right: 30px;
}

.recordingactive {
    background: red;
}

.system {
    font-family: 'Courier New', monospace;
}

.loader {
  border: 8px solid #f3f3f3; /* Light grey */
  border-top: 8px solid #000000; /* Blue */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}