/*#video-record-main{*/
/*    display: flex;*/
/*    justify-content: center;*/
/*}*/
#video-record-wrap{
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
#video-record-container{
    position: relative;
    height: calc(450px * 0.75);
    margin: 0 auto;
    width: 450px;
}
#video-record-group-btn{
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
#video-record {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    background: #000000d4;
}
#video-record-control{
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
#video-record-control > *{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    z-index: 1;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: 0;
    width: 25px;
    height: 25px;
    padding: 0;
}
#video-record-control > *:disabled{
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}
#video-record-control #play,
#video-record-control #record,
#video-record-control #stop{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4bcc07;
    font-size: 30px;
    line-height: 30px;
}
#video-record-control #play > *:first-child,
#video-record-control #record > *:first-child,
#video-record-control #stop > *:first-child{
    width: 100%;
    height: 100%;
}
#video-record-control #play path{
    fill: #fff;
}
#video-record-control #stop path{
    fill: #c01b30;
    transition: fill 0.2s;
}
#video-record-control #record path{
    fill: #358506;
    transition: fill 0.2s;
}
#video-record-control #play:hover path{
    fill: #afafaf;
    transition: fill 0.2s;
}
#video-record-control #record:hover path{
    fill: #276203;
    transition: fill 0.2s;
}
#video-record-control #stop:hover path{
    fill: #930e1f;
    transition: fill 0.2s;
}
#video-record-download{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 0;
    margin: 0 auto;
    flex-wrap: wrap;
    transition: height 0.1s;
}
#video-record-download.active{
    padding-left: 0;
    height: calc(450px * 0.75);
    width: 450px;
    transition: height 0.3s;
    margin-top: 10px;
}
#video-record-download video{
    height: calc(450px * 0.75);
    width: 450px;
    margin: 0 auto;
}
#video-record-group-btn a{
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #464646;
    text-decoration: none;
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0 6px;
    cursor: pointer;
}
#video-record-group-btn #btn-download{
    display: none;
}
#video-record-group-btn a::before,
#video-record-group-btn #btn-upload::before{
    content: url("/wp-content/plugins/camera-record-wp/public/img/download.svg");
    display: inline-flex;
    width: 20px;
    height: 20px;
    font-size: 18px;
    /*color: #358506;*/
    justify-content: center;
}
/*#video-record-group-btn a#btn-upload{*/
/*    color: #c01b30;*/
/*}*/
#video-record-group-btn #btn-upload::before{
    content: url("/wp-content/plugins/camera-record-wp/public/img/send.svg");
    /*color: #c01b30;*/
}
@media (max-width: 570px) {
    #video-record-download.active{
        padding: 0;
    }
    #video-record-container,
    #video-record,
    #video-record-download.active,
    #video-record-download video{
        width: 100%;
    }
}

/* Video Panel */
#video-rec{
    margin: 10px 0;
}
.video-rec-row{
    display: flex;
    justify-content: center;
    gap: 50px;
}
.video-rec-col{

}
.video-rec-cam, .video-rec-file, .video-rec-link{
    cursor: pointer;
}
.video-rec-cam.active svg path, .video-rec-file.active svg path, .video-rec-link.active svg path{
    stroke: #fcb400;
}
.video-rec-cam{

}
.video-rec-file{

}
.video-rec-link{

}
.video-rec-cam svg, .video-rec-file svg, .video-rec-link svg{
    width: 26px;
    height: 26px;
}

.video-record-tab-link{
    justify-content: center;
    display: none;
    opacity: 0;
    visibility: hidden;
    flex-direction: column;
    margin: 0 auto;
}

.video-record-tab-link.active{
    display: flex;
    opacity: 1;
    visibility: visible;
}

#video-record-main{

}
#video-record-file{

}
.video-file-block{
    display: flex;
    align-items: center;
    gap: 0 20px;
    margin: 15px auto;
}
#video-record-file label{

}
#video-record-file input{

}
.video-link-block{
    display: flex;
    align-items: center;
    gap: 0 20px;
    margin: 15px auto;
    width: 100%;
    max-width: 500px;
    justify-content: center;
}
.video-file-block-upload,
.video-link-block-upload{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0 20px;
    margin: 15px 0;
    justify-content: center;
}
.video-file-block-upload a#video-file-upload,
.video-link-block-upload a#video-link-upload{
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #464646;
    text-decoration: none;
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0 6px;
    cursor: pointer;
}
.video-file-block-upload a#video-file-upload::before,
.video-link-block-upload a#video-link-upload::before{
    content: url('/wp-content/plugins/camera-record-wp/public/img/send.svg');
    display: inline-flex;
    width: 20px;
    height: 20px;
    font-size: 18px;
    /* color: #358506; */
    justify-content: center;
}
#video-record-link{

}
#video-record-link input {

}

/* Alert */
.alert-ajax{
    display: none;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 100%;
    max-width: 300px;
    min-height: 100px;
    background: #fcb400;
    color: #fff;
    padding: 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 0 3px 3px #ab7c04;
    transition: opacity 0.1s, top 0.15s, left 0.15s;
}
.alert-ajax.show{
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s, top 0.3s, left 0.3s;
}
button.alert-ajax-close,
button.alert-ajax-close:hover{
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
    outline: 0;
    padding: 5px;
    margin: 0;
    width: 30px;
    height: 30px;
    background: transparent;
    transform: rotateZ(0);
    transition: transform 0.3s;
}
button.alert-ajax-close:hover{
    transform: rotateZ(180deg);
    transition: transform 0.3s;
}
button.alert-ajax-close:hover path{
    fill: #565454;
}
.alert-ajax-content{
    padding: 30px;
}
.alert-ajax-ul{
    padding: 0;
    margin: 0;
}
.alert-ajax-ul li{

}

/* Preload */
.record-camera-preload{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: #00003391;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition: visibility 100ms, opacity 200ms, z-index 100ms;
}
.record-camera-preload.show{
    visibility: visible;
    opacity: 1;
    z-index: 99999;
    transition: visibility 200ms, opacity 300ms, z-index 200ms;
}

.record-camera-preload .loading-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100px;
    line-height: 100px;
}
.record-camera-preload .loading-text > * {
    display: inline-block;
    margin: 0 5px;
    color: #ffffff;
    font-size: 30px;
    font-family: sans-serif;
}
.record-camera-preload .loading-text > *:nth-child(1){
    filter: blur(0px);
    animation: blur-text 1.5s 0s infinite linear alternate;
}
.record-camera-preload .loading-text > *:nth-child(2){
    filter: blur(0px);
    animation: blur-text 1.5s 0.2s infinite linear alternate;
}
.record-camera-preload .loading-text > *:nth-child(3){
    filter: blur(0px);
    animation: blur-text 1.5s 0.4s infinite linear alternate;
}
.record-camera-preload .loading-text > *:nth-child(4){
    filter: blur(0px);
    animation: blur-text 1.5s 0.6s infinite linear alternate;
}
.record-camera-preload .loading-text > *:nth-child(5){
    filter: blur(0px);
    animation: blur-text 1.5s 0.8s infinite linear alternate;
}
.record-camera-preload .loading-text > *:nth-child(6){
    filter: blur(0px);
    animation: blur-text 1.5s 1s infinite linear alternate;
}
.record-camera-preload .loading-text > *:nth-child(7){
    filter: blur(0px);
    animation: blur-text 1.5s 1.2s infinite linear alternate;
}

@keyframes blur-text {
    0% {filter: blur(0px);}
    100% {filter: blur(4px);}
}