.video-recorder-container-medium {
    font-family: 'Open Sans', sans-serif;
    border-radius: 2px;
    background-color: #FFFFFF;
    cursor: default;
    border: 1px solid #D6D6D6;
    box-sizing: border-box;
    padding: 5px;
    width: 268px;
    z-index: 5;
    box-shadow: rgba(0, 0, 0, 0.5) 3px 3px 3px;
}

.video-recorder-container-medium .video-title {
    color: #555;
    font-weight: bold;
    position: relative;
    width: 100%;
    float: left;
    cursor: all-scroll;
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}


/* BEGIN: bubble wrapper */
.video-recorder-container-medium .video-title .bubble-wrapper {
    width: 14px;
    height: 14px;
    float: left;
    padding-top: 2px;
    padding-left: 3px;
    margin-right: 5px;
}                       
.video-recorder-container-medium .video-title .bubble-wrapper .blinking-bubble {
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}
.video-recorder-container-medium .video-title .bubble-wrapper #grey-bubble {
    background: #D6D6D6;
}
.video-recorder-container-medium .video-title .bubble-wrapper #red-bubble {
    background: #BF3542;
}
/* END: bubble wrapper */


.video-recorder-container-medium .video-title .video-title-text {
    font-size: 13px;
    float: left;
    line-height: 1.3;
}

.video-recorder-container-medium .video-title .expand-minimize-bar {
    cursor: pointer;
    float: right;
}

.video-recorder-container-medium  .expand-minimize-bar .close {
    float: right;
    /* color: #555; */
    color: #bf3542;
    cursor: pointer;
    opacity: 0.8;
    transition: color ease .3s; 
    font-size: 15px;    
}
.video-recorder-container-medium  .expand-minimize-bar .close:hover {
    /* color: #000; */
    opacity: 1;
}

.video-recorder-container-medium .expand-minimize-bar .image-minus {
    float: right;
    margin-right: 10px;
    margin-top: 1px;
    cursor: pointer;
    color: #555;
    font-size: 12px;
}
.video-recorder-container-medium .expand-minimize-bar .image-minus:hover {
    color: #000;
}

.video-recorder-container-medium .video-return-container {
    width           : 256px;
    height          : 192px;
    margin          : 5px auto;
    position        : relative;
    float           : left;
}

.video-recorder-container-medium  #camera-preview {
    background-color: #fff;
    border: 1px solid #D6D6D6;
    border-radius: 2px;
    float: left;
    margin-bottom: 10px;
    
    width: 256px;
    height: 192px;
}

.video-recorder-container-medium .functions-container-wrapper {
    position: absolute;
    width: 256px;
    border-radius: 0px;
    bottom: 0;
}


.video-recorder-container-medium .buttons-container {
    background-color: rgba(0, 0, 0, 0.4);
    /* height: 40px; */
    height: 36px;
    cursor: pointer;
}

.video-recorder-container-medium .buttons-container .autopilot-recorder-intro {
    float: right;
    margin-right: 15px;
    margin-top: 1px;
    cursor: pointer;
    color: whitesmoke;
    font-size: 12px;
    border-radius: 50%;
    border: 1px solid whitesmoke;
    height: 17px;
    width: 17px;
    display: block;
    text-align: center;
}

.video-recorder-container-medium .buttons-container .stop-record {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}



.video-recorder-container-medium .buttons-container .pause-image {
    margin-right: 10px;
    color: #F1F1F1;
    font-size: 30px;
    transition: color ease .4s;
 }
.video-recorder-container-medium .buttons-container .pause-image:hover {
    color: #FFF;
 }

.video-recorder-container-medium .buttons-container .record-image {
    float: left;
    border-radius: 50%;
    background: #BF3542;
    border: 5px solid #FFF;
    transition: border ease .3s;
    height: 26px;
    width: 26px;
    margin: 2px 10px 0 0;
}
.video-recorder-container-medium .buttons-container .record-image:hover {
  border: 2px solid #FFF;       
}

.video-recorder-container-medium .buttons-container .stop-image {
    color: #F1F1F1;
    font-size: 30px;
    transition: color ease .4s;
}
.video-recorder-container-medium .buttons-container .stop-image:hover {
    color: #FFF;
}

.video-recorder-container-medium .record-image-style {
  height: 30px;
  width: 30px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #BF3542;
  border: 5px solid #FFF; 
  transition: border ease .3s;
}


.video-recorder-container-medium .record-image-style-paused {
  height: 30px;
  width: 30px;
  display: block; 
  border-radius: 50%;
  background: #BF3542;
  border: 5px solid #FFF; 
  transition: border ease .3s;
}



.video-recorder-container-medium .record-image-style:hover, .video-recorder-container-medium .record-image-style-paused:hover  {
  border: 2px solid #FFF; 
} 

.video-recorder-container-medium .bottom-video-recorder-row {
    width: 100%;
    clear: both;
    height: 15px;
    position: relative;
}
.video-recorder-container-medium .bottom-video-recorder-row .timer {
    float: left;
    text-align: center;
    /* width: 19%; */
    font-size: 11px;
    color: #777;
}

.video-recorder-container-medium .bottom-video-recorder-row  .recording-loading-wrap {
    float: right;
    height: 100%;
    padding: 4.5px;
}

.video-recorder-container-medium .bottom-video-recorder-row .sound-histograms {
    width           : 59%;
    display         : inline-block;
    float           : left;
    border          : 0px solid green;
    background      : none;
    height          : 95%;
    /* background-color: white; */
} 

.video-recorder-container-medium .bottom-video-recorder-row .megabyte-size {
    color: #555555;
    text-align: center;
    font-size: 12px;
    margin-right: 5px;
    float: right;
}


/* Override of video-js */

.video-recorder-container-medium .vjs-no-js {
    width   : 100% !important;
    height  : 100% !important;
    z-index : 9999;
    background-color : black;
    
}

.video-recorder-container-medium .video-js,
.video-recorder-container-medium .vjs-poster {
  background-color: transparent;
}


/*------------------------------- Override la-ball  -------------------------------------------------------------*/


.recording-loading-wrap .la-ball-beat.la-sm > div{
    width: 16px !important;
    height: 16px !important;
    margin: 8px !important;
}

.recording-loading-wrap .la-ball-beat.la-sm{
    width: 108px;
    height: 32px;
}


/* -----------------------------------    LOOM BUTTON ------------------------------------------------*/

.lo-bubble-menu.enabled {
    display: block;
}

.lo-bubble-menu.lo-form-row.size-2 .lo-bubble-menu-cancel-item .lo-bubble-menu-item {
    bottom: 0;
    left: 305px;
}

.lo-bubble-menu-item {
    position: absolute;
    user-select: none;
}




.lo-bubble-menu-pause-item .lo-bubble-menu-circle:before {
    background-image: url('/resources/images/autopilot/pause-medium-size.svg');
    background-position: 50%;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}


.lo-bubble-menu-finish-item .lo-bubble-menu-circle {
    background-color: #00dc80 !important;
}


.lo-bubble-menu-finish-item .lo-bubble-menu-circle:before {
    background-image: url('/resources/images/autopilot/stop-recording-medium.svg');
    background-position: 50%;
    background-size: 14px 14px;
    background-repeat: no-repeat;
}


.lo-personal-recorder-view .lo-bubble-menu-finish-item .lo-bubble-menu-circle {
    background-color: #00dc80;
}


.lo-bubble-menu-item:hover .lo-bubble-menu-item-hint {
    opacity: 1;
    visibility: visible;
}

.lo-bubble-menu-item .lo-bubble-menu-item-hint {
    position: absolute;
    z-index: 10;
    top: -29px;
    left: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s,opacity .2s linear,background .2s linear;
    border-radius: 15px;
    box-sizing: initial;
    height: 22px;
    padding: 0 10px;
    background: rgba(0,0,0,.75);
    font-size: 12px;
    line-height: 22px;
    font-weight: 300;
    font-family: Inter-Loom,Helvetica,sans-serif;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}



.lo-bubble-menu-item .lo-bubble-menu-circle:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}

.lo-bubble-menu-item .lo-bubble-menu-item-hint {
    position: absolute;
    z-index: 10;
    top: -29px;
    left: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s,opacity .2s linear,background .2s linear;
    border-radius: 15px;
    box-sizing: initial;
    height: 22px;
    padding: 0 10px;
    background: rgba(0,0,0,.75);
    font-size: 12px;
    line-height: 22px;
    font-weight: 300;
    font-family: Inter-Loom,Helvetica,sans-serif;
    color: #fff;
    text-align: center;
    white-space: nowrap;
}

.lo-bubble-menu-item {
    position: absolute;
    user-select: none;
}

.lo-bubble-menu-finish-item .lo-bubble-menu-circle {
    background-color: #00dc80;
}


.lo-bubble-menu-toggle-menu-item .lo-bubble-menu-item .lo-bubble-menu-circle {
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 16px;
    font-family: Inter-Loom,Helvetica,sans-serif;
    color: #47525d;
    text-align: center;
}

.lo-bubble-menu-item .lo-bubble-menu-circle {
    float: left;
    display: block;
    box-shadow: 0 2px 8px 1px rgba(0,0,0,.2);
    border-radius: 50%!important;
    width: 32px;
    height: 32px;
    background: #fff;
    cursor: pointer;
}

.lo-bubble-menu-item {
    position: absolute;
    user-select: none;
}