.view-content-edit.view-content-edit-text main .main-container { .page-panel.left-panel { flex: 1; .form-holder { margin: 20px 20px 20px 10px; flex: 1; } } .page-content { flex: 2; } .page-panel.right-panel { flex: 1; } h3.main { font-size: 16px; font-weight: 500; color: $gscaleD; text-decoration: none; margin-top: 5px; border-bottom: 1px solid $gscale2; margin-bottom: 20px; padding-bottom: 10px; align-self: stretch; } .toolbar { margin-bottom: 20px; } .screen-holder { //display: flex; //flex-direction: row; display: flex; flex-direction: column; width: 100%; position: relative; padding-top: 56.25%; /* 16:9 aspect ratio */ overflow: hidden; border-radius: $baseRadius; outline: 4px solid rgba($gscaleF, .1); .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: flex; background: repeating-conic-gradient(#EEE 0% 25%, white 0% 50%) 50% / 20px 20px; .text { display: flex; justify-content: center; align-items: center; flex-direction: row; flex: 1; align-self: stretch; text-align: center; max-width: 100%; } } } .form-element-properties { flex: 1; align-self: stretch; form { display: flex; flex-direction: column; h3 { font-size: 16px; font-weight: 500; color: $gscaleD; text-decoration: none; border-bottom: 1px solid $gscale2; margin-bottom: 20px; padding-bottom: 10px; align-self: stretch; } .form-group { label { flex-grow: 1; flex-direction: row; justify-content: flex-start; align-items: center; display: flex; font-weight: bold; margin-right: 10px; margin-bottom: 5px; } .widget { flex-grow: 1; flex-direction: row; justify-content: flex-start; align-items: center; display: flex; margin: 0; input { flex: 1; margin: 0; &[disabled] { padding: 8px 0 5px 8px; border: 1px solid rgba(255, 255, 255, .05); } } } } } } }