/*import sarabun font*/
@font-face {
    font-family: 'Sarabun';
    src: url('/TemplateData/Sarabun-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: url('/TemplateData/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.cctv-detail
{
    position: absolute;
    right: -474px;
    top: 64px;
    bottom: 0px;
    width: 474px;
    background: linear-gradient(270deg, rgba(20, 20, 20, 0.8) 0%, rgba(20, 20, 20, 0.7) 80%, rgba(20, 20, 20, 0.2) 100%);
    transition: right 0.3s ease-in-out;
    display: none;
}

.cctv-detail.show
{
    right: 0px;
    transition: right 0.3s ease-in-out;
}

.cctv-header
{
    position: absolute;
    height: 50px;    
    top: 10px;
    left: 10px;
    right: 10px;
    font-family: "Sarabun";
    color: white;
    font-size: 16px;
}

.cctv-title{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.cctv-focus-icon{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: #3D3D3D;
    border-radius: 4px;
    background-image: url('/TemplateData/my_location.png');
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
}

.cctv-focus-icon:hover, 
.cctv-close-button:hover,
.cctv-fullscreen:hover{
    background-color: #5D5D5D;
}

.cctv-close-button{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-color: #3D3D3D;
    border-radius: 4px;
    color: white;
    font-size: 16px;
    border: none;
    
    background-image: url('/TemplateData/close-button.png');
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
}

.cctv-preview-card{
    position: absolute;
    top: 70px;
    left: 10px;
    right: 10px;
    background-color: #141414;
    border-radius: 8px;
}

.cctv-preview-image{
    width: 100%;
    height: 100%;
}

.cctv-preview-container{
    position: relative;
    width: 434px;
    height: 244px;
    top: 10px;
    background-color: white;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 4px;
}

.cctv-separator{
    position: relative;
    color: white;
    font-family: 'Sarabun';
    font-size: 16px;
    text-align: center;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
}

.separator-line-left{
    position: absolute;
    width: 30%;
    left: 20px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.486);
    top: 60%;
}



.separator-line-right{
    position: absolute;
    width: 30%;
    right: 20px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.486);
    top: 60%;
}

.cctv-detail-info{
    position: relative;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'Roboto';
    color: white;
    font-size: 14px;
}

.cctv-info-value{
    position: absolute;
    width: 100%;
    text-align: right;
    right: 20px;
    top: 0px;
}

.cctv-fullscreen{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: rgba(61, 61, 61, 0.8);
    border-radius: 4px;
    background-image: url('/TemplateData/full-screen.png');
    background-size: 80% 80%;
    background-position: center;
    background-repeat: no-repeat;
}