/*! @ WebAudioRecorderCommandBar - v1.0.0 - 2018-06-19 | (c) 2016 Cristian Nieto - Visual Médica !*/

.vmrecorder_commandBar {
    background: var(--main-vmrecorder_color);
    width:  var(--main-vmrecorder_commandBar-width);
    height: var(--main-vmrecorder_commandBar-height);
	display: flex
}

/* LEFT BAR */
.vmrecorder_commandBar .vmrecorder_commandBar_GripLeft {
    width:  var(--main-vmrecorder_commandBar_Grip-width);
    height: var(--main-vmrecorder_commandBar-height);
    position: static;
    float: left;
    outline: none;
}
.vmrecorder_commandBar .vmrecorder_commandBar_GripLeft:hover {
	background-color: #ddd;
}
.vmrecorder_commandBar .vmrecorder_commandBar_GripLeft .separator {
    pointer-events: none;
    float: left;
}
.vmrecorder_commandBar .vmrecorder_commandBar_GripLeft .separator:first-child {
    padding-left: 10px;
}

/* RIGHT BAR */
.vmrecorder_commandBar .vmrecorder_commandBar_GripRight {
    width:  var(--main-vmrecorder_commandBar_Grip-width);
    height: var(--main-vmrecorder_commandBar-height);
    position: static;
    float: right;
    outline: none;
}
.vmrecorder_commandBar .vmrecorder_commandBar_GripRight:hover {
	background-color: #ddd;
}
.vmrecorder_commandBar .vmrecorder_commandBar_GripRight .separator {
    pointer-events: none;
    float: right;
}
.vmrecorder_commandBar .vmrecorder_commandBar_GripRight .separator:first-child {
    padding-right: 10px;
}

.vmrecorder_commandBar .separator {
    min-width: 7px;
}
.vmrecorder_commandBar .separator .toolbar_separator {
    border-left: 1px solid rgba(0,0,0,.2);
    margin: 1em 3px 0 3px;
    height: 3em;
}

/* BAR */
.vmrecorder_commandBar_RecordCommander {
    width: calc(var(--main-vmrecorder_commandBar-width) - var(--main-vmrecorder_commandBar_Grip-width) - var(--main-vmrecorder_commandBar_Grip-width));
    height: var(--main-vmrecorder_commandBar-height);
    float: left;
}

.vmrecorder_commandBar_RecordButton {
    width: 50px;
    height: var(--main-vmrecorder_commandBar-height);
    padding: 6px 0;
    color: #ed5c6f;
    float: left;
    position: relative;
}

.vmrecorder_commandBar_RecordButton::before,
.vmrecorder_commandBar_RecordButton::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -31px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    content: '';
    opacity: 0;
    pointer-events: none;
}

.vmrecorder_commandBar_RecordButton::before,
.vmrecorder_commandBar_RecordButton::after {
    box-shadow: 0 0 0 2px rgba(111,148,182,0.5);
}

.vmrecorder_commandBar_RecordButton.recording::before {
    -webkit-animation: anim-effect-circle-1 1.5s infinite forwards;
       -moz-animation: anim-effect-circle-1 1.5s infinite forwards;
            animation: anim-effect-circle-1 1.5s infinite forwards;
}

.vmrecorder_commandBar_RecordButton.recording::after {
    -webkit-animation: anim-effect-circle-2 1.5s infinite forwards;
       -moz-animation: anim-effect-circle-2 1.5s infinite forwards;
            animation: anim-effect-circle-2 1.5s infinite forwards;
}

.vmrecorder_commandBar_RecordButton.recording {
    color: #74b627;
}
.vmrecorder_commandBar_RecordButton.recording .rec-icon-stack {
    -webkit-animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
       -moz-animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
            animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;
}

@keyframes blinker {  
  from { opacity: 1; }
  to { opacity: 0; }
}

@-webkit-keyframes anim-effect-circle-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.5, 0.5, 1);
        transform: scale3d(0.5, 0.5, 1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes anim-effect-circle-1 {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.5, 0.5, 1);
        transform: scale3d(0.5, 0.5, 1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
}

@-webkit-keyframes anim-effect-circle-2 {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.5, 0.5, 1);
        transform: scale3d(0.5, 0.5, 1);
    }
    50%, 100% {
        opacity: 0;
        -webkit-transform: scale3d(1.2, 1.2, 1);
        transform: scale3d(1.2, 1.2, 1);
    }
}

@keyframes anim-effect-circle-2 {
    0% {
        opacity: 1;
        -webkit-transform: scale3d(0.5, 0.5, 1);
        transform: scale3d(0.5, 0.5, 1);
    }
    50%, 100% {
        opacity: 0;
        -webkit-transform: scale3d(1.2, 1.2, 1);
        transform: scale3d(1.2, 1.2, 1);
    }
}

.vmrecorder_commandBar_RecordVumetro {
    width: 190px;
    height: var(--main-vmrecorder_commandBar-height);
    padding: 6px 0;
    float: left;
    position: relative;
}

.vmrecorder_commandBar_RecordVumetro .visualizer {
    width: 100%;
    height: 100%;
    border-style: inset;
    border-width: 2px;
}

.vmrecorder_commandBar_Timer {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: rgba(169, 169, 169, 0.86);
    text-shadow: 2px 2px 4px #ccc;
}