.virtual-background-dialog { margin-left:-10px; position: relative; max-height: 300px; color: white; display: inline-grid; grid-template-columns: auto auto auto auto auto; column-gap: 9px; cursor: pointer; .desktop-share:hover, .thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{ height: 56px; width: 103px; opacity: .5; border: 2px solid #99bbf3; @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) { height: 56px; width: 56px; } @media (max-width: 432px){ height: 56px; width: 56px; } } .thumbnail { margin-top: 8px; border-radius: 6px; object-fit: cover; height: 60px; width: 107px; } .thumbnail:hover ~ .delete-image-icon { display: block; } .thumbnail-selected { margin-top: 8px; border-radius: 6px; object-fit: cover; height: 56px; width: 103px; border: 2px solid #246FE5; } .blur{ box-shadow: inset 0 0 12px #000000; margin-top: 8px; background: #7E8287; font-weight: bold; height: 60px; width: 107px; border-radius: 6px; text-align: center; vertical-align: middle; line-height: 60px; } .blur-selected { box-shadow: inset 0 0 12px #000000; margin-top: 8px; background: #7E8287; font-weight: bold; height: 56px; width: 103px; border-radius: 6px; border: 2px solid #246FE5; text-align: center; vertical-align: middle; line-height: 60px; } .slight-blur{ box-shadow: inset 0 0 12px #000000; margin-top: 8px; background: #A4A4A4; font-weight: bold; height: 60px; width: 107px; border-radius: 6px; text-align: center; vertical-align: middle; line-height: 60px; } .slight-blur-selected{ box-shadow: inset 0 0 12px #000000; margin-top: 8px; background: #A4A4A4; font-weight: bold; height: 56px; width: 103px; border-radius: 6px; border: 2px solid #246FE5; text-align: center; vertical-align: middle; line-height: 60px; } .virtual-background-none { margin-top: 8px; background: #525252; font-weight: bold; height: 60px; width: 107px; border-radius: 6px; text-align: center; vertical-align: middle; line-height: 60px; } .none-selected { margin-top: 8px; background: #525252; font-weight: bold; height: 56px; width: 103px; border-radius: 6px; border: 2px solid #246FE5; text-align: center; vertical-align: middle; line-height: 60px; } .desktop-share{ margin-top: 8px; background: #525252; font-weight: bold; height: 60px; width: 107px; border-radius: 6px; text-align: center; vertical-align: middle; line-height: 60px; } .desktop-share-selected{ margin-top: 8px; background: #525252; font-weight: bold; height: 56px; width: 103px; border-radius: 6px; border: 2px solid #246FE5; text-align: center; vertical-align: middle; line-height: 60px; } .share-desktop-icon{ margin-top: 15%; } @media (min-width: 432px) and (max-width: 632px) { font-size: 1.5vw; .share-desktop-icon{ margin-top: 25%; } .desktop-share, .virtual-background-none, .thumbnail, .blur, .slight-blur{ height: 60px; width: 60px; } .desktop-share-selected, .thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{ height: 56px; width: 56px; } } @media (max-width: 432px){ font-size: 1.5vw; .virtual-background-none, .thumbnail, .blur, .slight-blur{ height: 60px; width: 60px; } .thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{ height: 56px; width: 56px; } } } .modal-dialog-form .virtual-background-loading { overflow: hidden; position: fixed; left: 50%; margin-top: 10px; transform: translateX(-50%); } .modal-dialog-form .video-preview { height: 250px; } .file-upload-btn { display: none; } .file-upload-label{ font-size: 14px; font-weight: 600; line-height: 20px; margin-left: -10px; margin-top: 16px; margin-bottom: 8px; color: #669AEC; display: inline-flex; cursor: pointer; } .delete-image-icon { background: #3d3d3d; position: absolute; display: none; left: 96; bottom: 51; @media (min-width: 432px) and (max-width: 632px) { left: 51px } } .delete-image-icon:hover { display: block; } .thumbnail-container { position: relative; } .add-background{ margin-right: 8px; } .apply-background-btn{ margin-top: 16px; float: right; } .video-background-preview-entry{ margin-left: -10px; height: 250px; max-width: 95.4%; margin-bottom: 8px; position: absolute; z-index: 2; @media (min-width: 432px) and (max-width: 632px) { max-width: 336; } @media (max-width: 432px){ max-width: 336; } } .virtual-background-preview-video{ margin-left: -10; border-radius: 6px; height: 100%; object-fit: cover; width: 100%; } .video-preview-loader{ border-radius: 6px; background-color: transparent; height: 250px; margin-bottom: 8px; width: 572px; position: fixed; z-index: 2; @media (min-width: 432px) and (max-width: 632px) { width: 340px; } } .video-preview-loader svg{ position: absolute; top: 40%; left: 45%; }